Merge pull request #58 from ezsystems/ezp-27903-time-field-type-design

EZP-27903: As an Editor, I want to edit a Time field type

.gitignore

@@ -5,3 +5,4 @@ yarn-error.log
 /vendor
 /.php_cs.cache
 package-lock.json
+.DS_Store

src/bundle/Resources/public/js/scripts/fieldType/eztime.js

@@ -0,0 +1,88 @@
+(function (global) {
+    const SELECTOR_FIELD = '.ez-field-edit--eztime';
+    const SELECTOR_INPUT = '.ez-data-source__input:not(.flatpickr-input)';
+    const EVENT_VALUE_CHANGED = 'valueChanged';
+
+    class EzTimeValidator extends global.eZ.BaseFieldValidator {
+        /**
+         * Validates the input
+         *
+         * @method validateInput
+         * @param {Event} event
+         * @returns {Object}
+         * @memberof EzTimeValidator
+         */
+        validateInput(event) {
+            const target = event.target;
+            const isRequired = target.required;
+            const isEmpty = !target.value.trim().length;
+            const label = event.target.closest(this.fieldSelector).querySelector('.ez-field-edit__label').innerHTML;
+            let isError = false;
+            let errorMessage = '';
+
+            if (isRequired && isEmpty) {
+                isError = true;
+                errorMessage = window.eZ.errors.emptyField.replace('{fieldName}', label);
+            }
+
+            return {
+                isError,
+                errorMessage
+            };
+        }
+    };
+
+    const validator = new EzTimeValidator({
+        classInvalid: 'is-invalid',
+        fieldSelector: SELECTOR_FIELD,
+        eventsMap: [
+            {
+                selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT}`,
+                eventName: EVENT_VALUE_CHANGED,
+                callback: 'validateInput',
+                invalidStateSelectors: [SELECTOR_FIELD],
+                errorNodeSelectors: ['.ez-field-edit__label-wrapper'],
+            },
+        ],
+    });
+
+    validator.init();
+
+    const timeFields = [...document.querySelectorAll(SELECTOR_FIELD)];
+    const timeConfig = {
+        enableTime: true,
+        noCalendar: true,
+        time_24hr: true
+    };
+    const updateInputValue = (sourceInput, date) => {
+        sourceInput.value = Math.floor((new Date(date)).getTime() / 1000);
+        sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED));
+    };
+    const initFlatPickr = (field) => {
+        const sourceInput = field.querySelector(SELECTOR_INPUT);
+        const enableSeconds = sourceInput.dataset.seconds === '1';
+        let defaultDate;
+
+        sourceInput.classList.add('ez-data-source__input--visually-hidden');
+
+        if (sourceInput.value) {
+            const date = new Date(sourceInput * 1000);
+
+            if (isNaN(date.getTime())) {
+                sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED));
+                sourceInput.value = '';
+            } else {
+                defaultDate = date;
+            }
+        }
+
+        flatpickr(field.querySelector('.flatpickr-input'), Object.assign({}, timeConfig, {
+            enableSeconds,
+            onChange: updateInputValue.bind(null, sourceInput),
+            dateFormat: enableSeconds ? 'H:i:S' : 'H:i',
+            defaultDate
+        }));
+    };
+
+    timeFields.forEach(initFlatPickr);
+})(window);

src/bundle/Resources/public/scss/_general.scss

@@ -65,3 +65,8 @@ button {
         height: 100%
     }
 }
+
+.ez-data-source__input--visually-hidden {
+    height: 1px;
+    opacity: 0;
+}

src/bundle/Resources/views/content/content_edit.html.twig

@@ -15,6 +15,7 @@
 {% block javascripts %}
     {%  javascripts
         '@EzPlatformAdminUiBundle/Resources/public/js/alloyeditor/dist/*.js'
+        '@EzPlatformAdminUiAssetsBundle/Resources/public/vendors/flatpickr/dist/flatpickr.js'
         '@EzPlatformAdminUiBundle/Resources/public/js/scripts/fieldType/base/base-field.js'
         '@EzPlatformAdminUiBundle/Resources/public/js/scripts/fieldType/*'
     %}
@@ -25,6 +26,7 @@
 {% block stylesheets %}
     {% stylesheets
         'bundles/ezplatformadminui/css/alloyeditor/alloyeditor-ez.css'
+        '@EzPlatformAdminUiAssetsBundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'
     %}
         <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}

src/bundle/Resources/views/content/form_fields.html.twig

@@ -6,6 +6,7 @@
 {% use 'EzPlatformAdminUiBundle:fieldtypes:ezdatetime.html.twig' %}
 {% use 'EzPlatformAdminUiBundle:fieldtypes:ezrichtext.html.twig' %}
 {% use 'EzPlatformAdminUiBundle:fieldtypes:ezselection.html.twig' %}
+{% use 'EzPlatformAdminUiBundle:fieldtypes:eztime.html.twig' %}
 
 {# general content editing theming #}
 

src/bundle/Resources/views/fieldtypes/eztime.html.twig

@@ -0,0 +1,4 @@
+{% block ezplatform_fieldtype_eztime_widget %}
+    <input type="text" class="flatpickr flatpickr-input ez-data-source__input form-control" readonly="readonly">
+    {{ block('form_widget') }}
+{% endblock %}