refactor(web): tag service (#25142)

web/src/lib/managers/event-manager.svelte.ts

@@ -1,5 +1,6 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
 import type { ReleaseEvent } from '$lib/types';
+import type { TreeNode } from '$lib/utils/tree-utils';
 import type {
   AlbumResponseDto,
   ApiKeyResponseDto,
@@ -10,6 +11,7 @@ import type {
   QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
+  TagResponseDto,
   UserAdminResponseDto,
   WorkflowResponseDto,
 } from '@immich/sdk';
@@ -42,6 +44,10 @@ export type Events = {
   SharedLinkUpdate: [SharedLinkResponseDto];
   SharedLinkDelete: [SharedLinkResponseDto];
 
+  TagCreate: [TagResponseDto];
+  TagUpdate: [TagResponseDto];
+  TagDelete: [TreeNode];
+
   UserAdminCreate: [UserAdminResponseDto];
   UserAdminUpdate: [UserAdminResponseDto];
   UserAdminRestore: [UserAdminResponseDto];

web/src/lib/modals/TagCreateModal.svelte

@@ -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

@@ -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>

web/src/lib/services/tag.service.ts

@@ -0,0 +1,98 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
+import TagEditModal from '$lib/modals/TagEditModal.svelte';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import type { TreeNode } from '$lib/utils/tree-utils';
+import { deleteTag, updateTag, upsertTags, type TagUpdateDto } from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
+import { mdiPencil, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
+import { type MessageFormatter } from 'svelte-i18n';
+
+export const getTagActions = ($t: MessageFormatter, tag: TreeNode) => {
+  const Create: ActionItem = {
+    title: $t('create_tag'),
+    icon: mdiPlus,
+    onAction: () => modalManager.show(TagCreateModal, { baseTag: tag }),
+  };
+
+  const Update: ActionItem = {
+    title: $t('edit_tag'),
+    icon: mdiPencil,
+    $if: () => tag.path.length > 0,
+    onAction: () => modalManager.show(TagEditModal, { tag }),
+  };
+
+  const Delete: ActionItem = {
+    title: $t('delete_tag'),
+    icon: mdiTrashCanOutline,
+    $if: () => tag.path.length > 0,
+    onAction: () => handleDeleteTag(tag),
+  };
+
+  return { Create, Update, Delete };
+};
+
+export const handleCreateTag = async (tagValue: string) => {
+  const $t = await getFormatter();
+
+  try {
+    const [tag] = await upsertTags({ tagUpsertDto: { tags: [tagValue] } });
+    if (!tag) {
+      return;
+    }
+
+    toastManager.success($t('tag_created', { values: { tag: tag.value } }));
+    eventManager.emit('TagCreate', tag);
+
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+export const handleUpdateTag = async (tag: TreeNode, dto: TagUpdateDto) => {
+  const $t = await getFormatter();
+
+  if (!tag.id) {
+    return;
+  }
+
+  try {
+    const response = await updateTag({ id: tag.id, tagUpdateDto: dto });
+
+    toastManager.success($t('tag_updated', { values: { tag: tag.value } }));
+    eventManager.emit('TagUpdate', response);
+
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+const handleDeleteTag = async (tag: TreeNode) => {
+  const $t = await getFormatter();
+
+  const tagId = tag.id;
+  if (!tagId) {
+    return;
+  }
+
+  const confirmed = await modalManager.showDialog({
+    title: $t('delete_tag'),
+    prompt: $t('delete_tag_confirmation_prompt', { values: { tagName: tag.value } }),
+    confirmText: $t('delete'),
+  });
+
+  if (!confirmed) {
+    return;
+  }
+
+  try {
+    await deleteTag({ id: tagId });
+    eventManager.emit('TagDelete', tag);
+    toastManager.success();
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};