helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
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'),