From fd96287e1aae34718e68e71fa82b9255c9e57c7a Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@admin.grnet.gr>
Date: Sat, 7 May 2022 19:11:42 +0300
Subject: [PATCH] Move datepicker field in its own element

---
 app/src/View/Helper/FieldHelper.php  | 75 ++++------------------------
 app/templates/element/datePicker.php | 66 ++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 65 deletions(-)
 create mode 100644 app/templates/element/datePicker.php

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index bbf752b45..e9cbd093a 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -89,7 +89,7 @@ public function control(string $fieldName,
     if($fieldName == 'valid_from' || $fieldName == 'valid_through') {
       // Append the timezone to the label
       $label = __d('field', $fieldName.".tz", [$this->_View->get('vv_tz')]);
-      
+
       // 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.
@@ -97,77 +97,22 @@ public function control(string $fieldName,
       $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');
+      $entity = $this->getView()->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'));
+        $coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd HH:mm:ss", $this->getView()->get('vv_tz'));
+        $pickerDate = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->getView()->get('vv_tz'));
       }
       
+      $date_args = [
+        'fieldName' => $fieldName,
+        'pickerDate' => $pickerDate
+      ];
       // Create a text field to hold our value.
-      $controlCode = $this->Form->text($fieldName, $coptions);
-      
-      // 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 .= '  
-        <script type="module">
-          import CmDateTimePicker from "' . $this->Url->script('comanage/components/datepicker/cm-datetimepicker.js') . '";
-          const app = Vue.createApp({
-            data() {
-              return {
-                id: "' . $pickerId . '",
-                target: "' . $pickerTarget . '",
-                date: "' . $pickerDate . '",
-                timed: ' . ($pickerTimed ? 'true' : 'false') . ',
-                ampm: ' . ($pickerAmPm ? 'true' : 'false') . ',
-                txt: {
-                  hour: "' . __d('field', 'datepicker.hour') . '",
-                  minute: "' . __d('field', 'datepicker.minute') . '",
-                  am: "' . __d('field', 'datepicker.am') . '",
-                  pm: "' . __d('field', 'datepicker.pm') . '"
-                }
-              }
-            },
-            components: {
-              CmDateTimePicker
-            }
-          });
-          
-          // Add custom global directives available to all child components.
-          // "clickout" allows us to pass a function to a click outside behavior which
-          // is registered and destroyed as the component is mounted and unmounted.
-          app.directive("clickout", {
-            mounted(el, binding, vnode) {
-              el.clickOutEvent = function(event) {
-                if (!(el === event.target || el.contains(event.target))) {
-                  binding.value(event, el);
-                }
-              };
-              document.body.addEventListener("click", el.clickOutEvent);
-            },
-            unmounted(el) {
-              document.body.removeEventListener("click", el.clickOutEvent);
-            }
-          });
-          
-          app.mount("#' . $pickerId . '-container");
-        </script>
-        <div id="' . $pickerId . '-container">
-          <cm-date-time-picker
-            :id="id"
-            :target="target"
-            :date="date"
-            :timed="timed" 
-            :ampm="ampm"
-            :txt="txt">
-          </cm-date-time-picker>
-        </div>';
+      $controlCode = $this->Form->text($fieldName, $coptions)
+                     . $this->getView()->element('datePicker', $date_args);
       
       $liClass = "fields-datepicker";
     } else {
diff --git a/app/templates/element/datePicker.php b/app/templates/element/datePicker.php
new file mode 100644
index 000000000..9f9a27210
--- /dev/null
+++ b/app/templates/element/datePicker.php
@@ -0,0 +1,66 @@
+<?php
+// Get parameters
+$fieldName = $fieldName ?? "";
+$pickerDate = $pickerDate ?? "";
+
+// Create a date/time picker. The yyyy-MM-dd format is set above in $pickerDate.
+$pickerId     = 'datepicker-' . $fieldName;
+$pickerTarget = $fieldName;
+$pickerTimed  = $pickerTimed ?? true; // TODO: set false if date-only
+$pickerAmPm   = $pickerAmPm ?? false; // TODO: allow change between AM/PM and 24-hour mode
+
+?>
+
+<script type="module">
+  import CmDateTimePicker from "<?= $this->Url->script('comanage/components/datepicker/cm-datetimepicker.js') ?>";
+
+  const app = Vue.createApp({
+    data() {
+      return {
+        id: "<?= $pickerId ?>",
+        target: "<?= $pickerTarget ?>",
+        date: "<?= $pickerDate ?>",
+        timed: <?= ($pickerTimed ? 'true' : 'false') ?>,
+        ampm: <?= ($pickerAmPm ? 'true' : 'false') ?>,
+        txt: {
+          hour: "<?= __d('field', 'datepicker.hour') ?>",
+          minute: "<?= __d('field', 'datepicker.minute') ?>",
+          am: "<?= __d('field', 'datepicker.am') ?>",
+          pm: "<?= __d('field', 'datepicker.pm') ?>"
+        }
+      }
+    },
+    components: {
+      CmDateTimePicker
+    }
+  });
+
+  // Add custom global directives available to all child components.
+  // "clickout" allows us to pass a function to a click outside behavior which
+  // is registered and destroyed as the component is mounted and unmounted.
+  app.directive("clickout", {
+    mounted(el, binding, vnode) {
+      el.clickOutEvent = function (event) {
+        if (!(el === event.target || el.contains(event.target))) {
+          binding.value(event, el);
+        }
+      };
+      document.body.addEventListener("click", el.clickOutEvent);
+    },
+    unmounted(el) {
+      document.body.removeEventListener("click", el.clickOutEvent);
+    }
+  });
+
+  app.mount("#<?= $pickerId ?>-container");
+</script>
+<div id="<?= $pickerId ?>-container">
+  <cm-date-time-picker
+    :id="id"
+    :target="target"
+    :date="date"
+    :timed="timed"
+    :ampm="ampm"
+    :txt="txt">
+  </cm-date-time-picker>
+</div>