feat: folder view (#11880)

* feat: folder view poc

* fix(folder-view): ui modifications

* fix(folder-view): improves utility return types

* fix(folder-view): update getAssetsByOriginalPath

Endpoint now only returns direct children of the path instead of all images in all subfolders.  Functions renamed and scoped to "folder", endpoints renamed

* fix(folder-view): improve typing

* fix(folder-view): replaces css with tailwind

* fix(folder-view): includes folders in main panel

* feat(folder-view): folder cache implementation

* fix(folder-view): can now search for absolute paths

* fix(folder-view): sets default sort to alphabetical by filename

* refactor/styling the browser view

* double click to navigate

* folder tree

* use correct side bar icon

* styling when selected

* correct open icon

* folder layout

* return assetReponseDto

* it's alive

* update new api

* more styling for folder tree

* use query params and path viewer

* use arrow up left for parent folder backward navigation

* use arrow up left for parent folder backward navigation

* encode URL

* handle long folder name

* refactor to the view controller

* remove unused code

* clear cache when logout

* cleaning up

* cleaning up web

* clean as new

* clean as new

* pr feedback + show asset name

* add tests

* add tests

* remove generated file

* lint

* revert docker-compose.dev file

* Update server/src/services/view.service.ts

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* Update server/src/services/view.service.ts

Co-authored-by: Jason Rasmussen <jason@rasm.me>

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

server/src/controllers/index.ts

@@ -32,6 +32,7 @@ import { TimelineController } from 'src/controllers/timeline.controller';
 import { TrashController } from 'src/controllers/trash.controller';
 import { UserAdminController } from 'src/controllers/user-admin.controller';
 import { UserController } from 'src/controllers/user.controller';
+import { ViewController } from 'src/controllers/view.controller';
 
 export const controllers = [
   APIKeyController,
@@ -68,4 +69,5 @@ export const controllers = [
   TrashController,
   UserAdminController,
   UserController,
+  ViewController,
 ];

server/src/controllers/view.controller.ts

@@ -0,0 +1,24 @@
+import { Controller, Get, Query } from '@nestjs/common';
+import { ApiTags } from '@nestjs/swagger';
+import { AssetResponseDto } from 'src/dtos/asset-response.dto';
+import { AuthDto } from 'src/dtos/auth.dto';
+import { Auth, Authenticated } from 'src/middleware/auth.guard';
+import { ViewService } from 'src/services/view.service';
+
+@ApiTags('View')
+@Controller('view')
+export class ViewController {
+  constructor(private service: ViewService) {}
+
+  @Get('folder/unique-paths')
+  @Authenticated()
+  getUniqueOriginalPaths(@Auth() auth: AuthDto): Promise<string[]> {
+    return this.service.getUniqueOriginalPaths(auth);
+  }
+
+  @Get('folder')
+  @Authenticated()
+  getAssetsByOriginalPath(@Auth() auth: AuthDto, @Query('path') path: string): Promise<AssetResponseDto[]> {
+    return this.service.getAssetsByOriginalPath(auth, path);
+  }
+}

server/src/interfaces/asset.interface.ts

@@ -145,6 +145,8 @@ export type AssetPathEntity = Pick<AssetEntity, 'id' | 'originalPath' | 'isOffli
 export const IAssetRepository = 'IAssetRepository';
 
 export interface IAssetRepository {
+  getAssetsByOriginalPath(userId: string, partialPath: string): Promise<AssetEntity[]>;
+  getUniqueOriginalPaths(userId: string): Promise<string[]>;
   create(asset: AssetCreate): Promise<AssetEntity>;
   getByIds(
     ids: string[],

server/src/queries/asset.repository.sql

@@ -1168,6 +1168,116 @@ WHERE
   AND "asset"."ownerId" IN ($1)
   AND "asset"."updatedAt" > $2
 
+-- AssetRepository.getAssetsByOriginalPath
+SELECT
+  "asset"."id" AS "asset_id",
+  "asset"."deviceAssetId" AS "asset_deviceAssetId",
+  "asset"."ownerId" AS "asset_ownerId",
+  "asset"."libraryId" AS "asset_libraryId",
+  "asset"."deviceId" AS "asset_deviceId",
+  "asset"."type" AS "asset_type",
+  "asset"."originalPath" AS "asset_originalPath",
+  "asset"."thumbhash" AS "asset_thumbhash",
+  "asset"."encodedVideoPath" AS "asset_encodedVideoPath",
+  "asset"."createdAt" AS "asset_createdAt",
+  "asset"."updatedAt" AS "asset_updatedAt",
+  "asset"."deletedAt" AS "asset_deletedAt",
+  "asset"."fileCreatedAt" AS "asset_fileCreatedAt",
+  "asset"."localDateTime" AS "asset_localDateTime",
+  "asset"."fileModifiedAt" AS "asset_fileModifiedAt",
+  "asset"."isFavorite" AS "asset_isFavorite",
+  "asset"."isArchived" AS "asset_isArchived",
+  "asset"."isExternal" AS "asset_isExternal",
+  "asset"."isOffline" AS "asset_isOffline",
+  "asset"."checksum" AS "asset_checksum",
+  "asset"."duration" AS "asset_duration",
+  "asset"."isVisible" AS "asset_isVisible",
+  "asset"."livePhotoVideoId" AS "asset_livePhotoVideoId",
+  "asset"."originalFileName" AS "asset_originalFileName",
+  "asset"."sidecarPath" AS "asset_sidecarPath",
+  "asset"."stackId" AS "asset_stackId",
+  "asset"."duplicateId" AS "asset_duplicateId",
+  "files"."id" AS "files_id",
+  "files"."assetId" AS "files_assetId",
+  "files"."createdAt" AS "files_createdAt",
+  "files"."updatedAt" AS "files_updatedAt",
+  "files"."type" AS "files_type",
+  "files"."path" AS "files_path",
+  "exifInfo"."assetId" AS "exifInfo_assetId",
+  "exifInfo"."description" AS "exifInfo_description",
+  "exifInfo"."exifImageWidth" AS "exifInfo_exifImageWidth",
+  "exifInfo"."exifImageHeight" AS "exifInfo_exifImageHeight",
+  "exifInfo"."fileSizeInByte" AS "exifInfo_fileSizeInByte",
+  "exifInfo"."orientation" AS "exifInfo_orientation",
+  "exifInfo"."dateTimeOriginal" AS "exifInfo_dateTimeOriginal",
+  "exifInfo"."modifyDate" AS "exifInfo_modifyDate",
+  "exifInfo"."timeZone" AS "exifInfo_timeZone",
+  "exifInfo"."latitude" AS "exifInfo_latitude",
+  "exifInfo"."longitude" AS "exifInfo_longitude",
+  "exifInfo"."projectionType" AS "exifInfo_projectionType",
+  "exifInfo"."city" AS "exifInfo_city",
+  "exifInfo"."livePhotoCID" AS "exifInfo_livePhotoCID",
+  "exifInfo"."autoStackId" AS "exifInfo_autoStackId",
+  "exifInfo"."state" AS "exifInfo_state",
+  "exifInfo"."country" AS "exifInfo_country",
+  "exifInfo"."make" AS "exifInfo_make",
+  "exifInfo"."model" AS "exifInfo_model",
+  "exifInfo"."lensModel" AS "exifInfo_lensModel",
+  "exifInfo"."fNumber" AS "exifInfo_fNumber",
+  "exifInfo"."focalLength" AS "exifInfo_focalLength",
+  "exifInfo"."iso" AS "exifInfo_iso",
+  "exifInfo"."exposureTime" AS "exifInfo_exposureTime",
+  "exifInfo"."profileDescription" AS "exifInfo_profileDescription",
+  "exifInfo"."colorspace" AS "exifInfo_colorspace",
+  "exifInfo"."bitsPerSample" AS "exifInfo_bitsPerSample",
+  "exifInfo"."rating" AS "exifInfo_rating",
+  "exifInfo"."fps" AS "exifInfo_fps",
+  "stack"."id" AS "stack_id",
+  "stack"."ownerId" AS "stack_ownerId",
+  "stack"."primaryAssetId" AS "stack_primaryAssetId",
+  "stackedAssets"."id" AS "stackedAssets_id",
+  "stackedAssets"."deviceAssetId" AS "stackedAssets_deviceAssetId",
+  "stackedAssets"."ownerId" AS "stackedAssets_ownerId",
+  "stackedAssets"."libraryId" AS "stackedAssets_libraryId",
+  "stackedAssets"."deviceId" AS "stackedAssets_deviceId",
+  "stackedAssets"."type" AS "stackedAssets_type",
+  "stackedAssets"."originalPath" AS "stackedAssets_originalPath",
+  "stackedAssets"."thumbhash" AS "stackedAssets_thumbhash",
+  "stackedAssets"."encodedVideoPath" AS "stackedAssets_encodedVideoPath",
+  "stackedAssets"."createdAt" AS "stackedAssets_createdAt",
+  "stackedAssets"."updatedAt" AS "stackedAssets_updatedAt",
+  "stackedAssets"."deletedAt" AS "stackedAssets_deletedAt",
+  "stackedAssets"."fileCreatedAt" AS "stackedAssets_fileCreatedAt",
+  "stackedAssets"."localDateTime" AS "stackedAssets_localDateTime",
+  "stackedAssets"."fileModifiedAt" AS "stackedAssets_fileModifiedAt",
+  "stackedAssets"."isFavorite" AS "stackedAssets_isFavorite",
+  "stackedAssets"."isArchived" AS "stackedAssets_isArchived",
+  "stackedAssets"."isExternal" AS "stackedAssets_isExternal",
+  "stackedAssets"."isOffline" AS "stackedAssets_isOffline",
+  "stackedAssets"."checksum" AS "stackedAssets_checksum",
+  "stackedAssets"."duration" AS "stackedAssets_duration",
+  "stackedAssets"."isVisible" AS "stackedAssets_isVisible",
+  "stackedAssets"."livePhotoVideoId" AS "stackedAssets_livePhotoVideoId",
+  "stackedAssets"."originalFileName" AS "stackedAssets_originalFileName",
+  "stackedAssets"."sidecarPath" AS "stackedAssets_sidecarPath",
+  "stackedAssets"."stackId" AS "stackedAssets_stackId",
+  "stackedAssets"."duplicateId" AS "stackedAssets_duplicateId"
+FROM
+  "assets" "asset"
+  LEFT JOIN "asset_files" "files" ON "files"."assetId" = "asset"."id"
+  LEFT JOIN "exif" "exifInfo" ON "exifInfo"."assetId" = "asset"."id"
+  LEFT JOIN "asset_stack" "stack" ON "stack"."id" = "asset"."stackId"
+  LEFT JOIN "assets" "stackedAssets" ON "stackedAssets"."stackId" = "stack"."id"
+  AND ("stackedAssets"."deletedAt" IS NULL)
+WHERE
+  "asset"."ownerId" = $1
+  AND (
+    "asset"."originalPath" LIKE $2
+    AND "asset"."originalPath" NOT LIKE $3
+  )
+ORDER BY
+  regexp_replace("asset"."originalPath", '.*/(.+)', '\1') ASC
+
 -- AssetRepository.upsertFile
 INSERT INTO
   "asset_files" (

server/src/repositories/asset.repository.ts

@@ -821,6 +821,50 @@ export class AssetRepository implements IAssetRepository {
     return builder.getMany();
   }
 
+  async getUniqueOriginalPaths(userId: string): Promise<string[]> {
+    const builder = this.getBuilder({
+      userIds: [userId],
+      exifInfo: false,
+      withStacked: false,
+      isArchived: false,
+      isTrashed: false,
+    });
+
+    const results = await builder
+      .select("DISTINCT substring(asset.originalPath FROM '^(.*/)[^/]*$')", 'directoryPath')
+      .getRawMany();
+
+    return results.map((row: { directoryPath: string }) => row.directoryPath.replaceAll(/^\/|\/$/g, ''));
+  }
+
+  @GenerateSql({ params: [DummyValue.UUID, DummyValue.STRING] })
+  async getAssetsByOriginalPath(userId: string, partialPath: string): Promise<AssetEntity[]> {
+    const normalizedPath = partialPath.replaceAll(/^\/|\/$/g, '');
+
+    const builder = this.getBuilder({
+      userIds: [userId],
+      exifInfo: true,
+      withStacked: false,
+      isArchived: false,
+      isTrashed: false,
+    });
+
+    const assets = await builder
+      .where('asset.ownerId = :userId', { userId })
+      .andWhere(
+        new Brackets((qb) => {
+          qb.where('asset.originalPath LIKE :likePath', { likePath: `%${normalizedPath}/%` }).andWhere(
+            'asset.originalPath NOT LIKE :notLikePath',
+            { notLikePath: `%${normalizedPath}/%/%` },
+          );
+        }),
+      )
+      .orderBy(String.raw`regexp_replace(asset.originalPath, '.*/(.+)', '\1')`, 'ASC')
+      .getMany();
+
+    return assets;
+  }
+
   @GenerateSql({ params: [{ assetId: DummyValue.UUID, type: AssetFileType.PREVIEW, path: '/path/to/file' }] })
   async upsertFile({ assetId, type, path }: { assetId: string; type: AssetFileType; path: string }): Promise<void> {
     await this.fileRepository.upsert({ assetId, type, path }, { conflictPaths: ['assetId', 'type'] });

server/src/services/index.ts

@@ -37,6 +37,7 @@ import { TrashService } from 'src/services/trash.service';
 import { UserAdminService } from 'src/services/user-admin.service';
 import { UserService } from 'src/services/user.service';
 import { VersionService } from 'src/services/version.service';
+import { ViewService } from 'src/services/view.service';
 
 export const services = [
   APIKeyService,
@@ -78,4 +79,5 @@ export const services = [
   UserAdminService,
   UserService,
   VersionService,
+  ViewService,
 ];

server/src/services/view.service.spec.ts

@@ -0,0 +1,55 @@
+import { mapAsset } from 'src/dtos/asset-response.dto';
+import { IAssetRepository } from 'src/interfaces/asset.interface';
+
+import { ViewService } from 'src/services/view.service';
+import { assetStub } from 'test/fixtures/asset.stub';
+import { authStub } from 'test/fixtures/auth.stub';
+import { newAssetRepositoryMock } from 'test/repositories/asset.repository.mock';
+
+import { Mocked } from 'vitest';
+
+describe(ViewService.name, () => {
+  let sut: ViewService;
+  let assetMock: Mocked<IAssetRepository>;
+
+  beforeEach(() => {
+    assetMock = newAssetRepositoryMock();
+
+    sut = new ViewService(assetMock);
+  });
+
+  it('should work', () => {
+    expect(sut).toBeDefined();
+  });
+
+  describe('getUniqueOriginalPaths', () => {
+    it('should return unique original paths', async () => {
+      const mockPaths = ['path1', 'path2', 'path3'];
+      assetMock.getUniqueOriginalPaths.mockResolvedValue(mockPaths);
+
+      const result = await sut.getUniqueOriginalPaths(authStub.admin);
+
+      expect(result).toEqual(mockPaths);
+      expect(assetMock.getUniqueOriginalPaths).toHaveBeenCalledWith(authStub.admin.user.id);
+    });
+  });
+
+  describe('getAssetsByOriginalPath', () => {
+    it('should return assets by original path', async () => {
+      const path = '/asset';
+
+      const asset1 = { ...assetStub.image, originalPath: '/asset/path1' };
+      const asset2 = { ...assetStub.image, originalPath: '/asset/path2' };
+
+      const mockAssets = [asset1, asset2];
+
+      const mockAssetReponseDto = mockAssets.map((a) => mapAsset(a, { auth: authStub.admin }));
+
+      assetMock.getAssetsByOriginalPath.mockResolvedValue(mockAssets);
+
+      const result = await sut.getAssetsByOriginalPath(authStub.admin, path);
+      expect(result).toEqual(mockAssetReponseDto);
+      await expect(assetMock.getAssetsByOriginalPath(authStub.admin.user.id, path)).resolves.toEqual(mockAssets);
+    });
+  });
+});

server/src/services/view.service.ts

@@ -0,0 +1,18 @@
+import { Inject } from '@nestjs/common';
+import { AssetResponseDto, mapAsset } from 'src/dtos/asset-response.dto';
+import { AuthDto } from 'src/dtos/auth.dto';
+import { IAssetRepository } from 'src/interfaces/asset.interface';
+
+export class ViewService {
+  constructor(@Inject(IAssetRepository) private assetRepository: IAssetRepository) {}
+
+  getUniqueOriginalPaths(auth: AuthDto): Promise<string[]> {
+    return this.assetRepository.getUniqueOriginalPaths(auth.user.id);
+  }
+
+  async getAssetsByOriginalPath(auth: AuthDto, path: string): Promise<AssetResponseDto[]> {
+    const assets = await this.assetRepository.getAssetsByOriginalPath(auth.user.id, path);
+
+    return assets.map((asset) => mapAsset(asset, { auth }));
+  }
+}