metadata: use router link for albums

Signed-off-by: Varun Patil <radialapps@gmail.com>

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?.();

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);

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"

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: {