Merge pull request #34096 from nextcloud/bug/noid/tag-loading

Tag loading

apps/systemtags/src/systemtagsfilelist.js

@@ -110,6 +110,7 @@
 					toggleSelect: true,
 					separator: ',',
 					query: _.bind(this._queryTagsAutocomplete, this),
+					minimumInputLength: 3,
 
 					id(tag) {
 						return tag.id
@@ -148,8 +149,7 @@
 					},
 
 					formatSelection(tag) {
-						return OC.SystemTags.getDescriptiveTag(tag)[0]
-							.outerHTML
+						return OC.SystemTags.getDescriptiveTag(tag).outerHTML
 					},
 
 					sortResults(results) {

core/js/tests/specs/systemtags/systemtagsSpec.js

@@ -22,8 +22,8 @@
 describe('OC.SystemTags tests', function() {
 	it('describes non existing tag', function() {
 		var $return = OC.SystemTags.getDescriptiveTag('23');
-		expect($return.text()).toEqual('Non-existing tag #23');
-		expect($return.hasClass('non-existing-tag')).toEqual(true);
+		expect($return.textContent).toEqual('Non-existing tag #23');
+		expect($return.classList.contains('non-existing-tag')).toEqual(true);
 	});
 
 	it('describes SystemTagModel', function() {
@@ -34,8 +34,8 @@ describe('OC.SystemTags tests', function() {
 			userVisible: true
 		});
 		var $return = OC.SystemTags.getDescriptiveTag(tag);
-		expect($return.text()).toEqual('Twenty Three');
-		expect($return.hasClass('non-existing-tag')).toEqual(false);
+		expect($return.textContent).toEqual('Twenty Three');
+		expect($return.classList.contains('non-existing-tag')).toEqual(false);
 	});
 
 	it('describes JSON tag object', function() {
@@ -45,8 +45,8 @@ describe('OC.SystemTags tests', function() {
 			userAssignable: true,
 			userVisible: true
 		});
-		expect($return.text()).toEqual('Fourty Two');
-		expect($return.hasClass('non-existing-tag')).toEqual(false);
+		expect($return.textContent).toEqual('Fourty Two');
+		expect($return.classList.contains('non-existing-tag')).toEqual(false);
 	});
 
 	it('scope', function() {
@@ -57,8 +57,8 @@ describe('OC.SystemTags tests', function() {
 				userAssignable: userAssignable,
 				userVisible: userVisible
 			});
-			expect($return.text()).toEqual(expectedText);
-			expect($return.hasClass('non-existing-tag')).toEqual(false);
+			expect($return.textContent).toEqual(expectedText);
+			expect($return.classList.contains('non-existing-tag')).toEqual(false);
 		}
 
 		testScope(true, true, 'Fourty Two');

core/src/systemtags/systemtags.js

@@ -35,23 +35,24 @@ import escapeHTML from 'escape-html'
 		/**
 		 *
 		 * @param {OC.SystemTags.SystemTagModel|Object|String} tag
-		 * @returns {jQuery}
+		 * @returns {HTMLElement}
 		 */
 		getDescriptiveTag: function(tag) {
 			if (_.isUndefined(tag.name) && !_.isUndefined(tag.toJSON)) {
 				tag = tag.toJSON()
 			}
 
+			var $span = document.createElement('span')
+
 			if (_.isUndefined(tag.name)) {
-				return $('<span>').addClass('non-existing-tag').text(
-					t('core', 'Non-existing tag #{tag}', {
+				$span.classList.add('non-existing-tag')
+				$span.textContent = t('core', 'Non-existing tag #{tag}', {
 						tag: tag
-					})
-				)
+				})
+				return $span
 			}
 
-			var $span = $('<span>')
-			$span.append(escapeHTML(tag.name))
+			$span.textContent = escapeHTML(tag.name)
 
 			var scope
 			if (!tag.userAssignable) {
@@ -62,7 +63,9 @@ import escapeHTML from 'escape-html'
 				scope = t('core', 'invisible')
 			}
 			if (scope) {
-				$span.append($('<em>').text(' (' + scope + ')'))
+				var $scope = document.createElement('em')
+				$scope.textContent = ' (' + scope + ')'
+				$span.appendChild($scope)
 			}
 			return $span
 		}

core/src/systemtags/systemtagscollection.js

@@ -69,7 +69,7 @@
 			fetch: function(options) {
 				var self = this
 				options = options || {}
-				if (this.fetched || options.force) {
+				if (this.fetched || this.working || options.force) {
 				// directly call handler
 					if (options.success) {
 						options.success(this, null, options)
@@ -79,10 +79,13 @@
 					return Promise.resolve()
 				}
 
+				this.working = true
+
 				var success = options.success
 				options = _.extend({}, options)
 				options.success = function() {
 					self.fetched = true
+					self.working = false
 					if (success) {
 						return success.apply(this, arguments)
 					}

core/src/systemtags/systemtagsinputfield.js

@@ -292,7 +292,7 @@ import templateSelection from './templates/selection.handlebars'
 				return templateResult(_.extend({
 					renameTooltip: t('core', 'Rename'),
 					allowActions: this._allowActions,
-					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data)[0].innerHTML : null,
+					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data).innerHTML : null,
 					isAdmin: this._isAdmin
 				}, data))
 			},
@@ -305,7 +305,7 @@ import templateSelection from './templates/selection.handlebars'
 		 */
 			_formatSelection: function(data) {
 				return templateSelection(_.extend({
-					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data)[0].innerHTML : null,
+					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data).innerHTML : null,
 					isAdmin: this._isAdmin
 				}, data))
 			},
@@ -385,6 +385,7 @@ import templateSelection from './templates/selection.handlebars'
 					multiple: this._multiple,
 					toggleSelect: this._multiple,
 					query: _.bind(this._queryTagsAutocomplete, this),
+					minimumInputLength: 3,
 					id: function(tag) {
 						return tag.id
 					},