fix(web): album state after removing assets (#7745)

* fix(web): album state after removing assets

* refresh album on remove + simplify AlbumSummary

web/src/lib/components/album-page/album-summary.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { dateFormats } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AlbumResponseDto } from '@immich/sdk';
+
+  export let album: AlbumResponseDto;
+
+  $: startDate = formatDate(album.startDate);
+  $: endDate = formatDate(album.endDate);
+
+  const formatDate = (date?: string) => {
+    return date ? new Date(date).toLocaleDateString($locale, dateFormats.album) : undefined;
+  };
+
+  const getDateRange = (start?: string, end?: string) => {
+    if (start && end && start !== end) {
+      return `${start} - ${end}`;
+    }
+
+    if (start) {
+      return start;
+    }
+
+    return '';
+  };
+</script>
+
+<span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
+  <p>{getDateRange(startDate, endDate)}</p>
+  <p>·</p>
+  <p>{album.assetCount} items</p>
+</span>

web/src/lib/components/album-page/album-viewer.svelte

@@ -3,11 +3,9 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { locale } from '$lib/stores/preferences.store';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
-  import { dateFormats } from '../../constants';
   import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
   import { AssetStore } from '../../stores/assets.store';
   import { downloadArchive } from '../../utils/asset-utils';
@@ -21,6 +19,7 @@
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { handlePromiseError } from '$lib/utils';
+  import AlbumSummary from './album-summary.svelte';
 
   export let sharedLink: SharedLinkResponseDto;
   export let user: UserResponseDto | undefined = undefined;
@@ -40,31 +39,6 @@
     }
   });
 
-  const getDateRange = () => {
-    const { startDate, endDate } = album;
-
-    let start = '';
-    let end = '';
-
-    if (startDate) {
-      start = new Date(startDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (endDate) {
-      end = new Date(endDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (startDate && endDate && start !== end) {
-      return `${start} - ${end}`;
-    }
-
-    if (start) {
-      return start;
-    }
-
-    return '';
-  };
-
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
 
   onMount(() => {
@@ -148,13 +122,8 @@
         {album.albumName}
       </h1>
 
-      <!-- ALBUM SUMMARY -->
       {#if album.assetCount > 0}
-        <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-          <p class="">{getDateRange()}</p>
-          <p>·</p>
-          <p>{album.assetCount} items</p>
-        </span>
+        <AlbumSummary {album} />
       {/if}
 
       <!-- ALBUM DESCRIPTION -->

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -31,7 +31,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { AppRoute, dateFormats } from '$lib/constants';
+  import { AppRoute } from '$lib/constants';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -74,6 +74,7 @@
   import AlbumTitle from '$lib/components/album-page/album-title.svelte';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import { handlePromiseError } from '$lib/utils';
+  import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
 
   export let data: PageData;
 
@@ -280,31 +281,6 @@
     album = await getAlbumInfo({ id: album.id, withoutAssets: true });
   };
 
-  const getDateRange = () => {
-    const { startDate, endDate } = album;
-
-    let start = '';
-    let end = '';
-
-    if (startDate) {
-      start = new Date(startDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (endDate) {
-      end = new Date(endDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (startDate && endDate && start !== end) {
-      return `${start} - ${end}`;
-    }
-
-    if (start) {
-      return start;
-    }
-
-    return '';
-  };
-
   const handleAddAssets = async () => {
     const assetIds = [...$timelineSelected].map((asset) => asset.id);
 
@@ -389,6 +365,11 @@
     }
   };
 
+  const handleRemoveAssets = async (assetIds: string[]) => {
+    assetStore.removeAssets(assetIds);
+    await refreshAlbum();
+  };
+
   const handleUpdateThumbnail = async (assetId: string) => {
     if (viewMode !== ViewMode.SELECT_THUMBNAIL) {
       return;
@@ -429,10 +410,10 @@
           {/if}
           <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isOwned || isAllUserOwned}
-            <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => assetStore.removeAssets(assetIds)} />
+            <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
           {/if}
           {#if isAllUserOwned}
-            <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+            <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
             <ChangeDate menuItem />
             <ChangeLocation menuItem />
           {/if}
@@ -469,9 +450,7 @@
                   <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical}>
                     {#if viewMode === ViewMode.ALBUM_OPTIONS}
                       <ContextMenu {...contextMenuPosition}>
-                        {#if album.assetCount !== 0}
-                          <MenuOption on:click={handleStartSlideshow} text="Slideshow" />
-                        {/if}
+                        <MenuOption on:click={handleStartSlideshow} text="Slideshow" />
                         <MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
                         <MenuOption on:click={() => (viewMode = ViewMode.OPTIONS)} text="Options" />
                       </ContextMenu>
@@ -485,7 +464,7 @@
               <Button
                 size="sm"
                 rounded="lg"
-                disabled={album.assetCount == 0}
+                disabled={album.assetCount === 0}
                 on:click={() => (viewMode = ViewMode.SELECT_USERS)}
               >
                 Share
@@ -557,13 +536,8 @@
               <section class="pt-24">
                 <AlbumTitle id={album.id} albumName={album.albumName} {isOwned} />
 
-                <!-- ALBUM SUMMARY -->
                 {#if album.assetCount > 0}
-                  <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-                    <p class="">{getDateRange()}</p>
-                    <p>·</p>
-                    <p>{album.assetCount} items</p>
-                  </span>
+                  <AlbumSummary {album} />
                 {/if}
 
                 <!-- ALBUM SHARING -->