gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 23:26:58 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: form modals (#24790)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-12-22 14:15:23 -05:00
committed by GitHub
parent 5a7c9a252c
commit 01e3b8e5df
9 changed files with 163 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/modals/AlbumEditModal.svelte
View File

@@ -24,7 +24,7 @@
}; };
</script> </script>
<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit} submitText={$t('save')}> <FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit}>
<div class="flex items-center gap-8 m-4"> <div class="flex items-center gap-8 m-4">
<AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" /> <AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />

2
web/src/lib/modals/ApiKeyUpdateModal.svelte
View File

@@ -34,7 +34,7 @@
}; };
</script> </script>
<FormModal title={$t('api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} size="giant" submitText={$t('save')}> <FormModal title={$t('api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} size="giant">
<div class="mb-4 flex flex-col gap-2"> <div class="mb-4 flex flex-col gap-2">
<Field label={$t('name')}> <Field label={$t('name')}>
<Input bind:value={name} /> <Input bind:value={name} />

106
web/src/lib/modals/AssetTagModal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { tagAssets } from '$lib/utils/asset-utils'; import { tagAssets } from '$lib/utils/asset-utils';
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk'; import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Icon, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { FormModal, Icon } from '@immich/ui';
import { mdiClose, mdiTag } from '@mdi/js'; import { mdiClose, mdiTag } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -25,7 +25,11 @@
allTags = await getAllTags(); allTags = await getAllTags();
}); });
const handleSubmit = async () => { const onSubmit = async () => {
if (selectedIds.size === 0) {
return;
}
await tagAssets({ tagIds: [...selectedIds], assetIds, showNotification: false }); await tagAssets({ tagIds: [...selectedIds], assetIds, showNotification: false });
onClose(true); onClose(true);
}; };
@@ -47,60 +51,52 @@
const handleRemove = (tag: string) => { const handleRemove = (tag: string) => {
selectedIds.delete(tag); selectedIds.delete(tag);
}; };
const onsubmit = async (event: Event) => {
event.preventDefault();
await handleSubmit();
};
</script> </script>
<Modal size="small" title={$t('tag_assets')} icon={mdiTag} {onClose}> <FormModal
<ModalBody> size="small"
<form {onsubmit} autocomplete="off" id="create-tag-form"> title={$t('tag_assets')}
<div class="my-4 flex flex-col gap-2"> icon={mdiTag}
<Combobox {onClose}
onSelect={handleSelect} {onSubmit}
label={$t('tag')} submitText={$t('tag_assets')}
{allowCreate} {disabled}
defaultFirstOption >
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))} <div class="my-4 flex flex-col gap-2">
placeholder={$t('search_tags')} <Combobox
forceFocus onSelect={handleSelect}
/> label={$t('tag')}
</div> {allowCreate}
</form> defaultFirstOption
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
placeholder={$t('search_tags')}
forceFocus
/>
</div>
<section class="flex flex-wrap pt-2 gap-1"> <section class="flex flex-wrap pt-2 gap-1">
{#each selectedIds as tagId (tagId)} {#each selectedIds as tagId (tagId)}
{@const tag = tagMap[tagId]} {@const tag = tagMap[tagId]}
{#if tag} {#if tag}
<div class="flex group transition-all"> <div class="flex group transition-all">
<span <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-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all" 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-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
> >
<p class="text-sm"> <p class="text-sm">
{tag.value} {tag.value}
</p> </p>
</span> </span>
<button <button
type="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" 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={$t('remove_tag')} title={$t('remove_tag')}
onclick={() => handleRemove(tagId)} onclick={() => handleRemove(tagId)}
> >
<Icon icon={mdiClose} /> <Icon icon={mdiClose} />
</button> </button>
</div> </div>
{/if} {/if}
{/each} {/each}
</section> </section>
</ModalBody> </FormModal>
<ModalFooter>
<HStack fullWidth>
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
</HStack>
</ModalFooter>
</Modal>

41
web/src/lib/modals/LibraryExclusionPatternAddModal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { handleAddLibraryExclusionPattern } from '$lib/services/library.service'; import { handleAddLibraryExclusionPattern } from '$lib/services/library.service';
import type { LibraryResponseDto } from '@immich/sdk'; import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui'; import { Field, FormModal, Input, Text } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -11,33 +11,26 @@
}; };
const { library, onClose }: Props = $props(); const { library, onClose }: Props = $props();
let exclusionPattern = $state(''); let value = $state('');
const onsubmit = async () => { const onSubmit = async () => {
const success = await handleAddLibraryExclusionPattern(library, exclusionPattern); const success = await handleAddLibraryExclusionPattern(library, value);
if (success) { if (success) {
onClose(); onClose();
} }
}; };
</script> </script>
<Modal title={$t('add_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small"> <FormModal
<ModalBody> title={$t('add_exclusion_pattern')}
<form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form"> icon={mdiFolderSync}
<Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text> {onClose}
{onSubmit}
<Field label={$t('pattern')}> submitText={$t('add')}
<Input bind:value={exclusionPattern} /> size="small"
</Field> >
</form> <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
</ModalBody> <Field label={$t('pattern')}>
<Input bind:value />
<ModalFooter> </Field>
<HStack fullWidth> </FormModal>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
{$t('add')}
</Button>
</HStack>
</ModalFooter>
</Modal>

37
web/src/lib/modals/LibraryExclusionPatternEditModal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { handleEditExclusionPattern } from '$lib/services/library.service'; import { handleEditExclusionPattern } from '$lib/services/library.service';
import type { LibraryResponseDto } from '@immich/sdk'; import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui'; import { Field, FormModal, Input, Text } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -11,35 +11,20 @@
onClose: () => void; onClose: () => void;
}; };
const { library, exclusionPattern, onClose }: Props = $props(); const { library, exclusionPattern: oldValue, onClose }: Props = $props();
let newValue = $state(oldValue);
let newExclusionPattern = $state(exclusionPattern); const onSubmit = async () => {
const success = await handleEditExclusionPattern(library, oldValue, newValue);
const onsubmit = async () => {
const success = await handleEditExclusionPattern(library, exclusionPattern, newExclusionPattern);
if (success) { if (success) {
onClose(); onClose();
} }
}; };
</script> </script>
<Modal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small"> <FormModal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
<ModalBody> <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
<form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form"> <Field label={$t('pattern')}>
<Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text> <Input bind:value={newValue} />
</Field>
<Field label={$t('pattern')}> </FormModal>
<Input bind:value={newExclusionPattern} />
</Field>
</form>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
{$t('save')}
</Button>
</HStack>
</ModalFooter>
</Modal>

42
web/src/lib/modals/LibraryFolderAddModal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { handleAddLibraryFolder } from '$lib/services/library.service'; import { handleAddLibraryFolder } from '$lib/services/library.service';
import type { LibraryResponseDto } from '@immich/sdk'; import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui'; import { Field, FormModal, Input, Text } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -11,34 +11,26 @@
}; };
const { library, onClose }: Props = $props(); const { library, onClose }: Props = $props();
let folder = $state(''); let value = $state('');
const onsubmit = async () => {
const success = await handleAddLibraryFolder(library, folder);
const onSubmit = async () => {
const success = await handleAddLibraryFolder(library, value);
if (success) { if (success) {
onClose(); onClose();
} }
}; };
</script> </script>
<Modal title={$t('library_add_folder')} icon={mdiFolderSync} {onClose} size="small"> <FormModal
<ModalBody> title={$t('library_add_folder')}
<form {onsubmit} autocomplete="off" id="library-import-path-form"> icon={mdiFolderSync}
<Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text> {onClose}
{onSubmit}
<Field label={$t('path')}> size="small"
<Input bind:value={folder} /> submitText={$t('add')}
</Field> >
</form> <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
</ModalBody> <Field label={$t('path')}>
<Input bind:value />
<ModalFooter> </Field>
<HStack fullWidth> </FormModal>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="library-import-path-form">
{$t('add')}
</Button>
</HStack>
</ModalFooter>
</Modal>

36
web/src/lib/modals/LibraryFolderEditModal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { handleEditLibraryFolder } from '$lib/services/library.service'; import { handleEditLibraryFolder } from '$lib/services/library.service';
import type { LibraryResponseDto } from '@immich/sdk'; import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui'; import { Field, FormModal, Input, Text } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -11,35 +11,21 @@
onClose: () => void; onClose: () => void;
}; };
const { library, folder, onClose }: Props = $props(); const { library, folder: oldValue, onClose }: Props = $props();
let newFolder = $state(folder); let newValue = $state(oldValue);
const onsubmit = async () => { const onSubmit = async () => {
const success = await handleEditLibraryFolder(library, folder, newFolder); const success = await handleEditLibraryFolder(library, oldValue, newValue);
if (success) { if (success) {
onClose(); onClose();
} }
}; };
</script> </script>
<Modal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} size="small"> <FormModal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
<ModalBody> <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
<form {onsubmit} autocomplete="off" id="library-import-path-form"> <Field label={$t('path')}>
<Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text> <Input bind:value={newValue} />
</Field>
<Field label={$t('path')}> </FormModal>
<Input bind:value={newFolder} />
</Field>
</form>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="library-import-path-form">
{$t('save')}
</Button>
</HStack>
</ModalFooter>
</Modal>

99
web/src/lib/modals/SharedLinkCreateModal.svelte
View File

@@ -2,7 +2,7 @@
import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte'; import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
import { handleCreateSharedLink } from '$lib/services/shared-link.service'; import { handleCreateSharedLink } from '$lib/services/shared-link.service';
import { SharedLinkType } from '@immich/sdk'; import { SharedLinkType } from '@immich/sdk';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, PasswordInput, Switch, Text } from '@immich/ui'; import { Field, FormModal, Input, PasswordInput, Switch, Text } from '@immich/ui';
import { mdiLink } from '@mdi/js'; import { mdiLink } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -22,7 +22,7 @@
let slug = $state(''); let slug = $state('');
let expiresAt = $state<string | null>(null); let expiresAt = $state<string | null>(null);
let shareType = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual); let type = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
$effect(() => { $effect(() => {
if (!showMetadata) { if (!showMetadata) {
@@ -30,9 +30,9 @@
} }
}); });
const onCreate = async () => { const onSubmit = async () => {
const success = await handleCreateSharedLink({ const success = await handleCreateSharedLink({
type: shareType, type,
albumId, albumId,
assetIds, assetIds,
expiresAt, expiresAt,
@@ -43,61 +43,58 @@
showMetadata, showMetadata,
slug, slug,
}); });
if (success) { if (success) {
onClose(true); onClose(true);
} }
}; };
</script> </script>
<Modal title={$t('create_link_to_share')} icon={mdiLink} size="small" {onClose}> <FormModal
<ModalBody> title={$t('create_link_to_share')}
{#if shareType === SharedLinkType.Album} icon={mdiLink}
<div>{$t('album_with_link_access')}</div> size="small"
{/if} {onClose}
{onSubmit}
submitText={$t('create_link')}
>
{#if type === SharedLinkType.Album}
<div>{$t('album_with_link_access')}</div>
{/if}
{#if shareType === SharedLinkType.Individual} {#if type === SharedLinkType.Individual}
<div>{$t('create_link_to_share_description')}</div> <div>{$t('create_link_to_share_description')}</div>
{/if} {/if}
<div class="flex flex-col gap-4 mt-4"> <div class="flex flex-col gap-4 mt-4">
<div> <div>
<Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}> <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
<Input bind:value={slug} autocomplete="off" /> <Input bind:value={slug} autocomplete="off" />
</Field>
{#if slug}
<Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
{/if}
</div>
<Field label={$t('password')} description={$t('shared_link_password_description')}>
<PasswordInput bind:value={password} autocomplete="new-password" />
</Field>
<Field label={$t('description')}>
<Input bind:value={description} autocomplete="off" />
</Field>
<SharedLinkExpiration bind:expiresAt />
<Field label={$t('show_metadata')}>
<Switch bind:checked={showMetadata} />
</Field>
<Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
<Switch bind:checked={allowDownload} />
</Field>
<Field label={$t('allow_public_user_to_upload')}>
<Switch bind:checked={allowUpload} />
</Field> </Field>
{#if slug}
<Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
{/if}
</div> </div>
</ModalBody>
<ModalFooter> <Field label={$t('password')} description={$t('shared_link_password_description')}>
<HStack fullWidth> <PasswordInput bind:value={password} autocomplete="new-password" />
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> </Field>
<Button fullWidth shape="round" onclick={onCreate}>{$t('create_link')}</Button>
</HStack> <Field label={$t('description')}>
</ModalFooter> <Input bind:value={description} autocomplete="off" />
</Modal> </Field>
<SharedLinkExpiration bind:expiresAt />
<Field label={$t('show_metadata')}>
<Switch bind:checked={showMetadata} />
</Field>
<Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
<Switch bind:checked={allowDownload} />
</Field>
<Field label={$t('allow_public_user_to_upload')}>
<Switch bind:checked={allowUpload} />
</Field>
</div>
</FormModal>

18
web/src/lib/services/library.service.ts
View File

@@ -231,14 +231,14 @@ export const handleAddLibraryFolder = async (library: LibraryResponseDto, folder
return true; return true;
}; };
export const handleEditLibraryFolder = async (library: LibraryResponseDto, oldFolder: string, newFolder: string) => { export const handleEditLibraryFolder = async (library: LibraryResponseDto, oldValue: string, newValue: string) => {
const $t = await getFormatter(); const $t = await getFormatter();
if (oldFolder === newFolder) { if (oldValue === newValue) {
return true; return true;
} }
const importPaths = library.importPaths.map((path) => (path === oldFolder ? newFolder : path)); const importPaths = library.importPaths.map((path) => (path === oldValue ? newValue : path));
try { try {
const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { importPaths } }); const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { importPaths } });
@@ -299,20 +299,14 @@ export const handleAddLibraryExclusionPattern = async (library: LibraryResponseD
return true; return true;
}; };
export const handleEditExclusionPattern = async ( export const handleEditExclusionPattern = async (library: LibraryResponseDto, oldValue: string, newValue: string) => {
library: LibraryResponseDto,
oldExclusionPattern: string,
newExclusionPattern: string,
) => {
const $t = await getFormatter(); const $t = await getFormatter();
if (oldExclusionPattern === newExclusionPattern) { if (oldValue === newValue) {
return true; return true;
} }
const exclusionPatterns = library.exclusionPatterns.map((pattern) => const exclusionPatterns = library.exclusionPatterns.map((pattern) => (pattern === oldValue ? newValue : pattern));
pattern === oldExclusionPattern ? newExclusionPattern : pattern,
);
try { try {
const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { exclusionPatterns } }); const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { exclusionPatterns } });