Make Folder and Tag links (fix #115)

src/components/frame/Folder.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="folder fill-block" :class="{
+    <router-link class="folder fill-block" :class="{
         hasPreview: previewFileInfos.length > 0,
         onePreview: previewFileInfos.length === 1,
         hasError: error,
     }"
-    @click="openFolder(data)">
+    :to="target">
         <div class="big-icon fill-block">
             <FolderIcon class="memories__big-folder-icon" />
             <div class="name">{{ data.name }}</div>
@@ -20,7 +20,7 @@
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
             </div>
         </div>
-    </div>
+    </router-link>
 </template>
 
 <script lang="ts">
@@ -96,8 +96,8 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
     }
 
     /** Open folder */
-    openFolder(folder: IFolder) {
-        const path = folder.path.split('/').filter(x => x).slice(2) as string[];
+    get target() {
+        const path = this.data.path.split('/').filter(x => x).slice(2) as string[];
 
         // Remove base path if present
         const basePath = this.config_foldersPath.split('/').filter(x => x);
@@ -105,7 +105,7 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
             path.splice(0, basePath.length);
         }
 
-        this.$router.push({ name: 'folders', params: { path: path as any }});
+        return { name: 'folders', params: { path: path as any }};
     }
 }
 </script>

src/components/frame/Tag.vue

@@ -1,10 +1,11 @@
 <template>
-    <div class="tag fill-block" :class="{
+    <router-link class="tag fill-block" :class="{
         hasPreview: previews.length > 0,
         onePreview: previews.length === 1,
         hasError: error,
         isFace: isFace,
     }"
+    :to="target"
     @click="openTag(data)">
 
         <div class="bbl"> <NcCounterBubble> {{ data.count }} </NcCounterBubble> </div>
@@ -20,7 +21,7 @@
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
             </div>
         </div>
-    </div>
+    </router-link>
 </template>
 
 <script lang="ts">
@@ -49,6 +50,13 @@ export default class Tag extends Mixins(GlobalMixin) {
     // Error occured fetching thumbs
     private error = false;
 
+    /**
+     * Open tag event
+     * Unless noNavigate is set, the tag will be opened
+     */
+    @Emit('open')
+    openTag(tag: ITag) {}
+
     mounted() {
         this.refreshPreviews();
     }
@@ -95,19 +103,16 @@ export default class Tag extends Mixins(GlobalMixin) {
         this.error = this.previews.length === 0;
     }
 
-    /** Open tag */
-    @Emit('open')
-    openTag(tag: ITag) {
-        if (this.noNavigate) {
-            return;
-        }
+    /** Target URL to navigate to */
+    get target() {
+        if (this.noNavigate) return {};
 
         if (this.isFace) {
             const name = this.data.name || this.data.fileid.toString();
             const user = this.data.user_id;
-            this.$router.push({ name: 'people', params: { name, user  }});
+            return { name: 'people', params: { name, user  }};
         } else {
-            this.$router.push({ name: 'tags', params: { name: this.data.name }});
+            return { name: 'tags', params: { name: this.data.name }};
         }
     }
 }