feat(web): add ctrl+a / ctrl+d shortcuts to select / deselect all assets (#8105)

* feat(web): use ctrl+a / ctrl+d to select / deselect all assets

* fix(web): use shortcutList for ctrl+a / ctrl+d

* fix(web): remove useless get()

* feat(web): asset interaction store can now select many assets at once
This commit is contained in:
Ethan Margaillan
2024-03-21 13:14:13 +01:00
committed by GitHub
parent b588a87d4a
commit 4de0b2f44e
6 changed files with 66 additions and 35 deletions

View File

@@ -1,42 +1,24 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { BucketPosition, type AssetStore, isSelectAllCancelled } from '$lib/stores/assets.store';
import { handleError } from '$lib/utils/handle-error';
import { get } from 'svelte/store';
import { mdiTimerSand, mdiSelectAll } from '@mdi/js';
import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store';
import { mdiSelectAll, mdiTimerSand } from '@mdi/js';
import { selectAllAssets } from '$lib/utils/asset-utils';
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
let selecting = false;
const handleSelectAll = async () => {
try {
$isSelectAllCancelled = false;
selecting = true;
await selectAllAssets(assetStore, assetInteractionStore);
};
const assetGridState = get(assetStore);
for (const bucket of assetGridState.buckets) {
if ($isSelectAllCancelled) {
break;
}
await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
for (const asset of bucket.assets) {
assetInteractionStore.selectAsset(asset);
}
}
selecting = false;
} catch (error) {
handleError(error, 'Error selecting all assets');
}
const handleCancel = () => {
$isSelectingAllAssets = false;
};
</script>
{#if selecting}
<CircleIconButton title="Delete" icon={mdiTimerSand} />
{/if}
{#if !selecting}
{#if $isSelectingAllAssets}
<CircleIconButton title="Cancel" icon={mdiTimerSand} on:click={handleCancel} />
{:else}
<CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
{/if}