|
|
|
|
@ -3,13 +3,14 @@
|
|
|
|
|
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
|
|
|
|
|
import { preferences } from '$lib/stores/user.store';
|
|
|
|
|
import { getAllTags, type TagResponseDto } from '@immich/sdk';
|
|
|
|
|
import { Checkbox, Label } from '@immich/ui';
|
|
|
|
|
import { mdiClose } from '@mdi/js';
|
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
import { t } from 'svelte-i18n';
|
|
|
|
|
import { SvelteSet } from 'svelte/reactivity';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
selectedTags: SvelteSet<string>;
|
|
|
|
|
selectedTags: SvelteSet<string> | null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let { selectedTags = $bindable() }: Props = $props();
|
|
|
|
|
@ -23,7 +24,7 @@
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleSelect = (option?: ComboBoxOption) => {
|
|
|
|
|
if (!option || !option.id) {
|
|
|
|
|
if (!option || !option.id || selectedTags === null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -32,6 +33,10 @@
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRemove = (tag: string) => {
|
|
|
|
|
if (selectedTags === null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectedTags.delete(tag);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -41,6 +46,7 @@
|
|
|
|
|
<form autocomplete="off" id="create-tag-form">
|
|
|
|
|
<div class="my-4 flex flex-col gap-2">
|
|
|
|
|
<Combobox
|
|
|
|
|
disabled={selectedTags === null}
|
|
|
|
|
onSelect={handleSelect}
|
|
|
|
|
label={$t('tags').toUpperCase()}
|
|
|
|
|
defaultFirstOption
|
|
|
|
|
@ -49,10 +55,21 @@
|
|
|
|
|
placeholder={$t('search_tags')}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<Checkbox
|
|
|
|
|
id="untagged-checkbox"
|
|
|
|
|
size="tiny"
|
|
|
|
|
checked={selectedTags === null}
|
|
|
|
|
onCheckedChange={(checked) => {
|
|
|
|
|
selectedTags = checked ? null : new SvelteSet();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<Label label={$t('untagged')} for="untagged-checkbox" />
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<section class="flex flex-wrap pt-2 gap-1">
|
|
|
|
|
{#each selectedTags as tagId (tagId)}
|
|
|
|
|
{#each selectedTags ?? [] as tagId (tagId)}
|
|
|
|
|
{@const tag = tagMap[tagId]}
|
|
|
|
|
{#if tag}
|
|
|
|
|
<div class="flex group transition-all">
|
|
|
|
|
|