From 8b0c95835cad57127adf97a18517c2751e47b98a Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Wed, 2 Aug 2023 14:40:41 -0700
Subject: [PATCH] metadata: use router link for albums

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/App.vue                          | 10 +++++++---
 src/components/Metadata.vue          | 12 +-----------
 src/components/modal/AlbumPicker.vue |  2 +-
 src/components/modal/AlbumsList.vue  | 24 +++++++++++++++++++++++-
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f4d1bcfb..b29d9ffc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,6 +73,7 @@ import { emit, subscribe } from '@nextcloud/event-bus';
 
 import * as utils from './services/Utils';
 import * as nativex from './native';
+import router from './router';
 import staticConfig from './services/static-config';
 import UserConfig from './mixins/UserConfig';
 import Timeline from './components/Timeline.vue';
@@ -259,12 +260,15 @@ export default defineComponent({
 
         mount(el, fileInfo, context) {
           this.metadataComponent?.$destroy?.();
-          this.metadataComponent = new Vue(Metadata as any);
+          this.metadataComponent = new Vue({
+            render: (h) => h(Metadata),
+            router,
+          });
           this.metadataComponent.$mount(el);
-          this.metadataComponent.update(Number(fileInfo.id));
+          this.metadataComponent.$children[0].update(Number(fileInfo.id));
         },
         update(fileInfo) {
-          this.metadataComponent.update(Number(fileInfo.id));
+          this.metadataComponent.$children[0].update(Number(fileInfo.id));
         },
         destroy() {
           this.metadataComponent?.$destroy?.();
diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
index d31f80ed..a053a8ce 100644
--- a/src/components/Metadata.vue
+++ b/src/components/Metadata.vue
@@ -2,7 +2,7 @@
   <div class="outer" v-if="fileid">
     <div v-if="albums.length" class="albums">
       <div class="section-title">{{ t('memories', 'Albums') }}</div>
-      <AlbumsList :albums="albums" @click="openAlbum" />
+      <AlbumsList :albums="albums" />
     </div>
 
     <div class="section-title">{{ t('memories', 'Metadata') }}</div>
@@ -374,16 +374,6 @@ export default defineComponent({
       return (this.albums = list);
     },
 
-    openAlbum(album: IAlbum) {
-      router.push({
-        name: 'albums',
-        params: {
-          name: album.name,
-          user: album.user,
-        },
-      });
-    },
-
     handleFileUpdated({ fileid }: { fileid: number }) {
       if (fileid && this.fileid === fileid) {
         this.update(this.fileid);
diff --git a/src/components/modal/AlbumPicker.vue b/src/components/modal/AlbumPicker.vue
index c5beade0..1e6e3bb3 100644
--- a/src/components/modal/AlbumPicker.vue
+++ b/src/components/modal/AlbumPicker.vue
@@ -3,7 +3,7 @@
     <XLoadingIcon v-if="loadingAlbums" class="loading-icon centered" />
 
     <ul class="albums-container">
-      <AlbumsList ref="albumsList" :albums="albums" @click="toggleAlbumSelection">
+      <AlbumsList ref="albumsList" :albums="albums" :link="false" @click="toggleAlbumSelection">
         <template #extra="{ album }">
           <div
             class="check-circle-icon"
diff --git a/src/components/modal/AlbumsList.vue b/src/components/modal/AlbumsList.vue
index 224e9f21..839d3995 100644
--- a/src/components/modal/AlbumsList.vue
+++ b/src/components/modal/AlbumsList.vue
@@ -6,7 +6,8 @@
       :key="album.album_id"
       :title="album.name"
       :aria-label="album.name"
-      @click.prevent="$emit('click', album)"
+      :to="link ? linkTarget(album) : null"
+      @click="click($event, album)"
     >
       <template #icon>
         <XImg v-if="album.last_added_photo !== -1" class="album__image" :src="toCoverUrl(album.last_added_photo)" />
@@ -55,9 +56,30 @@ export default defineComponent({
       type: Array as PropType<IAlbum[]>,
       required: true,
     },
+    link: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   methods: {
+    click($event: any, album: IAlbum) {
+      if (!this.link) {
+        $event.preventDefault();
+      }
+      this.$emit('click', album);
+    },
+
+    linkTarget(album: IAlbum) {
+      return {
+        name: 'albums',
+        params: {
+          name: album.name,
+          user: album.user,
+        },
+      };
+    },
+
     toCoverUrl(fileId: string | number) {
       return getPreviewUrl({
         photo: {