feat(server): trash asset (#4015)

* refactor(server): delete assets endpoint

* fix: formatting

* chore: cleanup

* chore: open api

* chore(mobile): replace DeleteAssetDTO with BulkIdsDTOs

* feat: trash an asset

* chore(server): formatting

* chore: open api

* chore: wording

* chore: open-api

* feat(server): add withDeleted to getAssets queries

* WIP: mobile-recycle-bin

* feat(server): recycle-bin to system config

* feat(web): use recycle-bin system config

* chore(server): domain assetcore removed

* chore(server): rename recycle-bin to trash

* chore(web): rename recycle-bin to trash

* chore(server): always send soft deleted assets for getAllByUserId

* chore(web): formatting

* feat(server): permanent delete assets older than trashed period

* feat(web): trash empty placeholder image

* feat(server): empty trash

* feat(web): empty trash

* WIP: mobile-recycle-bin

* refactor(server): empty / restore trash to separate endpoint

* test(server): handle failures

* test(server): fix e2e server-info test

* test(server): deletion test refactor

* feat(mobile): use map settings from server-config to enable / disable map

* feat(mobile): trash asset

* fix(server): operations on assets in trash

* feat(web): show trash statistics

* fix(web): handle trash enabled

* fix(mobile): restore updates from trash

* fix(server): ignore trashed assets for person

* fix(server): add / remove search index when trashed / restored

* chore(web): format

* fix(server): asset service test

* fix(server): include trashed assts for duplicates from uploads

* feat(mobile): no dialog for trash, always dialog for permanent delete

* refactor(mobile): use isar where instead of dart filter

* refactor(mobile): asset provide - handle deletes in single db txn

* chore(mobile): review changes

* feat(web): confirmation before empty trash

* server: review changes

* fix(server): handle library changes

* fix: filter external assets from getting trashed / deleted

* fix(server): empty-bin

* feat: broadcast config update events through ws

* change order of trash button on mobile

* styling

* fix(mobile): do not show trashed toast for local only assets

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -9,12 +9,16 @@
   import { api } from '@api';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
   import TimerSand from 'svelte-material-icons/TimerSand.svelte';
+
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { createEventDispatcher } from 'svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
 
   export let onAssetDelete: OnAssetDelete;
   export let menuItem = false;
+  export let force = !$featureFlags.trash;
+
   const { getAssets, clearSelect } = getAssetControlContext();
 
   const dispatch = createEventDispatcher();
@@ -22,27 +26,29 @@
   let isShowConfirmation = false;
   let loading = false;
 
+  const handleTrash = async () => {
+    if (force) {
+      isShowConfirmation = true;
+      return;
+    }
+
+    await handleDelete();
+  };
+
   const handleDelete = async () => {
     loading = true;
 
     try {
-      let count = 0;
-
-      const { data: deletedAssets } = await api.assetApi.deleteAsset({
-        deleteAssetDto: {
-          ids: Array.from(getAssets()).map((a) => a.id),
-        },
-      });
-
-      for (const asset of deletedAssets) {
-        if (asset.status === 'SUCCESS') {
-          onAssetDelete(asset.id);
-          count++;
-        }
+      const ids = Array.from(getAssets())
+        .filter((a) => !a.isExternal)
+        .map((a) => a.id);
+      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids, force } });
+      for (const id of ids) {
+        onAssetDelete(id);
       }
 
       notificationController.show({
-        message: `Deleted ${count}`,
+        message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,
         type: NotificationType.Info,
       });
 
@@ -62,20 +68,16 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Delete" on:click={() => (isShowConfirmation = true)} />
-{/if}
-
-{#if !menuItem}
-  {#if loading}
-    <CircleIconButton title="Loading" logo={TimerSand} />
-  {:else}
-    <CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
-  {/if}
+  <MenuOption text={force ? 'Permanently Delete' : 'Delete'} on:click={handleTrash} />
+{:else if loading}
+  <CircleIconButton title="Loading" logo={TimerSand} />
+{:else}
+  <CircleIconButton title="Delete" logo={DeleteOutline} on:click={handleTrash} />
 {/if}
 
 {#if isShowConfirmation}
   <ConfirmDialogue
-    title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
+    title="Permanently Delete Asset{getAssets().size > 1 ? 's' : ''}"
     confirmText="Delete"
     on:confirm={handleDelete}
     on:cancel={() => (isShowConfirmation = false)}
@@ -83,7 +85,7 @@
   >
     <svelte:fragment slot="prompt">
       <p>
-        Are you sure you want to delete
+        Are you sure you want to permanently delete
         {#if getAssets().size > 1}
           these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
         {:else}

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api } from '@api';
+  import History from 'svelte-material-icons/History.svelte';
+  import Button from '../../elements/buttons/button.svelte';
+  import { OnRestore, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+  export let onRestore: OnRestore | undefined = undefined;
+
+  const { getAssets, clearSelect } = getAssetControlContext();
+
+  let loading = false;
+
+  const handleRestore = async () => {
+    loading = true;
+
+    try {
+      const ids = Array.from(getAssets()).map((a) => a.id);
+      await api.assetApi.restoreAssets({ bulkIdsDto: { ids } });
+      onRestore?.(ids);
+
+      notificationController.show({
+        message: `Restored ${ids.length}`,
+        type: NotificationType.Info,
+      });
+
+      clearSelect();
+    } catch (e) {
+      handleError(e, 'Error restoring assets');
+    } finally {
+      loading = false;
+    }
+  };
+</script>
+
+<Button disabled={loading} size="sm" color="transparent-gray" shadow={false} rounded="lg" on:click={handleRestore}>
+  <History size="24" />
+  <span class="ml-2">Restore</span>
+</Button>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -17,6 +17,7 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
 
   export let isSelectionMode = false;
@@ -24,6 +25,8 @@
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
+  $: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash;
+  export let forceDelete = false;
 
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
     assetInteractionStore;
@@ -383,6 +386,7 @@
     <AssetViewer
       {assetStore}
       asset={$viewingAsset}
+      force={forceDelete || !isTrashEnabled}
       on:previous={() => handlePrevious()}
       on:next={() => handleNext()}
       on:close={() => handleClose()}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -2,6 +2,7 @@
   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;