helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: asset tag modal (#18867)

Browse source
This commit is contained in:
Daniel Dietzler 2025-06-02 18:41:28 +02:00 • committed by GitHub
parent 72401aa6b1
commit 97e86e409a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 33 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

102
web/src/lib/components/forms/tag-asset-form.svelte
View file

@ -1,102 +0,0 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiClose, mdiTag } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { SvelteSet } from 'svelte/reactivity';
import Combobox, { type ComboBoxOption } from '../shared-components/combobox.svelte';
interface Props {
onTag: (tagIds: string[]) => void;
onCancel: () => void;
}
let { onTag, onCancel }: Props = $props();
let allTags: TagResponseDto[] = $state([]);
let tagMap = $derived(Object.fromEntries(allTags.map((tag) => [tag.id, tag])));
let selectedIds = new SvelteSet<string>();
let disabled = $derived(selectedIds.size === 0);
let allowCreate: boolean = $state(true);
onMount(async () => {
allTags = await getAllTags();
});
const handleSubmit = () => onTag([...selectedIds]);
const handleSelect = async (option?: ComboBoxOption) => {
if (!option) {
return;
}
if (option.id) {
selectedIds.add(option.value);
} else {
const [newTag] = await upsertTags({ tagUpsertDto: { tags: [option.label] } });
allTags.push(newTag);
selectedIds.add(newTag.id);
}
};
const handleRemove = (tag: string) => {
selectedIds.delete(tag);
};
const onsubmit = (event: Event) => {
event.preventDefault();
handleSubmit();
};
</script>
<Modal size="small" title={$t('tag_assets')} icon={mdiTag} onClose={onCancel}>
<ModalBody>
<form {onsubmit} autocomplete="off" id="create-tag-form">
<div class="my-4 flex flex-col gap-2">
<Combobox
onSelect={handleSelect}
label={$t('tag')}
{allowCreate}
defaultFirstOption
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
placeholder={$t('search_tags')}
/>
</div>
</form>
<section class="flex flex-wrap pt-2 gap-1">
{#each selectedIds as tagId (tagId)}
{@const tag = tagMap[tagId]}
{#if tag}
<div class="flex group transition-all">
<span
class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
>
<p class="text-sm">
{tag.value}
</p>
</span>
<button
type="button"
class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
title="Remove tag"
onclick={() => handleRemove(tagId)}
>
<Icon path={mdiClose} />
</button>
</div>
{/if}
{/each}
</section>
</ModalBody>
<ModalFooter>
<div class="flex w-full gap-2">
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
</div>
</ModalFooter>
</Modal>