From fba9e784fbc429be9bf23b23e1baeabdcb30c42f Mon Sep 17 00:00:00 2001 From: martin <74269598+martabal@users.noreply.github.com> Date: Tue, 12 Dec 2023 03:35:57 +0100 Subject: [PATCH] feat: use tag for albums in list view (#5645) * fix: multiple improvements * pr feedback * optimize --- .../asset-viewer/asset-viewer.svelte | 4 +- .../asset-viewer/detail-panel.svelte | 4 +- .../components/faces-page/people-card.svelte | 2 +- .../components/forms/edit-user-form.svelte | 3 +- .../photos-page/actions/add-to-album.svelte | 3 +- .../individual-shared-viewer.svelte | 3 +- web/src/lib/constants.ts | 1 + web/src/lib/stores/user.store.ts | 10 ++- web/src/lib/utils/auth.ts | 9 ++- web/src/routes/(user)/albums/+page.svelte | 71 ++++++++++--------- .../(user)/albums/[albumId]/+page.svelte | 2 - web/src/routes/(user)/explore/+page.svelte | 6 +- web/src/routes/(user)/photos/+page.svelte | 3 - web/src/routes/(user)/sharing/+page.svelte | 4 +- web/src/routes/+layout.ts | 10 ++- web/src/routes/+page.svelte | 10 +-- 16 files changed, 86 insertions(+), 59 deletions(-) diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index f2ebd5c8dc..abd684e35d 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -19,7 +19,7 @@ import PhotoViewer from './photo-viewer.svelte'; import VideoViewer from './video-viewer.svelte'; import PanoramaViewer from './panorama-viewer.svelte'; - import { AssetAction, ProjectionType } from '$lib/constants'; + import { AppRoute, AssetAction, ProjectionType } from '$lib/constants'; import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte'; import { isShowDetail } from '$lib/stores/preferences.store'; @@ -430,7 +430,7 @@ const { albumName }: { albumName: string } = event.detail; api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => { const album = response.data; - goto('/albums/' + album.id); + goto(`${AppRoute.ALBUMS}/${album.id}`); }); }; diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte index 3dc802ac46..89375a0a5b 100644 --- a/web/src/lib/components/asset-viewer/detail-panel.svelte +++ b/web/src/lib/components/asset-viewer/detail-panel.svelte @@ -238,7 +238,9 @@ on:mouseleave={() => ($boundingBoxesArray = [])} > dispatch('close-viewer')} >
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte index a14630a466..07ed1989fc 100644 --- a/web/src/lib/components/faces-page/people-card.svelte +++ b/web/src/lib/components/faces-page/people-card.svelte @@ -45,7 +45,7 @@ on:mouseleave={() => (showVerticalDots = false)} role="group" > - +
Note: To apply the Storage Label to previously uploaded assets, run the - + Storage Migration Job

diff --git a/web/src/lib/components/photos-page/actions/add-to-album.svelte b/web/src/lib/components/photos-page/actions/add-to-album.svelte index a205d83927..b62d2eccb9 100644 --- a/web/src/lib/components/photos-page/actions/add-to-album.svelte +++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte @@ -10,6 +10,7 @@ import { AlbumResponseDto, api } from '@api'; import { getMenuContext } from '../asset-select-context-menu.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte'; + import { AppRoute } from '$lib/constants'; export let shared = false; let showAlbumPicker = false; @@ -37,7 +38,7 @@ clearSelect(); - goto('/albums/' + id); + goto(`${AppRoute.ALBUMS}/${id}`); }); }; diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte index 3de96bf2ee..f8cd13fb16 100644 --- a/web/src/lib/components/share-page/individual-shared-viewer.svelte +++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte @@ -14,6 +14,7 @@ import { notificationController, NotificationType } from '../shared-components/notification/notification'; import { handleError } from '$lib/utils/handle-error'; import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js'; + import { AppRoute } from '$lib/constants'; export let sharedLink: SharedLinkResponseDto; export let isOwned: boolean; @@ -78,7 +79,7 @@ {/if} {:else} - goto('/photos')} backIcon={mdiArrowLeft} showBackButton={false}> + goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}> (null); + +export const setUser = (value: UserResponseDto | null) => { + user.set(value); +}; + +export const getSavedUser = () => { + return get(user); +}; diff --git a/web/src/lib/utils/auth.ts b/web/src/lib/utils/auth.ts index c5cd992105..ae3b56ac9a 100644 --- a/web/src/lib/utils/auth.ts +++ b/web/src/lib/utils/auth.ts @@ -1,6 +1,7 @@ import { api } from '@api'; import { redirect } from '@sveltejs/kit'; import { AppRoute } from '../constants'; +import { getSavedUser, setUser } from '$lib/stores/user.store'; export interface AuthOptions { admin?: true; @@ -19,7 +20,9 @@ export const getAuthUser = async () => { export const authenticate = async (options?: AuthOptions) => { options = options || {}; - const user = await getAuthUser(); + const savedUser = getSavedUser(); + const user = savedUser || (await getAuthUser()); + if (!user) { throw redirect(302, AppRoute.AUTH_LOGIN); } @@ -28,6 +31,10 @@ export const authenticate = async (options?: AuthOptions) => { throw redirect(302, AppRoute.PHOTOS); } + if (!savedUser) { + setUser(user); + } + return user; }; diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte index 4f5f0b18d5..162133c388 100644 --- a/web/src/routes/(user)/albums/+page.svelte +++ b/web/src/routes/(user)/albums/+page.svelte @@ -22,7 +22,7 @@ import { flip } from 'svelte/animate'; import Dropdown from '$lib/components/elements/dropdown.svelte'; import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; - import { dateFormats } from '$lib/constants'; + import { AppRoute, dateFormats } from '$lib/constants'; import { locale, AlbumViewMode } from '$lib/stores/preferences.store'; import { notificationController, @@ -46,6 +46,7 @@ } from '@mdi/js'; export let data: PageData; + let shouldShowEditUserForm = false; let selectedAlbum: AlbumResponseDto; @@ -192,7 +193,7 @@ const handleCreateAlbum = async () => { const newAlbum = await createAlbum(); if (newAlbum) { - goto('/albums/' + newAlbum.id); + goto(`${AppRoute.ALBUMS}/${newAlbum.id}`); } }; @@ -289,7 +290,7 @@ {#if $albumViewSettings.view === AlbumViewMode.Cover}
{#each $albums as album (album.id)} - + showAlbumContextMenu(e.detail, album)} @@ -316,47 +317,49 @@ {#each $albums as album (album.id)} goto(`albums/${album.id}`)} - on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)} + on:click={() => goto(`${AppRoute.ALBUMS}/${album.id}`)} + on:keydown={(event) => event.key === 'Enter' && goto(`${AppRoute.ALBUMS}/${album.id}`)} tabindex="0" > - {album.albumName} - - {album.assetCount} - {album.assetCount > 1 ? `items` : `item`} - - {dateLocaleString(album.updatedAt)} - - {dateLocaleString(album.createdAt)} - - {#if album.endDate} - {dateLocaleString(album.endDate)} - {:else} - ❌ - {/if} - {#if album.startDate} - {dateLocaleString(album.startDate)} - {:else} - ❌ - {/if} + + {album.albumName} + + {album.assetCount} + {album.assetCount > 1 ? `items` : `item`} + + {dateLocaleString(album.updatedAt)} + + {dateLocaleString(album.createdAt)} + + {#if album.endDate} + {dateLocaleString(album.endDate)} + {:else} + ❌ + {/if} + {#if album.startDate} + {dateLocaleString(album.startDate)} + {:else} + ❌ + {/if} + diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index b6373a5ac5..9638e1386c 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -68,8 +68,6 @@ let album = data.album; - $user = data.user; - $: album = data.album; $: { diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte index 2b694eea3c..db1f63fae9 100644 --- a/web/src/routes/(user)/explore/+page.svelte +++ b/web/src/routes/(user)/explore/+page.svelte @@ -50,7 +50,7 @@
{#if MAX_ITEMS} {#each people as person (person.id)} - +
{#each places as item (item.data.id)} - +
@@ -97,7 +97,7 @@
{#each things as item} - +
diff --git a/web/src/routes/(user)/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte index 6cf3bdd644..e74a109b92 100644 --- a/web/src/routes/(user)/photos/+page.svelte +++ b/web/src/routes/(user)/photos/+page.svelte @@ -24,7 +24,6 @@ import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { mdiDotsVertical, mdiPlus } from '@mdi/js'; import UpdatePanel from '$lib/components/shared-components/update-panel.svelte'; - import { user } from '$lib/stores/user.store'; export let data: PageData; @@ -34,8 +33,6 @@ const assetInteractionStore = createAssetInteractionStore(); const { isMultiSelectState, selectedAssets } = assetInteractionStore; - $user = data.user; - $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite); const handleEscape = () => { diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte index 982e4c3c52..904901053d 100644 --- a/web/src/routes/(user)/sharing/+page.svelte +++ b/web/src/routes/(user)/sharing/+page.svelte @@ -27,7 +27,7 @@ }, }); - goto('/albums/' + newAlbum.id); + goto(`${AppRoute.ALBUMS}/${newAlbum.id}`); } catch (e) { notificationController.show({ message: 'Error creating album, check console for more details', @@ -66,7 +66,7 @@
{#each data.partners as partner (partner.id)} diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts index d59082b9aa..77d19fc9a0 100644 --- a/web/src/routes/+layout.ts +++ b/web/src/routes/+layout.ts @@ -1,5 +1,6 @@ -import { api } from '../api'; +import { api } from '@api'; import type { LayoutLoad } from './$types'; +import { getSavedUser, setUser } from '$lib/stores/user.store'; const getUser = async () => { try { @@ -14,7 +15,12 @@ export const ssr = false; export const csr = true; export const load = (async () => { - const user = await getUser(); + const savedUser = getSavedUser(); + const user = savedUser || (await getUser()); + + if (!savedUser) { + setUser(user); + } return { user, diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index aa1af07eec..17a2b62fc3 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -1,7 +1,7 @@
@@ -12,8 +12,10 @@

Welcome to IMMICH Web

- + + +