fix(server): album perf query (#5232)

* Revert "fix: album performances (#5224)" This reverts commit c438e17954. * Revert "fix: album sorting options (#5127)" This reverts commit 725f30c494.
2025-12-10 09:33:58 +09:00 · 2023-11-21 10:07:49 -06:00
parent a13052e24c
commit f094ff2aa1
13 changed files with 108 additions and 184 deletions
--- a/web/src/lib/components/elements/table-header.svelte
+++ b/web/src/lib/components/elements/table-header.svelte
@@ -5,10 +5,10 @@
  export let option: Sort;

  const handleSort = () => {
-    if (albumViewSettings === option.title) {
+    if (albumViewSettings === option.sortTitle) {
      option.sortDesc = !option.sortDesc;
    } else {
-      albumViewSettings = option.title;
+      albumViewSettings = option.sortTitle;
    }
  };
 </script>
@@ -18,12 +18,12 @@
    class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
    on:click={() => handleSort()}
  >
-    {#if albumViewSettings === option.title}
+    {#if albumViewSettings === option.sortTitle}
      {#if option.sortDesc}
        &#8595;
      {:else}
        &#8593;
      {/if}
-    {/if}{option.title}</button
+    {/if}{option.table}</button
  ></th
 >
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -7,7 +7,6 @@
  import { createEventDispatcher } from 'svelte';
  import { goto } from '$app/navigation';
  import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
-  import noThumbnailUrl from '$lib/assets/no-thumbnail.png';

  export let link: SharedLinkResponseDto;

@@ -61,28 +60,18 @@
  class="flex w-full gap-4 border-b border-gray-200 py-4 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
 >
  <div>
-    {#if (link?.album?.assetCount && link?.album?.assetCount > 0) || link.assets.length > 0}
-      {#await getAssetInfo()}
-        <LoadingSpinner />
-      {:then asset}
-        <img
-          id={asset.id}
-          src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
-          alt={asset.id}
-          class="h-[100px] w-[100px] rounded-lg object-cover"
-          loading="lazy"
-          draggable="false"
-        />
-      {/await}
-    {:else}
+    {#await getAssetInfo()}
+      <LoadingSpinner />
+    {:then asset}
      <img
-        src={noThumbnailUrl}
-        alt={'Album without assets'}
+        id={asset.id}
+        src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
+        alt={asset.id}
        class="h-[100px] w-[100px] rounded-lg object-cover"
        loading="lazy"
        draggable="false"
      />
-    {/if}
+    {/await}
  </div>

  <div class="flex flex-col justify-between">
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts" context="module">
+  // table is the text printed in the table and sortTitle is the text printed in the dropDow menu
+
  export interface Sort {
-    title: string;
+    table: string;
+    sortTitle: string;
    sortDesc: boolean;
    widthClass: string;
    sortFn: (reverse: boolean, albums: AlbumResponseDto[]) => AlbumResponseDto[];
@@ -51,75 +54,46 @@

  let sortByOptions: Record<string, Sort> = {
    albumTitle: {
-      title: 'Album title',
+      table: 'Album title',
+      sortTitle: 'Album title',
      sortDesc: $albumViewSettings.sortDesc, // Load Sort Direction
-      widthClass: 'text-left w-8/12 sm:w-4/12 md:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]',
+      widthClass: 'w-8/12 text-left sm:w-4/12 md:w-4/12 md:w-4/12 2xl:w-6/12',
      sortFn: (reverse, albums) => {
        return orderBy(albums, 'albumName', [reverse ? 'desc' : 'asc']);
      },
    },
    numberOfAssets: {
-      title: 'Number of assets',
+      table: 'Assets',
+      sortTitle: 'Number of assets',
      sortDesc: $albumViewSettings.sortDesc,
-      widthClass: 'text-center w-4/12 m:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]',
+      widthClass: 'w-4/12 text-center sm:w-2/12 2xl:w-1/12',
      sortFn: (reverse, albums) => {
        return orderBy(albums, 'assetCount', [reverse ? 'desc' : 'asc']);
      },
    },
    lastModified: {
-      title: 'Last modified',
+      table: 'Updated date',
+      sortTitle: 'Last modified',
      sortDesc: $albumViewSettings.sortDesc,
-      widthClass: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
+      widthClass: 'text-center hidden sm:block w-3/12 lg:w-2/12',
      sortFn: (reverse, albums) => {
        return orderBy(albums, [(album) => new Date(album.updatedAt)], [reverse ? 'desc' : 'asc']);
      },
    },
-    created: {
-      title: 'Created date',
-      sortDesc: $albumViewSettings.sortDesc,
-      widthClass: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
-      sortFn: (reverse, albums) => {
-        return orderBy(albums, [(album) => new Date(album.createdAt)], [reverse ? 'desc' : 'asc']);
-      },
-    },
    mostRecent: {
-      title: 'Most recent photo',
+      table: 'Created date',
+      sortTitle: 'Most recent photo',
      sortDesc: $albumViewSettings.sortDesc,
-      widthClass: 'text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]',
+      widthClass: 'text-center hidden sm:block w-3/12 lg:w-2/12',
      sortFn: (reverse, albums) => {
        return orderBy(
          albums,
-          [(album) => (album.endDate ? new Date(album.endDate) : '')],
+          [
+            (album) =>
+              album.lastModifiedAssetTimestamp ? new Date(album.lastModifiedAssetTimestamp) : new Date(album.updatedAt),
+          ],
          [reverse ? 'desc' : 'asc'],
-        ).sort((a, b) => {
-          if (a.endDate === undefined) {
-            return 1;
-          }
-          if (b.endDate === undefined) {
-            return -1;
-          }
-          return 0;
-        });
-      },
-    },
-    mostOld: {
-      title: 'Oldest photo',
-      sortDesc: $albumViewSettings.sortDesc,
-      widthClass: 'text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]',
-      sortFn: (reverse, albums) => {
-        return orderBy(
-          albums,
-          [(album) => (album.startDate ? new Date(album.startDate) : null)],
-          [reverse ? 'desc' : 'asc'],
-        ).sort((a, b) => {
-          if (a.startDate === undefined) {
-            return 1;
-          }
-          if (b.startDate === undefined) {
-            return -1;
-          }
-          return 0;
-        });
+        );
      },
    },
  };
@@ -170,25 +144,16 @@
  };

  $: {
+    const { sortBy } = $albumViewSettings;
    for (const key in sortByOptions) {
-      if (sortByOptions[key].title === $albumViewSettings.sortBy) {
+      if (sortByOptions[key].sortTitle === sortBy) {
        $albums = sortByOptions[key].sortFn(sortByOptions[key].sortDesc, $unsortedAlbums);
        $albumViewSettings.sortDesc = sortByOptions[key].sortDesc; // "Save" sortDesc
-        $albumViewSettings.sortBy = sortByOptions[key].title;
        break;
      }
    }
  }

-  const test = (searched: string): Sort => {
-    for (const key in sortByOptions) {
-      if (sortByOptions[key].title === searched) {
-        return sortByOptions[key];
-      }
-    }
-    return sortByOptions[0];
-  };
-
  const handleCreateAlbum = async () => {
    const newAlbum = await createAlbum();
    if (newAlbum) {
@@ -255,20 +220,19 @@

    <Dropdown
      options={Object.values(sortByOptions)}
-      selectedOption={test($albumViewSettings.sortBy)}
      render={(option) => {
        return {
-          title: option.title,
+          title: option.sortTitle,
          icon: option.sortDesc ? mdiArrowDownThin : mdiArrowUpThin,
        };
      }}
      on:select={(event) => {
        for (const key in sortByOptions) {
-          if (sortByOptions[key].title === event.detail.title) {
+          if (sortByOptions[key].sortTitle === event.detail.sortTitle) {
            sortByOptions[key].sortDesc = !sortByOptions[key].sortDesc;
-            $albumViewSettings.sortBy = sortByOptions[key].title;
          }
        }
+        $albumViewSettings.sortBy = event.detail.sortTitle;
      }}
    />

@@ -307,7 +271,7 @@
            {#each Object.keys(sortByOptions) as key (key)}
              <TableHeader bind:albumViewSettings={$albumViewSettings.sortBy} bind:option={sortByOptions[key]} />
            {/each}
-            <th class="hidden text-center text-sm font-medium 2xl:block 2xl:w-[12%]">Action</th>
+            <th class="hidden w-2/12 text-center text-sm font-medium lg:block 2xl:w-1/12">Action</th>
          </tr>
        </thead>
        <tbody
@@ -320,34 +284,18 @@
              on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
              tabindex="0"
            >
-              <td class="text-md text-ellipsis text-left w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]"
-                >{album.albumName}</td
-              >
-              <td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
+              <td class="text-md w-8/12 text-ellipsis text-left sm:w-4/12 md:w-4/12 2xl:w-6/12">{album.albumName}</td>
+              <td class="text-md w-4/12 text-ellipsis text-center sm:w-2/12 md:w-2/12 2xl:w-1/12">
                {album.assetCount}
-                {album.assetCount > 1 ? `items` : `item`}
+                {album.assetCount == 1 ? `item` : `items`}
              </td>
-              <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
-                >{dateLocaleString(album.updatedAt)}
-              </td>
-              <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
+              <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
+                >{dateLocaleString(album.updatedAt)}</td
+              >
+              <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
                >{dateLocaleString(album.createdAt)}</td
              >
-              <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
-                {#if album.endDate}
-                  {dateLocaleString(album.endDate)}
-                {:else}
-                  &#10060;
-                {/if}</td
-              >
-              <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]"
-                >{#if album.startDate}
-                  {dateLocaleString(album.startDate)}
-                {:else}
-                  &#10060;
-                {/if}</td
-              >
-              <td class="text-md hidden text-ellipsis text-center 2xl:block xl:w-[15%] 2xl:w-[12%]">
+              <td class="text-md hidden w-2/12 text-ellipsis text-center lg:block 2xl:w-1/12">
                <button
                  on:click|stopPropagation={() => handleEdit(album)}
                  class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"