Feature add mask for work hours field in reports form

common/convert.py

@@ -1,12 +1,15 @@
 from datetime import timedelta
+from typing import Optional
 from typing import Tuple
 
 from django.core.exceptions import ValidationError
 
 from employees.common.strings import ReportValidationStrings
 
 
-def timedelta_to_string(data: timedelta) -> str:
+def timedelta_to_string(data: Optional[timedelta]) -> str:
+    if data is None:
+        return ""
     days = data.days
     hours = data.seconds // 3600
     minutes = (data.seconds % 3600) // 60

employees/forms.py

@@ -32,13 +32,13 @@ def __init__(self, queryset: QuerySet, *args: Any, **kwargs: Any) -> None:
 
 class DurationInput(TextInput):
     def format_value(self, value: Optional[str]) -> str:
-        if value is not None:
+        if value is not None and value != ":":
             return timedelta_to_string(parse_duration(value))
         return ""
 
 
 class DurationFieldForm(forms.DurationField):
-    widget = DurationInput
+    widget = DurationInput(attrs={"data-mask": "09:99", "placeholder": "H:MM"})
 
     def clean(self, value: str) -> str:
         if value is None:

employees/templates/employees/author_report_list.html

@@ -89,6 +89,6 @@ <h1>{{ object.email }} {{ title_date }}{{ UI_text.PAGE_TITLE.value }}</h1>
 
 {% block extra_script %}
 {{ month_form.media }}
-<script src="//code.jquery.com/jquery-1.12.4.js"></script>
+<script src="//code.jquery.com/jquery-3.3.1.js"></script>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 {% endblock %}

employees/templates/employees/project_report_list.html

@@ -84,6 +84,6 @@ <h4><strong>{{ author.grouper }}</strong></h4>
 
 {% block extra_script %}
 {{ month_form.media }}
-<script src="//code.jquery.com/jquery-1.12.4.js"></script>
+<script src="//code.jquery.com/jquery-3.3.1.js"></script>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 {% endblock %}

employees/templates/employees/report_detail.html

@@ -33,7 +33,7 @@ <h1>{{ UI_text.PAGE_TITLE.value }}{{ report.project }} ({{ report.date }})</h1>
 
 {% block extra_script %}
   {{ form.media }}
-    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript">
       var discard_text = "{{ UI_text.DELETE_POPUP_NO.value }}";

employees/templates/employees/report_list.html

@@ -105,8 +105,10 @@ <h4><font color="red">{{ error }}</font></h4>
 {% endblock %}
 
 {% block extra_script %}
+    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
+    {{ form.media }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
     {{ month_form.media }}
-    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript">
         var join_discard_text = "{{ UI_text.JOIN_POPUP_NO.value }}";

employees/tests/test_unit_custom_forms.py

@@ -32,25 +32,40 @@ def test_project_join_form_should_create_choice_field_with_project_name_and_id_b
 
 
 class TestDurationFieldForm:
-    def _test_duration_field_form(self, initial_value: str, input_value: str) -> str:  # pylint: disable=no-self-use
-        duration_field_form = DurationFieldForm(initial=initial_value)
-        return duration_field_form.clean(input_value)
-
     @pytest.mark.parametrize(
-        ("initial_value", "input_value", "expected_value"), [("08:00", "8:00", "8:00:00"), ("08:00", "8:0", "8:0:00")]
+        ("initial_value", "input_value", "expected_value"),
+        [("08:00", "8:00", "8:00:00"), ("08:00", "8:0", "8:0:00"), ("", "08:00", "08:00:00")],
     )
     def test_correct_work_hours_is_same_as_assumpted(self, initial_value, input_value, expected_value):
-        assertpy.assert_that(self._test_duration_field_form(initial_value, input_value)).is_equal_to(expected_value)
+        assertpy.assert_that(self._test_duration_field_form(input_value, initial=initial_value)).is_equal_to(
+            expected_value
+        )
 
     @pytest.mark.parametrize(
         ("initial_value", "input_value"),
-        [("08:00", ":00"), ("08:00", "8:"), ("08:00", ":"), ("08:00", ""), ("08:00", "four:zero"), ("08:00", "8:zero")],
+        [
+            ("08:00", ":00"),
+            ("08:00", "8:"),
+            ("08:00", ":"),
+            ("08:00", ""),
+            ("08:00", "four:zero"),
+            ("08:00", "8:zero"),
+            ("", "8:"),
+        ],
     )
     def test_incorrect_work_hours_will_raise_exception(self, initial_value, input_value):
         with pytest.raises(ValidationError) as exception:
-            self._test_duration_field_form(initial_value, input_value)
+            self._test_duration_field_form(input_value, initial=initial_value)
         assertpy.assert_that(exception.value.message).is_equal_to(ReportValidationStrings.WORK_HOURS_WRONG_FORMAT.value)
 
+    def test_duration_field_form_is_masked(self):  # pylint: disable=no-self-use
+        duration_field_form = DurationFieldForm()
+        assertpy.assert_that(duration_field_form.widget.attrs).contains("data-mask", "placeholder")
+
+    def _test_duration_field_form(self, input_value: str, **kwargs: str) -> str:  # pylint: disable=no-self-use
+        duration_field_form = DurationFieldForm(**kwargs)
+        return duration_field_form.clean(input_value)
+
 
 class MonthSwitchFormTests(TestCase):
     def test_init_with_provided_optional_date_parameter_should_add_equal_initial_value_to_date_field(self):

employees/tests/test_unit_templatetags.py

@@ -5,6 +5,7 @@
 from django.db.models.functions import datetime
 from django.test import TestCase
 
+from common.convert import timedelta_to_string
 from employees.templatetags.data_display_filters import convert_to_month_name
 from employees.templatetags.data_display_filters import duration_field_to_string
 from employees.templatetags.data_display_filters import extract_year_and_month_from_url
@@ -73,3 +74,22 @@ def test_function_raise_value_error_if_value_is_not_a_string_number(self):  # py
     def test_function_raise_index_error_if_value_is_out_of_range(self):  # pylint: disable=no-self-use
         with pytest.raises(IndexError):
             convert_to_month_name("13")
+
+
+@pytest.mark.parametrize(
+    ("input_", "expected_output"),
+    [
+        (None, ""),
+        (timedelta(), "00:00"),
+        (timedelta(seconds=59), "00:00"),
+        (timedelta(seconds=129), "00:02"),
+        (timedelta(minutes=5), "00:05"),
+        (timedelta(minutes=3, seconds=2), "00:03"),
+        (timedelta(hours=7), "07:00"),
+        (timedelta(hours=1, minutes=30), "01:30"),
+        (timedelta(days=1), "24:00"),
+        (timedelta(days=2, hours=3, minutes=12, seconds=5), "51:12"),
+    ],
+)
+def test_timedelta_to_string(input_, expected_output):
+    assert_that(timedelta_to_string(input_)).is_equal_to(expected_output)

managers/templates/managers/project_form.html

@@ -45,7 +45,7 @@ <h2>
 {% block extra_script %}
 {{ form.media }}
 {% if request.user.is_admin and object %}
-  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="//code.jquery.com/jquery-3.3.1.js"></script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" src="{% static 'managers/scripts/delete_project_popup.js' %}"></script>
 {% endif %}

users/templates/user_update.html

@@ -64,7 +64,7 @@ <h1>Account details</h1>
 
 {% block extra_script %}
   {{ form.media }}
-  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="//code.jquery.com/jquery-3.3.1.js"></script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" src="{% static 'users/scripts/delete_account_popup.js' %}"></script>
 {% endblock %}

users/templates/users_detail.html

@@ -71,7 +71,7 @@ <h1>
 
 {% block extra_script %}
   {{ form.media }}
-  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="//code.jquery.com/jquery-3.3.1.js"></script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" src="{% static 'users/scripts/delete_account_popup.js' %}"></script>
   <script type="text/javascript" src="{% static 'users/scripts/update_account_popup.js' %}"></script>