From c32ee4b71cee6269abf201b955fd5734697a15cd Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Thu, 31 Mar 2022 17:13:06 -0400
Subject: [PATCH] Provide "click outside" behavior for Time Picker (CFM-107)

---
 app/src/View/Helper/FieldHelper.php           | 21 ++++++++++++++++++-
 .../datepicker/cm-datetimepicker.js           |  6 ++++++
 .../components/datepicker/cm-timepicker.js    |  6 +++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 797a01430..4aa4c9a06 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -141,7 +141,26 @@ public function control(string $fieldName,
             components: {
               CmDateTimePicker
             }
-          }).mount("#' . $pickerId . '-container");
+          });
+          
+          // 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
diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
index cb8cc4041..78328cf33 100644
--- a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
+++ b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -74,8 +74,13 @@ export default {
       return(formattedDate);
     },
     showTimePicker() {
+      // This is our toggle.
       this.showingTimePicker = !this.showingTimePicker;
     },
+    hideTimePicker() {
+      // This is to explicitly hide the picker.
+      this.showingTimePicker = false;
+    },
     setFieldTime(type,val) {
       const dateField = document.getElementById(this.target);
       let dateTime = [];
@@ -160,6 +165,7 @@ export default {
           <cm-time-picker
             v-if="this.showingTimePicker"
             @set-time="setFieldTime"
+            @hide="hideTimePicker"
             :target="this.target"
             :datetime="this.dateTime"
             :ampm="this.ampm"
diff --git a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
index fd0dc0231..ad21e07cb 100644
--- a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
+++ b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
@@ -23,6 +23,7 @@
  * @since         COmanage Registry v5.0.0
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
+
 export default {
   props: {
     target: String,
@@ -38,10 +39,13 @@ export default {
   methods: {
     setTime(e,type) {
       this.$emit('setTime',type,e.target.innerText);
+    },
+    hide() {
+      this.$emit('hide');
     }
   },
   template: `
-    <div class="cm-time-picker-panel">
+    <div class="cm-time-picker-panel" v-clickout="hide">
       <div class="cm-time-picker-hours">
         <div class="cm-time-picker-title">{{ txt.hour }}</div>
         <div class="cm-time-picker-vals">