manager: add button to prefill partial booking check hours (#80045)

chrono/manager/forms.py

@@ -600,8 +600,12 @@ class PartialBookingCheckForm(forms.ModelForm):
         model = Booking
         fields = ['user_check_start_time', 'user_check_end_time', 'user_was_present']
         widgets = {
-            'user_check_start_time': widgets.TimeWidget(step=60),
-            'user_check_end_time': widgets.TimeWidget(step=60),
+            'user_check_start_time': widgets.TimeWidgetWithButton(
+                step=60, button_label=_('Fill with booking start time')
+            ),
+            'user_check_end_time': widgets.TimeWidgetWithButton(
+                step=60, button_label=_('Fill with booking end time')
+            ),
         }
 
     def __init__(self, *args, **kwargs):

chrono/manager/static/css/style.scss

@@ -420,7 +420,8 @@ div.event-title-meta span.tag {
 	color: white;
 }
 
-div.ui-dialog form p span.datetime input {
+div.ui-dialog form p span.datetime input,
+div.ui-dialog form input[type=time] {
 	width: auto;
 }
 

chrono/manager/templates/chrono/manager_partial_booking_form.html

@@ -11,7 +11,12 @@
 {% endblock %}
 
 {% block content %}
-  <form method="post" enctype="multipart/form-data">
+  <form
+    method="post"
+    enctype="multipart/form-data"
+    data-fill-user_check_start_time="{{ booking.start_time|time:"H:i" }}"
+    data-fill-user_check_end_time="{{ booking.end_time|time:"H:i" }}"
+  >
     {% csrf_token %}
     {{ form|with_template }}
     <div class="buttons">
@@ -37,6 +42,12 @@
             absence_check_type_select.hide();
           }
         }).change();
+
+        $('.time-widget-button').on('click', function() {
+          var widget_name = $(this).data('related-widget');
+          var value = $(this).parents('form').data('fill-' + widget_name);
+          $('[name="' + widget_name + '"]').val(value);
+        });
       });
     </script>
   </form>

chrono/manager/templates/chrono/widgets/time_with_button.html

@@ -0,0 +1 @@
+{% load i18n %}{% include "django/forms/widgets/input.html" %} <button type="button" class="time-widget-button" data-related-widget="{{ widget.name }}">{{ widget.button_label }}</button>

chrono/manager/widgets.py

@@ -64,6 +64,19 @@ class TimeWidget(TimeInput):
         self.attrs['pattern'] = '[0-9]{2}:[0-9]{2}'
 
 
+class TimeWidgetWithButton(TimeWidget):
+    template_name = 'chrono/widgets/time_with_button.html'
+
+    def __init__(self, **kwargs):
+        self.button_label = kwargs.pop('button_label')
+        super().__init__(**kwargs)
+
+    def get_context(self, *args, **kwargs):
+        ctx = super().get_context(*args, **kwargs)
+        ctx['widget']['button_label'] = self.button_label
+        return ctx
+
+
 class WeekdaysWidget(CheckboxSelectMultiple):
     template_name = 'chrono/widgets/weekdays.html'
 

tests/manager/test_partial_bookings.py

@@ -233,6 +233,11 @@ def test_manager_partial_bookings_check(check_types, app, admin_user):
     assert 'presence_check_type' not in resp.form.fields
     assert 'absence_check_type' not in resp.form.fields
 
+    assert resp.pyquery('form').attr('data-fill-user_check_start_time') == '11:00'
+    assert resp.pyquery('form').attr('data-fill-user_check_end_time') == '13:30'
+    assert resp.pyquery('.time-widget-button')[0].text == 'Fill with booking start time'
+    assert resp.pyquery('.time-widget-button')[1].text == 'Fill with booking end time'
+
     resp.form['user_check_start_time'] = '11:01'
     resp.form['user_check_end_time'] = '13:15'
     resp.form['user_was_present'] = 'True'