feat(web): Add album sorting to albums view (#2861)

* Add album sorting to web albums view

* generate api

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

server/immich-openapi-specs.json

@@ -4584,6 +4584,10 @@
           },
           "owner": {
             "$ref": "#/components/schemas/UserResponseDto"
+          },
+          "lastModifiedAssetTimestamp": {
+            "format": "date-time",
+            "type": "string"
           }
         },
         "required": [

server/src/domain/album/album-response.dto.ts

@@ -16,6 +16,7 @@ export class AlbumResponseDto {
   owner!: UserResponseDto;
   @ApiProperty({ type: 'integer' })
   assetCount!: number;
+  lastModifiedAssetTimestamp?: Date;
 }
 
 export function mapAlbum(entity: AlbumEntity): AlbumResponseDto {

server/src/domain/album/album.service.ts

@@ -53,15 +53,19 @@ export class AlbumService {
       return obj;
     }, {});
 
-    return albums.map((album) => {
+    return Promise.all(
-      return {
+      albums.map(async (album) => {
-        ...album,
+        const lastModifiedAsset = await this.assetRepository.getLastUpdatedAssetForAlbumId(album.id);
-        assets: album?.assets?.map(mapAsset),
+        return {
-        sharedLinks: undefined, // Don't return shared links
+          ...album,
-        shared: album.sharedLinks?.length > 0 || album.sharedUsers?.length > 0,
+          assets: album?.assets?.map(mapAsset),
-        assetCount: albumsAssetCountObj[album.id],
+          sharedLinks: undefined, // Don't return shared links
-      } as AlbumResponseDto;
+          shared: album.sharedLinks?.length > 0 || album.sharedUsers?.length > 0,
-    });
+          assetCount: albumsAssetCountObj[album.id],
+          lastModifiedAssetTimestamp: lastModifiedAsset?.fileModifiedAt,
+        } as AlbumResponseDto;
+      }),
+    );
   }
 
   private async updateInvalidThumbnails(): Promise<number> {

server/src/domain/asset/asset.repository.ts

@@ -47,6 +47,7 @@ export interface IAssetRepository {
   getWithout(pagination: PaginationOptions, property: WithoutProperty): Paginated<AssetEntity>;
   getWith(pagination: PaginationOptions, property: WithProperty): Paginated<AssetEntity>;
   getFirstAssetForAlbumId(albumId: string): Promise<AssetEntity | null>;
+  getLastUpdatedAssetForAlbumId(albumId: string): Promise<AssetEntity | null>;
   deleteAll(ownerId: string): Promise<void>;
   getAll(pagination: PaginationOptions, options?: AssetSearchOptions): Paginated<AssetEntity>;
   save(asset: Partial<AssetEntity>): Promise<AssetEntity>;

server/src/infra/repositories/asset.repository.ts

@@ -248,6 +248,13 @@ export class AssetRepository implements IAssetRepository {
     });
   }
 
+  getLastUpdatedAssetForAlbumId(albumId: string): Promise<AssetEntity | null> {
+    return this.repository.findOne({
+      where: { albums: { id: albumId } },
+      order: { updatedAt: 'DESC' },
+    });
+  }
+
   async getMapMarkers(ownerId: string, options: MapMarkerSearchOptions = {}): Promise<MapMarker[]> {
     const { isFavorite, fileCreatedAfter, fileCreatedBefore } = options;
 

server/test/repositories/asset.repository.mock.ts

@@ -7,6 +7,7 @@ export const newAssetRepositoryMock = (): jest.Mocked<IAssetRepository> => {
     getWithout: jest.fn(),
     getWith: jest.fn(),
     getFirstAssetForAlbumId: jest.fn(),
+    getLastUpdatedAssetForAlbumId: jest.fn(),
     getAll: jest.fn().mockResolvedValue({
       items: [],
       hasNextPage: false,

web/src/api/open-api/api.ts

@@ -284,6 +284,12 @@ export interface AlbumResponseDto {
      * @memberof AlbumResponseDto
      */
     'owner': UserResponseDto;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'lastModifiedAssetTimestamp'?: string;
 }
 /**
  * 

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

@@ -15,8 +15,17 @@
 
 	export let data: PageData;
 
+	const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
+
+	let selectedSortBy = sortByOptions[0];
+
+	const handleChangeSortBy = (e: Event) => {
+		const target = e.target as HTMLSelectElement;
+		selectedSortBy = target.value;
+	};
+
 	const {
-		albums,
+		albums: unsortedAlbums,
 		isShowContextMenu,
 		contextMenuPosition,
 		createAlbum,
@@ -26,6 +35,28 @@
 		closeAlbumContextMenu
 	} = useAlbums({ albums: data.albums });
 
+	let albums = unsortedAlbums;
+
+	const sortByDate = (a: string, b: string) => {
+		const aDate = new Date(a);
+		const bDate = new Date(b);
+		return bDate.getTime() - aDate.getTime();
+	};
+
+	$: {
+		if (selectedSortBy === 'Most recent photo') {
+			$albums = $unsortedAlbums.sort((a, b) =>
+				a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
+					? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
+					: sortByDate(a.updatedAt, b.updatedAt)
+			);
+		} else if (selectedSortBy === 'Last modified') {
+			$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
+		} else if (selectedSortBy === 'Album title') {
+			$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
+		}
+	}
+
 	const handleCreateAlbum = async () => {
 		const newAlbum = await createAlbum();
 		if (newAlbum) {
@@ -52,7 +83,20 @@
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div slot="buttons">
+	<div class="flex place-items-center gap-2" slot="buttons">
+		<label class="text-xs" for="sortBy">Sort by:</label>
+		<select
+			class="text-sm bg-slate-200 p-2 rounded-lg dark:bg-gray-600 hover:cursor-pointer"
+			name="sortBy"
+			id="sortBy-select"
+			bind:value={selectedSortBy}
+			on:change={handleChangeSortBy}
+		>
+			{#each sortByOptions as option}
+				<option value={option}>{option}</option>
+			{/each}
+		</select>
+
 		<LinkButton on:click={handleCreateAlbum}>
 			<div class="flex place-items-center gap-2 text-sm">
 				<PlusBoxOutline size="18" />