chore(web): migration svelte 5 syntax (#13883)

This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
+5 -1
View File
@@ -3,7 +3,11 @@
import type { PageData } from './$types';
import UtilitiesMenu from '$lib/components/utilities-page/utilities-menu.svelte';
export let data: PageData;
interface Props {
data: PageData;
}
let { data }: Props = $props();
</script>
<UserPageLayout title={data.meta.title}>
@@ -22,8 +22,12 @@
import Icon from '$lib/components/elements/icon.svelte';
import { locale } from '$lib/stores/preferences.store';
export let data: PageData;
export let isShowKeyboardShortcut = false;
interface Props {
data: PageData;
isShowKeyboardShortcut?: boolean;
}
let { data = $bindable(), isShowKeyboardShortcut = $bindable(false) }: Props = $props();
interface Shortcuts {
general: ExplainedShortcut[];
@@ -46,8 +50,8 @@
],
};
$: hasDuplicates = data.duplicates.length > 0;
let duplicates = $state(data.duplicates);
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 });
@@ -82,7 +86,7 @@
await deleteAssets({ assetBulkDeleteDto: { ids: trashIds, force: !$featureFlags.trash } });
await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
data.duplicates = data.duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
deletedNotification(trashIds.length);
},
@@ -95,14 +99,12 @@
await stackAssets(assets, false);
const duplicateAssetIds = assets.map((asset) => asset.id);
await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
data.duplicates = data.duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
};
const handleDeduplicateAll = async () => {
const idsToKeep = data.duplicates
.map((group) => suggestDuplicateByFileSize(group.assets))
.map((asset) => asset?.id);
const idsToDelete = data.duplicates.flatMap((group, i) =>
const idsToKeep = duplicates.map((group) => suggestDuplicateByFileSize(group.assets)).map((asset) => asset?.id);
const idsToDelete = duplicates.flatMap((group, i) =>
group.assets.map((asset) => asset.id).filter((asset) => asset !== idsToKeep[i]),
);
@@ -125,7 +127,7 @@
},
});
data.duplicates = [];
duplicates = [];
deletedNotification(idsToDelete.length);
},
@@ -135,12 +137,12 @@
};
const handleKeepAll = async () => {
const ids = data.duplicates.flatMap((group) => group.assets.map((asset) => asset.id));
const ids = duplicates.flatMap((group) => group.assets.map((asset) => asset.id));
return withConfirmation(
async () => {
await updateAssets({ assetBulkUpdateDto: { ids, duplicateId: null } });
data.duplicates = [];
duplicates = [];
notificationController.show({
message: $t('resolved_all_duplicates'),
@@ -153,38 +155,40 @@
};
</script>
<UserPageLayout title={data.meta.title + ` (${data.duplicates.length.toLocaleString($locale)})`} scrollbar={true}>
<div class="flex place-items-center gap-2" slot="buttons">
<LinkButton on:click={() => handleDeduplicateAll()} disabled={!hasDuplicates}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiTrashCanOutline} size="18" />
{$t('deduplicate_all')}
</div>
</LinkButton>
<LinkButton on:click={() => handleKeepAll()} disabled={!hasDuplicates}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiCheckOutline} size="18" />
{$t('keep_all')}
</div>
</LinkButton>
<CircleIconButton
icon={mdiKeyboard}
title={$t('show_keyboard_shortcuts')}
on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
/>
</div>
<UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>
{#snippet buttons()}
<div class="flex place-items-center gap-2">
<LinkButton onclick={() => handleDeduplicateAll()} disabled={!hasDuplicates}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiTrashCanOutline} size="18" />
{$t('deduplicate_all')}
</div>
</LinkButton>
<LinkButton onclick={() => handleKeepAll()} disabled={!hasDuplicates}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiCheckOutline} size="18" />
{$t('keep_all')}
</div>
</LinkButton>
<CircleIconButton
icon={mdiKeyboard}
title={$t('show_keyboard_shortcuts')}
onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
/>
</div>
{/snippet}
<div class="mt-4">
{#if data.duplicates && data.duplicates.length > 0}
{#if duplicates && duplicates.length > 0}
<div class="mb-4 text-sm dark:text-white">
<p>{$t('duplicates_description')}</p>
</div>
{#key data.duplicates[0].duplicateId}
{#key duplicates[0].duplicateId}
<DuplicatesCompareControl
assets={data.duplicates[0].assets}
assets={duplicates[0].assets}
onResolve={(duplicateAssetIds, trashIds) =>
handleResolve(data.duplicates[0].duplicateId, duplicateAssetIds, trashIds)}
onStack={(assets) => handleStack(data.duplicates[0].duplicateId, assets)}
handleResolve(duplicates[0].duplicateId, duplicateAssetIds, trashIds)}
onStack={(assets) => handleStack(duplicates[0].duplicateId, assets)}
/>
{/key}
{:else}