瀏覽代碼

fix(web): back button from person detail page (#5047)

* feat: return button to the main page

* add album route

* feat: do not use explicit routes
martin 1 年之前
父節點
當前提交
6214d510d6

+ 1 - 0
web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -733,6 +733,7 @@
     >
     >
       <DetailPanel
       <DetailPanel
         {asset}
         {asset}
+        albumId={album?.id}
         albums={appearsInAlbums}
         albums={appearsInAlbums}
         on:close={() => ($isShowDetail = false)}
         on:close={() => ($isShowDetail = false)}
         on:close-viewer={handleCloseViewer}
         on:close-viewer={handleCloseViewer}

+ 7 - 1
web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -20,9 +20,11 @@
   } from '@mdi/js';
   } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import Map from '../shared-components/map/map.svelte';
   import Map from '../shared-components/map/map.svelte';
+  import { AppRoute } from '$lib/constants';
 
 
   export let asset: AssetResponseDto;
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
   export let albums: AlbumResponseDto[] = [];
+  export let albumId: string | null = null;
 
 
   let textarea: HTMLTextAreaElement;
   let textarea: HTMLTextAreaElement;
   let description: string;
   let description: string;
@@ -136,7 +138,11 @@
 
 
       <div class="mt-4 flex flex-wrap gap-2">
       <div class="mt-4 flex flex-wrap gap-2">
         {#each people as person (person.id)}
         {#each people as person (person.id)}
-          <a href="/people/{person.id}" class="w-[90px]" on:click={() => dispatch('close-viewer')}>
+          <a
+            href="/people/{person.id}?previousRoute={albumId ? `${AppRoute.ALBUMS}/${albumId}` : AppRoute.PHOTOS}"
+            class="w-[90px]"
+            on:click={() => dispatch('close-viewer')}
+          >
             <ImageThumbnail
             <ImageThumbnail
               curve
               curve
               shadow
               shadow

+ 3 - 0
web/src/lib/utils/navigation.ts

@@ -0,0 +1,3 @@
+export const isExternalUrl = (url: string): boolean => {
+  return new URL(url).origin !== location.origin;
+};

+ 2 - 1
web/src/routes/(user)/people/[personId]/+page.svelte

@@ -34,6 +34,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
   import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
+  import { isExternalUrl } from '$lib/utils/navigation';
 
 
   export let data: PageData;
   export let data: PageData;
 
 
@@ -126,7 +127,7 @@
   onMount(() => {
   onMount(() => {
     const action = $page.url.searchParams.get('action');
     const action = $page.url.searchParams.get('action');
     const getPreviousRoute = $page.url.searchParams.get('previousRoute');
     const getPreviousRoute = $page.url.searchParams.get('previousRoute');
-    if (getPreviousRoute) {
+    if (getPreviousRoute && !isExternalUrl(getPreviousRoute)) {
       previousRoute = getPreviousRoute;
       previousRoute = getPreviousRoute;
     }
     }
     if (action == 'merge') {
     if (action == 'merge') {