chore(web): replace window.confirm by ConfirmDialogues and cleanup existing ones (#3039)

* chore(web): replace window.confirm by ConfirmDialogues and cleanup existing ones

* fix(web): linter and svelte-check issues

* fix(web): rephrase some confirm dialogs

* fix(web): run prettier

* fix(web): merge with last version and run prettier again

* fix(web): run prettier
This commit is contained in:
Ethan Margaillan
2023-06-30 21:53:16 +02:00
committed by GitHub
parent 734f8e02b5
commit 5869648f19
14 changed files with 313 additions and 228 deletions

View File

@@ -14,6 +14,12 @@
import { onMount } from 'svelte';
import { flip } from 'svelte/animate';
import Dropdown from '$lib/components/elements/dropdown.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import type { AlbumResponseDto } from '@api';
export let data: PageData;
@@ -23,14 +29,36 @@
albums: unsortedAlbums,
isShowContextMenu,
contextMenuPosition,
contextMenuTargetAlbum,
createAlbum,
deleteAlbum,
deleteSelectedContextAlbum,
showAlbumContextMenu,
closeAlbumContextMenu
} = useAlbums({ albums: data.albums });
let albums = unsortedAlbums;
let albumToDelete: AlbumResponseDto | null;
const setAlbumToDelete = () => {
albumToDelete = $contextMenuTargetAlbum ?? null;
closeAlbumContextMenu();
};
const deleteSelectedAlbum = async () => {
if (!albumToDelete) {
return;
}
try {
await deleteAlbum(albumToDelete);
} catch {
notificationController.show({
message: 'Error deleting album',
type: NotificationType.Error
});
} finally {
albumToDelete = null;
}
};
const sortByDate = (a: string, b: string) => {
const aDate = new Date(a);
@@ -69,7 +97,6 @@
for (const album of $albums) {
if (album.assetCount == 0 && album.albumName == 'Untitled') {
await deleteAlbum(album);
$albums = $albums.filter((a) => a.id !== album.id);
}
}
} catch (error) {
@@ -120,7 +147,7 @@
<!-- Context Menu -->
{#if $isShowContextMenu}
<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
<MenuOption on:click={deleteSelectedContextAlbum}>
<MenuOption on:click={() => setAlbumToDelete()}>
<span class="flex place-items-center place-content-center gap-2">
<DeleteOutline size="18" />
<p>Delete album</p>
@@ -128,3 +155,17 @@
</MenuOption>
</ContextMenu>
{/if}
{#if albumToDelete}
<ConfirmDialogue
title="Delete Album"
confirmText="Delete"
on:confirm={deleteSelectedAlbum}
on:cancel={() => (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}