add: search field

frontend/src/views/FrontView.vue

@@ -5,7 +5,8 @@
             <filter-panel @filter="applyFilters" />
         </sidebar>
         <div class="main-view">
-            <overview-screen :items="items" @mapClick="applyFilters" />
+            <va-input v-model="searchQuery"></va-input>
+            <overview-screen :items="filteredAndSearchedItems" @mapClick="applyFilters" />
         </div>
     </div>
 </template>
@@ -23,6 +24,19 @@ export default {
         return {
             items: [],
             currentFilters: {},
+            searchQuery: '',
+            searchColumns: [
+                "basin",
+                "deposit",
+                "well",
+                "stratum",
+                "org",
+                "samplelist",
+                "description",
+                "form_dimentions",
+                "datalist",
+                "resolution",
+            ],
         }
     },
     methods: {
@@ -64,9 +78,37 @@ export default {
             this.fetchFiltered(this.currentFilters);
         },
     },
-    created() {
+    mounted () {
         this.fetchAllItems()
     },
+    computed: {
+        filteredItems() {
+            return [...this.items].filter(item => true)
+        },
+        filteredAndSearchedItems(){
+            return this.filteredItems.filter(item => {
+                if (this.searchQuery.trim() == ''){
+                    return true
+                }
+                let result = false;
+                // for each word in search query
+                word_loop:
+                for (let word of this.searchQuery.toLowerCase().trim().split(" ")) {
+                    // check if the word is present in any of the columns
+                    for (let searchColumn of this.searchColumns) {
+                        if (item[searchColumn]?.toLowerCase().includes(word.trim())) {
+                            // found the word, no need to check other columns
+                            result = true;
+                            continue word_loop;
+                        }
+                    }
+                    // haven't found the word in any of the columns, drop this item
+                    return false;
+                }
+                return result;
+            })
+        },
+    },
 }
 
 </script>