immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 17:25:11 +03:00
Code Issues Packages Projects Releases 18 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>
<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">
<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>
<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">
<Field label={$t('name')}>
<Input bind:value={name} />

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { tagAssets } from '$lib/utils/asset-utils';
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 { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -25,7 +25,11 @@
allTags = await getAllTags();
});
const handleSubmit = async () => {
const onSubmit = async () => {
if (selectedIds.size === 0) {
return;
}
await tagAssets({ tagIds: [...selectedIds], assetIds, showNotification: false });
onClose(true);
};
@@ -47,16 +51,17 @@
const handleRemove = (tag: string) => {
selectedIds.delete(tag);
};
const onsubmit = async (event: Event) => {
event.preventDefault();
await handleSubmit();
};
</script>
<Modal size="small" title={$t('tag_assets')} icon={mdiTag} {onClose}>
<ModalBody>
<form {onsubmit} autocomplete="off" id="create-tag-form">
<FormModal
size="small"
title={$t('tag_assets')}
icon={mdiTag}
{onClose}
{onSubmit}
submitText={$t('tag_assets')}
{disabled}
>
<div class="my-4 flex flex-col gap-2">
<Combobox
onSelect={handleSelect}
@@ -68,7 +73,6 @@
forceFocus
/>
</div>
</form>
<section class="flex flex-wrap pt-2 gap-1">
{#each selectedIds as tagId (tagId)}
@@ -95,12 +99,4 @@
{/if}
{/each}
</section>
</ModalBody>
<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>
</FormModal>

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

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

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { handleEditExclusionPattern } from '$lib/services/library.service';
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 { t } from 'svelte-i18n';
@@ -11,35 +11,20 @@
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, exclusionPattern, newExclusionPattern);
const onSubmit = async () => {
const success = await handleEditExclusionPattern(library, oldValue, newValue);
if (success) {
onClose();
}
};
</script>
<Modal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small">
<ModalBody>
<form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
<FormModal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
<Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
<Field label={$t('pattern')}>
<Input bind:value={newExclusionPattern} />
<Input bind:value={newValue} />
</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>
</FormModal>

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

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

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { handleEditLibraryFolder } from '$lib/services/library.service';
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 { t } from 'svelte-i18n';
@@ -11,35 +11,21 @@
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 success = await handleEditLibraryFolder(library, folder, newFolder);
const onSubmit = async () => {
const success = await handleEditLibraryFolder(library, oldValue, newValue);
if (success) {
onClose();
}
};
</script>
<Modal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} size="small">
<ModalBody>
<form {onsubmit} autocomplete="off" id="library-import-path-form">
<FormModal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
<Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
<Field label={$t('path')}>
<Input bind:value={newFolder} />
<Input bind:value={newValue} />
</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>
</FormModal>

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

@@ -2,7 +2,7 @@
import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
import { handleCreateSharedLink } from '$lib/services/shared-link.service';
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 { t } from 'svelte-i18n';
@@ -22,7 +22,7 @@
let slug = $state('');
let expiresAt = $state<string | null>(null);
let shareType = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
let type = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
$effect(() => {
if (!showMetadata) {
@@ -30,9 +30,9 @@
}
});
const onCreate = async () => {
const onSubmit = async () => {
const success = await handleCreateSharedLink({
type: shareType,
type,
albumId,
assetIds,
expiresAt,
@@ -43,20 +43,25 @@
showMetadata,
slug,
});
if (success) {
onClose(true);
}
};
</script>
<Modal title={$t('create_link_to_share')} icon={mdiLink} size="small" {onClose}>
<ModalBody>
{#if shareType === SharedLinkType.Album}
<FormModal
title={$t('create_link_to_share')}
icon={mdiLink}
size="small"
{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>
{/if}
@@ -92,12 +97,4 @@
<Switch bind:checked={allowUpload} />
</Field>
</div>
</ModalBody>
<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>
</FormModal>

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

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