ayanova/devdocs/todo.txt

@@ -140,10 +140,13 @@ Make all fields work according to specs below
 
 TODO AFTER CLIENT block ABOVE:
 
+ABOUT form - add the  user settings such as timezone offset, locale formatting patterns etc, will be useful for troubleshooting
+
 "THORNY ISSUES" below are needed to be resolved sooner than later
 
 
 
+
 - Stage 2 AFTER POSTED TEST ROUND COMPLETED		
 	- Error handling at client (log? display?)
 	- Notification of some kind (bell / toast)				

ayanova/src/api/initialize.js

@@ -1,7 +1,7 @@
 /* xeslint-disable */
 import store from "../store";
 import roles from "./roles";
-import lt from "./locale";
+import locale from "./locale";
 import api from "./apiutil";
 
 function addNavItem(title, icon, route) {
@@ -18,21 +18,22 @@ function addNavItem(title, icon, route) {
 export default function initialize() {
   if (store.state.authenticated) {
     //GET LOCALIZED TEXT FOR SHELL
-    lt.fetch([
+    locale
-      "Home",
+      .fetch([
-      "Service",
+        "Home",
-      "Dispatch",
+        "Service",
-      "Inventory",
+        "Dispatch",
-      "Accounting",
+        "Inventory",
-      "Administration",
+        "Accounting",
-      "Operations",
+        "Administration",
-      "HelpAboutAyaNova",
+        "Operations",
-      "Logout"
+        "HelpAboutAyaNova",
-    ])
+        "Logout"
+      ])
       .then(function() {
         //put nav items into store
         //Everyone has a home
-        addNavItem(lt.get("Home"), "home", "/");
+        addNavItem(locale.get("Home"), "home", "/");
 
         if (
           roles.hasRole(roles.AuthorizationRoles.TechLimited) ||
@@ -40,26 +41,26 @@ export default function initialize() {
           roles.hasRole(roles.AuthorizationRoles.SubContractorLimited) ||
           roles.hasRole(roles.AuthorizationRoles.SubContractorFull)
         ) {
-          addNavItem(lt.get("Service"), "toolbox", "/service");
+          addNavItem(locale.get("Service"), "toolbox", "/service");
         }
 
         if (
           roles.hasRole(roles.AuthorizationRoles.DispatchLimited) ||
           roles.hasRole(roles.AuthorizationRoles.DispatchFull)
         ) {
-          addNavItem(lt.get("Dispatch"), "shipping-fast", "/dispatch");
+          addNavItem(locale.get("Dispatch"), "shipping-fast", "/dispatch");
         }
 
         if (
           roles.hasRole(roles.AuthorizationRoles.InventoryLimited) ||
           roles.hasRole(roles.AuthorizationRoles.InventoryFull)
         ) {
-          addNavItem(lt.get("Inventory"), "dolly", "/inventory");
+          addNavItem(locale.get("Inventory"), "dolly", "/inventory");
         }
 
         if (roles.hasRole(roles.AuthorizationRoles.AccountingFull)) {
           addNavItem(
-            lt.get("Accounting"),
+            locale.get("Accounting"),
             "file-invoice-dollar",
             "/accounting"
           );
@@ -69,19 +70,19 @@ export default function initialize() {
           roles.hasRole(roles.AuthorizationRoles.BizAdminLimited) ||
           roles.hasRole(roles.AuthorizationRoles.BizAdminFull)
         ) {
-          addNavItem(lt.get("Administration"), "user-tie", "/admin");
+          addNavItem(locale.get("Administration"), "user-tie", "/admin");
         }
 
         if (
           roles.hasRole(roles.AuthorizationRoles.OpsAdminFull) ||
           roles.hasRole(roles.AuthorizationRoles.OpsAdminLimited)
         ) {
-          addNavItem(lt.get("Operations"), "cogs", "ops");
+          addNavItem(locale.get("Operations"), "cogs", "ops");
         }
 
         //Everyone can see about and logout
-        addNavItem(lt.get("HelpAboutAyaNova"), "info-circle", "/about");
+        addNavItem(locale.get("HelpAboutAyaNova"), "info-circle", "/about");
-        addNavItem(lt.get("Logout"), "sign-out-alt", "/login");
+        addNavItem(locale.get("Logout"), "sign-out-alt", "/login");
       })
       .catch(function(error) {
         store.commit("logItem", "Initialize::() ltfetch -> error" + error);
@@ -89,8 +90,6 @@ export default function initialize() {
       });
 
     //CACHE LOCALE SETTINGS
-    //check the timezone offset is still valid, offer to change it if not
-    //api.get("UserOptions/" + store.state.userId).then(res => {
     api
       .get("UserOptions/" + store.state.userId)
       .then(res => {
@@ -99,6 +98,8 @@ export default function initialize() {
           //convert error to human readable string for display
           alert(api.apiErrorToHumanString(res.error));
         } else {
+          //TODO: also need the other locale settings such as number and date formats etc
+
           var localOffset = new Date().getTimezoneOffset();
           if (localOffset != 0) {
             localOffset = (localOffset / 60) * -1; //time is in minutes and reversed from what we want or expect
@@ -114,6 +115,9 @@ export default function initialize() {
                 "."
             );
           }
+
+          //Store offset in locale data
+          locale.timeZoneOffset = res.data.timeZoneOffset;
         }
       })
       .catch(function(error) {

ayanova/src/api/locale.js

@@ -76,5 +76,7 @@ export default {
     shortDate: "YYYY-MM-DD",
     shortTime: "hh:mm:ss A",
     shortDateAndTime: "YYYY-MM-DD hh:mm:ss A"
-  }
+  },
+  //timeZoneOffset is in decimal hours
+  timeZoneOffset: -8.0
 };

ayanova/src/components/gzdateandtimepicker.vue

@@ -46,7 +46,7 @@ export default {
   props: {
     label: String,
     value: String,
-    readonly: Boolean,
+    readonly: { type: Boolean, default: false },
     dayjs: Function,
     locale: Object
   },
@@ -60,20 +60,23 @@ export default {
   },
   computed: {
     formatDateTime() {
-     //console.log("FORMAT DATE TIME");
+      //console.log("FORMAT DATE TIME");
-     //debugger;
+      //debugger;
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortDateAndTime)
+        ? this.dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDateAndTime)
         : "";
     },
     formatDate() {
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortDate)
+        ? this.dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDate)
         : "";
     },
     formatTime() {
+      //debugger;
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortTime)
+        ? this.dayjs(this.value)
+            .add(this.locale.timeZoneOffset, "hour")
+            .format(this.locale.formats.shortTime)
         : "";
       //Note in original code this would be parsed expecting source value to be in UTC format coming in but display in local time format
       //so
@@ -107,3 +110,128 @@ export default {
   }
 };
 </script>
+
+<!--
+re: combined date/time component
+
+from theRetrograde sent 4 hours ago
+
+We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers. 
+I'm not sure why it wouldn't be rendering initially.
+Here are the props we pass to the component, maybe this will help:
+
+<template v-else-if="get_field_type(key) == 'datetime'">
+                    <AppDateTimePicker 
+                      v-model="editedItem[key]"
+                      v-bind:key="key"
+                      v-bind:readonly="is_readonly(key)"
+                      v-bind:label="pretty_field(key)">
+                    </AppDateTimePicker>
+             </template>
+
+
+<template>
+  <div>
+    <v-layout row wrap v-if="!readonly">
+      <v-flex xs6>
+        <v-dialog v-model="modal" persistent lazy full-width width="290px">
+          <v-text-field
+            slot="activator"
+            v-model="formatDate"
+            v-bind:label="label"
+            prepend-icon="event"
+            readonly
+          ></v-text-field>
+          <v-date-picker v-model="dateOnly" @input="modal = false">
+            <v-spacer></v-spacer>
+            <v-btn flat color="primary" @click="modal = false">Close</v-btn>
+          </v-date-picker>
+        </v-dialog>
+      </v-flex>
+      <v-flex xs6>
+        <v-dialog v-model="modal2" persistent lazy full-width width="290px">
+          <v-text-field
+            slot="activator"
+            v-model="formatTime"
+            label
+            prepend-icon="access_time"
+            readonly
+          ></v-text-field>
+          <v-time-picker v-model="timeOnly">
+            <v-spacer></v-spacer>
+            <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
+          </v-time-picker>
+        </v-dialog>
+      </v-flex>
+    </v-layout>
+    <v-text-field
+      v-else
+      v-model="formatDateTime"
+      v-bind:label="label"
+      prepend-icon="event"
+      disabled
+    ></v-text-field>
+  </div>
+</template> 
+
+// <script>
+// export default {
+//   data: () => ({ date: null, modal: false, modal2: false }),
+//   props: { label: String, value: String, readonly: Boolean },
+//   watch: {
+//     date() {
+//       this.$emit("input", this.date);
+//     },
+//     value() {
+//       this.date = this.value;
+//     }
+//   },
+//   computed: {
+//     formatDateTime() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
+//     },
+//     formatDate() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("dddd MM/DD/YYYY");
+//     },
+//     dateOnly: {
+//       get() {
+//         let momentObj = this.$moment.utc();
+//         if (this.value) {
+//           momentObj = this.$moment.utc(this.value);
+//         }
+//         return momentObj.local().format("YYYY-MM-DD");
+//       },
+//       set(value) {
+//         this.date = value + " " + this.timeOnly;
+//       }
+//     },
+//     timeOnly: {
+//       get() {
+//         let momentObj = this.$moment.utc();
+//         if (this.value) {
+//           momentObj = this.$moment.utc(this.value);
+//         }
+//         return momentObj.local().format("HH:mm:ss");
+//       },
+//       set(value) {
+//         this.date = this.dateOnly + " " + value;
+//       }
+//     },
+//     formatTime() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("h:mm a");
+//     }
+//   }
+// };
+// </script>-->

ayanova/src/views/inventory-widget-edit.vue

@@ -50,12 +50,13 @@
           </v-flex>
 
           <v-flex xs12 sm6 lg4 xl3 px-2>
+            {{ obj.startDate }}
+            {{ lc.timeZoneOffset }}
             <gz-date-time-picker
               label="Start"
               :dayjs="this.dayjsLib"
               :locale="this.lc"
               v-model="obj.startDate"
-              
             ></gz-date-time-picker>
           </v-flex>