feat(filter): migrate plugin

examples/iceberg/tsconfig.json

@@ -8,6 +8,7 @@
 		"types": [
 			"vitest/importMeta",
 			"vitest/jsdom",
+			"node",
 			"../../src/@types/vite-env.d.ts",
 			"../../src/@types/i18next.d.ts",
 			"../../src/@types/pinia.d.ts",

examples/snowbox/index.js

@@ -6,6 +6,7 @@
 	subscribe,
 	updateState,
 } from '@polar/polar'
+import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFooter from '@polar/polar/plugins/footer'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
@@ -64,7 +65,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -84,7 +85,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -164,20 +165,35 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
 			{
 				type: 'de',
 				resources: {
+					filter: {
+						layer: {
+							[reports]: {
+								category: {
+									type: {
+										title: 'Schadensträger',
+										knownValue: {
+											way: 'Wege und Straßen',
+											rom: 'Kakteen und römische Galeeren',
+										},
+									},
+								},
+							},
+						},
+					},
 					fullscreen: {
 						button: {
 							label_on: 'Mach groß',
@@ -260,7 +276,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -285,7 +301,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -333,6 +349,38 @@
 	})
 )
 
+addPlugin(
+	map,
+	pluginFilter({
+		layers: {
+			[reports]: {
+				categories: [
+					{
+						targetProperty: 'type',
+						knownValues: [
+							{
+								value: 'way',
+								icon: 'kern-icon--home',
+							},
+							{
+								value: 'rom',
+								icon: 'kern-icon--visibility',
+							},
+						],
+						selectAll: true,
+					},
+				],
+				time: {
+					targetProperty: 'time',
+					freeSelection: 'until',
+					last: [7, 30],
+					pattern: '--YYYYDD-MM',
+				},
+			},
+		},
+	})
+)
+
 const toastStore = getStore(map, 'toast')
 toastStore.addToast({
 	text: 'Hallo Welt',

src/components/kern/KernDatePicker.ce.vue

@@ -0,0 +1,7 @@
+<template>
+	<input type="date" class="kern-form-input__input" />
+</template>
+
+<script setup lang="ts">
+// TODO
+</script>

src/core/types/plugin.ts

@@ -3,6 +3,10 @@ import type { Component } from 'vue'
 import type { NineLayoutTag } from '../utils/NineLayoutTag'
 import type { Locale } from './locales'
 
+import type { PluginId as FilterPluginId } from '@/plugins/filter'
+import type { useFilterStore as FilterStore } from '@/plugins/filter/store'
+import type { resourcesEn as FilterResources } from '@/plugins/filter/locales'
+
 import type { PluginId as FooterPluginId } from '@/plugins/footer'
 import type { useFooterStore as FooterStore } from '@/plugins/footer/store'
 import type { resourcesEn as FooterResources } from '@/plugins/footer/locales'
@@ -88,6 +92,7 @@ export type PolarPluginStore<
 
 /** @internal */
 export type BundledPluginId =
+	| typeof FilterPluginId
 	| typeof FooterPluginId
 	| typeof FullscreenPluginId
 	| typeof GeoLocationPluginId
@@ -109,6 +114,7 @@ type GetPluginStore<
 
 /** @internal */
 export type BundledPluginStores<T extends BundledPluginId> =
+	| GetPluginStore<T, typeof FilterPluginId, typeof FilterStore>
 	| GetPluginStore<T, typeof FooterPluginId, typeof FooterStore>
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
 	| GetPluginStore<T, typeof GeoLocationPluginId, typeof GeoLocationStore>
@@ -131,6 +137,7 @@ type GetPluginResources<
 
 /** @internal */
 export type BundledPluginLocaleResources<T extends BundledPluginId> =
+	| GetPluginResources<T, typeof FilterPluginId, typeof FilterResources>
 	| GetPluginResources<T, typeof FooterPluginId, typeof FooterResources>
 	| GetPluginResources<T, typeof FullscreenPluginId, typeof FullscreenResources>
 	| GetPluginResources<

src/plugins/filter/components/FilterCategory.ce.vue

@@ -0,0 +1,53 @@
+<template>
+	<section
+		v-for="category of layerConfiguration.categories"
+		:key="category.targetProperty"
+		class="polar-filter-section"
+	>
+		<h3 class="kern-heading-small">
+			<!-- This line gets very bloated using prettier, so we disable it here -->
+			<!-- eslint-disable-next-line prettier/prettier -->
+			{{ $t(($) => $['layer'][props.layer]['category'][category.targetProperty]['title'], { ns: PluginId }) }}
+		</h3>
+		<div class="polar-filter-category-values">
+			<button
+				v-for="categoryValue of category.knownValues"
+				:key="
+					typeof categoryValue === 'string'
+						? categoryValue
+						: categoryValue.value
+				"
+				class="kern-btn kern-btn--block kern-btn--tertiary"
+			>
+				<span
+					v-if="typeof categoryValue !== 'string' && categoryValue.icon"
+					:class="{ 'kern-icon': true, [categoryValue.icon]: true }"
+					aria-hidden="true"
+				></span>
+				<span class="kern-label">
+					<!-- This line gets very bloated using prettier, so we disable it here -->
+				<!-- eslint-disable prettier/prettier -->
+				{{ $t(($) => $['layer'][props.layer]['category'][category.targetProperty]['knownValue'][
+					typeof categoryValue === 'string' ? categoryValue : categoryValue.value
+				], { ns: PluginId }) }}
+				<!-- eslint-enable prettier/prettier -->
+				</span>
+			</button>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFilterStore } from '../store'
+import { PluginId, type FilterConfiguration } from '../types'
+
+const props = defineProps<{
+	layer: string
+}>()
+
+const filterStore = useFilterStore()
+const layerConfiguration = computed(
+	() => filterStore.configuration.layers[props.layer] as FilterConfiguration
+)
+</script>

src/plugins/filter/components/FilterLayerChooser.ce.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="kern-form-input">
+		<label class="kern-label" for="select">Fachdatensatz auswählen</label>
+		<div class="kern-form-input__select-wrapper">
+			<select v-model="model" class="kern-form-input__select">
+				<option v-for="layer of layers" :key="layer">{{ layer }}</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFilterStore } from '../store'
+
+const model = defineModel<string>()
+
+const filterStore = useFilterStore()
+const layers = computed(() => Object.keys(filterStore.configuration.layers))
+</script>

src/plugins/filter/components/FilterTime.ce.vue

@@ -0,0 +1,62 @@
+<template>
+	<section v-if="layerConfiguration.time" class="polar-filter-section">
+		<h3 class="kern-heading-small">
+			{{ $t(($) => $.time.header, { ns: 'filter' }) }}
+		</h3>
+		<div class="polar-filter-category-values">
+			<button class="kern-btn kern-btn--block kern-btn--tertiary">
+				<span
+					class="kern-icon kern-icon--all-inclusive"
+					aria-hidden="true"
+				></span>
+				<span class="kern-label">
+					{{ $t(($) => $.time.noRestriction, { ns: 'filter' }) }}
+				</span>
+			</button>
+			<button
+				v-for="offset of layerConfiguration.time.last"
+				:key="offset"
+				class="kern-btn kern-btn--block kern-btn--tertiary"
+			>
+				<span class="kern-icon kern-icon--history" aria-hidden="true"></span>
+				<span class="kern-label">
+					{{ $t(($) => $.time.last, { ns: 'filter', count: offset }) }}
+				</span>
+			</button>
+			<button
+				v-for="offset of layerConfiguration.time.next"
+				:key="offset"
+				class="kern-btn kern-btn--block kern-btn--tertiary"
+			>
+				<span class="kern-icon kern-icon--timeline" aria-hidden="true"></span>
+				<span class="kern-label">
+					{{ $t(($) => $.time.next, { ns: 'filter', count: offset }) }}
+				</span>
+			</button>
+			<button class="kern-btn kern-btn--block kern-btn--tertiary">
+				<span
+					class="kern-icon kern-icon--calendar-month"
+					aria-hidden="true"
+				></span>
+				<span class="kern-label">
+					{{ $t(($) => $.time.chooseTimeFrame.label, { ns: 'filter' }) }}
+				</span>
+			</button>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFilterStore } from '../store'
+import { type FilterConfiguration } from '../types'
+
+const props = defineProps<{
+	layer: string
+}>()
+
+const filterStore = useFilterStore()
+const layerConfiguration = computed(
+	() => filterStore.configuration.layers[props.layer] as FilterConfiguration
+)
+</script>

src/plugins/filter/components/FilterUI.ce.vue

@@ -0,0 +1,48 @@
+<template>
+	<PolarCard id="polar-filter-card">
+		<FilterLayerChooser
+			v-if="Object.keys(filterStore.configuration.layers).length > 1"
+			v-model="selectedLayer"
+		/>
+		<FilterCategory v-if="selectedLayer" :layer="selectedLayer" />
+		<FilterTime v-if="selectedLayer" :layer="selectedLayer" />
+	</PolarCard>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useFilterStore } from '../store'
+import FilterCategory from './FilterCategory.ce.vue'
+import FilterLayerChooser from './FilterLayerChooser.ce.vue'
+import FilterTime from './FilterTime.ce.vue'
+import PolarCard from '@/components/PolarCard.ce.vue'
+
+const filterStore = useFilterStore()
+const selectedLayer = ref(Object.keys(filterStore.configuration.layers)[0])
+</script>
+
+<style scoped>
+#polar-filter-card {
+	display: inline-block;
+	height: auto;
+}
+
+:deep(.polar-filter-section) {
+	width: 100%;
+
+	.polar-filter-category-values {
+		display: flex;
+		flex-direction: column;
+		gap: var(--kern-metric-space-x-small);
+	}
+
+	.kern-btn--tertiary {
+		background-color: #edf1fa;
+		justify-content: left;
+
+		.kern-label {
+			text-decoration: none;
+		}
+	}
+}
+</style>