Merge pull request #103 from k2maan/#25k8h53

Added support for setting timezone and migrate from moment to luxon (#25k8h53)

package.json

@@ -24,9 +24,8 @@
     "axios-cache-adapter": "^2.7.0",
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
+    "luxon": "^3.2.0",
     "mitt": "^2.1.0",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
     "vue-i18n": "~9.1.6",
@@ -38,6 +37,7 @@
     "@capacitor/cli": "2.4.6",
     "@intlify/vue-i18n-loader": "^2.0.0-rc.3",
     "@types/jest": "^27.5.0",
+    "@types/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -22,6 +22,8 @@ import OfflineHelper from "./offline-helper"
 import { useStore } from "./store";
 import emitter from "@/event-bus"
 import { loadingController } from '@ionic/vue';
+import { mapGetters } from 'vuex';
+import { Settings } from 'luxon'
 
 export default defineComponent({
   name: "App",
@@ -36,6 +38,11 @@ export default defineComponent({
       loader: null as any
     }
   },
+  computed: {
+    ...mapGetters({
+      userProfile: 'user/getUserProfile',
+    })
+  },
   methods: {
     async presentLoader() {
       if (!this.loader) {
@@ -64,6 +71,11 @@ export default defineComponent({
       });
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
+    // Handles case when user resumes or reloads the app
+    // Luxon timezzone should be set with the user's selected timezone
+    if (this.userProfile && this.userProfile.userTimeZone) {
+      Settings.defaultZone = this.userProfile.userTimeZone;
+    }
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);

src/main.ts

@@ -6,8 +6,7 @@ import './registerServiceWorker'
 import { IonicVue } from '@ionic/vue';
 import i18n from './i18n'
 import store from './store'
-import moment from 'moment'
-import "moment-timezone";
+import { DateTime } from 'luxon';
 import { sortSizes } from "@/apparel-sorter"
 
 /* Core CSS required for Ionic components to work properly */
@@ -40,17 +39,18 @@ const app = createApp(App)
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {
-  formatDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Use Loxon instead
-    // TODO Make default format configurable and from environment variables
-    return moment(value, inFormat).format(outFormat ? outFormat : 'MM-DD-YYYY');
+  formatDate(value: any, inFormat?: string, outFormat = 'MM-dd-yyyy') {
+    if(inFormat){
+      return DateTime.fromFormat(value, inFormat).toFormat(outFormat);
+    }
+    return DateTime.fromISO(value).toFormat(outFormat);
   },
-  formatUtcDate(value: any, inFormat?: string, outFormat?: string, utc?: boolean) {
+  formatUtcDate(value: any, inFormat?: any, outFormat = 'MM-dd-yyyy') {
     // TODO Use Loxon instead
     // TODO Make default format configurable and from environment variables
     const userProfile = store.getters['user/getUserProfile'];
     // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-    return moment.utc(value, inFormat).tz(userProfile.userTimeZone).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    return DateTime.fromISO(value, { zone: 'utc' }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')
   },
   getOrderIdentificationId(identifications: any, id: string) {
     let  externalId = ''

src/store/modules/order/actions.ts

@@ -5,7 +5,7 @@ import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import emitter from '@/event-bus'
 
 const actions: ActionTree<OrderState, RootState> = {
@@ -26,15 +26,15 @@ const actions: ActionTree<OrderState, RootState> = {
       filters: JSON.parse(process.env.VUE_APP_ORDER_FILTERS)
     }
     if (query.orderedBefore || query.orderedAfter) {
-      const orderedBefore = (query.orderedBefore ? moment.tz(query.orderedBefore, 'YYYY-MM-DD', userProfile.userTimeZone) : moment.tz(moment(), userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-      const orderedAfter = (query.orderedAfter ? moment.tz(query.orderedAfter, 'YYYY-MM-DD', userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+      const orderedBefore = query.orderedBefore ? DateTime.fromFormat(query.orderedBefore, "yyyy-MM-dd").setZone(userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.now().setZone(userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+      const orderedAfter = query.orderedAfter ? DateTime.fromFormat(query.orderedAfter, "yyyy-MM-dd").setZone(userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.fromFormat("0001-01-01", "yyyy-MM-dd").setZone(userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
       const dateQuery: any = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
       payload.filters.push(dateQuery);
     }
 
     if (query.promisedBefore || query.promisedAfter) {
-      const promisedBefore = (query.promisedBefore ? moment.tz(query.promisedBefore, 'YYYY-MM-DD', userProfile.userTimeZone) : moment.tz(moment(), userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-      const promisedAfter = (query.promisedAfter ? moment.tz(query.promisedAfter, 'YYYY-MM-DD', userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+      const promisedBefore = query.promisedBefore ? DateTime.fromFormat(query.promisedBefore, "yyyy-MM-dd").setZone(userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.now().setZone(userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+      const promisedAfter = query.promisedAfter ? DateTime.fromFormat(query.promisedAfter, "yyyy-MM-dd").setZone(userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.fromFormat("0001-01-01", "yyyy-MM-dd").setZone(userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
       const promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
       payload.filters.push(promisedDateQuery);
     }
@@ -204,7 +204,7 @@ const actions: ActionTree<OrderState, RootState> = {
         if (order) {
           const item = order.doclist.docs.find((orderItem: any) => orderItem.orderItemSeqId === payload.orderItemSeqId);
           // TODO Check if we can use the value from the response
-          item.promisedDatetime = moment(payload.promisedDatetime, "YYYY-MM-DD hh:mm:ss.SSS").format("YYYY-MM-DD[T]hh:mm:ss[Z]");
+          item.promisedDatetime = DateTime.fromFormat(payload.promisedDatetime, "yyyy-MM-dd hh:mm:ss.SSS").toFormat("YYYY-MM-DD'T'hh:mm:ss'Z'");
         }
         commit(types.ORDER_LIST_UPDATED, state.list );
         showToast(translate("Item promise date updated successfully"));

src/store/modules/user/actions.ts

@@ -5,7 +5,7 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
-import "moment-timezone";
+import { Settings } from 'luxon'
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -83,6 +83,9 @@ const actions: ActionTree<UserState, RootState> = {
     const userProfile = JSON.parse(JSON.stringify(resp.data));
 
     if (resp.status === 200) {
+      if(resp.data.userTimeZone) {
+        Settings.defaultZone = resp.data.userTimeZone;
+      }
       const payload = {
         "inputFields": {
           "storeName_op": "not-empty"
@@ -132,8 +135,9 @@ const actions: ActionTree<UserState, RootState> = {
       const resp = await UserService.setUserTimeZone(payload)
       if (resp.status === 200 && !hasError(resp)) {
         const current: any = state.current;
-        current.userTimeZone = payload.tzId;
+        current.userTimeZone = payload.timeZoneId;
         commit(types.USER_INFO_UPDATED, current);
+        Settings.defaultZone = current.userTimeZone;
         showToast(translate("Time zone updated successfully"));
       }
     },

src/utils/index.ts

@@ -1,5 +1,6 @@
 import { toastController } from '@ionic/vue';
-
+import store from '@/store';
+import { DateTime } from "luxon";
 // TODO Use separate files for specific utilities
 
 // TODO Remove it when HC APIs are fully REST compliant
@@ -16,5 +17,12 @@ const showToast = async (message: string) => {
         })
       return toast.present();
 }
+const handleDateTimeInput = (dateTimeValue: any) => {
+  // TODO Handle it in a better way
+  // Remove timezone and then convert to timestamp
+  // Current date time picker picks browser timezone and there is no supprt to change it
+  const dateTime = DateTime.fromISO(dateTimeValue, { setZone: true}).toFormat("yyyy-MM-dd'T'HH:mm:ss")
+  return DateTime.fromISO(dateTime).toMillis()
+}
 
-export { showToast, hasError }
+export { handleDateTimeInput, showToast, hasError }

src/views/orders.vue

@@ -131,7 +131,7 @@
               </ion-item>
               <ion-item lines="full">
                 <ion-label>{{ $t("Promised date") }}</ion-label>
-                <p slot="end"> {{ item.promisedDatetime ? $filters.formatUtcDate(item.promisedDatetime, 'YYYY-MM-DDTHH:mm:ssZ') : '-'  }}</p>
+                <p slot="end"> {{ item.promisedDatetime ? $filters.formatUtcDate(item.promisedDatetime, "yyyy-MM-dd'T'HH:mm:ss'Z'") : '-'  }}</p>
               </ion-item>
               <ion-item button @click="item.isChecked = !item.isChecked" lines="none">
                 <ion-checkbox :modelValue="item.isChecked" @ionChange="selectItem($event, item)" slot="start"></ion-checkbox>

src/views/product-details.vue

@@ -206,9 +206,9 @@ import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { ProductService } from '@/services/ProductService'
-import moment from 'moment';
 import Image from '@/components/Image.vue';
 import { sizeIndex } from "@/apparel-sorter"
+import { DateTime } from 'luxon';
 
 export default defineComponent({
   name: "product-details",
@@ -307,14 +307,14 @@ export default defineComponent({
         filters: [ "parentProductId: " + this.$route.params.id, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ] as any
       }
       if (this.orderedBefore || this.orderedAfter) {
-        const orderedBefore = (this.orderedBefore ? moment.tz(this.orderedBefore, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz(moment(), this.userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        const orderedAfter = (this.orderedAfter ? moment.tz(this.orderedAfter, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', this.userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        const orderedBefore = this.orderedBefore ? DateTime.fromFormat(this.orderedBefore, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.now().setZone(this.userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+        const orderedAfter = this.orderedAfter ? DateTime.fromFormat(this.orderedAfter, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.fromFormat("0001-01-01", "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
         const dateQuery: any = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
         payload.filters.push(dateQuery);
       }
       if (this.promisedBefore || this.promisedAfter) {
-        const promisedBefore = (this.promisedBefore ? moment.tz(this.promisedBefore, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz(moment(), this.userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        const promisedAfter = (this.promisedAfter ? moment.tz(this.promisedAfter, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', this.userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        const promisedBefore = this.promisedBefore ? DateTime.fromFormat(this.promisedBefore, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.now().setZone(this.userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+        const promisedAfter = this.promisedAfter ? DateTime.fromFormat(this.promisedAfter, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'") : DateTime.fromFormat("0001-01-01", "yyyy-MM-dd").setZone(this.userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
         const promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
         payload.filters.push(promisedDateQuery);
       }
@@ -485,14 +485,14 @@ export default defineComponent({
           sortBy: sortBy
         }
         if (this.orderedBefore || this.orderedAfter) {
-          const orderedBefore = (this.orderedBefore ? moment.tz(this.orderedBefore, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz(moment(), this.userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-          const orderedAfter = (this.orderedAfter ? moment.tz(this.orderedAfter, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', this.userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+          const orderedBefore = this.orderedBefore ? DateTime.fromFormat(this.orderedBefore, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone) : DateTime.now().setZone(this.userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+          const orderedAfter = this.orderedAfter ? DateTime.fromFormat(this.orderedAfter, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone) : DateTime.fromFormat("0001-01-01", 'yyyy-MM-dd').setZone(this.userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
           const dateQuery: any = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
           payload.filters.push(dateQuery);
         }
         if (this.promisedBefore || this.promisedAfter) {
-          const promisedBefore = (this.promisedBefore ? moment.tz(this.promisedBefore, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz(moment(), this.userProfile.userTimeZone)).endOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-          const promisedAfter = (this.promisedAfter ? moment.tz(this.promisedAfter, 'YYYY-MM-DD', this.userProfile.userTimeZone) : moment.tz("0001-01-01", 'YYYY-MM-DD', this.userProfile.userTimeZone)).startOf('day').utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+          const promisedBefore = this.promisedBefore ? DateTime.fromFormat(this.promisedBefore, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone) : DateTime.now().setZone(this.userProfile.userTimeZone).endOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
+          const promisedAfter = this.promisedAfter ? DateTime.fromFormat(this.promisedAfter, "yyyy-MM-dd").setZone(this.userProfile.userTimeZone) : DateTime.fromFormat("0001-01-01", 'yyyy-MM-dd').setZone(this.userProfile.userTimeZone).startOf('day').toUTC().toFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
           const promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
           payload.filters.push(promisedDateQuery);
         }

src/views/promise-date-modal.vue

@@ -45,7 +45,7 @@ import {
 import { defineComponent } from "vue";
 import { closeOutline, calendar, save} from "ionicons/icons";
 import { useStore } from "@/store";
-import moment from "moment";
+import { DateTime } from 'luxon'
 import { mapGetters } from "vuex";
 
 export default defineComponent({
@@ -57,7 +57,7 @@ export default defineComponent({
       getSelectedItemsToUpdatePromiseDate: 'order/getSelectedItemsToUpdatePromiseDate',
     }),
     disableUpdate(): boolean {
-      return this.promisedDatetime === '' || (this.item && this.item.promisedDatetime && moment(this.item.promisedDatetime, "YYYY-MM-DD hh:mm:ss.SSS").format("YYYY-MM-DD") === this.promisedDatetime) ;
+      return this.promisedDatetime === '' || (this.item && this.item.promisedDatetime && DateTime.fromFormat(this.item.promisedDatetime, "yyyy-MM-dd hh:mm:ss.SSS").toFormat("yyyy-MM-dd") === this.promisedDatetime);
     }
   },
   methods: {
@@ -88,7 +88,7 @@ export default defineComponent({
     },
     async updatePromiseDateItems() {
       // TODO Handle timezone
-      const promisedDatetime = moment(this.promisedDatetime).endOf("day").format("YYYY-MM-DD HH:mm:ss.SSS")
+      const promisedDatetime = DateTime.fromFormat(this.promisedDatetime, "yyyy-MM-dd").endOf("day").toFormat("yyyy-MM-dd HH:mm:ss.SSS")
       const items = this.getSelectedItemsToUpdatePromiseDate(promisedDatetime);
       const json = JSON.stringify(items);
       const blob = new Blob([json], { type: 'application/json'});
@@ -104,7 +104,7 @@ export default defineComponent({
       })
     },
     async updatePromisedDateItem () {
-      const promisedDatetime = moment(this.promisedDatetime).endOf("day").format("YYYY-MM-DD HH:mm:ss.SSS")
+      const promisedDatetime = DateTime.fromFormat(this.promisedDatetime, "yyyy-MM-dd").endOf("day").toFormat("yyyy-MM-dd HH:mm:ss.SSS")
       return this.store.dispatch("order/updatePromiseDateItem", {
           orderId: this.item.orderId,
           orderItemSeqId: this.item.orderItemSeqId,
@@ -115,7 +115,7 @@ export default defineComponent({
   },
   beforeMount() {
     // TODO Set current date
-    if (this.item && this.item.promisedDatetime) this.promisedDatetime = moment(this.item.promisedDatetime).format("YYYY-MM-DD")
+    if (this.item && this.item.promisedDatetime) this.promisedDatetime = DateTime.fromISO(this.item.promisedDatetime).toFormat("yyyy-MM-dd")
   },
   setup() {
    const store = useStore();

src/views/settings.vue

@@ -205,7 +205,4 @@ export default defineComponent({
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   }
-  hr {
-    border-top: 1px solid var(--ion-color-medium);
-  }
 </style>