Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 13:27:35 -05: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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 163 additions and 220 deletions
Show Stats 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} />

36
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,16 +51,17 @@
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')}
icon={mdiTag}
{onClose}
{onSubmit}
submitText={$t('tag_assets')}
{disabled}
>
<div class="my-4 flex flex-col gap-2"> <div class="my-4 flex flex-col gap-2">
<Combobox <Combobox
onSelect={handleSelect} onSelect={handleSelect}
@ -68,7 +73,6 @@
forceFocus forceFocus
/> />
</div> </div>
</form>
<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)}
@ -95,12 +99,4 @@
{/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>

35
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}
{onClose}
{onSubmit}
submitText={$t('add')}
size="small"
>
<Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text> <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
<Field label={$t('pattern')}> <Field label={$t('pattern')}>
<Input bind:value={exclusionPattern} /> <Input bind:value />
</Field> </Field>
</form> </FormModal>
</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('add')}
</Button>
</HStack>
</ModalFooter>
</Modal>

31
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>
<form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
<Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text> <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
<Field label={$t('pattern')}> <Field label={$t('pattern')}>
<Input bind:value={newExclusionPattern} /> <Input bind:value={newValue} />
</Field> </Field>
</form> </FormModal>
</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>

36
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}
{onClose}
{onSubmit}
size="small"
submitText={$t('add')}
>
<Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text> <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
<Field label={$t('path')}> <Field label={$t('path')}>
<Input bind:value={folder} /> <Input bind:value />
</Field> </Field>
</form> </FormModal>
</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('add')}
</Button>
</HStack>
</ModalFooter>
</Modal>

30
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>
<form {onsubmit} autocomplete="off" id="library-import-path-form">
<Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text> <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
<Field label={$t('path')}> <Field label={$t('path')}>
<Input bind:value={newFolder} /> <Input bind:value={newValue} />
</Field> </Field>
</form> </FormModal>
</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>

33
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,20 +43,25 @@
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}
size="small"
{onClose}
{onSubmit}
submitText={$t('create_link')}
>
{#if type === SharedLinkType.Album}
<div>{$t('album_with_link_access')}</div> <div>{$t('album_with_link_access')}</div>
{/if} {/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}
@ -92,12 +97,4 @@
<Switch bind:checked={allowUpload} /> <Switch bind:checked={allowUpload} />
</Field> </Field>
</div> </div>
</ModalBody> </FormModal>
<ModalFooter>
<HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button fullWidth shape="round" onclick={onCreate}>{$t('create_link')}</Button>
</HStack>
</ModalFooter>
</Modal>

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 } });