From 2863dbd96bfba557e61ffedff41bc71d094e4f9d Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Wed, 6 Apr 2022 17:16:07 -0400 Subject: [PATCH] Add new Date and Time picker (CFM-107) (#10) * First working implementation of Date and Time pickers (CFM-107) * Include Duet Datepicker library (CFM-107) * Ensure that Time Picker is using internationalized strings (CFM-107) * Remove FrozenTime inclusion that was added by IDE (CFM-107) * Finish i18n string substitution for Time Picker (CFM-107) * Provide "click outside" behavior for Time Picker (CFM-107) * Set mobile/desktop responsive behaviors for Date and Time pickers (CFM-107) * Ensure all properties are passed into the date/time component from their PHP equivalents (CFM-107) * Remove unused property (CFM-107) * Remove unused property (one more location) (CFM-107) * Remove unused property (one more location) (CFM-107) * Group datepicker texts in field.po (CFM-107) --- app/resources/locales/en_US/field.po | 12 ++ app/src/View/Helper/FieldHelper.php | 76 +++++++- app/templates/element/javascript.php | 46 +---- app/templates/layout/default.php | 13 +- app/webroot/css/co-base.css | 123 ++++++++++-- app/webroot/css/co-color.css | 17 ++ app/webroot/css/co-responsive.css | 18 +- .../js/bootstrap/bootstrap.bundle.min.js.map | 1 + app/webroot/js/{ => comanage}/comanage.js | 0 .../datepicker/cm-datetimepicker.js | 176 ++++++++++++++++++ .../components/datepicker/cm-timepicker.js | 74 ++++++++ .../duet/css-shim-3dfae0d3.system.js | 1 + .../duet-datepicker/duet/css-shim-934c915f.js | 1 + .../duet/dom-9370655f.system.js | 21 +++ .../js/duet-datepicker/duet/dom-fb6a473e.js | 19 ++ .../duet/duet-date-picker.entry.js | 1 + .../duet/duet-date-picker.system.entry.js | 1 + .../js/duet-datepicker/duet/duet.esm.js | 1 + app/webroot/js/duet-datepicker/duet/duet.js | 132 +++++++++++++ .../js/duet-datepicker/duet/duet.system.js | 1 + .../duet/index-7f002a21.system.js | 1 + .../js/duet-datepicker/duet/index-a3afd6e1.js | 1 + .../js/duet-datepicker/duet/index.esm.js | 0 .../js/duet-datepicker/duet/index.system.js | 1 + .../js/duet-datepicker/duet/themes/dark.css | 17 ++ .../duet-datepicker/duet/themes/default.css | 17 ++ app/webroot/js/vue/vue-3.2.31.global.prod.js | 1 + 27 files changed, 701 insertions(+), 71 deletions(-) create mode 100644 app/webroot/js/bootstrap/bootstrap.bundle.min.js.map rename app/webroot/js/{ => comanage}/comanage.js (100%) create mode 100644 app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js create mode 100644 app/webroot/js/comanage/components/datepicker/cm-timepicker.js create mode 100644 app/webroot/js/duet-datepicker/duet/css-shim-3dfae0d3.system.js create mode 100644 app/webroot/js/duet-datepicker/duet/css-shim-934c915f.js create mode 100644 app/webroot/js/duet-datepicker/duet/dom-9370655f.system.js create mode 100644 app/webroot/js/duet-datepicker/duet/dom-fb6a473e.js create mode 100644 app/webroot/js/duet-datepicker/duet/duet-date-picker.entry.js create mode 100644 app/webroot/js/duet-datepicker/duet/duet-date-picker.system.entry.js create mode 100644 app/webroot/js/duet-datepicker/duet/duet.esm.js create mode 100644 app/webroot/js/duet-datepicker/duet/duet.js create mode 100644 app/webroot/js/duet-datepicker/duet/duet.system.js create mode 100644 app/webroot/js/duet-datepicker/duet/index-7f002a21.system.js create mode 100644 app/webroot/js/duet-datepicker/duet/index-a3afd6e1.js create mode 100644 app/webroot/js/duet-datepicker/duet/index.esm.js create mode 100644 app/webroot/js/duet-datepicker/duet/index.system.js create mode 100644 app/webroot/js/duet-datepicker/duet/themes/dark.css create mode 100644 app/webroot/js/duet-datepicker/duet/themes/default.css create mode 100644 app/webroot/js/vue/vue-3.2.31.global.prod.js diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po index 4ecc006a2..f16b3b468 100644 --- a/app/resources/locales/en_US/field.po +++ b/app/resources/locales/en_US/field.po @@ -86,6 +86,18 @@ msgstr "Country Code" msgid "created" msgstr "Created" +msgid "datepicker.am" +msgstr "AM" + +msgid "datepicker.hour" +msgstr "Hour" + +msgid "datepicker.pm" +msgstr "PM" + +msgid "datepicker.minute" +msgstr "Minute" + msgid "date_of_birth" msgstr "Date of Birth" diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php index 946a32afa..bbf752b45 100644 --- a/app/src/View/Helper/FieldHelper.php +++ b/app/src/View/Helper/FieldHelper.php @@ -34,7 +34,7 @@ use Cake\View\Helper; class FieldHelper extends Helper { - public $helpers = ['Form', 'Html']; + public $helpers = ['Form', 'Html', 'Url']; // Is this read-only or read-write? protected $editable = true; @@ -90,18 +90,86 @@ public function control(string $fieldName, // Append the timezone to the label $label = __d('field', $fieldName.".tz", [$this->_View->get('vv_tz')]); - // Render these fields as datepickers instead of plain text boxes - $coptions['class'] = 'datepicker-' . ($fieldName == 'valid_from' ? "f" : "u"); + // A datetime field will be rendered as plain text input with adjacent date and time pickers + // that will interact with the field value. Allowing direct access to the input field is for + // accessibility purposes. + $coptions['class'] = 'form-control datepicker'; + $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS'; // TODO: test for date-only inputs and send only the date + $coptions['id'] = $fieldName; $entity = $this->_View->get('vv_obj'); + $pickerDate = ''; if(!empty($entity->$fieldName)) { // Adjust the time back to the user's timezone $coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd HH:mm:ss", $this->_View->get('vv_tz')); + $pickerDate = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->_View->get('vv_tz')); } + // Create a text field to hold our value. $controlCode = $this->Form->text($fieldName, $coptions); - $liClass = " modelbox-data"; + + // Create a date/time picker. The yyyy-MM-dd format is set above in $pickerDate. + $pickerId = 'datepicker-' . $fieldName; + $pickerTarget = $fieldName; + $pickerTimed = true; // TODO: set false if date-only + $pickerAmPm = false; // TODO: allow change between AM/PM and 24-hour mode + + $controlCode .= ' + +
+ + +
'; + + $liClass = "fields-datepicker"; } else { if($fieldName != 'status' && !isset($options['empty']) diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index 88f34443a..1c0d47083 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -169,50 +169,10 @@ } }); - // Datepickers - - - -/* XXX CFM-107 Hide datepickers until replaced with new approach - $(".datepicker-f").datepicker({ - changeMonth: true, - changeYear: true, - dateFormat: "yy-mm-dd 00:00:00", - numberOfMonths: 1, - showButtonPanel: false, - showOtherMonths: true, - selectOtherMonths: true, - onSelect: function(selectedDate) { - $(this).closest('.mdl-textfield').addClass('is-dirty'); - } - }).bind('click',function () { - $("#ui-datepicker-div").appendTo($(this).closest('.modelbox-data')); - }); - - $(".datepicker-u").datepicker({ - changeMonth: true, - changeYear: true, - dateFormat: "yy-mm-dd 23:59:59", - numberOfMonths: 1, - showButtonPanel: false, - showOtherMonths: true, - selectOtherMonths: true, - onSelect: function(selectedDate) { - $(this).closest('.mdl-textfield').addClass('is-dirty'); - } - }).bind('click',function () { - $("#ui-datepicker-div").appendTo($(this).closest('.modelbox-data')); - }); -*/ - // Add loading animation when a form is submitted, when any item with a "spin" class is clicked, - // or on any button or anchor tag lacking the .nospin class. - $("input[type='submit'], button:not(.nospin), a:not(.nospin), .spin").click(function() { + // or on any anchor tag lacking the .nospin class. We do not automatically add this to buttons + // because they are often on-page controls. Add a "spin" class to buttons that need it. + $("input[type='submit'], a:not('.nospin'), .spin").click(function() { displaySpinner(); diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php index f5fbea63c..3552c8c0b 100644 --- a/app/templates/layout/default.php +++ b/app/templates/layout/default.php @@ -40,7 +40,7 @@ - Html->meta('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no') . "\n"; ?> + Html->meta('viewport', 'width=device-width, initial-scale=1.0') . "\n"; ?> Html->charset(); ?> <?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?> @@ -191,7 +191,7 @@ class="toast-container" element('dialog'); ?> - Html->script('jstimezonedetect/jstz.min.js'); ?> + Html->script('jstimezonedetect/jstz.min.js'); ?>