Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 10:37:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: dialog controller (#18235)

Browse Source
This commit is contained in:
Jason Rasmussen 2025-05-12 17:48:05 -04:00 committed by GitHub
parent 7544a678ec
commit 93ee6ee0a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 53 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
View File

@ -3,6 +3,7 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { getJobName } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
@ -20,10 +21,9 @@
mdiVideo,
} from '@mdi/js';
import type { Component } from 'svelte';
import { t } from 'svelte-i18n';
import JobTile from './job-tile.svelte';
import StorageMigrationDescription from './storage-migration-description.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
interface Props {
jobs: AllJobStatusResponseDto;
@ -45,7 +45,7 @@
const handleConfirmCommand = async (jobId: JobName, dto: JobCommandDto) => {
if (dto.force) {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
prompt: $t('admin.confirm_reprocess_all_faces'),
});

6
web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { AssetAction } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
import type { AssetResponseDto, StackResponseDto } from '@immich/sdk';
import { mdiPinOutline } from '@mdi/js';
import type { OnAction } from './action';
import { t } from 'svelte-i18n';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import type { OnAction } from './action';
interface Props {
stack: StackResponseDto;
@ -17,7 +17,7 @@
let { stack, asset, onAction }: Props = $props();
const handleKeepThisDeleteOthers = async () => {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('keep_this_delete_others'),
prompt: $t('confirm_keep_this_delete_others'),
confirmText: $t('delete_others'),

7
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { notificationController } from '$lib/components/shared-components/notification/notification';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { getPeopleThumbnailUrl } from '$lib/utils';
@ -284,10 +284,7 @@
return;
}
const isConfirmed = await dialogController.show({
prompt: `Do you want to tag this face as ${person.name}?`,
});
const isConfirmed = await modalManager.showDialog({ prompt: `Do you want to tag this face as ${person.name}?` });
if (!isConfirmed) {
return;
}

7
web/src/lib/components/faces-page/merge-face-selector.svelte
View File

@ -2,8 +2,8 @@
import { goto } from '$app/navigation';
import { page } from '$app/state';
import Icon from '$lib/components/elements/icon.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
@ -69,10 +69,7 @@
};
const handleMerge = async () => {
const isConfirm = await dialogController.show({
prompt: $t('merge_people_prompt'),
});
const isConfirm = await modalManager.showDialog({ prompt: $t('merge_people_prompt') });
if (!isConfirm) {
return;
}

5
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
@ -173,10 +173,9 @@
return;
}
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
prompt: $t('confirm_delete_face', { values: { name: face.person.name } }),
});
if (!isConfirmed) {
return;
}

6
web/src/lib/components/photos-page/actions/remove-from-album.svelte
View File

@ -4,12 +4,12 @@
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
import { mdiDeleteOutline, mdiImageRemoveOutline } 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';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
interface Props {
album: AlbumResponseDto;
@ -22,7 +22,7 @@
const { getAssets, clearSelect } = getAssetControlContext();
const removeFromAlbum = async () => {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
prompt: $t('remove_assets_album_confirmation', { values: { count: getAssets().length } }),
});

4
web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
import { mdiDeleteOutline } from '@mdi/js';
@ -18,7 +18,7 @@
const { getAssets, clearSelect } = getAssetControlContext();
const handleRemove = async () => {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('remove_assets_title'),
prompt: $t('remove_assets_shared_link_confirmation', { values: { count: getAssets().length } }),
confirmText: $t('remove'),

9
web/src/lib/components/shared-components/dialog/dialog-wrapper.svelte
View File

@ -1,9 +0,0 @@
<script lang="ts">
import { dialogController } from './dialog';
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
const { dialog } = dialogController;
</script>
{#if $dialog}
<ConfirmDialog {...$dialog} />
{/if}

42
web/src/lib/components/shared-components/dialog/dialog.ts
View File

@ -1,42 +0,0 @@
import { writable } from 'svelte/store';
type DialogActions = {
onClose: (confirmed: boolean) => void;
};
type DialogOptions = {
title?: string;
prompt?: string;
confirmText?: string;
cancelText?: string;
hideCancelButton?: boolean;
disable?: boolean;
width?: 'wide' | 'narrow' | undefined;
};
export type Dialog = DialogOptions & DialogActions;
function createDialogWrapper() {
const dialog = writable<Dialog | undefined>();
async function show(options: DialogOptions) {
return new Promise<boolean>((resolve) => {
const newDialog: Dialog = {
...options,
onClose: (confirmed) => {
dialog.set(undefined);
resolve(confirmed);
},
};
dialog.set(newDialog);
});
}
return {
dialog,
show,
};
}
export const dialogController = createDialogWrapper();

13
web/src/lib/components/user-settings-page/device-list.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import DeviceCard from './device-card.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { Button } from '@immich/ui';
interface Props {
devices: SessionResponseDto[];
@ -19,10 +19,7 @@
let otherDevices = $derived(devices.filter((device) => !device.current));
const handleDelete = async (device: SessionResponseDto) => {
const isConfirmed = await dialogController.show({
prompt: $t('logout_this_device_confirmation'),
});
const isConfirmed = await modalManager.showDialog({ prompt: $t('logout_this_device_confirmation') });
if (!isConfirmed) {
return;
}
@ -38,7 +35,7 @@
};
const handleDeleteAll = async () => {
const isConfirmed = await dialogController.show({ prompt: $t('logout_all_device_confirmation') });
const isConfirmed = await modalManager.showDialog({ prompt: $t('logout_all_device_confirmation') });
if (!isConfirmed) {
return;
}

3
web/src/lib/components/user-settings-page/partner-settings.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
@ -81,7 +80,7 @@
};
const handleRemovePartner = async (partner: PartnerResponseDto) => {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('stop_photo_sharing'),
prompt: $t('stop_photo_sharing_description', { values: { partner: partner.name } }),
});

3
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
@ -88,7 +87,7 @@
};
const handleDelete = async (key: ApiKeyResponseDto) => {
const isConfirmed = await dialogController.show({ prompt: $t('delete_api_key_prompt') });
const isConfirmed = await modalManager.showDialog({ prompt: $t('delete_api_key_prompt') });
if (!isConfirmed) {
return;
}

24
web/src/lib/components/user-settings-page/user-purchase-settings.svelte
View File

@ -1,27 +1,27 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { onMount } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { preferences, user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import {
deleteServerLicense as deleteServerProductKey,
deleteUserLicense as deleteIndividualProductKey,
deleteServerLicense as deleteServerProductKey,
getAboutInfo,
getMyUser,
getServerLicense,
isHttpError,
type LicenseResponseDto,
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiKey } from '@mdi/js';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { handleError } from '$lib/utils/handle-error';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import { t } from 'svelte-i18n';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import { Button } from '@immich/ui';
import { mdiKey } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
const { isPurchased } = purchaseStore;
let isServerProduct = $state(false);
@ -62,7 +62,7 @@
const removeIndividualProductKey = async () => {
try {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('purchase_remove_product_key'),
prompt: $t('purchase_remove_product_key_prompt'),
confirmText: $t('remove'),
@ -82,7 +82,7 @@
const removeServerProductKey = async () => {
try {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('purchase_remove_server_product_key'),
prompt: $t('purchase_remove_server_product_key_prompt'),
confirmText: $t('remove'),

2
web/src/lib/managers/modal-manager.svelte.ts
View File

@ -34,7 +34,7 @@ class ModalManager {
};
}
openDialog(options: Omit<ComponentProps<typeof ConfirmDialog>, 'onClose'>) {
showDialog(options: Omit<ComponentProps<typeof ConfirmDialog>, 'onClose'>) {
return this.show(ConfirmDialog, options);
}
}

4
web/src/lib/utils/album-utils.ts
View File

@ -1,6 +1,6 @@
import { goto } from '$app/navigation';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import {
AlbumFilter,
AlbumGroupBy,
@ -213,7 +213,7 @@ export const confirmAlbumDelete = async (album: AlbumResponseDto) => {
const description = $t('album_delete_confirmation_description');
const prompt = `${confirmation} ${description}`;
return dialogController.show({ prompt });
return modalManager.showDialog({ prompt });
};
interface AlbumSortOption {

4
web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte
View File

@ -3,13 +3,13 @@
import { page } from '$app/state';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
@ -35,7 +35,7 @@
});
const handleDeleteLink = async (id: string) => {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
title: $t('delete_shared_link'),
prompt: $t('confirm_delete_shared_link'),
confirmText: $t('delete'),

6
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -4,7 +4,6 @@
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
notificationController,
@ -16,15 +15,16 @@
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { AssetStore } from '$lib/stores/assets-store.svelte';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Text } from '@immich/ui';
import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
import { onDestroy } from 'svelte';
interface Props {
data: PageData;
@ -116,7 +116,7 @@
return;
}
const isConfirm = await dialogController.show({
const isConfirm = await modalManager.showDialog({
title: $t('delete_tag'),
prompt: $t('delete_tag_confirmation_prompt', { values: { tagName: tag.value } }),
confirmText: $t('delete'),

12
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -7,13 +7,13 @@
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { AssetStore } from '$lib/stores/assets-store.svelte';
import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
@ -43,10 +43,7 @@
const assetInteraction = new AssetInteraction();
const handleEmptyTrash = async () => {
const isConfirmed = await dialogController.show({
prompt: $t('empty_trash_confirmation'),
});
const isConfirmed = await modalManager.showDialog({ prompt: $t('empty_trash_confirmation') });
if (!isConfirmed) {
return;
}
@ -64,10 +61,7 @@
};
const handleRestoreTrash = async () => {
const isConfirmed = await dialogController.show({
prompt: $t('assets_restore_confirmation'),
});
const isConfirmed = await modalManager.showDialog({ prompt: $t('assets_restore_confirmation') });
if (!isConfirmed) {
return;
}

3
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
import {
NotificationType,
@ -55,7 +54,7 @@
let hasDuplicates = $derived(duplicates.length > 0);
const withConfirmation = async (callback: () => Promise<void>, prompt?: string, confirmText?: string) => {
if (prompt && confirmText) {
const isConfirmed = await dialogController.show({ prompt, confirmText });
const isConfirmed = await modalManager.showDialog({ prompt, confirmText });
if (!isConfirmed) {
return;
}

2
web/src/routes/+layout.svelte
View File

@ -5,7 +5,6 @@
import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
import ErrorLayout from '$lib/components/layouts/ErrorLayout.svelte';
import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
@ -122,7 +121,6 @@
<DownloadPanel />
<UploadPanel />
<NotificationList />
<DialogWrapper />
{#if $user?.isAdmin}
<VersionAnnouncementBox />

7
web/src/routes/admin/library-management/+page.svelte
View File

@ -7,13 +7,13 @@
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { locale } from '$lib/stores/preferences.store';
import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
import { handleError } from '$lib/utils/handle-error';
@ -210,7 +210,7 @@
return;
}
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
prompt: $t('admin.confirm_delete_library', { values: { library: library.name } }),
});
@ -221,10 +221,9 @@
await refreshStats(index);
const assetCount = totalCount[index];
if (assetCount > 0) {
const isConfirmed = await dialogController.show({
const isConfirmed = await modalManager.showDialog({
prompt: $t('admin.confirm_delete_library_assets', { values: { count: assetCount } }),
});
if (!isConfirmed) {
return;
}

4
web/src/routes/admin/users/[id]/+page.svelte
View File

@ -97,7 +97,7 @@
};
const handleResetPassword = async () => {
const isConfirmed = await modalManager.openDialog({
const isConfirmed = await modalManager.showDialog({
prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
});
@ -123,7 +123,7 @@
};
const handleResetUserPinCode = async () => {
const isConfirmed = await modalManager.openDialog({
const isConfirmed = await modalManager.showDialog({
prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
});