mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor: asset tag modal (#18867)
This commit is contained in:
Daniel Dietzler
GitHub
parent
72401aa6b1
commit
97e86e409a
3 changed files with 33 additions and 63 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { removeTag, tagAssets } from '$lib/utils/asset-utils';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
|
||||
import { removeTag } from '$lib/utils/asset-utils';
|
||||
import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
|
||||
import { mdiClose, mdiPlus } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
|
@ -19,19 +19,12 @@
|
|||
|
||||
let tags = $derived(asset.tags || []);
|
||||
|
||||
let isOpen = $state(false);
|
||||
const handleAddTag = async () => {
|
||||
const success = await modalManager.show(AssetTagModal, { assetIds: [asset.id] });
|
||||
|
||||
const handleAdd = () => (isOpen = true);
|
||||
|
||||
const handleCancel = () => (isOpen = false);
|
||||
|
||||
const handleTag = async (tagIds: string[]) => {
|
||||
const ids = await tagAssets({ tagIds, assetIds: [asset.id], showNotification: false });
|
||||
if (ids) {
|
||||
isOpen = false;
|
||||
if (success) {
|
||||
asset = await getAssetInfo({ id: asset.id });
|
||||
}
|
||||
|
||||
asset = await getAssetInfo({ id: asset.id });
|
||||
};
|
||||
|
||||
const handleRemove = async (tagId: string) => {
|
||||
|
|
@ -42,7 +35,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: () => (isOpen = true) }} />
|
||||
<svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: handleAddTag }} />
|
||||
|
||||
{#if isOwner && !authManager.key}
|
||||
<section class="px-4 mt-4">
|
||||
|
|
@ -75,16 +68,10 @@
|
|||
type="button"
|
||||
class="rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 flex place-items-center place-content-center gap-1 px-2 py-1"
|
||||
title="Add tag"
|
||||
onclick={handleAdd}
|
||||
onclick={handleAddTag}
|
||||
>
|
||||
<span class="text-sm px-1 flex place-items-center place-content-center gap-1"><Icon path={mdiPlus} />Add</span>
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if isOpen}
|
||||
<Portal>
|
||||
<TagAssetForm onTag={(tagsIds) => handleTag(tagsIds)} onCancel={handleCancel} />
|
||||
</Portal>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
|
||||
import { tagAssets } from '$lib/utils/asset-utils';
|
||||
import { mdiTagMultipleOutline, mdiTimerSand } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiTagMultipleOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||
|
||||
|
|
@ -17,45 +17,24 @@
|
|||
const text = $t('tag');
|
||||
const icon = mdiTagMultipleOutline;
|
||||
|
||||
let loading = $state(false);
|
||||
let isOpen = $state(false);
|
||||
|
||||
const { clearSelect, getOwnedAssets } = getAssetControlContext();
|
||||
|
||||
const handleOpen = () => (isOpen = true);
|
||||
const handleCancel = () => (isOpen = false);
|
||||
const handleTag = async (tagIds: string[]) => {
|
||||
const handleTagAssets = async () => {
|
||||
const assets = [...getOwnedAssets()];
|
||||
loading = true;
|
||||
const ids = await tagAssets({ tagIds, assetIds: assets.map((asset) => asset.id) });
|
||||
if (ids) {
|
||||
const success = await modalManager.show(AssetTagModal, { assetIds: assets.map(({ id }) => id) });
|
||||
|
||||
if (success) {
|
||||
clearSelect();
|
||||
}
|
||||
loading = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: () => (isOpen = true) }} />
|
||||
<svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: handleTagAssets }} />
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption {text} {icon} onClick={handleOpen} />
|
||||
<MenuOption {text} {icon} onClick={handleTagAssets} />
|
||||
{/if}
|
||||
|
||||
{#if !menuItem}
|
||||
{#if loading}
|
||||
<IconButton
|
||||
shape="round"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
aria-label={$t('loading')}
|
||||
icon={mdiTimerSand}
|
||||
onclick={() => {}}
|
||||
/>
|
||||
{:else}
|
||||
<IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleOpen} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if isOpen}
|
||||
<TagAssetForm onTag={(tagIds) => handleTag(tagIds)} onCancel={handleCancel} />
|
||||
<IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleTagAssets} />
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue