Validate Date In Timeline Report Custom Events

Ensure the hidden input storing the value for the dateTimePicker is `:required`, which prevents the form from saving. This value is also passed down into the template UI created by the JS module in order to make sure the user gets some visual feedback. WORKAREA-221
workarea-commerce · Mar 13, 2020 · c7c14d9 · c7c14d9
1 parent 18d8440
commit c7c14d9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/admin/app/assets/javascripts/workarea/admin/modules/datetimepicker_fields.js b/admin/app/assets/javascripts/workarea/admin/modules/datetimepicker_fields.js
@@ -101,11 +101,13 @@ WORKAREA.registerModule('datetimepickerFields', (function () {
         },
 
         injectUI = function($input) {
-            var placeholder = JST['workarea/admin/templates/datetime_picker']({
+            var required = !_.isEmpty($input.attr('required')) ? 'required' : '',
+                placeholder = JST['workarea/admin/templates/datetime_picker']({
                 id: $input.attr('id'),
                 initialDateTime: parseDate($input),
                 fieldSuffixes: WORKAREA.config.datetimepickerFields.fieldSuffixes,
-                name: $input.attr('id')
+                name: $input.attr('id'),
+                required: required
             });
 
             // Prevents UI being injected twice on browser back

diff --git a/admin/app/assets/javascripts/workarea/admin/templates/datetime_picker.jst.ejs b/admin/app/assets/javascripts/workarea/admin/templates/datetime_picker.jst.ejs
@@ -4,21 +4,21 @@
     <div class="grid__cell grid__cell--50-at-medium">
       <div class='property'>
         <label for="<%= name + fieldSuffixes.date %>" class='property__name'><%= I18n.t('workarea.admin.js.datetime_picker.date') %></label>
-        <input type="text" name="<%= name + fieldSuffixes.date %>" id="<%= name  + fieldSuffixes.date %>" class="text-box" data-datetimepicker-field-date-input='' placeholder='YYYY-MM-DD' pattern='^\d{4}-\d{2}-\d{2}$' />
+        <input type="text" name="<%= name + fieldSuffixes.date %>" id="<%= name  + fieldSuffixes.date %>" class="text-box" data-datetimepicker-field-date-input='' placeholder='YYYY-MM-DD' pattern='^\d{4}-\d{2}-\d{2}$' <%= required %> />
       </div>
     </div>
     <div class="grid__cell grid__cell--50-at-medium">
       <div class='property'>
         <label for="<%= name + fieldSuffixes.hours %>" class='property__name'><%= I18n.t('workarea.admin.js.datetime_picker.time') %></label>
-        <select id="<%= name  + fieldSuffixes.hours %>" name="<%= name  + fieldSuffixes.hours %>">
+        <select id="<%= name  + fieldSuffixes.hours %>" name="<%= name  + fieldSuffixes.hours %>" <%= required %>>
           <% for ( var i = 1; i <= 12; i++ ) {
             var selected = ( initialDateTime.hours == i ) ? 'selected' : '';
           %>
             <option value="<%= i %>" <%= selected %> ><%= i %></option>
           <% } %>
         </select>
 
-        <select id="<%= name  + fieldSuffixes.minutes %>" name="<%= name  + fieldSuffixes.minutes %>">
+        <select id="<%= name  + fieldSuffixes.minutes %>" name="<%= name  + fieldSuffixes.minutes %>" <%= required %>>
           <% for ( var i = 0; i < 60; i++ ) {
             if (i < 10) { i = '0' + i }
             var selected = ( initialDateTime.minutes == i ) ? 'selected' : '';
@@ -27,7 +27,7 @@
           <% } %>
         </select>
 
-        <select id="<%= name + fieldSuffixes.ampm %>" name="<%= name + fieldSuffixes.ampm %>">
+        <select id="<%= name + fieldSuffixes.ampm %>" name="<%= name + fieldSuffixes.ampm %>" <%= required %>>
           <option value="am" <%= initialDateTime.ampm === 'am' ? 'selected' : '' %> >am</option>
           <option value="pm" <%= initialDateTime.ampm === 'pm' ? 'selected' : '' %> >pm</option>
         </select>

diff --git a/admin/app/views/workarea/admin/reports/timeline.html.haml b/admin/app/views/workarea/admin/reports/timeline.html.haml
@@ -45,7 +45,7 @@
                     = text_field_tag 'custom_event[name]', nil, class: 'text-box', required: true
                   .property
                     .box.box--rounded.box--padded
-                      = hidden_field_tag 'custom_event[occurred_at]', nil, data: { datetimepicker_field: { inline: true } }
+                      = hidden_field_tag 'custom_event[occurred_at]', nil, required: true, data: { datetimepicker_field: { inline: true } }
                   .align-center
                     = submit_tag t('workarea.admin.reports.timeline.add_custom_event'), class: 'button button--create button--small'