From d4441e22f538ca659715fda190f8a642293a99ce Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Wed, 30 Mar 2022 11:06:58 -0400 Subject: [PATCH] First working implementation of Date and Time pickers (CFM-107) --- app/src/View/Helper/FieldHelper.php | 57 +++++- app/templates/element/javascript.php | 46 +---- app/templates/layout/default.php | 9 +- app/webroot/css/co-base.css | 124 +++++++++++-- app/webroot/css/co-color.css | 17 ++ app/webroot/js/{ => comanage}/comanage.js | 0 .../datepicker/cm-datetimepicker.js | 170 ++++++++++++++++++ .../components/datepicker/cm-timepicker.js | 70 ++++++++ app/webroot/js/vue/vue-3.2.31.global.prod.js | 1 + 9 files changed, 426 insertions(+), 68 deletions(-) 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/vue/vue-3.2.31.global.prod.js diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php index 946a32afa..e6d3b7cd7 100644 --- a/app/src/View/Helper/FieldHelper.php +++ b/app/src/View/Helper/FieldHelper.php @@ -30,11 +30,12 @@ namespace App\View\Helper; +use Cake\I18n\FrozenTime; use \Cake\Utility\Inflector; 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 +91,66 @@ 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. + $pickerDateTime = ''; // for handling time + $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 + if(!empty($coptions['value'])) { + $pickerDateTime = $coptions['value']; + } + $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 f75048ac7..5f352ad51 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 356bd917b..ffa9f58d2 100644 --- a/app/templates/layout/default.php +++ b/app/templates/layout/default.php @@ -181,7 +181,7 @@ element('dialog'); ?> - Html->script('jstimezonedetect/jstz.min.js'); ?> + Html->script('jstimezonedetect/jstz.min.js'); ?>