feat(web): select all duplicates (#10189)

* feat(web): select all duplicates

Allows users to select or deselect all duplicate photos when removing duplicates

* styling

* chore(web): add more translations to duplicates page

* color

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Zack Pollard <zackpollard@ymail.com>
This commit is contained in:
Daniel Heppner 2024-06-12 06:01:55 -07:00 committed by GitHub
parent ae095baad3
commit 52170423be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 14 deletions

View file

@ -39,6 +39,16 @@
selectedAssetIds = selectedAssetIds;
};
const onSelectNone = () => {
selectedAssetIds.clear();
selectedAssetIds = selectedAssetIds;
};
const onSelectAll = () => {
selectedAssetIds = new Set(duplicate.assets.map((asset) => asset.id));
selectedAssetIds = selectedAssetIds;
};
const handleResolve = () => {
const trashIds = duplicate.assets.map((asset) => asset.id).filter((id) => !selectedAssetIds.has(id));
const duplicateAssetIds = duplicate.assets.map((asset) => asset.id);
@ -76,7 +86,7 @@
<div
class="absolute top-2 right-3 bg-immich-primary/90 px-4 py-1 rounded-xl text-xs font-semibold text-white"
>
External
{$t('external')}
</div>
{/if}
</button>
@ -117,18 +127,34 @@
{/each}
</div>
<!-- CONFIRM BUTTONS -->
<div class="flex gap-4 my-4 border-transparent w-full justify-end p-4 h-[85px]">
{#if trashCount === 0}
<Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}
><Icon path={mdiCheck} size="20" />Keep All
</Button>
{:else}
<Button size="sm" color="red" class="flex place-items-center gap-2" on:click={handleResolve}
><Icon path={mdiTrashCanOutline} size="20" />{trashCount === duplicate.assets.length
? $t('trash_all')
: `Trash ${trashCount}`}
</Button>
{/if}
<div class="flex mt-10 mb-4 px-6 w-full place-content-end justify-between h-[45px]">
<!-- MARK ALL BUTTONS -->
<div class="flex text-xs text-black">
<button
type="button"
class="px-4 flex place-items-center gap-2 rounded-tl-full rounded-bl-full dark:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/90 bg-immich-primary/25 hover:bg-immich-primary/50"
on:click={onSelectAll}><Icon path={mdiCheck} size="20" />{$t('select_keep_all')}</button
>
<button
type="button"
class="px-4 flex place-items-center gap-2 rounded-tr-full rounded-br-full dark:bg-immich-dark-primary/50 hover:dark:bg-immich-dark-primary/70 bg-immich-primary hover:bg-immich-primary/80 text-white"
on:click={onSelectNone}><Icon path={mdiTrashCanOutline} size="20" />{$t('select_trash_all')}</button
>
</div>
<!-- CONFIRM BUTTONS -->
<div class="flex gap-4">
{#if trashCount === 0}
<Button size="sm" color="primary" class="flex place-items-center gap-2" on:click={handleResolve}
><Icon path={mdiCheck} size="20" />Keep All
</Button>
{:else}
<Button size="sm" color="red" class="flex place-items-center gap-2" on:click={handleResolve}
><Icon path={mdiTrashCanOutline} size="20" />{trashCount === duplicate.assets.length
? $t('trash_all')
: `${$t('trash')} ${trashCount}`}
</Button>
{/if}
</div>
</div>
</div>