diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-11-21 19:54:41 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-11-21 19:54:41 +0300 |
commit | 9051ca63c5211f84582d4cc9f0634a4e20102390 (patch) | |
tree | 497c8b51cd6ed4940f6f25436d42eab05e1bd00f | |
parent | 68ed13a6ce7e2f12194ba94f07c07aa88a69cdfa (diff) |
Routes fixing & tags finish
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | src/components/Folder.vue | 4 | ||||
-rw-r--r-- | src/components/Navigation.vue | 25 | ||||
-rw-r--r-- | src/components/Tag.vue | 9 | ||||
-rw-r--r-- | src/router/index.js | 35 | ||||
-rw-r--r-- | src/views/Albums.vue | 4 | ||||
-rw-r--r-- | src/views/Tags.vue | 92 |
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) + }, }, } |