Adapt to SystemTags optimizations on server

Essentially, the tags overview fetches all info from systemtags-current,
which contains all necessary data. Only on tags details view, files are
actually being requested per REPORT.

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

src/components/TagCover.vue

@@ -24,7 +24,7 @@
 
 <template>
 	<router-link class="tag-cover" :to="`/tags/${tag.displayName}`">
-		<img v-if="tag.files.length !== 0"
+		<img v-if="tag.filesAssigned !== 0"
 			class="tag-cover__image"
 			:src="coverUrl">
 		<div v-else class="tag-cover__image tag-cover__image--placeholder">
@@ -92,17 +92,17 @@ export default {
 			if (!this.loadCover) {
 				return ''
 			}
-			return generateUrl(`/core/preview?fileId=${this.tag.files[this.tag.files.length - 1]}&x=${512}&y=${512}&forceIcon=0&a=1`)
+			return generateUrl(`/core/preview?fileId=${this.tag.referenceFileid}&x=${512}&y=${512}&forceIcon=0&a=1`)
 		},
 
 		count() {
-			return this.tag.files.length || this.tagCounts[this.tag.displayName]
+			return this.tag.filesAssigned
 		},
 	},
 
 	watch: {
 		loadCover() {
-			if (this.tag.files.length) {
+			if (this.tag.filesAssigned) {
 				return
 			}
 			this.$store.dispatch('fetchTagFiles', { id: this.tag.id, signal: this.abortController.signal })

src/services/SystemTags.js

@@ -31,16 +31,18 @@ import { genFileInfo } from '../utils/fileUtils.js'
  * @return {Promise<object[]>} the file list
  */
 export default async function(path, options = {}) {
-	const response = await client.getDirectoryContents('/systemtags/', Object.assign({}, {
+	const response = await client.getDirectoryContents('/systemtags-assigned/image', Object.assign({}, {
 		data: `<?xml version="1.0"?>
 			<d:propfind  xmlns:d="DAV:"
-				xmlns:oc="http://owncloud.org/ns">
+				xmlns:oc="http://owncloud.org/ns" xmlns:nc="http://nextcloud.org/ns">
 				<d:prop>
 					<oc:id />
 					<oc:display-name />
 					<oc:user-visible />
 					<oc:user-assignable />
 					<oc:can-assign />
+					<nc:files-assigned/>
+					<nc:reference-fileid/>
 				</d:prop>
 			</d:propfind>`,
 		details: true,

src/store/systemtags.js

@@ -44,7 +44,6 @@ const mutations = {
 			// store tag and its index
 			list.forEach(tag => {
 				Vue.set(state.tags, tag.id, tag)
-				Vue.set(state.tags[tag.id], 'files', [])
 				Vue.set(state.names, tag.displayName, tag.id)
 			})
 		}
@@ -79,7 +78,7 @@ const mutations = {
 		}
 
 		// sort by last modified
-		const list = files.sort((a, b) => sortCompare(a, b, 'lastmod'))
+		const list = files.sort((a, b) => sortCompare(a, b, 'filesAssigned'))
 
 		// overwrite list
 		console.info(id, list)

src/utils/fileUtils.js

@@ -128,4 +128,28 @@ function genFileInfo(obj) {
 	return fileInfo
 }
 
-export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo }
+/**
+ * @param {object} obj - object to flatten and format.
+ */
+function extractTagInfo(obj) {
+	const tagInfo = Object.entries(obj).reduce((tagInfo, [key, data]) => {
+		// flatten object if any
+		if (!!data && typeof data === 'object' && !Array.isArray(data)) {
+			return { ...tagInfo, ...extractTagInfo(data) }
+		}
+
+		// format key and add it to the tagInfo
+		switch (data) {
+			case 'false':
+				return { ...tagInfo, [camelcase(key)]: false }
+			case 'true':
+				return { ...tagInfo, [camelcase(key)]: true }
+			default:
+				return { ...tagInfo, [camelcase(key)]: isNumber(data) ? Number(data) : data }
+		}
+	}, {})
+
+	return tagInfo
+}
+
+export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, extractTagInfo }

src/views/TagContent.vue

@@ -159,7 +159,9 @@ export default {
 					await this.$store.dispatch('fetchAllTags', { signal: this.abortController.signal })
 				}
 
-				await this.$store.dispatch('fetchTagFiles', { id: this.tagId, signal: this.abortController.signal })
+				if (this.tag && !this.tag.files) {
+					await this.$store.dispatch('fetchTagFiles', { id: this.tagId, signal: this.abortController.signal })
+				}
 			} catch (error) {
 				console.error(error)
 				this.error = true

src/views/Tags.vue

@@ -90,8 +90,8 @@ export default {
 
 		popularTags() {
 			return Object.keys(this.tagsNames)
-				.filter(tagName => (this.tags[this.tagsNames[tagName]].files.length || this.tagCounts[tagName]) > 50)
-				.sort((a, b) => (this.tags[this.tagsNames[b]].files.length || this.tagCounts[b]) - (this.tags[this.tagsNames[a]].files.length || this.tagCounts[a]))
+				.filter(tagName => (this.tags[this.tagsNames[tagName]].filesAssigned) > 50)
+				.sort((a, b) => (this.tags[this.tagsNames[b]].filesAssigned || this.tagCounts[b]) - (this.tags[this.tagsNames[a]].filesAssigned || this.tagCounts[a]))
 				.slice(0, 9)
 				.map(tagName => this.tags[this.tagsNames[tagName]])
 		},