add: project filter

frontend/src/components/FilterPanel.vue

@@ -1,5 +1,10 @@
 <template>
     <div class="filter_panel">
+        <div class="sidebar-item">
+            <h3>Проект/Тема</h3>
+            <project-filter @filter="$emit('filter', $event)" />
+        </div>
+
         <div class="sidebar-item">
             <h3>Категория</h3>
             <category-filter @filter="$emit('filter', $event)" />
@@ -47,9 +52,10 @@ 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";
+import ProjectFilter from "@/components/filters/ProjectFilter.vue";
 export default {
     name: "filter-panel",
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter },
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter, ProjectFilter },
     methods: {},
     data() {
         return {}
@@ -73,7 +79,7 @@ export default {
     flex-direction: column;
 }
 
-.sidebar-item > h3 {
+.sidebar-item>h3 {
     margin-bottom: 0.4rem
 }
 

frontend/src/components/filters/ProjectFilter.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <va-select class="multi-selector" :options="projectOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "project-filter",
+    data() {
+        return {
+            projectOptions: [
+                "ABB",
+                "AER",
+                "AAM",
+                "ASX",
+                "ABE",
+                "ATM",
+                "AAK",
+                "AJL",
+            ],
+            selectedOptions: [],
+        }
+    },
+    methods: {
+        applyFilter() {
+            const filter = { "project": this.selectedOptions }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.multi-selector {
+    --va-select-min-width: 12 rem;
+}
+</style>