refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback
This commit is contained in:
Alex 2024-05-28 09:10:43 +07:00 committed by GitHub
parent f020d29ab6
commit bce916e4c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 281 additions and 317 deletions

View file

@ -5,7 +5,6 @@
import { mdiDeleteOutline, mdiShareVariantOutline, mdiFolderDownloadOutline, mdiRenameOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import {
NotificationType,
@ -33,6 +32,7 @@
} from '$lib/stores/preferences.store';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
export let ownedAlbums: AlbumResponseDto[] = [];
export let sharedAlbums: AlbumResponseDto[] = [];
@ -275,9 +275,10 @@
sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
};
const setAlbumToDelete = () => {
const setAlbumToDelete = async () => {
albumToDelete = contextMenuTargetAlbum ?? null;
closeAlbumContextMenu();
await deleteSelectedAlbum();
};
const handleEdit = (album: AlbumResponseDto) => {
@ -289,6 +290,16 @@
if (!albumToDelete) {
return;
}
const isConfirmed = await dialogController.show({
id: 'delete-album',
prompt: `Are you sure you want to delete the album ${albumToDelete.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
});
if (!isConfirmed) {
return;
}
try {
await handleDeleteAlbum(albumToDelete);
} catch {
@ -456,20 +467,4 @@
/>
{/if}
{/if}
<!-- Delete Modal -->
{#if albumToDelete}
<ConfirmDialogue
id="delete-album-dialogue-modal"
title="Delete album"
confirmText="Delete"
onConfirm={deleteSelectedAlbum}
onClose={() => (albumToDelete = null)}
>
<svelte:fragment slot="prompt">
<p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
<p>If this album is shared, other users will not be able to access it anymore.</p>
</svelte:fragment>
</ConfirmDialogue>
{/if}
{/if}

View file

@ -12,7 +12,7 @@
import { getContextMenuPosition } from '../../utils/context-menu';
import { handleError } from '../../utils/handle-error';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
@ -155,23 +155,23 @@
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
<ConfirmDialogue
<ConfirmDialog
id="leave-album-modal"
title="Leave album?"
prompt="Are you sure you want to leave {album.albumName}?"
confirmText="Leave"
onConfirm={handleRemoveUser}
onClose={() => (selectedRemoveUser = null)}
onCancel={() => (selectedRemoveUser = null)}
/>
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
<ConfirmDialogue
<ConfirmDialog
id="remove-user-modal"
title="Remove user?"
prompt="Are you sure you want to remove {selectedRemoveUser.name}?"
confirmText="Remove"
onConfirm={handleRemoveUser}
onClose={() => (selectedRemoveUser = null)}
onCancel={() => (selectedRemoveUser = null)}
/>
{/if}