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: confirm modal (#18238)

Browse source
This commit is contained in:
Jason Rasmussen 2025-05-12 18:02:49 -04:00 • committed by GitHub
parent 93ee6ee0a5
commit 7280331b76
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 45 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
@ -47,7 +47,7 @@
</script>
{#if isConfirmOpen}
<ConfirmDialog
<ConfirmModal
title={$t('admin.disable_login')}
onClose={(confirmed) => (confirmed ? handleSave(true) : (isConfirmOpen = false))}
>
@ -70,7 +70,7 @@
</p>
</div>
{/snippet}
</ConfirmDialog>
</ConfirmModal>
{/if}
<div>

4
web/src/lib/components/album-page/album-options.svelte
View file

@ -2,10 +2,10 @@
import Icon from '$lib/components/elements/icon.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 ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import {
AlbumUserRole,
@ -191,7 +191,7 @@
{/if}
{#if selectedRemoveUser}
<ConfirmDialog
<ConfirmModal
title={$t('album_remove_user')}
prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
confirmText={$t('remove_user')}

15
web/src/lib/components/album-page/share-info-modal.svelte
View file

@ -1,6 +1,13 @@
<script lang="ts">
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 FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import {
AlbumUserRole,
getMyUser,
@ -13,10 +20,6 @@
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import UserAvatar from '../shared-components/user-avatar.svelte';
interface Props {
album: AlbumResponseDto;
@ -140,7 +143,7 @@
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
<ConfirmDialog
<ConfirmModal
title={$t('album_leave')}
prompt={$t('album_leave_confirmation', { values: { album: album.albumName } })}
confirmText={$t('leave')}
@ -149,7 +152,7 @@
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
<ConfirmDialog
<ConfirmModal
title={$t('album_remove_user')}
prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
confirmText={$t('remove_user')}

4
web/src/lib/components/asset-viewer/editor/editor-panel.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
import { websocketEvents } from '$lib/stores/websocket';
import { type AssetResponseDto } from '@immich/sdk';
@ -67,7 +67,7 @@
</section>
{#if $showCancelConfirmDialog}
<ConfirmDialog
<ConfirmModal
title={$t('editor_close_without_save_title')}
prompt={$t('editor_close_without_save_prompt')}
cancelText={$t('no')}

6
web/src/lib/components/photos-page/delete-asset-dialog.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import Checkbox from '$lib/components/elements/checkbox.svelte';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { t } from 'svelte-i18n';
import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
interface Props {
size: number;
@ -23,7 +23,7 @@
};
</script>
<ConfirmDialog
<ConfirmModal
title={$t('permanently_delete_assets_count', { values: { count: size } })}
confirmText={$t('delete')}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
@ -42,4 +42,4 @@
<Checkbox id="confirm-deletion-input" label={$t('do_not_show_again')} bind:checked />
</div>
{/snippet}
</ConfirmDialog>
</ConfirmModal>

6
web/src/lib/components/shared-components/change-date.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { DateTime } from 'luxon';
import { t } from 'svelte-i18n';
import DateInput from '../elements/date-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
import ConfirmDialog from './dialog/confirm-dialog.svelte';
interface Props {
initialDate?: DateTime;
@ -133,7 +133,7 @@
let date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
</script>
<ConfirmDialog
<ConfirmModal
confirmColor="primary"
title={$t('edit_date_and_time')}
prompt="Please select a new date:"
@ -159,4 +159,4 @@
</div>
</div>
{/snippet}
</ConfirmDialog>
</ConfirmModal>

18
web/src/lib/components/shared-components/change-location.svelte
View file

@ -1,20 +1,18 @@
<script lang="ts">
import { timeDebounceOnSearch } from '$lib/constants';
import { lastChosenLocation } from '$lib/stores/asset-editor.store';
import { handleError } from '$lib/utils/handle-error';
import ConfirmDialog from './dialog/confirm-dialog.svelte';
import { clickOutside } from '$lib/actions/click-outside';
import { listNavigation } from '$lib/actions/list-navigation';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import type Map from '$lib/components/shared-components/map/map.svelte';
import { timeToLoadTheMap } from '$lib/constants';
import { timeDebounceOnSearch, timeToLoadTheMap } from '$lib/constants';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { lastChosenLocation } from '$lib/stores/asset-editor.store';
import { delay } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';
import SearchBar from '../elements/search-bar.svelte';
import LoadingSpinner from './loading-spinner.svelte';
interface Point {
lng: number;
lat: number;
@ -112,7 +110,7 @@
};
</script>
<ConfirmDialog
<ConfirmModal
confirmColor="primary"
title={$t('change_location')}
size="medium"
@ -208,4 +206,4 @@
</div>
</div>
{/snippet}
</ConfirmDialog>
</ConfirmModal>

58
web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
View file

@ -1,58 +0,0 @@
<script lang="ts">
import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
interface Props {
title?: string;
prompt?: string;
confirmText?: string;
confirmColor?: Color;
cancelText?: string;
cancelColor?: Color;
hideCancelButton?: boolean;
disabled?: boolean;
size?: 'small' | 'medium';
onClose: (confirmed: boolean) => void;
promptSnippet?: Snippet;
}
let {
title = $t('confirm'),
prompt = $t('are_you_sure_to_do_this'),
confirmText = $t('confirm'),
confirmColor = 'danger',
cancelText = $t('cancel'),
cancelColor = 'secondary',
hideCancelButton = false,
disabled = false,
size = 'small',
onClose,
promptSnippet,
}: Props = $props();
const handleConfirm = () => {
onClose(true);
};
</script>
<Modal {title} onClose={() => onClose(false)} {size} class="bg-light text-dark">
<ModalBody>
{#if promptSnippet}{@render promptSnippet()}{:else}
<p>{prompt}</p>
{/if}
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
{#if !hideCancelButton}
<Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
{cancelText}
</Button>
{/if}
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText}
</Button>
</div>
</ModalFooter>
</Modal>