feat(web): Add stacking option to deduplication utilities (#11114)

* feat(web): Add stacking option to deduplication utilities

* Update web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte

Co-authored-by: Alex <alex.tran1502@gmail.com>

* Fix prettier

* Draft for server side modifications. Endpoint for stacks (PUT,DELETE)

* Fix error

* Disable stakc button if less or more than one asset selected

* Remove unnecesarry log

* Revert to first commit

* Further Revert

* Actually Revert to Origin

* Only one stack button

* Update +page.svelte

* Fix optional arguments

* Fix Prettier

* Fix Linting

* Add stack information to asset view

* clean up

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
i-am-a-teapot 2024-08-06 19:06:30 +02:00 committed by GitHub
parent 9f4fad2a0f
commit 65f5118bdd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 82 additions and 30 deletions

View file

@ -7,13 +7,13 @@
import { suggestDuplicateByFileSize } from '$lib/utils';
import { shortcuts } from '$lib/actions/shortcut';
import { type AssetResponseDto } from '@immich/sdk';
import { mdiCheck, mdiTrashCanOutline } from '@mdi/js';
import { mdiCheck, mdiTrashCanOutline, mdiImageMultipleOutline } from '@mdi/js';
import { onDestroy, onMount } from 'svelte';
import { t } from 'svelte-i18n';
export let assets: AssetResponseDto[];
export let onResolve: (duplicateAssetIds: string[], trashIds: string[]) => void;
export let onStack: (assets: AssetResponseDto[]) => void;
const { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
const getAssetIndex = (id: string) => assets.findIndex((asset) => asset.id === id);
@ -60,6 +60,10 @@
const duplicateAssetIds = assets.map((asset) => asset.id);
onResolve(duplicateAssetIds, trashIds);
};
const handleStack = () => {
onStack(assets);
};
</script>
<svelte:window
@ -73,6 +77,7 @@
},
{ shortcut: { key: 'd' }, onShortcut: onSelectNone },
{ shortcut: { key: 'c', shift: true }, onShortcut: handleResolve },
{ shortcut: { key: 's', shift: true }, onShortcut: handleStack },
]}
/>
@ -104,17 +109,38 @@
</div>
<!-- CONFIRM BUTTONS -->
{#if trashCount === 0}
<Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}>
<Icon path={mdiCheck} size="20" />{$t('keep_all')}
<div class="flex text-xs text-black">
{#if trashCount === 0}
<Button
size="sm"
color="primary"
class="flex place-items-center rounded-tl-full rounded-bl-full gap-2"
on:click={handleResolve}
>
<Icon path={mdiCheck} size="20" />{$t('keep_all')}
</Button>
{:else}
<Button
size="sm"
color="red"
class="flex place-items-center rounded-tl-full rounded-bl-full gap-2 py-3"
on:click={handleResolve}
>
<Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
? $t('trash_all')
: $t('trash_count', { values: { count: trashCount } })}
</Button>
{/if}
<Button
size="sm"
color="primary"
class="flex place-items-center rounded-tr-full rounded-br-full gap-2"
on:click={handleStack}
disabled={selectedAssetIds.size !== 1}
>
<Icon path={mdiImageMultipleOutline} size="20" />{$t('stack')}
</Button>
{:else}
<Button size="sm" color="red" class="flex place-items-center gap-2 py-3" on:click={handleResolve}>
<Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
? $t('trash_all')
: $t('trash_count', { values: { count: trashCount } })}
</Button>
{/if}
</div>
</div>
</div>