Implemented: logic to highlight the selected mapping chip (hotwax#295)

amansinghbais · Jul 10, 2024 · 282cc28 · 282cc28
1 parent 5850a30
commit 282cc28
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
@@ -109,8 +109,8 @@ export default defineComponent({
       const fields = process.env["VUE_APP_MAPPING_" + this.mappingType];
       return fields ? JSON.parse(fields) : {};
     },
-    closeModal() {
-      modalController.dismiss({ dismissed: true });
+    closeModal(mappingId = "") {
+      modalController.dismiss({ dismissed: true, mappingId });
     },
     async saveMapping() {
       if(!this.mappingName) {
@@ -123,7 +123,7 @@ export default defineComponent({
       }
       const id = this.generateUniqueMappingPrefId();
       await this.store.dispatch("user/createFieldMapping", { id, name: this.mappingName, value: this.fieldMapping, mappingType: this.mappingType })
-      this.closeModal();
+      this.closeModal(id);
     },
     areAllFieldsSelected() {
       return Object.values(this.fieldMapping).every(field => field !== "");

diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
@@ -23,7 +23,7 @@
               <ion-icon :icon="addOutline" />
               <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
-            <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('RSTINV') ?? []" :key="index" @click="mapFields(mapping)" outline="true">
+            <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('RSTINV') ?? []" :key="index" @click="mapFields(mapping, index)" :outline="selectedMappingId != index">
               {{ mapping.name }}
             </ion-chip>
           </div>
@@ -95,6 +95,7 @@ export default defineComponent({
       fileColumns: [],
       fields: process.env["VUE_APP_MAPPING_RSTINV"] ? JSON.parse(process.env["VUE_APP_MAPPING_RSTINV"]) : {},
       identificationTypeId: "SHOPIFY_PROD_SKU",
+      selectedMappingId: ""
     }
   },
   computed: {
@@ -116,7 +117,7 @@ export default defineComponent({
     this.store.dispatch('util/fetchGoodIdentificationTypes');
   },
   methods: {
-    mapFields(mapping) {
+    mapFields(mapping, mappingId) {
       const fieldMapping = JSON.parse(JSON.stringify(mapping));
 
       // TODO: Store an object in this.content variable, so everytime when accessing it, we don't need to use 0th index
@@ -134,6 +135,7 @@ export default defineComponent({
         }
       })
       this.fieldMapping = fieldMapping.value;
+      this.selectedMappingId = mappingId;
     },
     async parse(event) {
       const file = event.target.files[0];
@@ -179,6 +181,13 @@ export default defineComponent({
         component: CreateMappingModal,
         componentProps: { content: this.content, seletedFieldMapping: this.fieldMapping, mappingType: 'RSTINV'}
       });
+
+      createMappingModal.onDidDismiss().then((result) => {
+        if(result.data?.mappingId) {
+          this.selectedMappingId = result.data.mappingId
+        }
+      })
+
       return createMappingModal.present();
     }
   },

diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue
@@ -23,7 +23,7 @@
               <ion-icon :icon="addOutline" />
               <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
-            <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('PO') ?? []" :key="index" @click="mapFields(mapping)" outline="true">
+            <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('PO') ?? []" :key="index" @click="mapFields(mapping, index)" :outline="selectedMappingId != index">
               {{ mapping.name }}
             </ion-chip>
           </div>
@@ -91,7 +91,8 @@ export default defineComponent({
         content: [],
         fieldMapping: {},
         fileColumns: [],
-        fields: process.env["VUE_APP_MAPPING_PO"] ? JSON.parse(process.env["VUE_APP_MAPPING_PO"]) : {}
+        fields: process.env["VUE_APP_MAPPING_PO"] ? JSON.parse(process.env["VUE_APP_MAPPING_PO"]) : {},
+        selectedMappingId: ""
       }
     },
     ionViewDidEnter() {
@@ -142,7 +143,7 @@ export default defineComponent({
           name:'PurchaseOrderReview'
         })
       },
-      mapFields(mapping) {
+      mapFields(mapping, mappingId) {
         const fieldMapping = JSON.parse(JSON.stringify(mapping));
 
         // TODO: Store an object in this.content variable, so everytime when accessing it, we don't need to use 0th index
@@ -160,6 +161,7 @@ export default defineComponent({
           }
         })
         this.fieldMapping = fieldMapping.value;
+        this.selectedMappingId = mappingId;
       },
       areAllFieldsSelected() {
         return Object.values(this.fieldMapping).every(field => field !== "");
@@ -169,6 +171,13 @@ export default defineComponent({
           component: CreateMappingModal,
           componentProps: { content: this.content, seletedFieldMapping: this.fieldMapping, mappingType: 'PO'}
         });
+
+        createMappingModal.onDidDismiss().then((result) => {
+          if(result.data?.mappingId) {
+            this.selectedMappingId = result.data.mappingId
+          }
+        })
+
         return createMappingModal.present();
       }
     },

diff --git a/src/views/ScheduledRestock.vue b/src/views/ScheduledRestock.vue
@@ -23,7 +23,7 @@
               <ion-icon :icon="addOutline" />
               <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
-            <ion-chip :disabled="!this.content.length" outline="true" v-for="(mapping, index) in fieldMappings('RSTSTK') ?? []" :key="index" @click="mapFields(mapping)"> 
+            <ion-chip :disabled="!this.content.length" :outline="selectedMappingId != index" v-for="(mapping, index) in fieldMappings('RSTSTK') ?? []" :key="index" @click="mapFields(mapping, index)"> 
               {{ mapping.name }}
             </ion-chip>
           </div>
@@ -187,6 +187,7 @@ export default defineComponent({
       isUpdateDateTimeModalOpen: false,
       shopId: '',
       currentJob: {},
+      selectedMappingId: ""
     }
   },
   computed: {
@@ -305,7 +306,7 @@ export default defineComponent({
         logger.error(err)
       }
     },
-    mapFields(mapping) {
+    mapFields(mapping, mappingId) {
       const fieldMapping = JSON.parse(JSON.stringify(mapping));
 
       // TODO: Store an object in this.content variable, so everytime when accessing it, we don't need to use 0th index
@@ -323,6 +324,7 @@ export default defineComponent({
         }
       })
       this.fieldMapping = fieldMapping.value;
+      this.selectedMappingId = mappingId;
     },
     async parse(event) {
       const file = event.target.files[0];
@@ -387,6 +389,13 @@ export default defineComponent({
         component: CreateMappingModal,
         componentProps: { content: this.content, seletedFieldMapping: this.fieldMapping, mappingType: 'RSTSTK'}
       });
+
+      createMappingModal.onDidDismiss().then((result) => {
+        if(result.data?.mappingId) {
+          this.selectedMappingId = result.data.mappingId
+        }
+      })
+
       return createMappingModal.present();
     },
     async updateProductStore(productStoreId) {