add: basin filter

frontend/src/components/FilterPanel.vue

@@ -1,32 +1,37 @@
 <template>
     <div class="filter_panel">
         <div class="sidebar-item">
-            <h3>Category</h3>
+            <h3>Категория</h3>
             <category-filter @filter="$emit('filter', $event)" />
         </div>
 
         <div class="sidebar-item">
-            <h3>GIS Category</h3>
+            <h3>ГИС категория</h3>
             <gis-category-filter @filter="$emit('filter', $event)" />
         </div>
 
         <div class="sidebar-item">
-            <h3>Scanner</h3>
+            <h3>Томограф</h3>
             <scanner-filter @filter="$emit('filter', $event)" />
         </div>
 
         <div class="sidebar-item">
-            <h3>Organization</h3>
+            <h3>Организация</h3>
             <org-filter @filter="$emit('filter', $event)" />
         </div>
 
         <div class="sidebar-item">
-            <h3>Stratum</h3>
+            <h3>Бассейн</h3>
+            <basin-filter @filter="$emit('filter', $event)" />
+        </div>
+
+        <div class="sidebar-item">
+            <h3>Свита / пласт</h3>
             <stratum-filter @filter="$emit('filter', $event)" />
         </div>
 
         <div class="sidebar-item">
-            <h3>Depth</h3>
+            <h3>Глубины</h3>
             <depth-filter @filter="$emit('filter', $event)" />
         </div>
 
@@ -41,9 +46,10 @@ import ScannerFilter from "@/components/filters/ScannerFilter.vue";
 import OrgFilter from "@/components/filters/OrgFilter.vue";
 import StratumFilter from "@/components/filters/StratumFilter.vue";
 import DepthFilter from "@/components/filters/DepthFilter.vue";
+import BasinFilter from "@/components/filters/BasinFilter.vue";
 export default {
     name: "filter-panel",
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter },
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter },
     methods: {},
     data() {
         return {}

frontend/src/components/filters/BasinFilter.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <va-select class="multi-selector" :options="basinOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "basin-filter",
+    data() {
+        return {
+            basinOptions: [
+                "Кузбас",
+                "Северная Монголия",
+                "Пур-Тазовская НГО, Западно-Сибирская провинция",
+                "Западно-Сибирский НГБ"
+            ],
+            selectedOptions: [],
+        }
+    },
+    methods: {
+        applyFilter() {
+            const filter = { "basin": this.selectedOptions }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.multi-selector {
+    --va-select-min-width: 12 rem;
+}
+</style>