add: datalist filter

frontend/src/components/FilterPanel.vue

@@ -20,6 +20,11 @@
             <stratum-filter @filter="$emit('filter', $event)" />
         </div>
 
+        <div class="sidebar-item">
+            <h3>Перечень данных</h3>
+            <datalist-filter @filter="$emit('filter', $event)" />
+        </div>
+
         <div class="sidebar-item">
             <h3>Глубины</h3>
             <depth-filter @filter="$emit('filter', $event)" />
@@ -39,9 +44,10 @@ import DepthFilter from "@/components/filters/DepthFilter.vue";
 import BasinFilter from "@/components/filters/BasinFilter.vue";
 import ProjectFilter from "@/components/filters/ProjectFilter.vue";
 import DescriptionFilter from "@/components/filters/DescriptionFilter.vue";
+import DatalistFilter from "@/components/filters/DatalistFilter.vue";
 export default {
     name: "filter-panel",
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter, ProjectFilter, DescriptionFilter },
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter, ProjectFilter, DescriptionFilter, DatalistFilter },
     methods: {},
     data() {
         return {}

frontend/src/components/filters/DatalistFilter.vue

@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <va-select class="multi-selector" :options="datalistOptions" v-model="selectedOptions"
+            @update:model-value="applyFilter" multiple searchable>
+        </va-select>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "datalist-filter",
+    data() {
+        return {
+            datalistOptions: [
+                // SELECT  DISTINCT BTRIM(UNNEST(STRING_TO_ARRAY(datalist,','))) FROM geodata;
+                "Project",
+                "Rec",
+                "Data",
+                "Raw",
+                "Report",
+            ],
+            selectedOptions: [],
+        }
+    },
+    methods: {
+        applyFilter() {
+            const filter = { "datalist": this.selectedOptions }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.multi-selector {
+    --va-select-min-width: 12 rem;
+}
+</style>

frontend/src/views/FrontView.vue

@@ -91,6 +91,13 @@ export default {
                         if (item.depth_max < filterValues[0] || item.depth_min > filterValues[1]) {
                             return false;
                         }
+                    } else if (filterParam === "datalist") {
+                        // for all selected datalist options check if we can find it in the datalist string
+                        for (let datalistOption of filterValues) {
+                            if (item.datalist.search(datalistOption) === -1) {
+                                return false;
+                            }
+                        }
                     } else if (!filterValues.includes(item[filterParam])) {
                         return false;
                     }