mirror of https://github.com/immich-app/immich.git
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>pull/10646/head^2
David Kerr
GitHub
parent
6cf5906813
commit
07538299cf
@ -0,0 +1,114 @@
|
|||||||
|
//
|
||||||
|
// AUTO-GENERATED FILE, DO NOT MODIFY!
|
||||||
|
//
|
||||||
|
// @dart=2.18
|
||||||
|
|
||||||
|
// ignore_for_file: unused_element, unused_import
|
||||||
|
// ignore_for_file: always_put_required_named_parameters_first
|
||||||
|
// ignore_for_file: constant_identifier_names
|
||||||
|
// ignore_for_file: lines_longer_than_80_chars
|
||||||
|
|
||||||
|
part of openapi.api;
|
||||||
|
|
||||||
|
|
||||||
|
class ViewApi {
|
||||||
|
ViewApi([ApiClient? apiClient]) : apiClient = apiClient ?? defaultApiClient;
|
||||||
|
|
||||||
|
final ApiClient apiClient;
|
||||||
|
|
||||||
|
/// Performs an HTTP 'GET /view/folder' operation and returns the [Response].
|
||||||
|
/// Parameters:
|
||||||
|
///
|
||||||
|
/// * [String] path (required):
|
||||||
|
Future<Response> getAssetsByOriginalPathWithHttpInfo(String path,) async {
|
||||||
|
// ignore: prefer_const_declarations
|
||||||
|
final path = r'/view/folder';
|
||||||
|
|
||||||
|
// ignore: prefer_final_locals
|
||||||
|
Object? postBody;
|
||||||
|
|
||||||
|
final queryParams = <QueryParam>[];
|
||||||
|
final headerParams = <String, String>{};
|
||||||
|
final formParams = <String, String>{};
|
||||||
|
|
||||||
|
queryParams.addAll(_queryParams('', 'path', path));
|
||||||
|
|
||||||
|
const contentTypes = <String>[];
|
||||||
|
|
||||||
|
|
||||||
|
return apiClient.invokeAPI(
|
||||||
|
path,
|
||||||
|
'GET',
|
||||||
|
queryParams,
|
||||||
|
postBody,
|
||||||
|
headerParams,
|
||||||
|
formParams,
|
||||||
|
contentTypes.isEmpty ? null : contentTypes.first,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Parameters:
|
||||||
|
///
|
||||||
|
/// * [String] path (required):
|
||||||
|
Future<List<AssetResponseDto>?> getAssetsByOriginalPath(String path,) async {
|
||||||
|
final response = await getAssetsByOriginalPathWithHttpInfo(path,);
|
||||||
|
if (response.statusCode >= HttpStatus.badRequest) {
|
||||||
|
throw ApiException(response.statusCode, await _decodeBodyBytes(response));
|
||||||
|
}
|
||||||
|
// When a remote server returns no body with a status of 204, we shall not decode it.
|
||||||
|
// At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
|
||||||
|
// FormatException when trying to decode an empty string.
|
||||||
|
if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
|
||||||
|
final responseBody = await _decodeBodyBytes(response);
|
||||||
|
return (await apiClient.deserializeAsync(responseBody, 'List<AssetResponseDto>') as List)
|
||||||
|
.cast<AssetResponseDto>()
|
||||||
|
.toList(growable: false);
|
||||||
|
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Performs an HTTP 'GET /view/folder/unique-paths' operation and returns the [Response].
|
||||||
|
Future<Response> getUniqueOriginalPathsWithHttpInfo() async {
|
||||||
|
// ignore: prefer_const_declarations
|
||||||
|
final path = r'/view/folder/unique-paths';
|
||||||
|
|
||||||
|
// ignore: prefer_final_locals
|
||||||
|
Object? postBody;
|
||||||
|
|
||||||
|
final queryParams = <QueryParam>[];
|
||||||
|
final headerParams = <String, String>{};
|
||||||
|
final formParams = <String, String>{};
|
||||||
|
|
||||||
|
const contentTypes = <String>[];
|
||||||
|
|
||||||
|
|
||||||
|
return apiClient.invokeAPI(
|
||||||
|
path,
|
||||||
|
'GET',
|
||||||
|
queryParams,
|
||||||
|
postBody,
|
||||||
|
headerParams,
|
||||||
|
formParams,
|
||||||
|
contentTypes.isEmpty ? null : contentTypes.first,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<List<String>?> getUniqueOriginalPaths() async {
|
||||||
|
final response = await getUniqueOriginalPathsWithHttpInfo();
|
||||||
|
if (response.statusCode >= HttpStatus.badRequest) {
|
||||||
|
throw ApiException(response.statusCode, await _decodeBodyBytes(response));
|
||||||
|
}
|
||||||
|
// When a remote server returns no body with a status of 204, we shall not decode it.
|
||||||
|
// At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
|
||||||
|
// FormatException when trying to decode an empty string.
|
||||||
|
if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
|
||||||
|
final responseBody = await _decodeBodyBytes(response);
|
||||||
|
return (await apiClient.deserializeAsync(responseBody, 'List<String>') as List)
|
||||||
|
.cast<String>()
|
||||||
|
.toList(growable: false);
|
||||||
|
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -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 }));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
|
import { mdiChevronDown, mdiChevronRight, mdiFolder, mdiFolderEye, mdiFolderOutline } from '@mdi/js';
|
||||||
|
import FolderBrowser from './folder-tree.svelte';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import type { RecursiveObject } from '$lib/utils/folder-utils';
|
||||||
|
|
||||||
|
// Exported props
|
||||||
|
export let folderName: string;
|
||||||
|
export let content: RecursiveObject;
|
||||||
|
export let basePath: string;
|
||||||
|
export let currentPath: string = '';
|
||||||
|
|
||||||
|
let isExpanded = false;
|
||||||
|
let currentFolderPath = `${basePath}/${folderName}`.replace(/^\//, '').replace(/\/$/, '');
|
||||||
|
|
||||||
|
$: isExpanded = currentPath.startsWith(currentFolderPath);
|
||||||
|
$: isOpened = currentPath === currentFolderPath;
|
||||||
|
|
||||||
|
function toggleExpand(event: MouseEvent) {
|
||||||
|
event.stopPropagation();
|
||||||
|
isExpanded = !isExpanded;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNavigation = async () => {
|
||||||
|
const url = new URL(AppRoute.FOLDERS, window.location.href);
|
||||||
|
url.searchParams.set('folder', currentFolderPath);
|
||||||
|
await goto(url);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class={`flex place-items-center gap-1 mt-1 px-3 py-1 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg font-mono text-sm hover:font-semibold ${isOpened ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
|
||||||
|
on:click={toggleExpand}
|
||||||
|
on:dblclick|stopPropagation|preventDefault={handleNavigation}
|
||||||
|
title={folderName}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<a href={`${AppRoute.FOLDERS}?folder=${currentFolderPath}`} on:click|preventDefault={handleNavigation} class="flex">
|
||||||
|
<Icon
|
||||||
|
path={isExpanded ? mdiChevronDown : mdiChevronRight}
|
||||||
|
class={isExpanded ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400 dark:text-gray-700'}
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
path={isOpened ? mdiFolderEye : isExpanded ? mdiFolder : mdiFolderOutline}
|
||||||
|
class={isExpanded ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400 dark:text-gray-700'}
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<button on:click={toggleExpand} type="button">
|
||||||
|
<p class="text-nowrap overflow-clip">{folderName}</p>
|
||||||
|
</button>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if isExpanded}
|
||||||
|
<ul class="list-none ml-2">
|
||||||
|
{#each Object.entries(content) as [subFolderName, subContent], index (index)}
|
||||||
|
<li class="my-1">
|
||||||
|
<FolderBrowser folderName={subFolderName} content={subContent} basePath={currentFolderPath} {currentPath} />
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import FolderTree from '$lib/components/folder-tree/folder-tree.svelte';
|
||||||
|
import { buildFolderTree, type RecursiveObject } from '$lib/utils/folder-utils';
|
||||||
|
import { foldersStore } from '$lib/stores/folders.store';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
|
let folderTree: RecursiveObject = {};
|
||||||
|
$: currentPath = $page.url.searchParams.get('folder') || '';
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await foldersStore.fetchUniquePaths();
|
||||||
|
});
|
||||||
|
|
||||||
|
$: {
|
||||||
|
const { uniquePaths } = get(foldersStore);
|
||||||
|
if (uniquePaths && uniquePaths.length > 0) {
|
||||||
|
folderTree = buildFolderTree(uniquePaths);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section id="folder-browser-sidebar">
|
||||||
|
<div class="text-xs pl-4 mb-4 dark:text-white">{$t('explorer').toUpperCase()}</div>
|
||||||
|
<div class="overflow-auto pb-10 immich-scrollbar">
|
||||||
|
{#each Object.entries(folderTree) as [folderName, content]}
|
||||||
|
<FolderTree {folderName} {content} {currentPath} basePath="" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
|
||||||
|
import FolderBrowserSidebar from '$lib/components/shared-components/side-bar/folder-browser-sidebar.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SideBarSection>
|
||||||
|
<FolderBrowserSidebar />
|
||||||
|
</SideBarSection>
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import {
|
||||||
|
getAssetsByOriginalPath,
|
||||||
|
getUniqueOriginalPaths,
|
||||||
|
/**
|
||||||
|
* TODO: Incorrect type
|
||||||
|
*/
|
||||||
|
type AssetResponseDto,
|
||||||
|
} from '@immich/sdk';
|
||||||
|
import { get, writable } from 'svelte/store';
|
||||||
|
|
||||||
|
type AssetCache = {
|
||||||
|
[path: string]: AssetResponseDto[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type FoldersStore = {
|
||||||
|
uniquePaths: string[] | null;
|
||||||
|
assets: AssetCache;
|
||||||
|
};
|
||||||
|
|
||||||
|
function createFoldersStore() {
|
||||||
|
const initialState: FoldersStore = {
|
||||||
|
uniquePaths: null,
|
||||||
|
assets: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
const { subscribe, set, update } = writable(initialState);
|
||||||
|
|
||||||
|
async function fetchUniquePaths() {
|
||||||
|
const state = get(foldersStore);
|
||||||
|
|
||||||
|
if (state.uniquePaths !== null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const uniquePaths = await getUniqueOriginalPaths();
|
||||||
|
if (uniquePaths) {
|
||||||
|
update((state) => ({ ...state, uniquePaths }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchAssetsByPath(path: string) {
|
||||||
|
const state = get(foldersStore);
|
||||||
|
|
||||||
|
if (state.assets[path]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const assets = await getAssetsByOriginalPath({ path });
|
||||||
|
if (assets) {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
assets: { ...state.assets, [path]: assets },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCache() {
|
||||||
|
set(initialState);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
fetchUniquePaths,
|
||||||
|
fetchAssetsByPath,
|
||||||
|
clearCache,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const foldersStore = createFoldersStore();
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export interface RecursiveObject {
|
||||||
|
[key: string]: RecursiveObject;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildFolderTree(paths: string[]) {
|
||||||
|
const root: RecursiveObject = {};
|
||||||
|
for (const path of paths) {
|
||||||
|
const parts = path.split('/');
|
||||||
|
let current = root;
|
||||||
|
for (const part of parts) {
|
||||||
|
if (!current[part]) {
|
||||||
|
current[part] = {};
|
||||||
|
}
|
||||||
|
current = current[part];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return root;
|
||||||
|
}
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||||
|
import { type AssetResponseDto } from '@immich/sdk';
|
||||||
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
|
import { mdiArrowUpLeft, mdiChevronRight, mdiFolder, mdiFolderHome } from '@mdi/js';
|
||||||
|
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||||
|
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||||
|
import type { Viewport } from '$lib/stores/assets.store';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
|
||||||
|
export let data: PageData;
|
||||||
|
|
||||||
|
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||||
|
const viewport: Viewport = { width: 0, height: 0 };
|
||||||
|
|
||||||
|
$: pathSegments = data.path ? data.path.split('/') : [];
|
||||||
|
|
||||||
|
const handleNavigation = async (folderName: string) => {
|
||||||
|
const folderFullPath = `${data.path ? data.path + '/' : ''}${folderName}`.replaceAll(/^\/|\/$/g, '');
|
||||||
|
await navigateToView(folderFullPath);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackNavigation = async () => {
|
||||||
|
if (data.path) {
|
||||||
|
const parentPath = data.path.split('/').slice(0, -1).join('/');
|
||||||
|
await navigateToView(parentPath);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBreadcrumbNavigation = async (targetPath: string) => {
|
||||||
|
await navigateToView(targetPath);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigateToView = async (folderPath: string) => {
|
||||||
|
const url = new URL(AppRoute.FOLDERS, window.location.href);
|
||||||
|
url.searchParams.set('folder', folderPath);
|
||||||
|
await goto(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadNextPage = () => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<UserPageLayout title={data.meta.title} isFolderView>
|
||||||
|
<section id="path-summary" class="text-immich-primary dark:text-immich-dark-primary rounded-xl flex">
|
||||||
|
{#if data.path}
|
||||||
|
<CircleIconButton icon={mdiArrowUpLeft} title="Back" on:click={handleBackNavigation} class="mr-2" padding="2" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex place-items-center gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 w-full py-2 px-4 rounded-2xl border border-gray-100 dark:border-gray-900"
|
||||||
|
>
|
||||||
|
<a href={`${AppRoute.FOLDERS}`} title="To root">
|
||||||
|
<Icon path={mdiFolderHome} class="text-immich-primary dark:text-immich-dark-primary mr-2" size={28} />
|
||||||
|
</a>
|
||||||
|
{#each pathSegments as segment, index}
|
||||||
|
<button
|
||||||
|
class="text-sm font-mono underline hover:font-semibold"
|
||||||
|
on:click={() => handleBreadcrumbNavigation(pathSegments.slice(0, index + 1).join('/'))}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{segment}
|
||||||
|
</button>
|
||||||
|
<p class="text-gray-500">
|
||||||
|
{#if index < pathSegments.length - 1}
|
||||||
|
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} />
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="folder-detail-view" class="mt-2">
|
||||||
|
<!-- Sub Folders -->
|
||||||
|
{#if data.currentFolders.length > 0}
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 rounded-2xl border border-gray-100 dark:border-gray-900 max-h-[500px] overflow-auto immich-scrollbar"
|
||||||
|
>
|
||||||
|
{#each data.currentFolders as folder}
|
||||||
|
<button
|
||||||
|
class="flex flex-col place-items-center gap-2 py-2 px-4 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/40 rounded-xl"
|
||||||
|
on:click={() => handleNavigation(folder)}
|
||||||
|
title={folder}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Icon path={mdiFolder} class="text-immich-primary dark:text-immich-dark-primary" size={64} />
|
||||||
|
<p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full">{folder}</p>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Assets -->
|
||||||
|
<div
|
||||||
|
bind:clientHeight={viewport.height}
|
||||||
|
bind:clientWidth={viewport.width}
|
||||||
|
class:mt-4={data.currentFolders.length > 0}
|
||||||
|
>
|
||||||
|
{#if data.pathAssets && data.pathAssets.length > 0}
|
||||||
|
<GalleryViewer
|
||||||
|
assets={data.pathAssets}
|
||||||
|
bind:selectedAssets
|
||||||
|
on:intersected={loadNextPage}
|
||||||
|
{viewport}
|
||||||
|
disableAssetSelect={true}
|
||||||
|
showAssetName={true}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</UserPageLayout>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import { foldersStore } from '$lib/stores/folders.store';
|
||||||
|
import { authenticate } from '$lib/utils/auth';
|
||||||
|
import { getFormatter } from '$lib/utils/i18n';
|
||||||
|
import { getAssetInfoFromParam } from '$lib/utils/navigation';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (async ({ params, url }) => {
|
||||||
|
await authenticate();
|
||||||
|
const asset = await getAssetInfoFromParam(params);
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
await foldersStore.fetchUniquePaths();
|
||||||
|
const { uniquePaths } = get(foldersStore);
|
||||||
|
|
||||||
|
let pathAssets = null;
|
||||||
|
const path = url.searchParams.get('folder');
|
||||||
|
|
||||||
|
if (path) {
|
||||||
|
await foldersStore.fetchAssetsByPath(path);
|
||||||
|
const { assets } = get(foldersStore);
|
||||||
|
pathAssets = assets[path] || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentPath = path ? `${path}/`.replaceAll('//', '/') : '';
|
||||||
|
|
||||||
|
const currentFolders = (uniquePaths || [])
|
||||||
|
.filter((path) => path.startsWith(currentPath) && path !== currentPath)
|
||||||
|
.map((path) => path.replaceAll(currentPath, '').split('/')[0])
|
||||||
|
.filter((value, index, self) => self.indexOf(value) === index);
|
||||||
|
|
||||||
|
return {
|
||||||
|
asset,
|
||||||
|
path,
|
||||||
|
currentFolders,
|
||||||
|
pathAssets,
|
||||||
|
meta: {
|
||||||
|
title: $t('folders'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
Loading…
Reference in New Issue