feat(system-tags): show inline in files

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

2 files changed, 129 insertions, 0 deletions

diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json
index 01a46958d8b..2b7d6ec7d6d 100644
--- a/apps/files/js/merged-index.json
+++ b/apps/files/js/merged-index.json
@@ -27,5 +27,6 @@
   "sidebarpreviewmanager.js",
   "sidebarpreviewtext.js",
   "tagsplugin.js",
+  "systemtagsplugin.js",
   "templates.js"
 ]
diff --git a/apps/files/js/systemtagsplugin.js b/apps/files/js/systemtagsplugin.js
new file mode 100644
index 00000000000..f92e6879a3f
--- /dev/null
+++ b/apps/files/js/systemtagsplugin.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) 2014 Vincent Petry <pvince81@owncloud.com>
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+/* global Handlebars */
+
+(function (OCA) {
+
+	_.extend(OC.Files.Client, {
+		PROPERTY_SYSTEM_TAGS: '{' + OC.Files.Client.NS_NEXTCLOUD + '}system-tags',
+	});
+
+	OCA.Files = OCA.Files || {};
+
+	/**
+	 * Extends the file actions and file list to add system tags inline
+	 *
+	 * @namespace OCA.Files.SystemTagsPlugin
+	 */
+	OCA.Files.SystemTagsPlugin = {
+		name: 'SystemTags',
+
+		allowedLists: [
+			'files',
+			'favorites',
+			'shares.self',
+			'shares.others',
+			'shares.link'
+		],
+		
+		_buildTagSpan: function(tag, isMore = false) {
+			var $tag = $('<li class="system-tags__tag"></li>');
+			$tag.text(tag).addClass(isMore ? 'system-tags__tag--more' : '');
+			return $tag;
+		},
+
+		_buildTagsUI: function(tags) {
+			$systemTags = $('<ul class="system-tags"></ul>');
+			if (tags.length === 1) {
+				$systemTags.attr('aria-label', t('files', 'This file has the tag {tag}', { tag: tags[0] }));
+			} else if (tags.length > 1) {
+				var firstTags = tags.slice(0, -1).join(', ');
+				var lastTag = tags[tags.length - 1];
+				$systemTags.attr('aria-label', t('files', 'This file has the tags {firstTags} and {lastTag}', { firstTags, lastTag }));
+			}
+
+			if (tags.length > 0) {
+				$systemTags.append(this._buildTagSpan(tags[0]));
+			}
+
+			// More tags than the one we're showing
+			if (tags.length > 1) {
+				$moreTag = this._buildTagSpan('+' + (tags.length - 1), true)
+				$moreTag.attr('title', tags.slice(1).join(', '));
+				$systemTags.append($moreTag);
+			}
+
+			return $systemTags;
+		},
+
+		_extendFileList: function(fileList) {
+			var self = this;
+
+			// extend row prototype
+			var oldCreateRow = fileList._createRow;
+			fileList._createRow = function(fileData) {
+				var $tr = oldCreateRow.apply(this, arguments);
+				var systemTags = fileData.systemTags || [];
+
+				// Update tr data list
+				$tr.attr('data-systemTags', systemTags.join('|'));
+
+				// No tags, no need to do anything
+				if (systemTags.length === 0) {
+					return $tr;
+				}
+
+				// Build tags ui and inject
+				$systemTags = self._buildTagsUI.apply(self, [systemTags])
+				$systemTags.insertAfter($tr.find('td.filename .nametext'));
+				return $tr;
+			};
+
+			var oldElementToFile = fileList.elementToFile;
+			fileList.elementToFile = function ($el) {
+				var fileInfo = oldElementToFile.apply(this, arguments);
+				var systemTags = $el.attr('data-systemTags');
+				fileInfo.systemTags = systemTags?.split?.('|') || [];
+				return fileInfo;
+			};
+
+			var oldGetWebdavProperties = fileList._getWebdavProperties;
+			fileList._getWebdavProperties = function () {
+				var props = oldGetWebdavProperties.apply(this, arguments);
+				props.push(OC.Files.Client.PROPERTY_SYSTEM_TAGS);
+				return props;
+			};
+
+			fileList.filesClient.addFileInfoParser(function (response) {
+				var data = {};
+				var props = response.propStat[0].properties;
+				var systemTags = props[OC.Files.Client.PROPERTY_SYSTEM_TAGS] || [];
+				if (systemTags && systemTags.length) {
+					data.systemTags = systemTags
+						.filter(xmlvalue => xmlvalue.namespaceURI === OC.Files.Client.NS_NEXTCLOUD && xmlvalue.nodeName.split(':')[1] === 'system-tag')
+						.map(xmlvalue => xmlvalue.textContent || xmlvalue.text);
+				}
+				return data;
+			});
+		},
+
+		attach: function(fileList) {
+			if (this.allowedLists.indexOf(fileList.id) < 0) {
+				return;
+			}
+			this._extendFileList(fileList);
+		},
+	};
+})
+(OCA);
+
+OC.Plugins.register('OCA.Files.FileList', OCA.Files.SystemTagsPlugin);