add: multi select filter

frontend/src/components/FilterPanel.vue

@@ -6,7 +6,7 @@
         <gis-category-filter @filter="$emit('filter', $event)" />
         <h3>Scanner</h3>
         <scanner-filter @filter="$emit('filter', $event)" />
-        <h3>Organiztion</h3>
+        <h3>Organization</h3>
         <org-filter @filter="$emit('filter', $event)" />
         <h3>Stratum</h3>
         <stratum-filter @filter="$emit('filter', $event)" />

frontend/src/components/MapComponent.vue

@@ -7,13 +7,13 @@
 
 <script>
 import maplibregl from "maplibre-gl";
-import { markRaw, onMounted, onUnmounted, shallowRef, } from "vue";
+import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
 export default {
     name: "map-component",
     setup(_props, context) {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
-        let currentFadr = { "fadr": "Any" };
+        let currentFadr = reactive({ "fadr": [] });
 
         onMounted(() => {
             const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
@@ -103,40 +103,38 @@ export default {
                     .setLngLat(e.lngLat)
                     .setHTML(JSON.stringify(e.features[0].properties))
                     .addTo(map.value);
-                let fadr = {
-                    "fadr": e.features[0].properties["fadr"]
-                };
-                fadr = currentFadr["fadr"] == fadr["fadr"] ?
-                    { "fadr": "Any" } :
-                    fadr;
-
-                // check if we need to remove any old paint
-                if (currentFadr["fadr"] !== "Any") {
+                let newFadr = e.features[0].properties["fadr"];
+
+                let newFadrFound = currentFadr["fadr"].indexOf(newFadr)
+                if (newFadrFound > -1) {
+                    //remove old paint
                     map.value.setFeatureState(
                         {
                             source: 'samples',
                             sourceLayer: 'public.geodata',
-                            id: currentFadr["fadr"]
+                            id: newFadr
                         },
                         { beenClicked: false }
                     );
-                };
 
-                // check if we need to apply any new paint 
-                if (fadr["fadr"] !== "Any") {
+                    // remove from filters
+                    currentFadr["fadr"].splice(newFadrFound, 1)
+                } else {
+                    // apply new paint
                     map.value.setFeatureState(
                         {
                             source: 'samples',
                             sourceLayer: 'public.geodata',
-                            id: fadr["fadr"]
+                            id: newFadr
                         },
                         { beenClicked: true }
                     );
-                };
 
-                currentFadr = fadr;
+                    // add to filters
+                    currentFadr["fadr"].push(newFadr);
+                }
 
-                context.emit('mapClick', fadr);
+                context.emit('mapClick', currentFadr);
             });
         });
 

frontend/src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
+        <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper" width="18rem">
             <slot></slot>
         </va-sidebar>
     </div>

frontend/src/components/filters/CategoryFilter.vue

@@ -1,13 +1,8 @@
 <template>
     <div>
-        <va-radio
-            class="radio-switcher"
-            v-for="(option, index) in categoryOptions"
-            :key="index"
-            v-model="selectedOption"
-            :option="option"
-            @update:model-value="applyFilter"
-        ></va-radio>
+        <va-select class="multi-selector" :options="categoryOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
     </div>
 </template>
 
@@ -22,15 +17,13 @@ export default {
                 "Biology",
                 "Archeology",
                 "Materials",
-                "Any"
             ],
-            selectedOption: "Any"
+            selectedOptions: [],
         }
     },
     methods: {
         applyFilter() {
-
-            const filter = { "category": this.selectedOption }
+            const filter = { "category": this.selectedOptions }
             this.$emit('filter', filter, this.name)
         },
     },
@@ -39,4 +32,7 @@ export default {
 
 
 <style lang="css">
+.multi-selector {
+    --va-select-min-width: 12 rem;
+}
 </style>

frontend/src/components/filters/GisCategoryFilter.vue

@@ -1,13 +1,8 @@
 <template>
     <div>
-        <va-radio
-            class="radio-switcher"
-            v-for="(option, index) in categoryOptions"
-            :key="index"
-            v-model="selectedOption"
-            :option="option"
-            @update:model-value="applyFilter"
-        ></va-radio>
+        <va-select class="multi-selector" :options="categoryOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
     </div>
 </template>
 
@@ -23,15 +18,14 @@ export default {
                 "Geology",
                 "Materials",
                 "Soil",
-                "Any",
             ],
-            selectedOption: "Any"
+            selectedOptions: []
         }
     },
     methods: {
         applyFilter() {
 
-            const filter = { "gis_category": this.selectedOption }
+            const filter = { "gis_category": this.selectedOptions }
             this.$emit('filter', filter)
         },
     },

frontend/src/components/filters/OrgFilter.vue

@@ -1,13 +1,8 @@
 <template>
     <div>
-        <va-radio
-            class="radio-switcher"
-            v-for="(option, index) in orgOptions"
-            :key="index"
-            v-model="selectedOption"
-            :option="option"
-            @update:model-value="applyFilter"
-        ></va-radio>
+        <va-select class="multi-selector" v-model="selectedOptions" :options="orgOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
     </div>
 </template>
 
@@ -24,15 +19,14 @@ export default {
                 "ОАО \"Газпром Промгаз\"",
                 "ИАЭТ СО РАН, Новосибирск",
                 "ИОНХ РАН",
-                "Any"
             ],
-            selectedOption: "Any"
+            selectedOptions: []
         }
     },
     methods: {
         applyFilter() {
 
-            const filter = { "org": this.selectedOption }
+            const filter = { "org": this.selectedOptions }
             this.$emit('filter', filter, this.name)
         },
     },

frontend/src/components/filters/ScannerFilter.vue

@@ -1,13 +1,8 @@
 <template>
     <div>
-        <va-radio
-            class="radio-switcher"
-            v-for="(option, index) in scannerOptions"
-            :key="index"
-            v-model="selectedOption"
-            :option="option"
-            @update:model-value="applyFilter"
-        ></va-radio>
+        <va-select class="multi-selector" v-model="selectedOptions" :options="scannerOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
     </div>
 </template>
 
@@ -23,15 +18,14 @@ export default {
                 "v tome x",
                 "РКТ-180",
                 "SIEMENS Somatom Perspective",
-                "Any"
             ],
-            selectedOption: "Any"
+            selectedOptions: []
         }
     },
     methods: {
         applyFilter() {
 
-            const filter = { "scanner": this.selectedOption }
+            const filter = { "scanner": this.selectedOptions }
             this.$emit('filter', filter, this.name)
         },
     },

frontend/src/components/filters/StratumFilter.vue

@@ -1,13 +1,8 @@
 <template>
     <div>
-        <va-radio
-            class="radio-switcher"
-            v-for="(option, index) in stratumOptions"
-            :key="index"
-            v-model="selectedOption"
-            :option="option"
-            @update:model-value="applyFilter"
-        ></va-radio>
+        <va-select class="multi-selector" v-model="selectedOptions" :options="stratumOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
     </div>
 </template>
 
@@ -21,15 +16,13 @@ export default {
                 "баженовская свита",
                 "тюменская свита",
                 "турон ",
-                "Any"
             ],
-            selectedOption: "Any"
+            selectedOptions: []
         }
     },
     methods: {
         applyFilter() {
-
-            const filter = { "stratum": this.selectedOption }
+            const filter = { "stratum": this.selectedOptions }
             this.$emit('filter', filter, this.name)
         },
     },

frontend/src/main.js

@@ -23,6 +23,7 @@ import {
     VaCardTitle,
     VaCardContent,
     VaInnerLoading,
+    VaSelect,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -60,6 +61,7 @@ app.use(createVuesticEssential({
         VaCardTitle,
         VaCardContent,
         VaInnerLoading,
+        VaSelect,
     }
 }));
 

frontend/src/views/FrontView.vue

@@ -51,11 +51,8 @@ export default {
 
         applyFilters(filter) {
             for (let key in filter) {
-                if (filter[key] != "Any") {
-                    if (key in this.currentFilters)
-                        this.currentFilters[key].push(filter[key]);
-                    else
-                        this.currentFilters[key] = [filter[key]];
+                if (Array.isArray(filter[key]) && filter[key].length) {
+                    this.currentFilters[key] = filter[key];
                 } else {
                     delete this.currentFilters[key]
                 }