From 5579ddc6bb64bd3ec0b6fe51e4dd95823bd28caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 4 Feb 2018 20:55:14 +0100
Subject: [PATCH] manager: add a day picker popdown to agenda day view (#21334)

---
 chrono/manager/static/css/style.scss               | 29 +++++++++++++++++++++-
 chrono/manager/static/js/chrono.manager.js         |  7 ++++++
 .../templates/chrono/manager_agenda_day_view.html  | 11 +++++++-
 chrono/manager/views.py                            | 11 ++++++++
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/chrono/manager/static/css/style.scss b/chrono/manager/static/css/style.scss
index 2f702fe..4fd45f1 100644
--- a/chrono/manager/static/css/style.scss
+++ b/chrono/manager/static/css/style.scss
@@ -78,7 +78,7 @@ a.timeperiod-exception-all {
 	padding: 0 1ex;
 }
 
-.dayview h2 span {
+.dayview h2 > span {
 	display: inline-block;
 	min-width: 22ex;
 }
@@ -155,3 +155,30 @@ a.timeperiod-exception-all {
 span.start-time {
 	font-size: 80%;
 }
+
+.day-title {
+	cursor: pointer;
+}
+
+.day-title .day-picker {
+	&::before {
+		position: absolute;
+		content: "";
+		display: block;
+		width: 1ex;
+		height: 1ex;
+		border: 1px solid #d0d0d0;
+		border-width: 1px 0 0 1px;
+		top: -0.6ex;
+		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;
+}
diff --git a/chrono/manager/static/js/chrono.manager.js b/chrono/manager/static/js/chrono.manager.js
index 0ae46b7..51bd082 100644
--- a/chrono/manager/static/js/chrono.manager.js
+++ b/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 > span').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;
+  });
 });
diff --git a/chrono/manager/templates/chrono/manager_agenda_day_view.html b/chrono/manager/templates/chrono/manager_agenda_day_view.html
index 5bb5275..85b53a3 100644
--- a/chrono/manager/templates/chrono/manager_agenda_day_view.html
+++ b/chrono/manager/templates/chrono/manager_agenda_day_view.html
@@ -11,7 +11,16 @@
 {% block appbar %}
 <h2>
   <a href="{{ view.get_previous_day_url }}">←</a>
-  <span class="day-title">{{ view.date|date:"l j F Y" }}</span>
+  <span class="day-title"><span>{{ 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 %}
+  </span>
   <a href="{{ view.get_next_day_url }}">→</a>
 </h2>
 {% if user_can_manage %}
diff --git a/chrono/manager/views.py b/chrono/manager/views.py
index 3103422..3befbaf 100644
--- a/chrono/manager/views.py
+++ b/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, year+5)]
+
 agenda_day_view = AgendaDayView.as_view()
 
 
-- 
2.15.1