Updated: added searchbar functionality on the otherInventoryModal(#386)

hotwax · May 10, 2024 · 02f00ed · 02f00ed
1 parent 40a4fb9
commit 02f00ed
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/src/views/OtherStoresInventoryModal.vue b/src/views/OtherStoresInventoryModal.vue
@@ -10,9 +10,9 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-searchbar/>
-    <ion-list v-if="otherStoresInventory.length">
-      <ion-item v-for="details in otherStoresInventory" :key="details.facilityName">
+    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; searchFacilities()"/>
+    <ion-list v-if="filteredInventory.length">
+      <ion-item v-for="details in filteredInventory" :key="details.facilityName">
         <ion-label class="ion-text-wrap">{{ details.facilityName }}</ion-label>
         <ion-note slot="end">{{ details.stock }}</ion-note>
       </ion-item>
@@ -36,7 +36,8 @@ import {
   IonNote,
   IonTitle,
   IonToolbar,
-  modalController } from "@ionic/vue";
+  modalController
+} from "@ionic/vue";
 import { defineComponent } from "vue";
 import { close } from "ionicons/icons";
 import { useStore } from "@/store";
@@ -58,9 +59,26 @@ export default defineComponent({
     IonToolbar 
   },
   props: ["otherStoresInventory"],
+  data() {
+    return{
+      queryString: "",
+      filteredInventory: [] as any
+    }
+  },
+  mounted() {
+    this.filteredInventory = this.otherStoresInventory.slice();
+  },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true });
+    },
+    searchFacilities(){
+      if (this.queryString !== "") {
+        this.filteredInventory = this.otherStoresInventory.filter((facility: any) =>
+          facility.facilityName.toLowerCase().includes(this.queryString.toLowerCase()));
+      } else {
+        this.filteredInventory = this.otherStoresInventory.slice();
+      }
     }
   },
   setup() {