Robert Schäfer
48eede59b9
Motivation ---------- It's a follow up to #10028. I think it would be better user experience if one can tell by the icon what the delete button is about to do. I hope I caught all the occurences where one can permanently delete assets. How to test ----------- 1. Visit e.g. `/trash` 2. If you select some assets, the delete button in the top right corner looks different.
56 lines
1.7 KiB
Svelte
56 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
|
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
|
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
|
import { featureFlags } from '$lib/stores/server-config.store';
|
|
import { mdiTimerSand, mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
|
|
import { type OnDelete, deleteAssets } from '$lib/utils/actions';
|
|
import DeleteAssetDialog from '../delete-asset-dialog.svelte';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let onAssetDelete: OnDelete;
|
|
export let menuItem = false;
|
|
export let force = !$featureFlags.trash;
|
|
|
|
const { clearSelect, getOwnedAssets } = getAssetControlContext();
|
|
|
|
let isShowConfirmation = false;
|
|
let loading = false;
|
|
|
|
$: label = force ? $t('permanently_delete') : $t('delete');
|
|
|
|
const handleTrash = async () => {
|
|
if (force) {
|
|
isShowConfirmation = true;
|
|
return;
|
|
}
|
|
|
|
await handleDelete();
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
loading = true;
|
|
const ids = [...getOwnedAssets()].map((a) => a.id);
|
|
await deleteAssets(force, onAssetDelete, ids);
|
|
clearSelect();
|
|
isShowConfirmation = false;
|
|
loading = false;
|
|
};
|
|
</script>
|
|
|
|
{#if menuItem}
|
|
<MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
|
|
{:else if loading}
|
|
<CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
|
|
{:else}
|
|
<CircleIconButton title={label} icon={mdiDeleteForeverOutline} on:click={handleTrash} />
|
|
{/if}
|
|
|
|
{#if isShowConfirmation}
|
|
<DeleteAssetDialog
|
|
size={getOwnedAssets().size}
|
|
on:confirm={handleDelete}
|
|
on:cancel={() => (isShowConfirmation = false)}
|
|
/>
|
|
{/if}
|