chore(web): migration svelte 5 syntax (#13883)
This commit is contained in:
@@ -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}>
|
||||
|
||||
+42
-38
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user