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,43 @@
 						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: {
+									skat: {
+										title: 'Schadensart',
+										knownValue: {
+											100: 'Wege und Straßen',
+											101: 'Schlagloch und Wegeschaden',
+											102: 'Verunreinigung und Vandalismus',
+										},
+									},
+									statu: {
+										title: 'Bearbeitungsstatus',
+										knownValue: {
+											'In Bearbeitung': 'In Bearbeitung',
+											abgeschlossen: 'Abgeschlossen',
+										},
+									},
+								},
+							},
+						},
+					},
 					fullscreen: {
 						button: {
 							label_on: 'Mach groß',
@@ -260,7 +284,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -285,7 +309,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -311,6 +335,55 @@
 					icon: 'kern-icon-fill--share',
 				},
 			],
+			[
+				{
+					plugin: pluginFilter({
+						layers: {
+							[reports]: {
+								categories: [
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												value: '100',
+												icon: 'kern-icon--road',
+											},
+											{
+												value: '101',
+												icon: 'kern-icon--remove-road',
+											},
+											{
+												value: '102',
+												icon: 'kern-icon--destruction',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'statu',
+										knownValues: [
+											{
+												value: 'In Bearbeitung',
+												icon: 'kern-icon--assignment',
+											},
+											{
+												value: 'abgeschlossen',
+												icon: 'kern-icon--check',
+											},
+										],
+									},
+								],
+								time: {
+									targetProperty: 'start',
+									freeSelection: 'until',
+									last: [0, 7, 30],
+									pattern: 'YYYYMMDD',
+								},
+							},
+						},
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginLayerChooser({}),

src/components/kern/KernBlockButton.ce.vue

@@ -0,0 +1,37 @@
+<template>
+	<button
+		class="kern-btn kern-btn--block kern-btn--tertiary"
+		@click="emit('click')"
+	>
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		></span>
+		<span class="kern-label">{{ props.label }}</span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const emit = defineEmits<{
+	click: []
+}>()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+</style>

src/components/kern/KernBlockButtonCheckbox.ce.vue

@@ -0,0 +1,45 @@
+<template>
+	<input :id="id" v-model="model" type="checkbox" />
+	<label :for="id" class="kern-btn kern-btn--block kern-btn--tertiary">
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		></span>
+		<span class="kern-label">{{ props.label }}</span>
+	</label>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const id = useId()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+input[type='checkbox'] {
+	display: none;
+
+	&:checked + label {
+		border: var(--kern-metric-border-width-default) solid
+			var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernBlockButtonRadioGroup.ce.vue

@@ -0,0 +1,59 @@
+<template>
+	<template v-for="item of props.items" :key="item.value">
+		<input
+			:id="id + '*' + item.value"
+			v-model="model"
+			type="radio"
+			:name="id"
+			:value="item.value"
+		/>
+		<label
+			:for="id + '*' + item.value"
+			class="kern-btn kern-btn--block kern-btn--tertiary"
+		>
+			<span
+				v-if="item.icon"
+				:class="{ 'kern-icon': true, [item.icon]: true }"
+				aria-hidden="true"
+			></span>
+			<span class="kern-label">{{ item.label }}</span>
+		</label>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	items: {
+		value: string
+		label: string
+		icon?: Icon | false
+	}[]
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const id = useId()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+input[type='radio'] {
+	display: none;
+
+	&:checked + label {
+		border: var(--kern-metric-border-width-default) solid
+			var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernDatePicker.ce.vue

@@ -0,0 +1,28 @@
+<template>
+	<input
+		v-model="inputModel"
+		type="date"
+		class="kern-form-input__input"
+		:min="dateToString(props.min ?? null)"
+		:max="dateToString(props.max ?? null)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { dateToString, stringToDate } from '@/lib/dateUtils'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const model = defineModel<Date | null>({ required: true })
+
+const inputModel = computed({
+	get: () => dateToString(model.value),
+	set: (value) => {
+		model.value = stringToDate(value)
+	},
+})
+</script>

src/components/kern/KernDateRangePicker.ce.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="range-picker">
+		<KernDatePicker v-model="start" v-bind="props" />
+		–
+		<KernDatePicker v-model="end" v-bind="props" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import KernDatePicker from './KernDatePicker.ce.vue'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const start = defineModel<Date | null>('start', { required: true })
+const end = defineModel<Date | null>('end', { required: true })
+</script>
+
+<style scoped>
+.range-picker {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0.3em 0;
+}
+</style>