From 020ef8af38db3d90033db42be58b597642bab9a6 Mon Sep 17 00:00:00 2001
From: Varun Raj <varun@skcript.com>
Date: Sat, 30 Nov 2024 12:10:44 +0530
Subject: [PATCH] feat: added options to sort albums

Signed-off-by: Varun Raj <varun@skcript.com>
---
 src/components/albums/list/AlbumThumbnail.tsx | 31 ++++++----
 src/config/constants/sidebarNavs.tsx          |  2 +-
 src/handlers/api/album.handler.ts             |  4 +-
 src/helpers/string.helper.ts                  | 19 +++++-
 src/pages/albums/index.tsx                    | 61 ++++++++++++++++++-
 src/pages/api/albums/list.ts                  | 17 +++++-
 src/types/album.d.ts                          | 15 ++---
 7 files changed, 121 insertions(+), 28 deletions(-)

diff --git a/src/components/albums/list/AlbumThumbnail.tsx b/src/components/albums/list/AlbumThumbnail.tsx
index a8a5007..7ef8b6d 100644
--- a/src/components/albums/list/AlbumThumbnail.tsx
+++ b/src/components/albums/list/AlbumThumbnail.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 
 import Link from 'next/link';
 import { useConfig } from '@/contexts/ConfigContext';
-import { humanizeNumber } from '@/helpers/string.helper';
+import { humanizeBytes, humanizeNumber, pluralize } from '@/helpers/string.helper';
 import LazyImage from '@/components/ui/lazy-image';
 import { ASSET_THUMBNAIL_PATH } from '@/config/routes';
 import { IAlbum } from '@/types/album';
@@ -11,7 +11,7 @@ import { formatDate } from '@/helpers/date.helper';
 import { Checkbox } from '@/components/ui/checkbox';
 import { differenceInDays } from 'date-fns';
 import { FaceIcon } from '@radix-ui/react-icons';
-import { Camera, Image, User } from 'lucide-react';
+import { Calendar, Camera, Image, User } from 'lucide-react';
 
 interface IAlbumThumbnailProps {
   album: IAlbum;
@@ -23,8 +23,8 @@ export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps
   }, [album.firstPhotoDate, album.lastPhotoDate]);
 
   return (
-    <div className="border rounded-lg overflow-hidden shadow-lg relative">
-      <label className="block relative">
+    <div className="border rounded-lg overflow-hidden shadow-lg relative group">
+      <label className="block relative ">
         <LazyImage
           src={ASSET_THUMBNAIL_PATH(album.albumThumbnailAssetId)}
           alt={album.albumName}
@@ -35,7 +35,7 @@ export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps
             objectFit: 'cover',
           }}
         />
-        <div className="absolute bottom-0 w-full bg-gray-800/70 text-white text-center text-xs font-bold py-1">
+        <div className="absolute bottom-0 w-full bg-gray-800/70 text-white text-center text-xs font-bold py-1 group-hover:hidden">
           {formatDate(album.firstPhotoDate.toString(), 'MMM d, yyyy')} - {formatDate(album.lastPhotoDate.toString(), 'MMM d, yyyy')}
         </div>
         <Checkbox
@@ -43,21 +43,26 @@ export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps
           className="absolute hidden top-2 left-2 w-6 h-6 rounded-full border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         />
       </label>
-      <div className="flex items-center gap-2 absolute top-2 right-2 ">
-        <div className="bg-gray-800 flex items-center gap-1 text-white text-xs font-bold py-1 px-2 rounded">
-          {humanizeNumber(album.assetCount)} <Camera size={12} />
+      <div className="items-center gap-2 absolute top-2 right-2 group-hover:hidden flex ">
+        <div className="bg-gray-800 flex items-center gap-1 text-white text-xs py-1 px-2 rounded">
+          
+          <Camera size={12} />
+          {humanizeNumber(album.assetCount)}
         </div>
-      <p className="bg-gray-800 flex items-center gap-1 text-white text-xs font-bold py-1 px-2 rounded">
-        {album.faceCount} <User size={12} />
+        <p className="bg-gray-800 flex items-center gap-1 text-white text-xs py-1 px-2 rounded">
+        {numberOfDays === 0 ? '1 day' : `${numberOfDays.toLocaleString() } days`} <Calendar size={12} />
       </p>
       </div>
       <div className="p-4">
         <Link href={`/albums/${album.id}`}>
           <h2 className="text-md font-semibold truncate">{album.albumName}</h2>
         </Link>
-          <p className="text-sm text-gray-700 dark:text-gray-500">{
-          numberOfDays === 0 ? '1 day' : `${numberOfDays.toLocaleString() } days`
-        }</p>
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-xs text-gray-700 dark:text-gray-500">{humanizeNumber(album.faceCount)} {
+          pluralize(album.faceCount, 'person', 'people')
+        } </p>
+          <p className="text-xs text-gray-700 dark:text-gray-500">{humanizeBytes(parseInt(album.size))}</p>
+        </div>
       </div>
     </div>
   )
diff --git a/src/config/constants/sidebarNavs.tsx b/src/config/constants/sidebarNavs.tsx
index 1da0988..7e0a839 100644
--- a/src/config/constants/sidebarNavs.tsx
+++ b/src/config/constants/sidebarNavs.tsx
@@ -22,7 +22,7 @@ export const sidebarNavs = [
     icon: <MapPinX className="h-4 w-4" />,
   },
   {
-    title: "Albums",
+    title: "Manage Albums",
     link: "/albums",
     icon: <GalleryHorizontal className="h-4 w-4" />,
   },
diff --git a/src/handlers/api/album.handler.ts b/src/handlers/api/album.handler.ts
index 3342c35..2e39f7e 100644
--- a/src/handlers/api/album.handler.ts
+++ b/src/handlers/api/album.handler.ts
@@ -23,8 +23,8 @@ export const listPotentialAlbumsAssets = async (filters: IPotentialAlbumsDatesFi
   return API.get(LIST_POTENTIAL_ALBUMS_ASSETS_PATH, filters).then((assets) => assets.map(cleanUpAsset));
 }
 
-export const listAlbums = async () => {
-return API.get(LIST_ALBUMS_PATH);
+export const listAlbums = async (filters?: { sortBy?: string, sortOrder?: string }) => {
+  return API.get(LIST_ALBUMS_PATH, filters);
 }
 export const getAlbumInfo = async (id: string) => {
   return API.get(ALBUM_INFO_PATH(id));
diff --git a/src/helpers/string.helper.ts b/src/helpers/string.helper.ts
index 7f5612e..0963cb3 100644
--- a/src/helpers/string.helper.ts
+++ b/src/helpers/string.helper.ts
@@ -1,3 +1,20 @@
 export const humanizeNumber = (number: number) => {
   return number.toLocaleString();
-}
\ No newline at end of file
+}
+
+export const pluralize = (number: number, word: string, pluralWord: string) => {
+  return number === 1 ? word : pluralWord
+}
+
+export const humanizeBytes = (bytes: number) => {
+  if (bytes < 1024) {
+    return `${bytes} bytes`
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  }
+  if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
diff --git a/src/pages/albums/index.tsx b/src/pages/albums/index.tsx
index 83041ec..16954da 100644
--- a/src/pages/albums/index.tsx
+++ b/src/pages/albums/index.tsx
@@ -7,20 +7,42 @@ import { listAlbums } from '@/handlers/api/album.handler'
 import { IAlbum } from '@/types/album'
 import Image from 'next/image'
 import Link from 'next/link'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import AlbumThumbnail from '@/components/albums/list/AlbumThumbnail'
 import { Button } from '@/components/ui/button'
+import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useRouter } from 'next/router'
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import { SortAsc, SortDesc } from 'lucide-react'
 
+const SORT_BY_OPTIONS = [
+  { value: 'lastPhotoDate', label: 'Last Photo Date' },
+  { value: 'firstPhotoDate', label: 'First Photo Date' },
+  { value: 'assetCount', label: 'Asset Count' },
+  { value: 'createdAt', label: 'Created At' },
+  { value: 'updatedAt', label: 'Updated At' },
+  { value: 'albumName', label: 'Album Name' },
+  { value: 'albumSize', label: 'Album Size' },
+  { value: 'faceCount', label: 'Number of People' },
+]
 export default function AlbumListPage() {
   const { exImmichUrl } = useConfig()
+  const router = useRouter()
+  const { query, pathname } = router
+  const { sortBy, sortOrder } = query as { sortBy: string, sortOrder: string }
   const [albums, setAlbums] = useState<IAlbum[]>([])
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
   const [selectedAlbums, setSelectedAlbums] = useState<string[]>([])
 
+  const selectedSortBy = useMemo(() => SORT_BY_OPTIONS.find((option) => option.value === sortBy), [sortBy])
+
   const fetchAlbums = async () => {
     setLoading(true)
-    listAlbums()
+    listAlbums({
+      sortBy,
+      sortOrder
+    })
       .then(setAlbums)
       .catch((error) => {
         setErrorMessage(error.message)
@@ -32,7 +54,7 @@ export default function AlbumListPage() {
 
   useEffect(() => {
     fetchAlbums()
-  }, [])
+  }, [sortBy, sortOrder])
 
   const handleSelect = (checked: boolean, albumId: string) => {
     if (checked) {
@@ -42,6 +64,7 @@ export default function AlbumListPage() {
     }
   }
 
+
   const renderContent = () => {
 
     if (loading) {
@@ -62,6 +85,38 @@ export default function AlbumListPage() {
     <PageLayout className="!p-0 !mb-0">
       <Header
         leftComponent="Albums"
+        rightComponent={
+          <div className="flex items-center gap-2">
+            <Select
+              defaultValue={selectedSortBy?.value}
+              onValueChange={(value) => router.push({
+                pathname,
+              query: {
+                ...query,
+                sortBy: value,
+              }
+              
+            })}>
+              <SelectTrigger className="px-2">
+                <SelectValue placeholder="Sort by">{selectedSortBy?.label || 'Sort by'}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_BY_OPTIONS.map((option) => (
+                  <SelectItem value={option.value} key={option.value}>{option.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button className="px-2" variant={"secondary"} onClick={() => router.push({
+              pathname,
+              query: {
+                ...query,
+                sortOrder: sortOrder === 'asc' ? 'desc' : 'asc',
+              }
+            })}>
+              {sortOrder === 'asc' ? <SortAsc /> : <SortDesc />}
+            </Button>
+          </div>
+        }
       />
       {renderContent()}
     </PageLayout>
diff --git a/src/pages/api/albums/list.ts b/src/pages/api/albums/list.ts
index 45fee66..53592c0 100644
--- a/src/pages/api/albums/list.ts
+++ b/src/pages/api/albums/list.ts
@@ -4,7 +4,7 @@ import { db } from "@/config/db";
 import { getCurrentUser } from "@/handlers/serverUtils/user.utils";
 import { NextApiResponse } from "next";
 import { albums } from "@/schema/albums.schema";
-import { count, desc, eq, min, max, sql, and } from "drizzle-orm";
+import { count, desc, eq, min, max, sql, and, sum } from "drizzle-orm";
 import { assets } from "@/schema/assets.schema";
 import { albumsAssetsAssets } from "@/schema/albumAssetsAssets.schema";
 import { users } from "@/schema/users.schema";
@@ -28,6 +28,15 @@ const sortAlbums = (albums: IAlbum[], sortBy: string, sortOrder: string) => {
   if (sortBy === 'assetCount') {
     return albums.sort((a, b) => sortOrder === 'asc' ? a.assetCount - b.assetCount : b.assetCount - a.assetCount);
   }
+  if (sortBy === 'albumName') {
+    return albums.sort((a, b) => sortOrder === 'asc' ? a.albumName.localeCompare(b.albumName) : b.albumName.localeCompare(a.albumName));
+  }
+  if (sortBy === 'albumSize') {
+    return albums.sort((a, b) => sortOrder === 'asc' ? parseInt(a.size) - parseInt(b.size) : parseInt(b.size) - parseInt(a.size));
+  }
+  if (sortBy === 'faceCount') {
+    return albums.sort((a, b) => sortOrder === 'asc' ? a.faceCount - b.faceCount : b.faceCount - a.faceCount);
+  }
   return albums;
 }
 export default async function handler(
@@ -49,6 +58,12 @@ export default async function handler(
     assetCount: count(assets.id),
     firstPhotoDate: min(exif.dateTimeOriginal),
     lastPhotoDate: max(exif.dateTimeOriginal),
+    size: sum(exif.fileSizeInByte),
+    order: albums.order,
+    isActivityEnabled: albums.isActivityEnabled,
+    ownerId: albums.ownerId,
+    description: albums.description,
+    lastModifiedAssetTimestamp: max(exif.dateTimeOriginal),
     faceCount: count(sql<string>`DISTINCT ${assetFaces.personId}`), // Ensure unique personId
   })
     .from(albums)
diff --git a/src/types/album.d.ts b/src/types/album.d.ts
index 066ebc8..0e3f281 100644
--- a/src/types/album.d.ts
+++ b/src/types/album.d.ts
@@ -6,13 +6,13 @@ export interface IAlbum {
   updatedAt:                  Date;
   id:                         string;
   ownerId:                    string;
-  owner:                      IAlbumOwner;
-  albumUsers:                 any[];
-  shared:                     boolean;
-  hasSharedLink:              boolean;
-  startDate:                  Date;
-  endDate:                    Date;
-  assets:                     any[];
+  owner?:                      IAlbumOwner;
+  albumUsers?:                 any[];
+  shared?:                     boolean;
+  hasSharedLink?:              boolean;
+  startDate?:                  Date;
+  endDate?:                    Date;
+  assets?:                     any[];
   assetCount:                 number;
   isActivityEnabled:          boolean;
   order:                      string;
@@ -20,6 +20,7 @@ export interface IAlbum {
   firstPhotoDate:             Date;
   lastPhotoDate:              Date;
   faceCount:                  number;
+  size:                       string;
 }
 
 export interface IAlbumOwner {