From 3b69836fe3fb76d7ddf045242a1eb7570955e939 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 10 May 2024 10:27:56 +0530
Subject: [PATCH] Improved: added chips for selected filters in the product
 filter modal (#304)

---
 src/components/AddProductFiltersModal.vue    | 16 ++++++++++++++++
 src/components/UpdateProductFiltersModal.vue | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/AddProductFiltersModal.vue b/src/components/AddProductFiltersModal.vue
index 516ec0ea..30257280 100644
--- a/src/components/AddProductFiltersModal.vue
+++ b/src/components/AddProductFiltersModal.vue
@@ -16,6 +16,11 @@
 
   <ion-content>
     <ion-searchbar :placeholder="translate('Search', { label })" v-model="queryString" @keyup.enter="search()"/>
+    <ion-row>
+      <ion-chip v-for="filter in selectedValues" outline :key="filter.id">
+        <ion-label>{{ filter }}</ion-label>
+      </ion-chip>
+    </ion-row>
 
     <div class="empty-state" v-if="isLoading">
       <ion-item lines="none">
@@ -57,6 +62,7 @@ import {
   IonButton,
   IonButtons,
   IonCheckbox,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
@@ -68,6 +74,7 @@ import {
   IonLabel,
   IonList,
   IonNote,
+  IonRow,
   IonSearchbar,
   IonSpinner,
   IonTitle,
@@ -165,4 +172,13 @@ async function saveFilters() {
   ion-content {
     --padding-bottom: 80px;
   }
+
+  ion-row {
+    flex-wrap: nowrap;
+    overflow: scroll;
+  }
+
+  ion-chip {
+    flex-shrink: 0;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/UpdateProductFiltersModal.vue b/src/components/UpdateProductFiltersModal.vue
index 9cd1d759..08d46832 100644
--- a/src/components/UpdateProductFiltersModal.vue
+++ b/src/components/UpdateProductFiltersModal.vue
@@ -16,6 +16,11 @@
 
   <ion-content>
     <ion-searchbar :placeholder="translate('Search', { label })" v-model="queryString" @keyup.enter="search()"/>
+    <ion-row>
+      <ion-chip v-for="filter in (selectedSegment === 'included' ? includedFilters : excludedFilters)" outline :key="filter.id">
+        <ion-label>{{ filter }}</ion-label>
+      </ion-chip>
+    </ion-row>
 
     <ion-segment v-model="selectedSegment">
       <ion-segment-button value="included">
@@ -66,6 +71,7 @@ import {
   IonButton,
   IonButtons,
   IonCheckbox,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
@@ -77,6 +83,7 @@ import {
   IonLabel,
   IonList,
   IonNote,
+  IonRow,
   IonSearchbar,
   IonSegment,
   IonSegmentButton,
@@ -233,4 +240,13 @@ async function saveFilters() {
   ion-content {
     --padding-bottom: 80px;
   }
+
+  ion-row {
+    flex-wrap: nowrap;
+    overflow: scroll;
+  }
+
+  ion-chip {
+    flex-shrink: 0;
+  }
 </style>
\ No newline at end of file