manager: add a day picker popdown to agenda day view (#21334)

chrono/manager/static/css/style.scss

@@ -78,9 +78,9 @@ a.timeperiod-exception-all {
 	padding: 0 1ex;
 }
 
-.dayview h2 span {
+.dayview h2 > span {
 	display: inline-block;
-	min-width: 22ex;
+	min-width: 24ex;
 }
 
 .dayview table {
@@ -155,3 +155,46 @@ a.timeperiod-exception-all {
 span.start-time {
 	font-size: 80%;
 }
+
+.day-title {
+	cursor: pointer;
+	&::after {
+		content: "\f073"; /* calendar */
+		font-family: FontAwesome;
+		padding-left: 1ex;
+		padding-right: 0ex;
+		opacity: 0.3;
+		font-size: 80%;
+		transition: opacity 200ms linear;
+	}
+	&:hover::after {
+		opacity: 0.8;
+	}
+}
+
+.day-picker {
+	button, select {
+		font-size: 1rem;
+	}
+	&::before {
+		position: absolute;
+		content: "";
+		display: block;
+		width: 1ex;
+		height: 1ex;
+		border: 1px solid #d0d0d0;
+		border-width: 1px 0 0 1px;
+		top: -0.6ex;
+		left: 5rem;
+		background: #FAFAFA;
+		transform: rotate(45deg);
+	}
+	position: absolute;
+	background: #FAFAFA;
+	border: 1px solid #d0d0d0;
+	box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04);
+	padding: 1ex 4ex;
+	left: 0;
+	top: 3ex;
+	z-index: 100;
+}

chrono/manager/static/js/chrono.manager.js

@@ -4,4 +4,11 @@ $(function() {
     var booked = $(this).data('booked');
     $(this).find('.occupation-bar').css('max-width', 100 * booked / total + '%');
   });
+  $('.day-title').on('click', function() {
+    $(this).parent().find('.day-picker').toggle();
+  });
+  $('.day-picker button').on('click', function() {
+    window.location = '../../../' + $('[name=year]').val() + '/' + $('[name=month]').val() + '/' + $('[name=day]').val() + '/';
+    return false;
+  });
 });

chrono/manager/templates/chrono/manager_agenda_day_view.html

@@ -12,6 +12,14 @@
 <h2>
   <a href="{{ view.get_previous_day_url }}">←</a>
   <span class="day-title">{{ view.date|date:"l j F Y" }}</span>
+  {% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
+    <div class="day-picker" style="display: none">
+    <select name="day">{% for day in view.get_days %}<option value="{{ day }}" {% if selected_day == day %}selected{% endif %}>{{day}}</option>{% endfor %}</select>
+    <select name="month">{% for month, month_label in view.get_months %}<option value="{{ month }}" {% if selected_month == month %}selected{% endif %}>{{ month_label }}</option>{% endfor %}</select>
+    <select name="year">{% for year in view.get_years %}<option value="{{ year }}" {% if selected_year == year %}selected{% endif %}>{{year}}</option>{% endfor %}</select>
+    <button>{% trans 'Set Date' %}</button>
+    </div>
+  {% endwith %}
   <a href="{{ view.get_next_day_url }}">→</a>
 </h2>
 {% if user_can_manage %}

chrono/manager/views.py

@@ -23,6 +23,7 @@ from django.core.urlresolvers import reverse, reverse_lazy
 from django.db.models import Q
 from django.http import HttpResponse, Http404, HttpResponseRedirect
 from django.shortcuts import get_object_or_404
+from django.utils.dates import MONTHS
 from django.utils.timezone import localtime, now, make_aware
 from django.utils.translation import ugettext_lazy as _
 from django.utils.translation import ungettext
@@ -250,6 +251,16 @@ class AgendaDayView(DayArchiveView):
             current_date += interval
             first = False
 
+    def get_days(self):
+        return [str(x) for x in range(1, 32)]
+
+    def get_months(self):
+        return [(str(x), MONTHS[x]) for x in range(1, 13)]
+
+    def get_years(self):
+        year = now().year
+        return [str(x) for x in range(year-1, year+5)]
+
 agenda_day_view = AgendaDayView.as_view()