refactor(web): album listing page (#4146)

* feat: add more options to album page * pr feedback * pr feedback * feat: add quick actions on the list mode * feat: responsive design * feat: remove dropdown for display mode * pr feedback
2025-10-29 17:40:28 +00:00 · 2023-09-24 15:22:46 +02:00
parent dd86aa9259
commit b8fec26115
5 changed files with 260 additions and 50 deletions
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -4,13 +4,12 @@
  import { clickOutside } from '$lib/utils/click-outside';
  import { fly } from 'svelte/transition';
  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
+  import { createEventDispatcher } from 'svelte';

-  interface DropdownOption {
-    value: string;
-    icon?: Icon;
-  }
-
-  export let options: DropdownOption[] | string[] = [];
+  const dispatch = createEventDispatcher<{
+    select: string;
+  }>();
+  export let options: string[];
  export let value = options[0];
  export let icons: (typeof Icon)[] | undefined = undefined;

@@ -21,7 +20,12 @@
  };

  const handleSelectOption = (index: number) => {
+    if (options[index] === value) {
+      dispatch('select', value);
+    } else {
      value = options[index];
+    }
+
    showMenu = false;
  };

@@ -36,7 +40,7 @@
      {#if icon}
        <svelte:component this={icon} size="18" />
      {/if}
-      {value}
+      <p class="hidden sm:block">{value}</p>
    </div>
  </LinkButton>

--- a/web/src/lib/components/elements/table-header.svelte
+++ b/web/src/lib/components/elements/table-header.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Sort } from '../../../routes/(user)/albums/+page.svelte';
+
+  export let albumViewSettings: string;
+  export let option: Sort;
+
+  const handleSort = () => {
+    if (albumViewSettings === option.sortTitle) {
+      option.sortDesc = !option.sortDesc;
+    } else {
+      albumViewSettings = option.sortTitle;
+    }
+  };
+</script>
+
+<th class="{option.widthClass} text-sm font-medium"
+  ><button
+    class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+    on:click={() => handleSort()}
+  >
+    {#if albumViewSettings === option.sortTitle}
+      {#if option.sortDesc}
+        &#8595;
+      {:else}
+        &#8593;
+      {/if}
+    {/if}{option.table}</button
+  ></th
+>
--- a/web/src/lib/components/forms/edit-album-form.svelte
+++ b/web/src/lib/components/forms/edit-album-form.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { AlbumResponseDto, api } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
+
+  import Button from '../elements/buttons/button.svelte';
+
+  import { handleError } from '../../utils/handle-error';
+
+  export let album: AlbumResponseDto;
+
+  const dispatch = createEventDispatcher();
+
+  const editUser = async () => {
+    try {
+      const { status } = await api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumName: album.albumName,
+          description: album.description,
+        },
+      });
+
+      if (status === 200) {
+        dispatch('edit-success');
+      }
+    } catch (error) {
+      handleError(error, 'Unable to update user');
+    }
+  };
+</script>
+
+<div
+  class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+>
+  <div
+    class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+  >
+    <ImageAlbum size="4em" />
+    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit album</h1>
+  </div>
+
+  <form on:submit|preventDefault={editUser} autocomplete="off">
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" type="text" bind:value={album.albumName} />
+    </div>
+
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="description">Description</label>
+      <textarea class="immich-form-input" id="description" bind:value={album.description} />
+    </div>
+
+    <div class="mt-8 flex w-full gap-4 px-4">
+      <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>Cancel</Button>
+      <Button type="submit" fullwidth>Confirm</Button>
+    </div>
+  </form>
+</div>
--- a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -3,7 +3,7 @@

 <section
  id="sidebar"
-  class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto pt-8 transition-all duration-200 hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
+  class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
 >
  <slot />
 </section>
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,3 +1,15 @@
+<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 {
+    table: string;
+    sortTitle: string;
+    sortDesc: boolean;
+    widthClass: string;
+    sortFn: (reverse: boolean, albums: AlbumResponseDto[]) => AlbumResponseDto[];
+  }
+</script>
+
 <script lang="ts">
  import { albumViewSettings } from '$lib/stores/preferences.store';
  import AlbumCard from '$lib/components/album-page/album-card.svelte';
@@ -5,7 +17,6 @@
  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
  import FormatListBulletedSquare from 'svelte-material-icons/FormatListBulletedSquare.svelte';
  import ViewGridOutline from 'svelte-material-icons/ViewGridOutline.svelte';
  import type { PageData } from './$types';
@@ -25,23 +36,69 @@
    NotificationType,
  } from '$lib/components/shared-components/notification/notification';
  import type { AlbumResponseDto } from '@api';
-  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
+  import TableHeader from '$lib/components/elements/table-header.svelte';
+  import ArrowDownThin from 'svelte-material-icons/ArrowDownThin.svelte';
+  import ArrowUpThin from 'svelte-material-icons/ArrowUpThin.svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
+  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import { orderBy } from 'lodash-es';

  export let data: PageData;
+  let shouldShowEditUserForm = false;
+  let selectedAlbum: AlbumResponseDto;

-  const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
-  const viewOptions = [
-    {
-      name: AlbumViewMode.Cover,
-      icon: ViewGridOutline,
+  let sortByOptions: Record<string, Sort> = {
+    albumTitle: {
+      table: 'Album title',
+      sortTitle: 'Album title',
+      sortDesc: true,
+      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']);
      },
-    {
-      name: AlbumViewMode.List,
-      icon: FormatListBulletedSquare,
    },
-  ];
-  const viewOptionNames = viewOptions.map((option) => option.name);
-  const viewOptionIcons: (typeof Icon)[] = viewOptions.map((option) => option.icon);
+    numberOfAssets: {
+      table: 'Assets',
+      sortTitle: 'Number of assets',
+      sortDesc: true,
+      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: {
+      table: 'Updated date',
+      sortTitle: 'Last modified',
+      sortDesc: true,
+      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']);
+      },
+    },
+    mostRecent: {
+      table: 'Created date',
+      sortTitle: 'Most recent photo',
+      sortDesc: true,
+      widthClass: 'text-center hidden sm:block w-3/12 lg:w-2/12',
+      sortFn: (reverse, albums) => {
+        return orderBy(
+          albums,
+          [
+            (album) =>
+              album.lastModifiedAssetTimestamp ? new Date(album.lastModifiedAssetTimestamp) : new Date(album.updatedAt),
+          ],
+          [reverse ? 'desc' : 'asc'],
+        );
+      },
+    },
+  };
+
+  const handleEdit = (album: AlbumResponseDto) => {
+    selectedAlbum = { ...album };
+    shouldShowEditUserForm = true;
+  };

  const {
    albums: unsortedAlbums,
@@ -57,6 +114,11 @@
  let albums = unsortedAlbums;
  let albumToDelete: AlbumResponseDto | null;

+  const chooseAlbumToDelete = (album: AlbumResponseDto) => {
+    $contextMenuTargetAlbum = album;
+    setAlbumToDelete();
+  };
+
  const setAlbumToDelete = () => {
    albumToDelete = $contextMenuTargetAlbum ?? null;
    closeAlbumContextMenu();
@@ -78,24 +140,13 @@
    }
  };

-  const sortByDate = (a: string, b: string) => {
-    const aDate = new Date(a);
-    const bDate = new Date(b);
-    return bDate.getTime() - aDate.getTime();
-  };
-
  $: {
    const { sortBy } = $albumViewSettings;
-    if (sortBy === 'Most recent photo') {
-      $albums = $unsortedAlbums.sort((a, b) =>
-        a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
-          ? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
-          : sortByDate(a.updatedAt, b.updatedAt),
-      );
-    } else if (sortBy === 'Last modified') {
-      $albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
-    } else if (sortBy === 'Album title') {
-      $albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
+    for (const key in sortByOptions) {
+      if (sortByOptions[key].sortTitle === sortBy) {
+        $albums = sortByOptions[key].sortFn(sortByOptions[key].sortDesc, $unsortedAlbums);
+        break;
+      }
    }
  }

@@ -125,8 +176,35 @@
      console.log(error);
    }
  };
+
+  const successModifyAlbum = () => {
+    shouldShowEditUserForm = false;
+    notificationController.show({
+      message: 'Album infos updated',
+      type: NotificationType.Info,
+    });
+    $albums[$albums.findIndex((x) => x.id === selectedAlbum.id)] = selectedAlbum;
+  };
+
+  const handleChangeListMode = () => {
+    if ($albumViewSettings.view === AlbumViewMode.Cover) {
+      $albumViewSettings.view = AlbumViewMode.List;
+    } else {
+      $albumViewSettings.view = AlbumViewMode.Cover;
+    }
+  };
 </script>

+{#if shouldShowEditUserForm}
+  <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
+    <EditAlbumForm
+      album={selectedAlbum}
+      on:edit-success={() => successModifyAlbum()}
+      on:cancel={() => (shouldShowEditUserForm = false)}
+    />
+  </FullScreenModal>
+{/if}
+
 <UserPageLayout user={data.user} title={data.meta.title}>
  <div class="flex place-items-center gap-2" slot="buttons">
    <LinkButton on:click={handleCreateAlbum}>
@@ -136,8 +214,30 @@
      </div>
    </LinkButton>

-    <Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} icons={[SwapVertical]} />
-    <Dropdown options={viewOptionNames} bind:value={$albumViewSettings.view} icons={viewOptionIcons} />
+    <Dropdown
+      options={Object.values(sortByOptions).map((CourseInfo) => CourseInfo.sortTitle)}
+      bind:value={$albumViewSettings.sortBy}
+      icons={Object.keys(sortByOptions).map((key) => (sortByOptions[key].sortDesc ? ArrowDownThin : ArrowUpThin))}
+      on:select={(event) => {
+        for (const key in sortByOptions) {
+          if (sortByOptions[key].sortTitle === event.detail) {
+            sortByOptions[key].sortDesc = !sortByOptions[key].sortDesc;
+          }
+        }
+      }}
+    />
+
+    <LinkButton on:click={() => handleChangeListMode()}>
+      <div class="flex place-items-center gap-2 text-sm">
+        {#if $albumViewSettings.view === AlbumViewMode.List}
+          <ViewGridOutline size="18" />
+          <p class="hidden sm:block">Cover</p>
+        {:else}
+          <FormatListBulletedSquare size="18" />
+          <p class="hidden sm:block">List</p>
+        {/if}
+      </div>
+    </LinkButton>
  </div>

  <!-- Album Card -->
@@ -154,11 +254,11 @@
      <thead
        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
      >
-        <tr class="flex w-full place-items-center p-5">
-          <th class="w-1/4 text-left text-sm font-medium">Album title</th>
-          <th class="w-1/4 text-right text-sm font-medium">Assets</th>
-          <th class="w-1/4 text-right text-sm font-medium">Updated date</th>
-          <th class="w-1/4 text-right text-sm font-medium">Created date</th>
+        <tr class="flex w-full place-items-center p-2 md:p-5">
+          {#each Object.keys(sortByOptions) as key (key)}
+            <TableHeader bind:albumViewSettings={$albumViewSettings.sortBy} bind:option={sortByOptions[key]} />
+          {/each}
+          <th class="hidden w-2/12 text-center text-sm font-medium lg:block 2xl:w-1/12">Action</th>
        </tr>
      </thead>
      <tbody
@@ -166,18 +266,36 @@
      >
        {#each $albums as album (album.id)}
          <tr
-            class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75"
+            class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
            on:click={() => goto(`albums/${album.id}`)}
            on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
            tabindex="0"
          >
-            <td class="text-md w-1/4 text-ellipsis text-left">{album.albumName}</td>
-            <td class="text-md w-1/4 text-ellipsis text-right">
+            <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 ? `item` : `items`}
            </td>
-            <td class="text-md w-1/4 text-ellipsis text-right">{dateLocaleString(album.updatedAt)}</td>
-            <td class="text-md w-1/4 text-ellipsis text-right">{dateLocaleString(album.createdAt)}</td>
+            <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 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"
+              >
+                <PencilOutline size="16" />
+              </button>
+              <button
+                on:click|stopPropagation={() => chooseAlbumToDelete(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"
+              >
+                <TrashCanOutline size="16" />
+              </button>
+            </td>
          </tr>
        {/each}
      </tbody>