From eec7e0e904a7fb9d61ee0869018c6816786d6b87 Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Fri, 31 Dec 2021 17:41:20 +0530
Subject: [PATCH 1/7] Implemented the logic to apply filters(1xc2eqg)

---
 src/views/product-details.vue | 55 +++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 47fe6aeb3..01a5c7751 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -33,7 +33,7 @@
               <ion-list-header>{{ $t("Colors") }}</ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filterColor(colorFeature)"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -41,7 +41,7 @@
               <ion-list-header>{{ $t("Sizes") }} </ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filterSize(sizeFeature)"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -253,7 +253,8 @@ export default defineComponent({
       selectedVariants: {} as any,
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
-      hasPromisedDate: true
+      hasPromisedDate: true,
+      allVariants: this.current
     }
   },
   computed: {
@@ -268,6 +269,54 @@ export default defineComponent({
     })
   },
   methods: {
+    filterSize(size: any){
+      let products = [] as any;
+      this.current.list.items.forEach((x: any)=>{
+       products.push(this.getProduct(x.groupValue));
+      })
+      const FilteredProducts =[] as any;
+      
+      products = products.filter((product: any)=>{
+        return product.productFeatures.includes("Size/" + size);
+         
+        })
+        console.log(products);
+        this.current.list.items.forEach((x: any)=>{
+          products.forEach((product: any)=>{
+          
+          if(x.groupValue == product.productId)
+          FilteredProducts.push(x);
+        })
+          
+        })
+      this.current.list.items = FilteredProducts;
+
+    },
+    filterColor(color: any){
+      console.log(this.current.list.items)
+      let products = [] as any;
+      this.current.list.items.forEach((x: any)=>{
+       products.push(this.getProduct(x.groupValue));
+      })
+      const FilteredProducts =[] as any;
+      
+      products = products.filter((product: any)=>{
+        return product.productFeatures.includes("Color/" + color);
+         
+        })
+        console.log(products);
+        this.current.list.items.forEach((x: any)=>{
+          products.forEach((product: any)=>{
+          
+          if(x.groupValue == product.productId)
+          FilteredProducts.push(x);
+        })
+          
+        })
+      this.current.list.items = FilteredProducts;
+     console.log(FilteredProducts);
+     console.log(this.current.list.items);
+    },
     async getVariantProducts() {
       const payload = {
         groupByField: 'productId',

From 4b94ac9f83aeed36a9ef0dbebd8dc7a747931b3e Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Mon, 3 Jan 2022 18:58:57 +0530
Subject: [PATCH 2/7] Improved the logic to show products variant on the basis
 of the selected attribute(#1xc2eqg)

---
 src/views/product-details.vue | 136 ++++++++++++++++++----------------
 1 file changed, 72 insertions(+), 64 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 01a5c7751..370680562 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -116,7 +116,7 @@
 
       <!-- Variant -->
       <div v-else>
-        <ion-card  v-bind:key="item.groupValue" v-for="item in current.list.items">
+        <ion-card  v-bind:key="item.groupValue" v-for="item in filteredProducts.list.items">
           <div class="variant-info">
             <ion-item lines="none">
               <ion-thumbnail slot="start">
@@ -161,7 +161,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script>
 import {
   IonBadge,
   IonButton,
@@ -249,12 +249,12 @@ export default defineComponent({
       orderedBefore: '',
       promisedAfter: '',
       promisedBefore: '',
-      selectedItems: [] as any,
-      selectedVariants: {} as any,
+      selectedItems: [],
+      selectedVariants: {},
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
       hasPromisedDate: true,
-      allVariants: this.current
+      filteredProducts:{}
     }
   },
   computed: {
@@ -265,74 +265,82 @@ export default defineComponent({
       isJobPending: 'job/isJobPending',
       jobTotal: 'job/getTotal',
       userProfile: 'user/getUserProfile',
-      selectedBrand: 'user/getSelectedBrand'
-    })
+      selectedBrand: 'user/getSelectedBrand',
+    }),
+  },
+  mounted(){
+    this.filteredProducts = Object.create(this.current);
+    console.log(this.filteredProducts);
   },
   methods: {
-    filterSize(size: any){
-      let products = [] as any;
-      this.current.list.items.forEach((x: any)=>{
+   
+    filterSize(size){
+      let click =0;
+      
+      let products = [];
+      this.current.list.items.forEach((x)=>{
        products.push(this.getProduct(x.groupValue));
       })
-      const FilteredProducts =[] as any;
       
-      products = products.filter((product: any)=>{
-        return product.productFeatures.includes("Size/" + size);
-         
-        })
-        console.log(products);
-        this.current.list.items.forEach((x: any)=>{
-          products.forEach((product: any)=>{
-          
-          if(x.groupValue == product.productId)
-          FilteredProducts.push(x);
-        })
-          
+      products = products.filter((product)=>{
+        return product.productFeatures.includes("Size/" + size);  
+      })
+      console.log(products);
+      this.current.list.items.forEach((x)=>{
+        products.forEach((product)=>{
+        if(x.groupValue == product.productId){
+          if(click ==0){
+            this.filteredProducts.list.items = [];
+            click++;
+          }
+          this.filteredProducts.list.items.push(x);
+        }
         })
-      this.current.list.items = FilteredProducts;
-
-    },
-    filterColor(color: any){
-      console.log(this.current.list.items)
-      let products = [] as any;
-      this.current.list.items.forEach((x: any)=>{
-       products.push(this.getProduct(x.groupValue));
       })
-      const FilteredProducts =[] as any;
+      console.log(this.current.list.items)
+       
+    },
+    // filterColor(color: any){
+    //   console.log(this.current.list.items)
+    //   let products = [] as any;
+    //   this.current.list.items.forEach((x: any)=>{
+    //    products.push(this.getProduct(x.groupValue));
+    //   })
+    //   const FilteredProducts =[] as any;
       
-      products = products.filter((product: any)=>{
-        return product.productFeatures.includes("Color/" + color);
+    //   products = products.filter((product: any)=>{
+    //     return product.productFeatures.includes("Color/" + color);
          
-        })
-        console.log(products);
-        this.current.list.items.forEach((x: any)=>{
-          products.forEach((product: any)=>{
+    //     })
+    //     console.log(products);
+    //     this.current.list.items.forEach((x: any)=>{
+    //       products.forEach((product: any)=>{
           
-          if(x.groupValue == product.productId)
-          FilteredProducts.push(x);
-        })
+    //       if(x.groupValue == product.productId)
+    //       FilteredProducts.push(x);
+    //     })
           
-        })
-      this.current.list.items = FilteredProducts;
-     console.log(FilteredProducts);
-     console.log(this.current.list.items);
-    },
+    //     })
+    //   this.current.list.items = FilteredProducts;
+    //  console.log(FilteredProducts);
+    //  console.log(this.current.list.items);
+    // },
     async getVariantProducts() {
       const payload = {
         groupByField: 'productId',
         groupLimit: 0,
-        filters: [ "parentProductId: " + this.$route.params.id, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ] as any
+        filters: [ "parentProductId: " + this.$route.params.id, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ]
       }
       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 dateQuery: any = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
+        const dateQuery = '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 promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
+        const promisedDateQuery = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
         payload.filters.push(promisedDateQuery);
       }
       if (this.cusotmerLoyalty) {
@@ -358,7 +366,7 @@ export default defineComponent({
       return alert.present();
     },
     async releaseAlert() {
-      const itemCount = Object.keys(this.selectedVariants).reduce( (count: number, productId: any) => {
+      const itemCount = Object.keys(this.selectedVariants).reduce( (count, productId) => {
         return count + parseInt(this.selectedVariants[productId]);
       }, 0)
       const message = (this.jobTotal > 0 ? (this.jobTotal === 1 ? this.$t("There is a job already pending.")  : this.$t("There are jobs already pending.",  { count: this.jobTotal })) + " " : "") + this.$t(
@@ -385,7 +393,7 @@ export default defineComponent({
       return alert.present();
     },
     async cancelAlert() {
-      const itemCount = Object.keys(this.selectedVariants).reduce( (count: number, productId: any) => {
+      const itemCount = Object.keys(this.selectedVariants).reduce( (count, productId) => {
         return count + parseInt(this.selectedVariants[productId]);
       }, 0);
       const message = (this.jobTotal > 0 ? (this.jobTotal === 1 ? this.$t("There is a job already pending.")  : this.$t("There are jobs already pending.",  { count: this.jobTotal })) + " " : "") + this.$t(
@@ -429,7 +437,7 @@ export default defineComponent({
       });
       return bgjobmodal.present();
     },
-    selectVariant(productId: string, quantity: string) {
+    selectVariant(productId, quantity) {
       if (quantity) {
         this.selectedVariants[productId] = quantity;
       } else {
@@ -438,9 +446,9 @@ export default defineComponent({
     },
     async releaseItems() {
       const selectedItemsResponse = await this.processSelectedVaiants("orderDate ASC");
-      let selectedItems = [] as any;
-      selectedItemsResponse.forEach((response: any) => {
-          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item: any) => {
+      let selectedItems = [];
+      selectedItemsResponse.forEach((response) => {
+          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item) => {
             return {
               orderId: item.orderId,
               orderItemSeqId: item.orderItemSeqId,
@@ -467,9 +475,9 @@ export default defineComponent({
     },
     async cancelItems() {
       const selectedItemsResponse = await this.processSelectedVaiants("orderDate DESC");
-      let selectedItems = [] as any;
-      selectedItemsResponse.forEach((response: any) => {
-          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item: any) => {
+      let selectedItems = [];
+      selectedItemsResponse.forEach((response) => {
+          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item) => {
             return {
               orderId: item.orderId,
               orderItemSeqId: item.orderItemSeqId
@@ -492,25 +500,25 @@ export default defineComponent({
         this.store.dispatch("order/removeItems", { items: selectedItems });
       })
     },
-    async processSelectedVaiants(sortBy: string) {
-      const variantRequests: any = [];
-      Object.keys(this.selectedVariants).forEach((productId: any) => {
+    async processSelectedVaiants(sortBy) {
+      const variantRequests = [];
+      Object.keys(this.selectedVariants).forEach((productId) => {
         const payload = {
           groupByField: 'productId',
           groupLimit: this.selectedVariants[productId],
-          filters: [ "productId:" + productId, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ] as any,
+          filters: [ "productId:" + productId, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ],
           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 dateQuery: any = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
+          const dateQuery = '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 promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
+          const promisedDateQuery = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
           payload.filters.push(promisedDateQuery);
         }
         if (this.cusotmerLoyalty) {

From cd420033546ebffb80788b268a4955c321c1b303 Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Tue, 4 Jan 2022 17:29:57 +0530
Subject: [PATCH 3/7] Improved the logic to show product variants on the basis
 of the selected attribute(#1xc2eqg)

---
 src/views/product-details.vue | 87 +++++++++++++----------------------
 1 file changed, 31 insertions(+), 56 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 370680562..0c3fa3c2f 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -254,7 +254,10 @@ export default defineComponent({
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
       hasPromisedDate: true,
-      filteredProducts:{}
+      filter:{
+        color: [],
+        size: []
+      }
     }
   },
   computed: {
@@ -267,64 +270,36 @@ export default defineComponent({
       userProfile: 'user/getUserProfile',
       selectedBrand: 'user/getSelectedBrand',
     }),
-  },
-  mounted(){
-    this.filteredProducts = Object.create(this.current);
-    console.log(this.filteredProducts);
+    filteredProducts () {
+      const filteredProducts = JSON.parse(JSON.stringify(this.current));
+      if(this.filter.size.length || this.filter.color.length){
+        filteredProducts.list.items = [];
+        filteredProducts.list.items = this.current.list.items.map((item)=>{
+          const product = this.getProduct(item.groupValue);
+          const hasSize = this.filter.size.some((sizeFeature) => {
+            return product.productFeatures.includes("Size/" + sizeFeature)
+          })
+          const hasColor = this.filter.color.some((colorFeature) => {
+            return product.productFeatures.includes("Color/" + colorFeature)
+          })
+          console.log("Has size", hasSize, "Has color", hasColor);
+          console.log("item", item)
+          if (hasSize || hasColor) return item;
+          else return null
+        }).filter(product => product);
+      }
+      return filteredProducts;
+    }
   },
   methods: {
-   
-    filterSize(size){
-      let click =0;
-      
-      let products = [];
-      this.current.list.items.forEach((x)=>{
-       products.push(this.getProduct(x.groupValue));
-      })
-      
-      products = products.filter((product)=>{
-        return product.productFeatures.includes("Size/" + size);  
-      })
-      console.log(products);
-      this.current.list.items.forEach((x)=>{
-        products.forEach((product)=>{
-        if(x.groupValue == product.productId){
-          if(click ==0){
-            this.filteredProducts.list.items = [];
-            click++;
-          }
-          this.filteredProducts.list.items.push(x);
-        }
-        })
-      })
-      console.log(this.current.list.items)
-       
+    filterSize (size) {
+      this.filter.size.push(size);
+      console.log(this.filteredProducts);
+    },
+    filterColor (color) {
+      this.filter.color.push(color);
+      console.log(this.filteredProducts);
     },
-    // filterColor(color: any){
-    //   console.log(this.current.list.items)
-    //   let products = [] as any;
-    //   this.current.list.items.forEach((x: any)=>{
-    //    products.push(this.getProduct(x.groupValue));
-    //   })
-    //   const FilteredProducts =[] as any;
-      
-    //   products = products.filter((product: any)=>{
-    //     return product.productFeatures.includes("Color/" + color);
-         
-    //     })
-    //     console.log(products);
-    //     this.current.list.items.forEach((x: any)=>{
-    //       products.forEach((product: any)=>{
-          
-    //       if(x.groupValue == product.productId)
-    //       FilteredProducts.push(x);
-    //     })
-          
-    //     })
-    //   this.current.list.items = FilteredProducts;
-    //  console.log(FilteredProducts);
-    //  console.log(this.current.list.items);
-    // },
     async getVariantProducts() {
       const payload = {
         groupByField: 'productId',

From ad4ad80c53fa3587fb631996eee5e45d8a481e1c Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Tue, 4 Jan 2022 17:43:35 +0530
Subject: [PATCH 4/7] Updated the code and added a changelog(#1xc2eqg)

---
 changelogs/unreleased/-1xc2eqg.yml |  6 ++++
 src/views/product-details.vue      | 54 +++++++++++++++---------------
 2 files changed, 33 insertions(+), 27 deletions(-)
 create mode 100644 changelogs/unreleased/-1xc2eqg.yml

diff --git a/changelogs/unreleased/-1xc2eqg.yml b/changelogs/unreleased/-1xc2eqg.yml
new file mode 100644
index 000000000..0850dc886
--- /dev/null
+++ b/changelogs/unreleased/-1xc2eqg.yml
@@ -0,0 +1,6 @@
+---
+title: Implemented logic to show product variants on the basis of the selected attribute(#1xc2eqg)
+ticket_id: "#1xc2eqg"
+merge_request: 34
+author: Disha
+type: added
diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 0c3fa3c2f..c65c90fa9 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -161,7 +161,7 @@
   </ion-page>
 </template>
 
-<script>
+<script lang="ts">
 import {
   IonBadge,
   IonButton,
@@ -249,14 +249,14 @@ export default defineComponent({
       orderedBefore: '',
       promisedAfter: '',
       promisedBefore: '',
-      selectedItems: [],
-      selectedVariants: {},
+      selectedItems: [] as any,
+      selectedVariants: {} as any,
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
       hasPromisedDate: true,
       filter:{
-        color: [],
-        size: []
+        color: [] as any,
+        size: [] as any
       }
     }
   },
@@ -274,29 +274,29 @@ export default defineComponent({
       const filteredProducts = JSON.parse(JSON.stringify(this.current));
       if(this.filter.size.length || this.filter.color.length){
         filteredProducts.list.items = [];
-        filteredProducts.list.items = this.current.list.items.map((item)=>{
+        filteredProducts.list.items = this.current.list.items.map((item: any)=>{
           const product = this.getProduct(item.groupValue);
-          const hasSize = this.filter.size.some((sizeFeature) => {
+          const hasSize = this.filter.size.some((sizeFeature: any) => {
             return product.productFeatures.includes("Size/" + sizeFeature)
           })
-          const hasColor = this.filter.color.some((colorFeature) => {
+          const hasColor = this.filter.color.some((colorFeature: any) => {
             return product.productFeatures.includes("Color/" + colorFeature)
           })
           console.log("Has size", hasSize, "Has color", hasColor);
           console.log("item", item)
           if (hasSize || hasColor) return item;
           else return null
-        }).filter(product => product);
+        }).filter((product: any) => product);
       }
       return filteredProducts;
     }
   },
   methods: {
-    filterSize (size) {
+    filterSize (size: any) {
       this.filter.size.push(size);
       console.log(this.filteredProducts);
     },
-    filterColor (color) {
+    filterColor (color: any) {
       this.filter.color.push(color);
       console.log(this.filteredProducts);
     },
@@ -304,18 +304,18 @@ export default defineComponent({
       const payload = {
         groupByField: 'productId',
         groupLimit: 0,
-        filters: [ "parentProductId: " + this.$route.params.id, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ]
+        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 dateQuery = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
+        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 promisedDateQuery = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
+        const promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
         payload.filters.push(promisedDateQuery);
       }
       if (this.cusotmerLoyalty) {
@@ -341,7 +341,7 @@ export default defineComponent({
       return alert.present();
     },
     async releaseAlert() {
-      const itemCount = Object.keys(this.selectedVariants).reduce( (count, productId) => {
+      const itemCount = Object.keys(this.selectedVariants).reduce( (count: number, productId: any) => {
         return count + parseInt(this.selectedVariants[productId]);
       }, 0)
       const message = (this.jobTotal > 0 ? (this.jobTotal === 1 ? this.$t("There is a job already pending.")  : this.$t("There are jobs already pending.",  { count: this.jobTotal })) + " " : "") + this.$t(
@@ -368,7 +368,7 @@ export default defineComponent({
       return alert.present();
     },
     async cancelAlert() {
-      const itemCount = Object.keys(this.selectedVariants).reduce( (count, productId) => {
+      const itemCount = Object.keys(this.selectedVariants).reduce( (count: number, productId: any) => {
         return count + parseInt(this.selectedVariants[productId]);
       }, 0);
       const message = (this.jobTotal > 0 ? (this.jobTotal === 1 ? this.$t("There is a job already pending.")  : this.$t("There are jobs already pending.",  { count: this.jobTotal })) + " " : "") + this.$t(
@@ -412,7 +412,7 @@ export default defineComponent({
       });
       return bgjobmodal.present();
     },
-    selectVariant(productId, quantity) {
+    selectVariant(productId: string, quantity: string) {
       if (quantity) {
         this.selectedVariants[productId] = quantity;
       } else {
@@ -421,9 +421,9 @@ export default defineComponent({
     },
     async releaseItems() {
       const selectedItemsResponse = await this.processSelectedVaiants("orderDate ASC");
-      let selectedItems = [];
-      selectedItemsResponse.forEach((response) => {
-          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item) => {
+      let selectedItems = [] as any;
+      selectedItemsResponse.forEach((response: any) => {
+          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item: any) => {
             return {
               orderId: item.orderId,
               orderItemSeqId: item.orderItemSeqId,
@@ -450,9 +450,9 @@ export default defineComponent({
     },
     async cancelItems() {
       const selectedItemsResponse = await this.processSelectedVaiants("orderDate DESC");
-      let selectedItems = [];
+      let selectedItems = [] as any;
       selectedItemsResponse.forEach((response) => {
-          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item) => {
+          const items = response.data.grouped.productId.groups[0].doclist.docs.map((item: any) => {
             return {
               orderId: item.orderId,
               orderItemSeqId: item.orderItemSeqId
@@ -475,25 +475,25 @@ export default defineComponent({
         this.store.dispatch("order/removeItems", { items: selectedItems });
       })
     },
-    async processSelectedVaiants(sortBy) {
-      const variantRequests = [];
+    async processSelectedVaiants(sortBy: string) {
+      const variantRequests = [] as any;
       Object.keys(this.selectedVariants).forEach((productId) => {
         const payload = {
           groupByField: 'productId',
           groupLimit: this.selectedVariants[productId],
-          filters: [ "productId:" + productId, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ],
+          filters: [ "productId:" + productId, ...JSON.parse(process.env.VUE_APP_ORDER_FILTERS) ] as any,
           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 dateQuery = 'orderDate: [' + orderedAfter + ' TO ' + orderedBefore + ']';
+          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 promisedDateQuery = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
+          const promisedDateQuery: any = 'promisedDatetime: [' + promisedAfter + ' TO ' + promisedBefore + ']';
           payload.filters.push(promisedDateQuery);
         }
         if (this.cusotmerLoyalty) {

From 748629271e97ba9f75e25d13e6ded03e5a407424 Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Tue, 4 Jan 2022 17:51:18 +0530
Subject: [PATCH 5/7] Updated code(#1xc2eqg)

---
 src/views/product-details.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index c65c90fa9..7f49a18c6 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -451,7 +451,7 @@ export default defineComponent({
     async cancelItems() {
       const selectedItemsResponse = await this.processSelectedVaiants("orderDate DESC");
       let selectedItems = [] as any;
-      selectedItemsResponse.forEach((response) => {
+      selectedItemsResponse.forEach((response: any) => {
           const items = response.data.grouped.productId.groups[0].doclist.docs.map((item: any) => {
             return {
               orderId: item.orderId,
@@ -476,8 +476,8 @@ export default defineComponent({
       })
     },
     async processSelectedVaiants(sortBy: string) {
-      const variantRequests = [] as any;
-      Object.keys(this.selectedVariants).forEach((productId) => {
+      const variantRequests: any = [];
+      Object.keys(this.selectedVariants).forEach((productId: any) => {
         const payload = {
           groupByField: 'productId',
           groupLimit: this.selectedVariants[productId],

From fb3a44a77a4781e8aaa352e1bc009acb182f604a Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Tue, 4 Jan 2022 19:07:50 +0530
Subject: [PATCH 6/7] Improved the logic to show product variants on the basis
 of the selected attributes and removed consolelog statements(#1xc2eqg)

---
 src/views/product-details.vue | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 7f49a18c6..6ea98535b 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -33,7 +33,7 @@
               <ion-list-header>{{ $t("Colors") }}</ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filterColor(colorFeature)"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filterVarients(colorFeature, 'color')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -41,7 +41,7 @@
               <ion-list-header>{{ $t("Sizes") }} </ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filterSize(sizeFeature)"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filterVarients(sizeFeature, 'size')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -257,7 +257,7 @@ export default defineComponent({
       filter:{
         color: [] as any,
         size: [] as any
-      }
+      } as any
     }
   },
   computed: {
@@ -282,8 +282,6 @@ export default defineComponent({
           const hasColor = this.filter.color.some((colorFeature: any) => {
             return product.productFeatures.includes("Color/" + colorFeature)
           })
-          console.log("Has size", hasSize, "Has color", hasColor);
-          console.log("item", item)
           if (hasSize || hasColor) return item;
           else return null
         }).filter((product: any) => product);
@@ -292,13 +290,14 @@ export default defineComponent({
     }
   },
   methods: {
-    filterSize (size: any) {
-      this.filter.size.push(size);
-      console.log(this.filteredProducts);
-    },
-    filterColor (color: any) {
-      this.filter.color.push(color);
-      console.log(this.filteredProducts);
+    filterVarients (featureValue: any, type: any) {
+      if(this.filter[type].includes(featureValue)){
+        const index = this.filter[type].indexOf(featureValue);
+        this.filter[type].splice(index,1);
+      }
+      else{
+        this.filter[type].push(featureValue);
+      }
     },
     async getVariantProducts() {
       const payload = {

From 4c8eed54b6f2b28335438cf2906a7324286ae976 Mon Sep 17 00:00:00 2001
From: Disha <dishatalreja1202@gmail.com>
Date: Wed, 5 Jan 2022 13:09:38 +0530
Subject: [PATCH 7/7] Updated variable and method names and fixed spacing
 issues(#1xc2eqg)

---
 src/views/product-details.vue | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 6ea98535b..ad91cd148 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -33,7 +33,7 @@
               <ion-list-header>{{ $t("Colors") }}</ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filterVarients(colorFeature, 'color')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filter(colorFeature, 'color')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -41,7 +41,7 @@
               <ion-list-header>{{ $t("Sizes") }} </ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filterVarients(sizeFeature, 'size')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filter(sizeFeature, 'size')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -254,7 +254,7 @@ export default defineComponent({
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
       hasPromisedDate: true,
-      filter:{
+      filters:{
         color: [] as any,
         size: [] as any
       } as any
@@ -272,14 +272,13 @@ export default defineComponent({
     }),
     filteredProducts () {
       const filteredProducts = JSON.parse(JSON.stringify(this.current));
-      if(this.filter.size.length || this.filter.color.length){
-        filteredProducts.list.items = [];
+      if(this.filters.size.length || this.filters.color.length){
         filteredProducts.list.items = this.current.list.items.map((item: any)=>{
           const product = this.getProduct(item.groupValue);
-          const hasSize = this.filter.size.some((sizeFeature: any) => {
+          const hasSize = this.filters.size.some((sizeFeature: any) => {
             return product.productFeatures.includes("Size/" + sizeFeature)
           })
-          const hasColor = this.filter.color.some((colorFeature: any) => {
+          const hasColor = this.filters.color.some((colorFeature: any) => {
             return product.productFeatures.includes("Color/" + colorFeature)
           })
           if (hasSize || hasColor) return item;
@@ -290,13 +289,13 @@ export default defineComponent({
     }
   },
   methods: {
-    filterVarients (featureValue: any, type: any) {
-      if(this.filter[type].includes(featureValue)){
-        const index = this.filter[type].indexOf(featureValue);
-        this.filter[type].splice(index,1);
+    filter (featureValue: any, type: any) {
+      if (this.filters[type].includes(featureValue)) {
+        const index = this.filters[type].indexOf(featureValue);
+        this.filters[type].splice(index,1);
       }
-      else{
-        this.filter[type].push(featureValue);
+      else {
+        this.filters[type].push(featureValue);
       }
     },
     async getVariantProducts() {