From f529a52db0ab764d67a0b4891ed76404e8785e8e Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Sat, 30 Oct 2021 00:18:29 +0000
Subject: [PATCH]

---
 ayanova/src/components/date-time-control.vue  | 212 ++++++++++--------
 .../components/date-time-native-control.vue   |   1 +
 ayanova/src/store.js                          |   4 +
 ayanova/src/views/home-user-settings.vue      |  21 +-
 4 files changed, 146 insertions(+), 92 deletions(-)

diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue
index cc4093b4..c1f6a786 100644
--- a/ayanova/src/components/date-time-control.vue
+++ b/ayanova/src/components/date-time-control.vue
@@ -3,101 +3,130 @@
     <div>
       <v-row>
         <template v-if="!readonly">
-          <v-col xs6>
-            <v-dialog v-model="dlgdate" width="300px">
-              <template v-slot:activator="{ on }">
-                <v-text-field
-                  v-on="on"
-                  prepend-icon="$ayiCalendarAlt"
-                  @click:prepend="dlgdate = true"
+          <template v-if="!$store.state.nativeDateTimeInput">
+            <v-col xs6>
+              <v-dialog v-model="dlgdate" width="300px">
+                <template v-slot:activator="{ on }">
+                  <v-text-field
+                    v-on="on"
+                    prepend-icon="$ayiCalendarAlt"
+                    @click:prepend="dlgdate = true"
+                    :value="dateValue"
+                    :label="label"
+                    :rules="rules"
+                    readonly
+                    :error="!!hasErrors"
+                    :data-cy="'dtfpick:' + testId"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
                   :value="dateValue"
-                  :label="label"
-                  :rules="rules"
-                  readonly
-                  :error="!!hasErrors"
-                  :data-cy="'dtfpick:' + testId"
-                ></v-text-field>
-              </template>
-              <v-date-picker
+                  @input="updateDateValue"
+                  :locale="languageName"
+                  :data-cy="'dpick:' + testId"
+                >
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="$emit('input', null)"
+                    :data-cy="'dpickdelete:' + testId"
+                    >{{ $ay.t("Delete") }}</v-btn
+                  >
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="setToday()"
+                    :data-cy="'dpicktoday:' + testId"
+                    >{{ $ay.t("DateRangeToday") }}</v-btn
+                  >
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="dlgdate = false"
+                    :data-cy="'dpickok:' + testId"
+                    >{{ $ay.t("OK") }}</v-btn
+                  >
+                </v-date-picker>
+              </v-dialog>
+            </v-col>
+            <v-col xs6>
+              <v-dialog v-model="dlgtime" width="300px">
+                <template v-slot:activator="{ on }">
+                  <v-text-field
+                    v-on="on"
+                    :value="readonlyTimeFormat()"
+                    label
+                    prepend-icon="$ayiClock"
+                    @click:prepend="dlgtime = true"
+                    readonly
+                    :error="!!hasErrors"
+                    :data-cy="'ttfpick:' + testId"
+                  ></v-text-field>
+                </template>
+                <v-time-picker
+                  scrollable
+                  ampm-in-title
+                  :format="hour12 ? 'ampm' : '24hr'"
+                  :value="timeValue"
+                  @input="updateTimeValue"
+                  :data-cy="'tpick:' + testId"
+                >
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="$emit('input', null)"
+                    :data-cy="'ttfpickdelete:' + testId"
+                    >{{ $ay.t("Delete") }}</v-btn
+                  >
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="setNow()"
+                    :data-cy="'ttfpicknow:' + testId"
+                    >{{ $ay.t("Now") }}</v-btn
+                  >
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="dlgtime = false"
+                    :data-cy="'ttfpickok:' + testId"
+                    >{{ $ay.t("OK") }}</v-btn
+                  >
+                </v-time-picker>
+              </v-dialog>
+            </v-col>
+          </template>
+          <template v-if="$store.state.nativeDateTimeInput">
+            <v-col cols="6">
+              <v-text-field
+                ref="dateField"
                 :value="dateValue"
-                @input="updateDateValue"
-                :locale="languageName"
+                @change="updateDateValue"
+                :readonly="readonly"
+                :disabled="disabled"
+                :label="label"
+                :rules="rules"
+                type="date"
+                :error-messages="errorMessages"
                 :data-cy="'dpick:' + testId"
-              >
-                <v-btn
-                  text
-                  color="primary"
-                  @click="$emit('input', null)"
-                  :data-cy="'dpickdelete:' + testId"
-                  >{{ $ay.t("Delete") }}</v-btn
-                >
-                <v-spacer></v-spacer>
-                <v-btn
-                  text
-                  color="primary"
-                  @click="setToday()"
-                  :data-cy="'dpicktoday:' + testId"
-                  >{{ $ay.t("DateRangeToday") }}</v-btn
-                >
-                <v-spacer></v-spacer>
-                <v-btn
-                  text
-                  color="primary"
-                  @click="dlgdate = false"
-                  :data-cy="'dpickok:' + testId"
-                  >{{ $ay.t("OK") }}</v-btn
-                >
-              </v-date-picker>
-            </v-dialog>
-          </v-col>
-          <v-col xs6>
-            <v-dialog v-model="dlgtime" width="300px">
-              <template v-slot:activator="{ on }">
-                <v-text-field
-                  v-on="on"
-                  :value="readonlyTimeFormat()"
-                  label
-                  prepend-icon="$ayiClock"
-                  @click:prepend="dlgtime = true"
-                  readonly
-                  :error="!!hasErrors"
-                  :data-cy="'ttfpick:' + testId"
-                ></v-text-field>
-              </template>
-              <v-time-picker
-                scrollable
-                ampm-in-title
-                :format="hour12 ? 'ampm' : '24hr'"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="6">
+              <v-text-field
+                ref="timeField"
                 :value="timeValue"
-                @input="updateTimeValue"
-                :data-cy="'tpick:' + testId"
-              >
-                <v-btn
-                  text
-                  color="primary"
-                  @click="$emit('input', null)"
-                  :data-cy="'ttfpickdelete:' + testId"
-                  >{{ $ay.t("Delete") }}</v-btn
-                >
-                <v-spacer></v-spacer>
-                <v-btn
-                  text
-                  color="primary"
-                  @click="setNow()"
-                  :data-cy="'ttfpicknow:' + testId"
-                  >{{ $ay.t("Now") }}</v-btn
-                >
-                <v-spacer></v-spacer>
-                <v-btn
-                  text
-                  color="primary"
-                  @click="dlgtime = false"
-                  :data-cy="'ttfpickok:' + testId"
-                  >{{ $ay.t("OK") }}</v-btn
-                >
-              </v-time-picker>
-            </v-dialog>
-          </v-col>
+                @change="updateTimeValue"
+                :readonly="readonly"
+                :disabled="disabled"
+                type="time"
+                :data-cy="'timeinput:' + testId"
+              ></v-text-field>
+            </v-col>
+          </template>
         </template>
         <template v-else>
           <v-col>
@@ -121,6 +150,7 @@
 <script>
 export default {
   data: () => ({
+    nativeInput: true,
     dlgdate: false,
     dlgtime: false,
     timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
diff --git a/ayanova/src/components/date-time-native-control.vue b/ayanova/src/components/date-time-native-control.vue
index 99a8c0ea..6e85efa9 100644
--- a/ayanova/src/components/date-time-native-control.vue
+++ b/ayanova/src/components/date-time-native-control.vue
@@ -32,6 +32,7 @@
         :value="readonlyFormat()"
         :label="label"
         readonly
+        prepend-icon="$ayiCalendarAlt"
       ></v-text-field>
     </template>
   </v-row>
diff --git a/ayanova/src/store.js b/ayanova/src/store.js
index 7a5d3a78..1da14fe7 100644
--- a/ayanova/src/store.js
+++ b/ayanova/src/store.js
@@ -50,6 +50,7 @@ export default new Vuex.Store({
     formSettings: {}, //this is the settings on forms that survive a refresh like grid number of items to show etc
     formCustomTemplate: {}, //this is the custom fields settings for forms,
     darkMode: false,
+    nativeDateTimeInput: false,
     knownPassword: false,
     newNotificationCount: 0
   },
@@ -198,6 +199,9 @@ export default new Vuex.Store({
     setDarkMode(state, data) {
       state.darkMode = data;
     },
+    setNativeDateTimeInput(state, data) {
+      state.nativeDateTimeInput = data;
+    },
     setKnownPassword(state, data) {
       state.knownPassword = data;
     },
diff --git a/ayanova/src/views/home-user-settings.vue b/ayanova/src/views/home-user-settings.vue
index 09627342..37e7945c 100644
--- a/ayanova/src/views/home-user-settings.vue
+++ b/ayanova/src/views/home-user-settings.vue
@@ -113,6 +113,17 @@
             ></v-checkbox>
           </v-col>
 
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-checkbox
+              v-model="nativeDateTimeInput"
+              :readonly="formState.readOnly"
+              :label="$ay.t('NativeDateTimeInput')"
+              ref="nativeDateTimeInput"
+              @change="nativeDateTimeInputChanged()"
+              data-cy="nativeDateTimeInput"
+            ></v-checkbox>
+          </v-col>
+
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
               v-model="obj.currencyName"
@@ -230,6 +241,7 @@ export default {
       },
       activeTranslationId: null,
       darkMode: this.$store.state.darkMode,
+      nativeDateTimeInput: this.$store.state.nativeDateTimeInput,
       obj: {
         id: 0,
         concurrency: 0,
@@ -306,6 +318,12 @@ export default {
         vm.darkMode ? "$ayiSun" : "$ayiMoon"
       );
     },
+    nativeDateTimeInputChanged() {
+      console.log("Setting native date time input now");
+      const vm = this;
+      //vm.nativeDateTimeInput = !vm.nativeDateTimeInput;
+      vm.$store.commit("setNativeDateTimeInput", vm.nativeDateTimeInput);
+    },
     mapUrlSelectionChanged(val) {
       this.obj.mapUrlTemplate = val;
       this.fieldValueChanged("mapUrlTemplate");
@@ -498,7 +516,8 @@ async function fetchTranslatedText(vm) {
     "UserPhone1",
     "UserPhone2",
     "UserPageAddress",
-    "AuthTwoFactor"
+    "AuthTwoFactor",
+    "NativeDateTimeInput"
   ]);
 }