Merge pull request #91 from ymaheshwari1/#84

Implemented: support for multiple value selection for specific order filters(#84)

src/locales/en.json

@@ -137,6 +137,7 @@
   "sales channel": "sales channel",
   "select days": "select days",
   "select range": "select range",
+  "selected": "selected",
   "shipping method": "shipping method",
   "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.",
   "Timezone": "Timezone",

src/views/BrokeringQuery.vue

@@ -41,12 +41,12 @@
             <p class="empty-state" v-if="!orderRoutingFilterOptions || !Object.keys(orderRoutingFilterOptions).length">{{ translate("Select filter to apply") }}</p>
             <!-- Using hardcoded options for filters, as in filters we have multiple ways of value selection for filters like select, chip -->
             <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')">
-              <ion-select :placeholder="translate('queue')" :label="translate('Queue')" interface="popover" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE').fieldValue" @ionChange="updateOrderFilterValue($event, 'QUEUE')">
+              <ion-select multiple :placeholder="translate('queue')" :label="translate('Queue')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'QUEUE', true)">
                 <ion-select-option v-for="(facility, facilityId) in facilities" :key="facilityId" :value="facilityId">{{ facility.facilityName || facilityId }}</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD')">
-              <ion-select :placeholder="translate('shipping method')" interface="popover" :label="translate('Shipping method')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD').fieldValue" @ionChange="updateOrderFilterValue($event, 'SHIPPING_METHOD')">
+              <ion-select multiple :placeholder="translate('shipping method')" interface="popover" :label="translate('Shipping method')" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'SHIPPING_METHOD', true)">
                 <ion-select-option v-for="(shippingMethod, shippingMethodId) in shippingMethods" :key="shippingMethodId" :value="shippingMethodId">{{ shippingMethod.description || shippingMethodId }}</ion-select-option>
               </ion-select>
             </ion-item>
@@ -633,6 +633,24 @@ function getFilterValue(options: any, enums: any, parameter: string) {
   return options?.[enums[parameter].code]
 }
 
+function getSelectedValue(options: any, enums: any, parameter: string) {
+  let value = options?.[enums[parameter].code].fieldValue
+
+  // Initially when adding a filter no value is selected thus returning empty string
+  if(!value) {
+    return "";
+  }
+
+  value = value?.split(',')
+
+  // If having more than 1 value selected then displaying the count of selected value otherwise returning the facilityName of the selected facility
+  if(value?.length > 1) {
+    return `${value.length} ${translate("selected")}`
+  } else {
+    return parameter === "SHIPPING_METHOD" ? shippingMethods.value[value[0]].description || value[0] : facilities.value[value[0]].facilityName || value[0]
+  }
+}
+
 function getLabel(parentType: string, code: string) {
   const enumerations = enums.value[parentType]
   const enumInfo: any = Object.values(enumerations).find((enumeration: any) => enumeration.enumCode === code)
@@ -696,8 +714,20 @@ function updateOperator(event: CustomEvent) {
   updateRule()
 }
 
-function updateOrderFilterValue(event: CustomEvent, id: string) {
-  orderRoutingFilterOptions.value[ruleEnums[id].code].fieldValue = event.detail.value
+function updateOrderFilterValue(event: CustomEvent, id: string, multi = false) {
+  let value = event.detail.value
+  let operator = "equals"
+  // When the filter has multiple selection support then we will receive an array in the event value and thus creating a string before updating the same as the fieldValue supports a string as value
+  if(multi && value.length > 1) {
+    value = value.join(',')
+    operator = "in"
+  } else if(multi) {
+    // When filter is having a single option selected with multiple selection enabled, we will receive an array with single value, but as we need to pass a string, so fetching the 0th index from the array
+    value = value[0]
+  }
+
+  orderRoutingFilterOptions.value[ruleEnums[id].code].fieldValue = value
+  orderRoutingFilterOptions.value[ruleEnums[id].code].operator = operator
   hasUnsavedChanges.value = true
 }