summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/filter/components/Filter.svelte
blob: ead5c4d487a39909ec5f739234b1c35f3726ccbd (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script lang="ts">
	import { Association, Enum } from '$lib/Filter';
	import type { ListItem } from '$lib/Utils';
	import Select from '$lib/components/Select.svelte';
	import { getContext } from 'svelte';

	export let title: string;
	const context: 'include' | 'exclude' = getContext('filter-type');
	$: exclude = context === 'exclude';

	const id = `${context}-${title.toLowerCase()}`;

	export let options: ListItem[] | undefined;
	export let filter: Association<string> | Enum<string>;
</script>

<div class:exclude class="filter-container">
	<div class="flex gap-2">
		<label for={id}>{title}</label>
		<div class="ml-auto flex items-center gap-1 self-center text-xs">
			{#if filter instanceof Association}
				<button
					type="button"
					title="matches all"
					class:active={filter.mode === 'all'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'all')}
				>
					&forall;
				</button>
				<button
					type="button"
					title="matches any of"
					class:active={filter.mode === 'any'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'any')}
				>
					&exist;
				</button>
				<button
					type="button"
					title="matches exactly"
					class:active={filter.mode === 'exact'}
					class="btn btn-xs"
					on:click={() => (filter.mode = 'exact')}
				>
					&equals;
				</button>
				<hr class="border-px border-slate-600" />
			{/if}
			<button
				type="button"
				title="empty"
				class:active={filter.empty}
				class="btn btn-xs"
				on:click={() => (filter.empty = !filter.empty)}
			>
				&empty;
			</button>
		</div>
	</div>
	<Select multi clearable {options} {id} bind:value={filter.values} />
</div>

<style lang="postcss">
	button:hover {
		@apply bg-slate-700;
	}

	button.active {
		@apply bg-indigo-800;
	}

	.filter-container {
		grid-column: var(--grid-column);
	}
</style>