From b8fec26115be7202b59127f80ee861010693a828 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Sun, 24 Sep 2023 15:22:46 +0200
Subject: [PATCH] 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
---
 .../lib/components/elements/dropdown.svelte   |  20 +-
 .../components/elements/table-header.svelte   |  29 +++
 .../components/forms/edit-album-form.svelte   |  59 ++++++
 .../side-bar/side-bar-section.svelte          |   2 +-
 web/src/routes/(user)/albums/+page.svelte     | 200 ++++++++++++++----
 5 files changed, 260 insertions(+), 50 deletions(-)
 create mode 100644 web/src/lib/components/elements/table-header.svelte
 create mode 100644 web/src/lib/components/forms/edit-album-form.svelte

diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index b0d5646cde..b6b7a17b49 100644
--- 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) => {
-    value = options[index];
+    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>
 
diff --git a/web/src/lib/components/elements/table-header.svelte b/web/src/lib/components/elements/table-header.svelte
new file mode 100644
index 0000000000..c89bff3db2
--- /dev/null
+++ 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
+>
diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/web/src/lib/components/forms/edit-album-form.svelte
new file mode 100644
index 0000000000..121eeeee47
--- /dev/null
+++ 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>
diff --git 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
index 9de518d1b0..297ada305d 100644
--- 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>
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index e75080da32..f292e2b3df 100644
--- 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,
+    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']);
+      },
     },
-  ];
-  const viewOptionNames = viewOptions.map((option) => option.name);
-  const viewOptionIcons: (typeof Icon)[] = viewOptions.map((option) => option.icon);
+    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>