add: form dimensions filter

frontend/src/components/FilterPanel.vue

@@ -20,6 +20,11 @@
             <stratum-filter @filter="$emit('filter', $event)" />
         </div>
 
+        <div class="sidebar-item">
+            <h3>Размер образца</h3>
+            <form-dimensions-filter @filter="$emit('filter', $event)" />
+        </div>
+
         <div class="sidebar-item">
             <h3>Перечень данных</h3>
             <datalist-filter @filter="$emit('filter', $event)" />
@@ -52,12 +57,22 @@ import ProjectFilter from "@/components/filters/ProjectFilter.vue";
 import DescriptionFilter from "@/components/filters/DescriptionFilter.vue";
 import DatalistFilter from "@/components/filters/DatalistFilter.vue";
 import ResolutionFilter from "@/components/filters/ResolutionFilter.vue";
+import FormDimensionsFilter from "@/components/filters/FormDimensionsFilter.vue";
 export default {
     name: "filter-panel",
     components: {
-        CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter,
+        CategoryFilter,
-        StratumFilter, DepthFilter, BasinFilter, ProjectFilter,
+        GisCategoryFilter,
-        DescriptionFilter, DatalistFilter, ResolutionFilter
+        ScannerFilter,
+        OrgFilter,
+        StratumFilter,
+        DepthFilter,
+        BasinFilter,
+        ProjectFilter,
+        DescriptionFilter,
+        DatalistFilter,
+        ResolutionFilter,
+        FormDimensionsFilter
     },
     methods: {},
     data() {

frontend/src/components/filters/FormDimensionsFilter.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <va-select class="multi-selector" :options="formDimentionsOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "form-dimentions-filter",
+    data() {
+        return {
+            formDimentionsOptions: [
+                "фрагмент 20 см",
+                "фрагменты 5-7 см",
+                "полноразмерный керн, 65 мм",
+                "цилиндр, 8 мм",
+                "цилиндр, 10 мм",
+                "цилиндр, 30 мм",
+                "полноразмерный керн",
+                "полноразмерный керн, 100 мм",
+            ],
+            selectedOptions: [],
+        }
+    },
+    methods: {
+        applyFilter() {
+            const filter = { "form_dimentions": this.selectedOptions }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.multi-selector {
+    --va-select-min-width: 12 rem;
+}
+</style>