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