1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-04 02:46:47 +01:00

feat(web): force delete with shift key (#6239)

* feat: force delete with shift key

* fix: types import

* pr feedback

* fix: permanently delete assets

* fix: format

* fix: remove unused variable

* change info title

* simplify

* fix: rename function name

* pr feedback

* simplify

* pr feedback

* add toggle in the user settings

* fix: trash settings, input label, and wording

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-01-17 20:18:04 +01:00 committed by GitHub
parent 0350058689
commit c317feaf93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 233 additions and 92 deletions

View file

@ -20,10 +20,9 @@
import VideoViewer from './video-viewer.svelte'; import VideoViewer from './video-viewer.svelte';
import PanoramaViewer from './panorama-viewer.svelte'; import PanoramaViewer from './panorama-viewer.svelte';
import { AppRoute, AssetAction, ProjectionType } from '$lib/constants'; import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte'; import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
import { isShowDetail } from '$lib/stores/preferences.store'; import { isShowDetail, showDeleteModal } from '$lib/stores/preferences.store';
import { addAssetsToAlbum, downloadFile, getAssetType } from '$lib/utils/asset-utils'; import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
import NavigationArea from './navigation-area.svelte'; import NavigationArea from './navigation-area.svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
@ -42,13 +41,13 @@
import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store'; import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import SlideshowBar from './slideshow-bar.svelte'; import SlideshowBar from './slideshow-bar.svelte';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
export let assetStore: AssetStore | null = null; export let assetStore: AssetStore | null = null;
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
export let showNavigation = true; export let showNavigation = true;
export let sharedLink: SharedLinkResponseDto | undefined = undefined; export let sharedLink: SharedLinkResponseDto | undefined = undefined;
$: isTrashEnabled = $featureFlags.trash; $: isTrashEnabled = $featureFlags.trash;
export let force = false;
export let withStacked = false; export let withStacked = false;
export let isShared = false; export let isShared = false;
export let album: AlbumResponseDto | null = null; export let album: AlbumResponseDto | null = null;
@ -279,7 +278,7 @@
} }
return; return;
case 'Delete': case 'Delete':
trashOrDelete(); trashOrDelete(shiftKey);
return; return;
case 'Escape': case 'Escape':
if (isShowDeleteConfirmation) { if (isShowDeleteConfirmation) {
@ -360,11 +359,19 @@
$isShowDetail = !$isShowDetail; $isShowDetail = !$isShowDetail;
}; };
$: trashOrDelete = !(force || !isTrashEnabled) const trashOrDelete = (force: boolean = false) => {
? trashAsset if (force || !isTrashEnabled) {
: () => { if ($showDeleteModal) {
isShowDeleteConfirmation = true; isShowDeleteConfirmation = true;
}; return;
}
deleteAsset();
return;
}
trashAsset();
return;
};
const trashAsset = async () => { const trashAsset = async () => {
try { try {
@ -576,7 +583,7 @@
on:back={closeViewer} on:back={closeViewer}
on:showDetail={showDetailInfoHandler} on:showDetail={showDetailInfoHandler}
on:download={() => downloadFile(asset)} on:download={() => downloadFile(asset)}
on:delete={trashOrDelete} on:delete={() => trashOrDelete()}
on:favorite={toggleFavorite} on:favorite={toggleFavorite}
on:addToAlbum={() => openAlbumPicker(false)} on:addToAlbum={() => openAlbumPicker(false)}
on:addToSharedAlbum={() => openAlbumPicker(true)} on:addToSharedAlbum={() => openAlbumPicker(true)}
@ -764,20 +771,12 @@
{/if} {/if}
{#if isShowDeleteConfirmation} {#if isShowDeleteConfirmation}
<ConfirmDialogue <DeleteAssetDialog
title="Delete {getAssetType(asset.type)}" size={1}
confirmText="Delete"
on:confirm={deleteAsset}
on:cancel={() => (isShowDeleteConfirmation = false)} on:cancel={() => (isShowDeleteConfirmation = false)}
> on:escape={() => (isShowDeleteConfirmation = false)}
<svelte:fragment slot="prompt"> on:confirm={() => deleteAsset()}
<p> />
Are you sure you want to delete this {getAssetType(asset.type).toLowerCase()}? This will also remove it from
its album(s).
</p>
<p><b>You cannot undo this action!</b></p>
</svelte:fragment>
</ConfirmDialogue>
{/if} {/if}
{#if isShowProfileImageCrop} {#if isShowProfileImageCrop}

View file

@ -7,8 +7,9 @@
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { api } from '@api'; import { api } from '@api';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte'; import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { OnArchive, getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiArchiveArrowUpOutline, mdiArchiveArrowDownOutline, mdiTimerSand } from '@mdi/js'; import { mdiArchiveArrowUpOutline, mdiArchiveArrowDownOutline, mdiTimerSand } from '@mdi/js';
import type { OnArchive } from '$lib/utils/actions';
export let onArchive: OnArchive | undefined = undefined; export let onArchive: OnArchive | undefined = undefined;

View file

@ -1,23 +1,18 @@
<script lang="ts"> <script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api } from '@api';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte'; import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js'; import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
import { OnDelete, deleteAssets } from '$lib/utils/actions';
import DeleteAssetDialog from '../delete-asset-dialog.svelte';
export let onAssetDelete: OnAssetDelete; export let onAssetDelete: OnDelete;
export let menuItem = false; export let menuItem = false;
export let force = !$featureFlags.trash; export let force = !$featureFlags.trash;
const { clearSelect, getOwnedAssets } = getAssetControlContext(); const { getOwnedAssets } = getAssetControlContext();
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
escape: void; escape: void;
@ -37,28 +32,12 @@
const handleDelete = async () => { const handleDelete = async () => {
loading = true; loading = true;
const ids = Array.from(getOwnedAssets())
try { .filter((a) => !a.isExternal)
const ids = Array.from(getOwnedAssets()) .map((a) => a.id);
.filter((a) => !a.isExternal) await deleteAssets(force, onAssetDelete, ids);
.map((a) => a.id); isShowConfirmation = false;
await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids, force } }); loading = false;
for (const id of ids) {
onAssetDelete(id);
}
notificationController.show({
message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,
type: NotificationType.Info,
});
clearSelect();
} catch (e) {
handleError(e, 'Error deleting assets');
} finally {
isShowConfirmation = false;
loading = false;
}
}; };
const escape = () => { const escape = () => {
@ -76,23 +55,10 @@
{/if} {/if}
{#if isShowConfirmation} {#if isShowConfirmation}
<ConfirmDialogue <DeleteAssetDialog
title="Permanently Delete Asset{getOwnedAssets().size > 1 ? 's' : ''}" size={getOwnedAssets().size}
confirmText="Delete"
on:confirm={handleDelete} on:confirm={handleDelete}
on:cancel={() => (isShowConfirmation = false)} on:cancel={() => (isShowConfirmation = false)}
on:escape={escape} on:escape={escape}
> />
<svelte:fragment slot="prompt">
<p>
Are you sure you want to permanently delete
{#if getOwnedAssets().size > 1}
these <b>{getOwnedAssets().size}</b> assets? This will also remove them from their album(s).
{:else}
this asset? This will also remove it from its album(s).
{/if}
</p>
<p><b>You cannot undo this action!</b></p>
</svelte:fragment>
</ConfirmDialogue>
{/if} {/if}

View file

@ -7,8 +7,9 @@
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { api } from '@api'; import { api } from '@api';
import { OnFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js'; import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
import type { OnFavorite } from '$lib/utils/actions';
export let onFavorite: OnFavorite | undefined = undefined; export let onFavorite: OnFavorite | undefined = undefined;

View file

@ -7,8 +7,9 @@
import { api } from '@api'; import { api } from '@api';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import Button from '../../elements/buttons/button.svelte'; import Button from '../../elements/buttons/button.svelte';
import { OnRestore, getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiHistory } from '@mdi/js'; import { mdiHistory } from '@mdi/js';
import type { OnRestore } from '$lib/utils/actions';
export let onRestore: OnRestore | undefined = undefined; export let onRestore: OnRestore | undefined = undefined;

View file

@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte'; import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { api } from '@api'; import { api } from '@api';
import { OnStack, getAssetControlContext } from '../asset-select-control-bar.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { import {
NotificationType, NotificationType,
notificationController, notificationController,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import type { OnStack } from '$lib/utils/actions';
export let onStack: OnStack | undefined = undefined; export let onStack: OnStack | undefined = undefined;

View file

@ -5,7 +5,7 @@
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store'; import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store'; import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store'; import { locale, showDeleteModal } from '$lib/stores/preferences.store';
import { isSearchEnabled } from '$lib/stores/search.store'; import { isSearchEnabled } from '$lib/stores/search.store';
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util'; import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import type { AlbumResponseDto, AssetResponseDto } from '@api'; import type { AlbumResponseDto, AssetResponseDto } from '@api';
@ -19,6 +19,8 @@
import AssetDateGroup from './asset-date-group.svelte'; import AssetDateGroup from './asset-date-group.svelte';
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
import { shouldIgnoreShortcut } from '$lib/utils/shortcut'; import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { deleteAssets } from '$lib/utils/actions';
import DeleteAssetDialog from './delete-asset-dialog.svelte';
export let isSelectionMode = false; export let isSelectionMode = false;
export let singleSelect = false; export let singleSelect = false;
@ -28,9 +30,9 @@
export let withStacked = false; export let withStacked = false;
export let isShared = false; export let isShared = false;
export let album: AlbumResponseDto | null = null; export let album: AlbumResponseDto | null = null;
export let isShowDeleteConfirmation = false;
$: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash; $: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash;
export let forceDelete = false;
const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } = const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
assetInteractionStore; assetInteractionStore;
@ -42,6 +44,9 @@
$: timelineY = element?.scrollTop || 0; $: timelineY = element?.scrollTop || 0;
$: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0; $: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
$: idsSelectedAssets = Array.from($selectedAssets)
.filter((a) => !a.isExternal)
.map((a) => a.id);
const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event); const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>(); const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
@ -65,13 +70,22 @@
assetStore.disconnect(); assetStore.disconnect();
}); });
const trashOrDelete = (force: boolean = false) => {
isShowDeleteConfirmation = false;
deleteAssets(!(isTrashEnabled && !force), (assetId) => assetStore.removeAsset(assetId), idsSelectedAssets);
assetInteractionStore.clearMultiselect();
};
const handleKeyboardPress = (event: KeyboardEvent) => { const handleKeyboardPress = (event: KeyboardEvent) => {
if ($isSearchEnabled || shouldIgnoreShortcut(event)) { if ($isSearchEnabled || shouldIgnoreShortcut(event)) {
return; return;
} }
const key = event.key;
const shiftKey = event.shiftKey;
if (!$showAssetViewer) { if (!$showAssetViewer) {
switch (event.key) { switch (key) {
case 'Escape': case 'Escape':
dispatch('escape'); dispatch('escape');
return; return;
@ -85,6 +99,20 @@
event.preventDefault(); event.preventDefault();
goto(AppRoute.EXPLORE); goto(AppRoute.EXPLORE);
return; return;
case 'Delete':
if ($isMultiSelectState) {
let force = false;
if (shiftKey || !isTrashEnabled) {
if ($showDeleteModal) {
isShowDeleteConfirmation = true;
return;
}
force = true;
}
trashOrDelete(force);
}
return;
} }
} }
}; };
@ -331,6 +359,14 @@
<svelte:window on:keydown={onKeyDown} on:keyup={onKeyUp} on:selectstart={onSelectStart} /> <svelte:window on:keydown={onKeyDown} on:keyup={onKeyUp} on:selectstart={onSelectStart} />
{#if isShowDeleteConfirmation}
<DeleteAssetDialog
size={idsSelectedAssets.length}
on:cancel={() => (isShowDeleteConfirmation = false)}
on:confirm={() => trashOrDelete()}
/>
{/if}
{#if showShortcuts} {#if showShortcuts}
<ShowShortcuts on:close={() => (showShortcuts = !showShortcuts)} /> <ShowShortcuts on:close={() => (showShortcuts = !showShortcuts)} />
{/if} {/if}
@ -411,7 +447,6 @@
{withStacked} {withStacked}
{assetStore} {assetStore}
asset={$viewingAsset} asset={$viewingAsset}
force={forceDelete || !isTrashEnabled}
{isShared} {isShared}
{album} {album}
on:previous={() => handlePrevious()} on:previous={() => handlePrevious()}

View file

@ -1,12 +1,6 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import { createContext } from '$lib/utils/context'; import { createContext } from '$lib/utils/context';
export type OnAssetDelete = (assetId: string) => void;
export type OnRestore = (ids: string[]) => void;
export type OnArchive = (ids: string[], isArchived: boolean) => void;
export type OnFavorite = (ids: string[], favorite: boolean) => void;
export type OnStack = (ids: string[]) => void;
export interface AssetControlContext { export interface AssetControlContext {
// Wrap assets in a function, because context isn't reactive. // Wrap assets in a function, because context isn't reactive.
getAssets: () => Set<AssetResponseDto>; // All assets includes partners' assets getAssets: () => Set<AssetResponseDto>; // All assets includes partners' assets

View file

@ -0,0 +1,57 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
export let size: number;
let checked = false;
const dispatch = createEventDispatcher<{
confirm: void;
cancel: void;
}>();
const onToggle = () => {
checked = !checked;
};
const handleConfirm = () => {
if (checked) {
$showDeleteModal = false;
}
dispatch('confirm');
};
</script>
<ConfirmDialogue
title="Permanently Delete Asset{size > 1 ? 's' : ''}"
confirmText="Delete"
on:confirm={handleConfirm}
on:cancel={() => dispatch('cancel')}
on:escape={() => dispatch('cancel')}
>
<svelte:fragment slot="prompt">
<p>
Are you sure you want to permanently delete
{#if size > 1}
these <b>{size}</b> assets? This will also remove them from their album(s).
{:else}
this asset? This will also remove it from its album(s).
{/if}
</p>
<p><b>You cannot undo this action!</b></p>
<div class="flex gap-2 items-center justify-center pt-4">
<label id="confirm-label" for="confirm-input">Do not show this message again</label>
<input
id="confirm-input"
aria-labelledby="confirm-input"
class="disabled::cursor-not-allowed h-3 w-3 opacity-1"
type="checkbox"
bind:checked
on:click={onToggle}
/>
</div>
</svelte:fragment>
</ConfirmDialogue>

View file

@ -2,9 +2,21 @@
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import FullScreenModal from './full-screen-modal.svelte'; import FullScreenModal from './full-screen-modal.svelte';
import { mdiClose } from '@mdi/js'; import { mdiClose, mdiInformationOutline } from '@mdi/js';
import Icon from '../elements/icon.svelte';
const shortcuts = { interface Shortcuts {
general: ExplainedShortcut[];
actions: ExplainedShortcut[];
}
interface ExplainedShortcut {
key: string[];
action: string;
info?: string;
}
const shortcuts: Shortcuts = {
general: [ general: [
{ key: ['←', '→'], action: 'Previous or next photo' }, { key: ['←', '→'], action: 'Previous or next photo' },
{ key: ['Esc'], action: 'Back, close, or deselect' }, { key: ['Esc'], action: 'Back, close, or deselect' },
@ -16,7 +28,7 @@
{ key: ['⇧', 'a'], action: 'Archive or unarchive photo' }, { key: ['⇧', 'a'], action: 'Archive or unarchive photo' },
{ key: ['⇧', 'd'], action: 'Download' }, { key: ['⇧', 'd'], action: 'Download' },
{ key: ['Space'], action: 'Play or pause video' }, { key: ['Space'], action: 'Play or pause video' },
{ key: ['Del'], action: 'Delete Asset' }, { key: ['Del'], action: 'Trash/Delete Asset', info: 'press ⇧ to permanently delete asset' },
], ],
}; };
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
@ -71,7 +83,12 @@
</p> </p>
{/each} {/each}
</div> </div>
<p class="mb-1 mt-1 flex">{shortcut.action}</p> <div class="flex items-center gap-2">
<p class="mb-1 mt-1 flex">{shortcut.action}</p>
{#if shortcut.info}
<Icon path={mdiInformationOutline} title={shortcut.info} />
{/if}
</div>
</div> </div>
{/each} {/each}
</div> </div>

View file

@ -0,0 +1,23 @@
<script lang="ts">
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { fade } from 'svelte/transition';
</script>
<section class="my-4">
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4">
<SettingSwitch
title="Permanent deletion warning"
subtitle="Show a warning when permanently deleting assets"
bind:checked={$showDeleteModal}
/>
</div>
</div>
</form>
</div>
</section>
<div class="ml-4 mb-4"></div>

View file

@ -15,6 +15,7 @@
import UserProfileSettings from './user-profile-settings.svelte'; import UserProfileSettings from './user-profile-settings.svelte';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import AppearanceSettings from './appearance-settings.svelte'; import AppearanceSettings from './appearance-settings.svelte';
import TrashSettings from './trash-settings.svelte';
export let keys: APIKeyResponseDto[] = []; export let keys: APIKeyResponseDto[] = [];
export let devices: AuthDeviceResponseDto[] = []; export let devices: AuthDeviceResponseDto[] = [];
@ -70,3 +71,7 @@
<SettingAccordion title="Sidebar" subtitle="Manage sidebar settings"> <SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">
<SidebarSettings /> <SidebarSettings />
</SettingAccordion> </SettingAccordion>
<SettingAccordion title="Trash" subtitle="Manage trash settings">
<TrashSettings />
</SettingAccordion>

View file

@ -96,3 +96,5 @@ export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settin
sortDesc: true, sortDesc: true,
view: AlbumViewMode.Cover, view: AlbumViewMode.Cover,
}); });
export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});

View file

@ -0,0 +1,25 @@
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import { api } from '@api';
import { handleError } from './handle-error';
export type OnDelete = (assetId: string) => void;
export type OnRestore = (ids: string[]) => void;
export type OnArchive = (ids: string[], isArchived: boolean) => void;
export type OnFavorite = (ids: string[], favorite: boolean) => void;
export type OnStack = (ids: string[]) => void;
export const deleteAssets = async (force: boolean, onAssetDelete: OnDelete, ids: string[]) => {
try {
await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids, force } });
for (const id of ids) {
onAssetDelete(id);
}
notificationController.show({
message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,
type: NotificationType.Info,
});
} catch (e) {
handleError(e, 'Error deleting assets');
}
};

View file

@ -181,7 +181,7 @@
} }
} }
const test = (searched: string): Sort => { const searchSort = (searched: string): Sort => {
for (const key in sortByOptions) { for (const key in sortByOptions) {
if (sortByOptions[key].title === searched) { if (sortByOptions[key].title === searched) {
return sortByOptions[key]; return sortByOptions[key];
@ -256,7 +256,7 @@
<Dropdown <Dropdown
options={Object.values(sortByOptions)} options={Object.values(sortByOptions)}
selectedOption={test($albumViewSettings.sortBy)} selectedOption={searchSort($albumViewSettings.sortBy)}
render={(option) => { render={(option) => {
return { return {
title: option.title, title: option.title,

View file

@ -87,7 +87,7 @@
</LinkButton> </LinkButton>
</div> </div>
<AssetGrid forceDelete {assetStore} {assetInteractionStore}> <AssetGrid {assetStore} {assetInteractionStore}>
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4"> <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
Trashed items will be permanently deleted after {$serverConfig.trashDays} days. Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
</p> </p>

View file

@ -1,15 +1,29 @@
<script lang="ts"> <script lang="ts">
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte'; import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
import { mdiKeyboard } from '@mdi/js';
import type { PageData } from './$types'; import type { PageData } from './$types';
import Icon from '$lib/components/elements/icon.svelte';
import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
export let data: PageData; export let data: PageData;
export let isShowKeyboardShortcut = false;
</script> </script>
<UserPageLayout title={data.meta.title}> <UserPageLayout title={data.meta.title}>
<svelte:fragment slot="buttons">
<IconButton on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}>
<Icon path={mdiKeyboard} />
</IconButton>
</svelte:fragment>
<section class="mx-4 flex place-content-center"> <section class="mx-4 flex place-content-center">
<div class="w-full max-w-3xl"> <div class="w-full max-w-3xl">
<UserSettingsList keys={data.keys} devices={data.devices} /> <UserSettingsList keys={data.keys} devices={data.devices} />
</div> </div>
</section> </section>
</UserPageLayout> </UserPageLayout>
{#if isShowKeyboardShortcut}
<ShowShortcuts on:close={() => (isShowKeyboardShortcut = false)} />
{/if}