Merge pull request #306 from amansinghbais/304-selected-chip-in-modal

Improved: added chips for selected filters in the product filter modal (#304)

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>
 
     <ion-list v-if="facetOptions.length">
       <ion-item v-for="option in facetOptions" :key="option.id"  @click="!isAlreadyApplied(option.id) ? updateSelectedValues(option.id) : null">
@@ -51,6 +56,7 @@ import {
   IonButton,
   IonButtons,
   IonCheckbox,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
@@ -62,6 +68,7 @@ import {
   IonLabel,
   IonList,
   IonNote,
+  IonRow,
   IonSearchbar,
   IonTitle,
   IonToolbar,
@@ -155,4 +162,13 @@ async function saveFilters() {
   ion-content {
     --padding-bottom: 80px;
   }
+
+  ion-row {
+    flex-wrap: nowrap;
+    overflow: scroll;
+  }
+
+  ion-chip {
+    flex-shrink: 0;
+  }
 </style>