github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): tag service (#25142)

Browse Source
This commit is contained in:
Jason Rasmussen
2026-01-08 16:37:58 -05:00
committed by GitHub
parent 5d1e486478
commit 8136d7fd54
5 changed files with 157 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/modals/TagCreateModal.svelte
+13 -42
View File
@@ -1,14 +1,12 @@
<script lang="ts">
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { handleCreateTag } from '$lib/services/tag.service';
import type { TreeNode } from '$lib/utils/tree-utils';
import { upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { Field, FormModal, Input, Text } from '@immich/ui';
import { mdiTag } from '@mdi/js';
import { t } from 'svelte-i18n';
type Props = {
onClose: (tag?: TagResponseDto) => void;
onClose: () => void;
baseTag?: TreeNode;
};
@@ -16,44 +14,17 @@
let tagValue = $state(baseTag?.path ? `${baseTag.path}/` : '');
const createTag = async () => {
const [tag] = await upsertTags({ tagUpsertDto: { tags: [tagValue] } });
if (!tag) {
return;
const onSubmit = async () => {
const success = await handleCreateTag(tagValue);
if (success) {
onClose();
}
toastManager.success($t('tag_created', { values: { tag: tag.value } }));
onClose(tag);
};
</script>
<Modal size="small" title={$t('create_tag')} icon={mdiTag} {onClose}>
<ModalBody>
<div class="text-primary">
<p class="text-sm dark:text-immich-dark-fg">
{$t('create_tag_description')}
</p>
</div>
<form onsubmit={createTag} autocomplete="off" id="create-tag-form">
<div class="my-4 flex flex-col gap-2">
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label={$t('tag')}
bind:value={tagValue}
required={true}
autofocus={true}
/>
</div>
</form>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
</HStack>
</ModalFooter>
</Modal>
<FormModal size="small" title={$t('create_tag')} submitText={$t('create')} icon={mdiTag} {onClose} {onSubmit}>
<Text size="small">{$t('create_tag_description')}</Text>
<Field label={$t('tag')} required>
<Input autofocus bind:value={tagValue} />
</Field>
</FormModal>
web/src/lib/modals/TagEditModal.svelte
+10 -28
View File
@@ -1,47 +1,29 @@
<script lang="ts">
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { handleUpdateTag } from '$lib/services/tag.service';
import type { TreeNode } from '$lib/utils/tree-utils';
import { updateTag, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { FormModal } from '@immich/ui';
import { mdiTag } from '@mdi/js';
import { t } from 'svelte-i18n';
type Props = {
tag: TreeNode;
onClose: (updatedTag?: TagResponseDto) => void;
onClose: () => void;
};
const { tag, onClose }: Props = $props();
let tagColor = $state(tag.color ?? '');
const handleEdit = async () => {
if (!tag.id) {
return;
const onSubmit = async () => {
const success = await handleUpdateTag(tag, { color: tagColor });
if (success) {
onClose();
}
const updatedTag = await updateTag({ id: tag.id, tagUpdateDto: { color: tagColor } });
toastManager.success($t('tag_updated', { values: { tag: tag.value } }));
onClose(updatedTag);
};
</script>
<Modal title={$t('edit_tag')} icon={mdiTag} {onClose}>
<ModalBody>
<form onsubmit={handleEdit} autocomplete="off" id="edit-tag-form">
<div class="my-4 flex flex-col gap-2">
<SettingInputField inputType={SettingInputFieldType.COLOR} label={$t('color')} bind:value={tagColor} />
</div>
</form>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
</HStack>
</ModalFooter>
</Modal>
<FormModal title={$t('edit_tag')} size="small" icon={mdiTag} {onClose} {onSubmit}>
<SettingInputField inputType={SettingInputFieldType.COLOR} label={$t('color')} bind:value={tagColor} />
</FormModal>