Merge pull request #99 from hotwax/#2dmrnhx

Implemented: added support to pass operator to product query (#2dmrnhx)
hotwax · May 27, 2022 · e3fe574 · e3fe574
2 parents c1d3d91 + cd6d37a
commit e3fe574
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 31 deletions.
diff --git a/src/components/ProductFilterModal.vue b/src/components/ProductFilterModal.vue
@@ -20,7 +20,7 @@
       <ion-item v-for="option in facetOptions" :key="option.id">
         <ion-label>{{ option.label }}</ion-label>
         <!-- Added key on checkbox as when clicking on the checkbox the checked value is changed but not reflected on UI -->
-        <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="appliedFilters[type][searchfield].includes(option.id)" :key="appliedFilters[type][searchfield].includes(option.id)" @click="updateFilter(option.id)"/>
+        <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="appliedFilters[type][searchfield].list.includes(option.id)" :key="appliedFilters[type][searchfield].list.includes(option.id)" @click="updateFilter(option.id)"/>
         <ion-note v-else slot="end" color="danger">{{ type === 'included' ? $t("excluded") : $t("included") }}</ion-note>
       </ion-item>
     </ion-list>
@@ -126,7 +126,7 @@ export default defineComponent({
     },
     isAlreadyApplied(value: string) {
       const type = this.type === 'included' ? 'excluded' : 'included'
-      return this.appliedFilters[type][this.searchfield].includes(value)
+      return this.appliedFilters[type][this.searchfield].list.includes(value)
     }
   },
   setup() {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -44,6 +44,7 @@
   "No previous occurrence": "No previous occurrence",
   "No time zone found": "No time zone found",
   "Only show selected products": "Only show selected products",
+  "Operator": "Operator",
   "Password": "Password",
   "Pending": "Pending",
   "Please enter a threshold value to set for these products before proceeding.": "Please enter a threshold value to set for these products before proceeding.",

diff --git a/src/store/modules/product/ProductState.ts b/src/store/modules/product/ProductState.ts
@@ -8,10 +8,16 @@ export default interface ProductState {
   };
   appliedFilters: {
     included: {
-      tags: Array<string>
+      tags: {
+        list: any;
+        operator: string;
+      };
     },
     excluded: {
-      tags: Array<string>
+      tags: {
+        list: any;
+        operator: string;
+      };
     }
   };
   query: any;

diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts
@@ -54,11 +54,19 @@ const actions: ActionTree<ProductState, RootState> = {
   async updateAppliedFilters({ commit, state, dispatch }, payload) {
     const value = payload.value
     const appliedFilters = JSON.parse(JSON.stringify((state.appliedFilters as any)[payload.type][payload.id]))
-    appliedFilters.includes(value) ? appliedFilters.splice(appliedFilters.indexOf(value), 1) : appliedFilters.push(value)
+    appliedFilters.list.includes(value) ? appliedFilters.list.splice(appliedFilters.list.indexOf(value), 1) : appliedFilters.list.push(value)
     commit(types.PRODUCT_FILTER_UPDATED, {id: payload.id, type: payload.type, value: appliedFilters})
     dispatch('updateQuery')
   },
 
+  async updateAppliedFilterOperator({ commit, state, dispatch }, payload) {
+    const appliedFilters = JSON.parse(JSON.stringify((state.appliedFilters as any)[payload.type][payload.id]))
+    appliedFilters.operator = payload.value;
+    commit(types.PRODUCT_FILTER_UPDATED, {id: payload.id, type: payload.type, value: appliedFilters})
+    // If we have list items then only apply filters again
+    if(appliedFilters.list.length) dispatch('updateQuery')
+  },
+
   async updateQuery({ commit, dispatch, state }, payload) {
     // initializing the filter always on updateQuery call because we are adding values in the filter
     // as string and if some value is removed then we need to do multiple operations on the filter string
@@ -88,16 +96,16 @@ const actions: ActionTree<ProductState, RootState> = {
 
     state.query.json['filter'] = Object.keys(state.appliedFilters.included).reduce((filter, value) => {
       const filterValues = (state.appliedFilters.included as any)[value]
-      if (filterValues.length > 0) {
-        filter.push(`${value}: ("${filterValues.join('" OR "')}")`)
+      if (filterValues.list.length > 0) {
+        filter.push(`${value}: ("${filterValues.list.join('" ' + filterValues.operator + ' "')}")`)
       }
       return filter
     }, state.query.json['filter'])
 
     state.query.json['filter'] = Object.keys(state.appliedFilters.excluded).reduce((filter, value) => {
       const filterValues = (state.appliedFilters.excluded as any)[value]
-      if (filterValues.length > 0) {
-        filter.push(`-${value}: ("${filterValues.join('" OR "')}")`)
+      if (filterValues.list.length > 0) {
+        filter.push(`-${value}: ("${filterValues.list.join('" ' + filterValues.operator + ' "')}")`)
       }
       return filter
     }, state.query.json['filter'])

diff --git a/src/store/modules/product/index.ts b/src/store/modules/product/index.ts
@@ -17,10 +17,16 @@ const productModule: Module<ProductState, RootState> = {
       },
       appliedFilters: {
         included: {
-          tags: []
+          tags: {
+            list: [],
+            operator: "OR"
+          },
         },
         excluded: {
-          tags: []
+          tags: {
+            list: [],
+            operator: "OR"
+          },
         }
       },
       query: {

diff --git a/src/views/SelectProduct.vue b/src/views/SelectProduct.vue
@@ -31,17 +31,22 @@
               </div>
             </ion-list-header>
             <ion-card>
-              <ion-toolbar>
-                <ion-item lines="none">
-                  <ion-label>{{ $t("Tags") }}</ion-label>
-                  <ion-button fill="clear" slot="end" size="small" @click="searchFilter('tags', 'tagsFacet', 'tags', 'included')">
-                    <ion-label>{{ $t('add') }}</ion-label>
-                    <ion-icon :icon="addCircleOutline" />
-                  </ion-button>
-                </ion-item>
-              </ion-toolbar>
+              <ion-item lines="none">
+                <ion-label>{{ $t("Tags") }}</ion-label>
+                <ion-button fill="clear" slot="end" size="small" @click="searchFilter('tags', 'tagsFacet', 'tags', 'included')">
+                  <ion-label>{{ $t('add') }}</ion-label>
+                  <ion-icon :icon="addCircleOutline" />
+                </ion-button>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>{{ $t("Operator") }}</ion-label>
+                <ion-select interface="popover" @ionChange="applyOperator('included', 'tags', $event.detail.value)" :value="appliedFilters['included']['tags'].operator">
+                  <ion-select-option :value="AND">AND</ion-select-option>
+                  <ion-select-option :value="OR">OR</ion-select-option>
+                </ion-select>
+              </ion-item>
               <ion-card-content>
-                <ion-chip v-for="(tag, index) in appliedFilters['included']['tags']" :key="index">
+                <ion-chip v-for="(tag, index) in appliedFilters['included']['tags'].list" :key="index">
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ tag }}</ion-label>
                   <ion-icon :icon="closeCircle" @click="removeFilters('included', 'tags', tag)"/>
@@ -57,17 +62,22 @@
               </div>
             </ion-list-header>
             <ion-card>
-              <ion-toolbar>
-                <ion-item lines="none">
-                  <ion-label>{{ $t("Tags") }}</ion-label>
-                  <ion-button fill="clear" slot="end" size="small" @click="searchFilter('tags', 'tagsFacet', 'tags', 'excluded')">
-                    <ion-label>{{ $t('add') }}</ion-label>
-                    <ion-icon :icon="addCircleOutline" />
-                  </ion-button>
-                </ion-item>
-              </ion-toolbar>
+              <ion-item lines="none">
+                <ion-label>{{ $t("Tags") }}</ion-label>
+                <ion-button fill="clear" slot="end" size="small" @click="searchFilter('tags', 'tagsFacet', 'tags', 'excluded')">
+                  <ion-label>{{ $t('add') }}</ion-label>
+                  <ion-icon :icon="addCircleOutline" />
+                </ion-button>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>{{ $t("Operator") }}</ion-label>
+                <ion-select @ionChange="applyOperator('excluded', 'tags', $event.detail.value)" interface="popover" :value="appliedFilters['excluded']['tags'].operator">
+                  <ion-select-option :value="AND">AND</ion-select-option>
+                  <ion-select-option :value="OR">OR</ion-select-option>
+                </ion-select>
+              </ion-item>
               <ion-card-content>
-                <ion-chip v-for="(tag, index) in appliedFilters['excluded']['tags']" :key="index">
+                <ion-chip v-for="(tag, index) in appliedFilters['excluded']['tags'].list" :key="index">
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ tag }}</ion-label>
                   <ion-icon :icon="closeCircle" @click="removeFilters('excluded', 'tags', tag)"/>
@@ -163,6 +173,8 @@ import {
   IonMenuButton,
   IonPage,
   IonSearchbar,
+  IonSelect,
+  IonSelectOption,
   IonTitle,
   IonToolbar,
   modalController,
@@ -199,6 +211,8 @@ export default defineComponent({
     IonMenuButton,
     IonPage,
     IonSearchbar,
+    IonSelect,
+    IonSelectOption,
     IonTitle,
     IonToolbar,
     Image
@@ -285,6 +299,14 @@ export default defineComponent({
       })
       this.queryString = ''
     },
+    async applyOperator(type: string, id: string, value: string) {
+      await this.store.dispatch('product/updateAppliedFilterOperator', {
+        type,
+        id,
+        value
+      })
+      this.queryString = ''
+    },
     async resetFilters(type: string) {
       // checking that if any of the current type does not have any attribute selected than not making solr query
       if (Object.entries(this.appliedFilters[type]).every((filter: any) => filter[1].length <= 0)) {