search feature

src/views/pages/ScenarioList.vue

@@ -6,10 +6,21 @@
     <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
     </div>
     <div v-else>
-        <DataView :value="scenarios" :layout="layout" paginator :rows="5">
+        <DataView :value="filter" :layout="layout" paginator :rows="5">
         <template #header>
-            <div class="flex justify-end">
-                <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+            <div class="header-container">
+                <div class="search-bar">
+                    <i class="pi pi-search search-icon"></i>           
+                    <InputText
+                        class="search-input"
+                        type="search"
+                        placeholder="Search"
+                        v-model="data.search"
+                        size="medium"
+                        variant="filled"
+                    />
+                </div>
+                <SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
                     <template #option="{ option }">
                         <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                     </template>
@@ -62,32 +73,83 @@
 import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import DataView from 'primevue/dataview';
 import ProgressSpinner from 'primevue/progressspinner';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { ScenarioService } from '../../service/ScenarioService.js';
 
-
     const router = useRouter()
     const layout = ref('grid');
     const options = ref(['list', 'grid']);
-    const scenarios = ref([])
     const loading = ref(true)
 
     
     onMounted(() => {
         loading.value = true
         ScenarioService.getScenarios().then(resp=>{
-            scenarios.value = resp.data
+            data.scenarios = resp.data
             loading.value = false
-            console.log(scenarios.value)
+            console.log(data.scenarios)
         })
         
     });
 
+    const data = reactive({
+        search: null,
+        scenarios: []
+    })
+
+    const filter = computed(() => {
+        console.log("check");
+
+        if (data.search) {
+            console.log("check1b");
+
+            return data.scenarios.filter((item) => {
+                return data.search
+                    .toLowerCase()
+                    .split(" ")
+                    .every((v) => item.name.toLowerCase().includes(v));
+            });
+        } else {
+            console.log("check2b");
+            return data.scenarios;
+        }
+    });
+
     const executeScenario = (id) => {
         console.log(id);
         router.push({ name: 'scenario-exec', params: { id: id } });
     }
 </script>
 
-<style scoped></style>
+<style scoped>
+    .header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    color:#334155;
+    margin-right: 5px;
+}
+
+.search-input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+    flex: 1;
+}
+
+.search-input:focus {
+    border: none;
+    box-shadow: none;
+    outline: none;
+}
+
+</style>