Merge branch 'main' of https://github.com/hotwax/inventory-count into…

… #85zrhn8w8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inventory-count",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "description": "HotWax Commece Inventory Count App",
   "scripts": {
@@ -24,9 +24,8 @@
     "axios-cache-adapter": "^2.7.3",
     "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-barcode-reader": "^1.0.0",
@@ -39,6 +38,7 @@
     "@capacitor/cli": "^2.4.7",
     "@intlify/vue-i18n-loader": "^2.1.0",
     "@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",

release-notes.md

@@ -1,3 +1,12 @@
+# Release 1.3.0
+
+## What's Changed
+* Added hotwax-apps-theme package(#85zrj08rb) by @disha1202 in https://github.com/hotwax/inventory-count/pull/136
+* Implemented: Updated UI of Settings page(#32j3r6t) by @adityasharma7 in https://github.com/hotwax/inventory-count/pull/141 and by @shashwatbangar in https://github.com/hotwax/inventory-count/pull/123
+* Updated code to disable the upload button when no products to upload (#85zrjcac7) by @k2maan in https://github.com/hotwax/inventory-count/pull/142
+
+**Full Changelog**: https://github.com/hotwax/inventory-count/compare/v1.2.0...v1.3.0
+
 # Release 1.2.0
 
 ## What's Changed

src/components/ProductListItem.vue

@@ -33,6 +33,7 @@ export default defineComponent({
   props: ["product"],
   methods: {
     async viewProduct () {
+      await this.store.dispatch("product/updateCurrentProduct", this.product.sku)
       this.router.push({ path: `/count/${this.product.sku}` })
     }
   },

src/locales/en.json

@@ -1,5 +1,7 @@
 {
+  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Cancel": "Cancel",
+  "Change": "Change",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Confirm": "Confirm",
   "Count": "Count",
@@ -15,6 +17,7 @@
   "Location": "Location",
   "Login": "Login",
   "Logout": "Logout",
+  "No time zone found": "No time zone found",
   "Ok": "Ok",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
@@ -24,7 +27,9 @@
   "Save":"Save",
   "Scan": "Scan",
   "Search": "Search",
+  "Search time zones": "Search time zones",
   "Select facility": "Select facility",
+  "Select time zone": "Select time zone",
   "Settings": "Settings",
   "Shopify Config": "Shopify Config",
   "Something went wrong": "Something went wrong",
@@ -34,7 +39,11 @@
   "store name":"store name",
   "Results": "Results",
   "The products in the upload list will be removed.": "The products in the upload list will be removed.",
+  "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
+  "Timezone": "Timezone",
+  "Time zone updated successfully": "Time zone updated successfully",
+  "Update time zone": "Update time zone",
   "Upload": "Upload",
   "Username": "Username",
   "View": "View"

src/main.ts

@@ -1,15 +1,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router';
-import moment from 'moment'
-import "moment-timezone";
+import { DateTime } from 'luxon';
 
 
 import { IonicVue } from '@ionic/vue';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/vue/css/core.css';
-import '@hotwax/apps-theme';
 
 /* Basic CSS for apps built with Ionic */
 import '@ionic/vue/css/normalize.css';
@@ -26,6 +24,7 @@ import '@ionic/vue/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import '@hotwax/apps-theme';
 
 import i18n from './i18n'
 import store from './store'
@@ -40,17 +39,17 @@ 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?: any, outFormat?: string) {
+    if(inFormat){
+      return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
+    }
+    return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
   },
-  formatUtcDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Use Loxon instead
+  formatUtcDate(value: any, inFormat?: any, outFormat?: string) {
     // 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')  
   },
   getFeature(featureHierarchy: any, featureKey: string) {
     let  featureValue = ''

src/store/modules/product/actions.ts

@@ -20,8 +20,7 @@ const actions: ActionTree<ProductState, RootState> = {
 
     try {
       resp = await ProductService.fetchProducts({
-        // used sku as we are currently only using sku to search for the product
-        "filters": ['sku: ' + payload.queryString, 'isVirtual: false'],
+        "filters": [`sku: ${payload.queryString} OR upc: ${payload.queryString}`,'isVirtual: false'],
         "viewSize": payload.viewSize,
         "viewIndex": payload.viewIndex
       })

src/store/modules/user/actions.ts

@@ -5,9 +5,8 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
-import moment from 'moment';
 import emitter from '@/event-bus'
-import "moment-timezone";
+import { DateTime, Settings } from 'luxon';
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -83,7 +82,10 @@ const actions: ActionTree<UserState, RootState> = {
   async getProfile ( { commit }) {
     const resp = await UserService.getProfile()
     if (resp.status === 200) {
-      const localTimeZone = moment.tz.guess();
+      if (resp.data.userTimeZone) {
+        Settings.defaultZone = resp.data.userTimeZone;
+      }
+      const localTimeZone = DateTime.local().zoneName;
       if (resp.data.userTimeZone !== localTimeZone) {
         emitter.emit('timeZoneDifferent', { profileTimeZone: resp.data.userTimeZone, localTimeZone});
       }
@@ -99,8 +101,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,4 +1,5 @@
 import { toastController } from '@ionic/vue';
+import { DateTime } from "luxon";
 
 // TODO Use separate files for specific utilities
 
@@ -25,4 +26,12 @@ const showToast = async (message: string, configButtons?: any) => {
   return toast.present();
 }
 
-export { showToast, hasError }
+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, handleDateTimeInput }

src/views/Search.vue

@@ -6,7 +6,7 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="$t('Search')" v-on:keyup.enter="queryString = $event.target.value; getProducts()"/>
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="$t('Search')" @keyup.enter="queryString = $event.target.value; searchProducts()"/>
 
       <ion-list v-if="products.length > 0">
         <ion-list-header>{{ $t("Results") }}</ion-list-header>
@@ -95,12 +95,13 @@ export default defineComponent({
       const modal = await modalController
         .create({
           component: Scanner,
+          backdropDismiss: false
         });
         modal.onDidDismiss()
         .then((result) => {
           //result : value of the scanned barcode/QRcode
-          if(result.role){
-            this.queryString = result.role
+          if (result.role) {
+            this.queryString = result.role;
             this.getProducts(process.env.VUE_APP_VIEW_SIZE, 0);
           }
         });
@@ -112,20 +113,24 @@ export default defineComponent({
       })
     },
     async loadMoreProducts (event: any) {
-      this.getProducts(
+      this.searchProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
       ).then(() => {
         event.target.complete();
       })
     },
-    async getProducts(vSize: any, vIndex: any) {
+    async searchProducts(vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
       const viewIndex = vIndex ? vIndex : 0;
+      const queryString = '*' + this.queryString + '*';
+      this.getProducts(viewSize, viewIndex, queryString);
+    },
+    async getProducts(vSize?: any, vIndex?: any, queryString?: string) {
       const payload = {
-        viewSize,
-        viewIndex,
-        queryString: '*' + this.queryString + '*'
+        viewSize: vSize,
+        viewIndex: vIndex,
+        queryString: queryString ? queryString : this.queryString,
       }
       if (this.queryString) {
         await this.store.dispatch("product/findProduct", payload);

src/views/Settings.vue

@@ -44,7 +44,6 @@
             <ion-icon slot="end" :icon="openOutline" />
           </ion-button>
         </ion-card>
-
         <ion-card>
           <ion-card-header>
             <ion-card-title>
@@ -62,28 +61,43 @@
           </ion-item>
         </ion-card>
       </section>
-
       <hr />
-
       <div class="section-header">
         <h1>
           {{ $t('App') }}
           <p class="overline" >{{ "Version: " + appVersion }}</p>
         </h1>
         <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
       </div>
+      <section>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ $t('Timezone') }}
+            </ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            {{ $t('The timezone you select is used to ensure automations you schedule are always accurate to the time you select.') }}
+          </ion-card-content>
+          <ion-item lines="none">
+            <ion-label> {{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }} </ion-label>
+            <ion-button @click="changeTimeZone()" slot="end" fill="outline" color="dark">{{ $t("Change") }}</ion-button>
+          </ion-item>
+        </ion-card>
+      </section>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
-import { alertController, IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar } from '@ionic/vue';
+import { alertController, IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOutline, openOutline} from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import Image from '@/components/Image.vue'
 import { DateTime } from 'luxon';
+import TimeZoneModal from '@/views/TimezoneModal.vue';
 
 export default defineComponent({
   name: 'Settings',
@@ -151,6 +165,12 @@ export default defineComponent({
       });
       await alert.present();
     },
+    async changeTimeZone() {
+      const timeZoneModal = await modalController.create({
+        component: TimeZoneModal,
+      });
+      return timeZoneModal.present();
+    },
     logout () {
       if (Object.keys(this.uploadProducts).length > 0) {
         this.presentAlert();
@@ -201,9 +221,6 @@ section {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 }
-hr {
-  border-top: 1px solid var(--ion-color-medium);
-}
 .section-header {
   display: flex;
   justify-content: space-between;