Routes fixing & tags finish

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

6 files changed, 108 insertions, 61 deletions

diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index df1929de..47dda3d1 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import { generateUrl } from '@nextcloud/router'
 import { mapGetters } from 'vuex'
 
 import getAlbumContent from '../services/AlbumContent'
@@ -68,9 +67,6 @@ export default {
 		}
 	},
 
-	beforeDestroy() {
-		this.cancelRequest('Navigated away')
-	},
 	computed: {
 		// global lists
 		...mapGetters([
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 977ef61c..f3fb3da7 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -98,17 +98,24 @@ export default {
 		 * @returns {string|object}
 		 */
 		to() {
-			if (this.parentPath === '/') {
-				return { name: this.$route.name }
-			}
+			// always remove first slash, the router
+			// manage it automatically
+			const regex = /^\/?(.*)/i
+			const path = regex.exec(this.parentPath)[1]
 
-			// else let's build the path and make sure it's
-			// not url encoded (more importantly if filename have slashes)
-			const route = Object.assign({}, this.$route, {
-				// always remove first slash
-				params: { path: this.parentPath.substr(1) },
+			// apply to current route
+			const { name, params } = Object.assign({}, this.$route, {
+				params: { path },
 			})
-			return decodeURIComponent(this.$router.resolve(route).resolved.path)
+
+			// return the full object as we don't care about
+			// an empty path if this is route
+			if (path === '') {
+				return { name }
+			}
+
+			// returning a string prevent vue-router to encode it again
+			return decodeURIComponent(this.$router.resolve({ name, params }).resolved.path)
 		},
 	},
 
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 2dba45aa..8e2998a0 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -60,9 +60,6 @@ export default {
 		}
 	},
 
-	beforeDestroy() {
-		this.cancelRequest('Navigated away')
-	},
 	computed: {
 		// global lists
 		...mapGetters([
@@ -84,6 +81,10 @@ export default {
 		},
 	},
 
+	beforeDestroy() {
+		this.cancelRequest('Navigated away')
+	},
+
 	async created() {
 		// init cancellable request
 		const { request, cancel } = cancelableRequest(getTaggedImages)
@@ -91,7 +92,7 @@ export default {
 
 		try {
 			// get data
-			const files = await request(this.id, { shared: this.showShared })
+			const files = await request(this.id)
 			this.$store.dispatch('updateTag', { id: this.id, files })
 			this.$store.dispatch('appendFiles', files)
 		} catch (error) {
diff --git a/src/router/index.js b/src/router/index.js
index 6cc95084..2310dc27 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,37 +42,27 @@ export default new Router({
 			name: 'root',
 		},
 		{
-			path: '/albums',
+			path: '/albums/:path*',
 			component: Albums,
 			name: 'albums',
 			props: route => ({
 				// always lead current path with a slash
 				path: `/${route.params.path ? route.params.path : ''}`,
+				// if path is empty
+				isRoot: !route.params.path,
 			}),
-			children: [
-				{
-					path: ':path*',
-					name: 'albums',
-					component: Albums,
-				},
-			],
 		},
 		{
-			path: '/shared',
+			path: '/shared/:path*',
 			component: Albums,
 			name: 'shared',
 			props: route => ({
 				// always lead current path with a slash
 				path: `/${route.params.path ? route.params.path : ''}`,
+				// if path is empty
+				isRoot: !route.params.path,
 				showShared: true,
 			}),
-			children: [
-				{
-					path: ':path*',
-					name: 'shared',
-					component: Albums,
-				},
-			],
 		},
 		{
 			path: '/favorites',
@@ -80,19 +70,14 @@ export default new Router({
 			name: 'favorites',
 		},
 		{
-			path: '/tags',
+			path: '/tags/:path*',
 			component: Tags,
 			name: 'tags',
 			props: route => ({
-				tagname: route.params.tagname,
+				path: `${route.params.path ? route.params.path : ''}`,
+				// if path is empty
+				isRoot: !route.params.path,
 			}),
-			children: [
-				{
-					path: ':tagname',
-					name: 'tagname',
-					component: Tags,
-				},
-			],
 		},
 		{
 			path: '/maps',
diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 50718c42..1063b6bb 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -154,6 +154,10 @@ export default {
 		this.fetchFolderContent()
 	},
 
+	beforeDestroy() {
+		this.cancelRequest()
+	},
+
 	methods: {
 		async fetchFolderContent() {
 			// cancel any pending requests
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index e8fe6110..44827e8f 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -33,17 +33,22 @@
 	</EmptyContent>
 
 	<!-- Folder content -->
-	<Grid v-else-if="isRoot">
-		<Navigation v-if="tag"
+	<Grid v-else>
+		<Navigation
 			key="navigation"
-			:basename="tagname"
-			:filename="'/' + tagname"
+			:basename="path"
+			:filename="'/' + path"
 			:root-title="t('photos', 'Tags')" />
-		<Tag v-for="id in tagsNames"
-			:key="id"
-			v-bind="tags[id]"
-			:fileid="id"
-			:basename="tags[id].displayName" />
+		<template v-if="isRoot">
+			<Tag v-for="id in tagsNames"
+				:key="id"
+				v-bind="tags[id]"
+				:fileid="id"
+				:basename="tags[id].displayName" />
+		</template>
+		<template v-else>
+			<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
+		</template>
 	</Grid>
 </template>
 
@@ -51,6 +56,7 @@
 import { mapGetters } from 'vuex'
 
 import getSystemTags from '../services/SystemTags'
+import getTaggedImages from '../services/TaggedImages'
 
 import EmptyContent from './EmptyContent'
 import Tag from '../components/Tag'
@@ -70,7 +76,7 @@ export default {
 		Navigation,
 	},
 	props: {
-		tagname: {
+		path: {
 			type: String,
 			default: '',
 		},
@@ -78,6 +84,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		isRoot: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {
@@ -97,7 +107,7 @@ export default {
 
 		// current tag id from current path
 		tagId() {
-			return this.$store.getters.tagId(this.tagname)
+			return this.$store.getters.tagId(this.path)
 		},
 
 		// current tag
@@ -111,23 +121,41 @@ export default {
 				.filter(file => !!file)
 		},
 
-		isRoot() {
-			return this.tagname === ''
-		},
-
 		isEmpty() {
 			return Object.keys(this.tagsNames).length === 0
 		},
 	},
 
 	watch: {
-		tagname(name) {
-			this.fetchRootContent()
+		async path() {
+			// if we don't have the tag in the store yet,
+			// we need to fetch the list first
+			if (!this.tagId) {
+				await this.fetchRootContent()
+			}
+
+			// if we're not in the root, we fetch the data
+			if (!this.isRoot) {
+				this.fetchContent()
+			}
 		},
 	},
 
+	beforeDestroy() {
+		this.cancelRequest()
+	},
+
 	async beforeMount() {
-		this.fetchRootContent()
+		// if we don't have the tag in the store yet,
+		// we need to fetch the list first
+		if (!this.tagId) {
+			await this.fetchRootContent()
+		}
+
+		// if we're not in the root, we fetch the data
+		if (!this.isRoot) {
+			this.fetchContent()
+		}
 	},
 
 	methods: {
@@ -139,7 +167,7 @@ export default {
 			OCA.Viewer.close()
 
 			// if we don't already have some cached data let's show a loader
-			if (!this.tags[this.folderId]) {
+			if (!this.tags[this.tagId]) {
 				this.$emit('update:loading', true)
 			}
 			this.error = null
@@ -154,6 +182,32 @@ export default {
 			// done loading
 			this.$emit('update:loading', false)
 		},
+
+		async fetchContent() {
+			// cancel any pending requests
+			this.cancelRequest()
+
+			// close any potential opened viewer
+			OCA.Viewer.close()
+
+			// if we don't already have some cached data let's show a loader
+			if (!this.tags[this.tagId]) {
+				this.$emit('update:loading', true)
+			}
+			this.error = null
+
+			// init cancellable request
+			const { request, cancel } = cancelableRequest(getTaggedImages)
+			this.cancelRequest = cancel
+
+			// get data
+			const files = await request(this.tagId)
+			this.$store.dispatch('updateTag', { id: this.tagId, files })
+			this.$store.dispatch('appendFiles', files)
+
+			// done loading
+			this.$emit('update:loading', false)
+		},
 	},
 
 }