feat(systemtags): add etag support and handle proppatch

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

9 files changed, 329 insertions, 71 deletions

diff --git a/apps/dav/composer/composer/autoload_classmap.php b/apps/dav/composer/composer/autoload_classmap.php
index 9764510333b..9e8cd76d060 100644
--- a/apps/dav/composer/composer/autoload_classmap.php
+++ b/apps/dav/composer/composer/autoload_classmap.php
@@ -366,6 +366,7 @@ return array(
     'OCA\\DAV\\SystemTag\\SystemTagPlugin' => $baseDir . '/../lib/SystemTag/SystemTagPlugin.php',
     'OCA\\DAV\\SystemTag\\SystemTagsByIdCollection' => $baseDir . '/../lib/SystemTag/SystemTagsByIdCollection.php',
     'OCA\\DAV\\SystemTag\\SystemTagsInUseCollection' => $baseDir . '/../lib/SystemTag/SystemTagsInUseCollection.php',
+    'OCA\\DAV\\SystemTag\\SystemTagsObjectList' => $baseDir . '/../lib/SystemTag/SystemTagsObjectList.php',
     'OCA\\DAV\\SystemTag\\SystemTagsObjectMappingCollection' => $baseDir . '/../lib/SystemTag/SystemTagsObjectMappingCollection.php',
     'OCA\\DAV\\SystemTag\\SystemTagsObjectTypeCollection' => $baseDir . '/../lib/SystemTag/SystemTagsObjectTypeCollection.php',
     'OCA\\DAV\\SystemTag\\SystemTagsRelationsCollection' => $baseDir . '/../lib/SystemTag/SystemTagsRelationsCollection.php',
diff --git a/apps/dav/composer/composer/autoload_static.php b/apps/dav/composer/composer/autoload_static.php
index 8a1376d9aa9..fc1838c1b4f 100644
--- a/apps/dav/composer/composer/autoload_static.php
+++ b/apps/dav/composer/composer/autoload_static.php
@@ -381,6 +381,7 @@ class ComposerStaticInitDAV
         'OCA\\DAV\\SystemTag\\SystemTagPlugin' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagPlugin.php',
         'OCA\\DAV\\SystemTag\\SystemTagsByIdCollection' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsByIdCollection.php',
         'OCA\\DAV\\SystemTag\\SystemTagsInUseCollection' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsInUseCollection.php',
+        'OCA\\DAV\\SystemTag\\SystemTagsObjectList' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsObjectList.php',
         'OCA\\DAV\\SystemTag\\SystemTagsObjectMappingCollection' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsObjectMappingCollection.php',
         'OCA\\DAV\\SystemTag\\SystemTagsObjectTypeCollection' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsObjectTypeCollection.php',
         'OCA\\DAV\\SystemTag\\SystemTagsRelationsCollection' => __DIR__ . '/..' . '/../lib/SystemTag/SystemTagsRelationsCollection.php',
diff --git a/apps/dav/lib/SystemTag/SystemTagNode.php b/apps/dav/lib/SystemTag/SystemTagNode.php
index 154bfa493f2..ed4eb44cbbd 100644
--- a/apps/dav/lib/SystemTag/SystemTagNode.php
+++ b/apps/dav/lib/SystemTag/SystemTagNode.php
@@ -184,7 +184,12 @@ class SystemTagNode implements \Sabre\DAV\ICollection {
 	}
 
 	public function getChildren() {
-		// We currently don't have a method to list allowed tag mappings types
-		return [new SystemTagObjectType($this->tag, 'files', $this->tagManager, $this->tagMapper)];
+		$objectTypes = $this->tagMapper->getAvailableObjectTypes();
+		return array_map(
+			function ($objectType) {
+				return new SystemTagObjectType($this->tag, $objectType, $this->tagManager, $this->tagMapper);
+			},
+			$objectTypes
+		);
 	}
 }
diff --git a/apps/dav/lib/SystemTag/SystemTagObjectType.php b/apps/dav/lib/SystemTag/SystemTagObjectType.php
index 0279e4411d8..0e1368854cd 100644
--- a/apps/dav/lib/SystemTag/SystemTagObjectType.php
+++ b/apps/dav/lib/SystemTag/SystemTagObjectType.php
@@ -14,7 +14,7 @@ use Sabre\DAV\Exception\MethodNotAllowed;
  * SystemTagObjectType property
  * This property represent a type of object which tags are assigned to.
  */
-class SystemTagObjectType implements \Sabre\DAV\INode {
+class SystemTagObjectType implements \Sabre\DAV\IFile {
 	public const NS_NEXTCLOUD = 'http://nextcloud.org/ns';
 
 	/** @var string[] */
@@ -39,19 +39,43 @@ class SystemTagObjectType implements \Sabre\DAV\INode {
 		return $this->objectsIds;
 	}
 
-	public function delete() {
-		throw new MethodNotAllowed();
+	/**
+	 * Returns the system tag represented by this node
+	 *
+	 * @return ISystemTag system tag
+	 */
+	public function getSystemTag() {
+		return $this->tag;
 	}
 
 	public function getName() {
 		return $this->type;
 	}
 
+	public function getLastModified() {
+		return null;
+	}
+
+	public function getETag() {
+		return '"' . $this->tag->getETag() . '"';
+	}
+
 	public function setName($name) {
 		throw new MethodNotAllowed();
 	}
-
-	public function getLastModified() {
-		return null;
+	public function put($data) {
+		throw new MethodNotAllowed();
+	}
+	public function get() {
+		throw new MethodNotAllowed();
+	}
+	public function delete() {
+		throw new MethodNotAllowed();
+	}
+	public function getContentType() {
+		throw new MethodNotAllowed();
+	}
+	public function getSize() {
+		throw new MethodNotAllowed();
 	}
 }
diff --git a/apps/dav/lib/SystemTag/SystemTagPlugin.php b/apps/dav/lib/SystemTag/SystemTagPlugin.php
index 687b47284eb..c88a69f1154 100644
--- a/apps/dav/lib/SystemTag/SystemTagPlugin.php
+++ b/apps/dav/lib/SystemTag/SystemTagPlugin.php
@@ -8,6 +8,7 @@
 namespace OCA\DAV\SystemTag;
 
 use OCA\DAV\Connector\Sabre\Directory;
+use OCA\DAV\Connector\Sabre\FilesPlugin;
 use OCA\DAV\Connector\Sabre\Node;
 use OCP\IGroupManager;
 use OCP\IUser;
@@ -20,6 +21,7 @@ use OCP\Util;
 use Sabre\DAV\Exception\BadRequest;
 use Sabre\DAV\Exception\Conflict;
 use Sabre\DAV\Exception\Forbidden;
+use Sabre\DAV\Exception\PreconditionFailed;
 use Sabre\DAV\Exception\UnsupportedMediaType;
 use Sabre\DAV\PropFind;
 use Sabre\DAV\PropPatch;
@@ -80,6 +82,9 @@ class SystemTagPlugin extends \Sabre\DAV\ServerPlugin {
 	 */
 	public function initialize(\Sabre\DAV\Server $server) {
 		$server->xml->namespaceMap[self::NS_OWNCLOUD] = 'oc';
+		$server->xml->namespaceMap[self::NS_NEXTCLOUD] = 'nc';
+
+		$server->xml->elementMap[self::OBJECTIDS_PROPERTYNAME] = SystemTagsObjectList::class;
 
 		$server->protectedProperties[] = self::ID_PROPERTYNAME;
 
@@ -213,6 +218,10 @@ class SystemTagPlugin extends \Sabre\DAV\ServerPlugin {
 			$propFind->setPath(str_replace('systemtags-assigned/', 'systemtags/', $propFind->getPath()));
 		}
 
+		$propFind->handle(FilesPlugin::GETETAG_PROPERTYNAME, function () use ($node): string|null {
+			return $node->getSystemTag()->getETag();
+		});
+
 		$propFind->handle(self::ID_PROPERTYNAME, function () use ($node) {
 			return $node->getSystemTag()->getId();
 		});
@@ -359,9 +368,37 @@ class SystemTagPlugin extends \Sabre\DAV\ServerPlugin {
 	 */
 	public function handleUpdateProperties($path, PropPatch $propPatch) {
 		$node = $this->server->tree->getNodeForPath($path);
-		if (!($node instanceof SystemTagNode)) {
+		if (!($node instanceof SystemTagNode) && !($node instanceof SystemTagObjectType)) {
 			return;
 		}
+		
+		$propPatch->handle([self::OBJECTIDS_PROPERTYNAME], function ($props) use ($node) {
+			if (!($node instanceof SystemTagObjectType)) {
+				return false;
+			}
+
+			if (isset($props[self::OBJECTIDS_PROPERTYNAME])) {
+				$propValue = $props[self::OBJECTIDS_PROPERTYNAME];
+				if (!($propValue instanceof SystemTagsObjectList) || count($propValue?->getObjects() ?: []) === 0) {
+					throw new BadRequest('Invalid object-ids property');
+				}
+
+				$objects = $propValue->getObjects();
+				$objectTypes = array_unique(array_values($objects));
+
+				if (count($objectTypes) !== 1 || $objectTypes[0] !== $node->getName()) {
+					throw new BadRequest('Invalid object-ids property. All object types must be of the same type: ' . $node->getName());
+				}
+				
+				$this->tagMapper->setObjectIdsForTag($node->getSystemTag()->getId(), $node->getName(), array_keys($objects));
+			}
+
+			if ($props[self::OBJECTIDS_PROPERTYNAME] === null) {
+				$this->tagMapper->setObjectIdsForTag($node->getSystemTag()->getId(), $node->getName(), []);
+			}
+
+			return true;
+		});
 
 		$propPatch->handle([
 			self::DISPLAYNAME_PROPERTYNAME,
@@ -371,6 +408,10 @@ class SystemTagPlugin extends \Sabre\DAV\ServerPlugin {
 			self::NUM_FILES_PROPERTYNAME,
 			self::REFERENCE_FILEID_PROPERTYNAME,
 		], function ($props) use ($node) {
+			if (!($node instanceof SystemTagNode)) {
+				return false;
+			}
+
 			$tag = $node->getSystemTag();
 			$name = $tag->getName();
 			$userVisible = $tag->isUserVisible();
diff --git a/apps/dav/lib/SystemTag/SystemTagsInUseCollection.php b/apps/dav/lib/SystemTag/SystemTagsInUseCollection.php
index c27926ec410..9b02a5be42c 100644
--- a/apps/dav/lib/SystemTag/SystemTagsInUseCollection.php
+++ b/apps/dav/lib/SystemTag/SystemTagsInUseCollection.php
@@ -73,7 +73,7 @@ class SystemTagsInUseCollection extends SimpleCollection {
 		$result = $this->systemTagsInFilesDetector->detectAssignedSystemTagsIn($userFolder, $this->mediaType);
 		$children = [];
 		foreach ($result as $tagData) {
-			$tag = new SystemTag((string)$tagData['id'], $tagData['name'], (bool)$tagData['visibility'], (bool)$tagData['editable']);
+			$tag = new SystemTag((string)$tagData['id'], $tagData['name'], (bool)$tagData['visibility'], (bool)$tagData['editable'], $tagData['etag']);
 			// read only, so we can submit the isAdmin parameter as false generally
 			$node = new SystemTagNode($tag, $user, false, $this->systemTagManager, $this->tagMapper);
 			$node->setNumberOfFiles((int)$tagData['number_files']);
diff --git a/apps/dav/lib/SystemTag/SystemTagsObjectList.php b/apps/dav/lib/SystemTag/SystemTagsObjectList.php
index e25f1c804ee..0743b8d8130 100644
--- a/apps/dav/lib/SystemTag/SystemTagsObjectList.php
+++ b/apps/dav/lib/SystemTag/SystemTagsObjectList.php
@@ -1,4 +1,5 @@
 <?php
+
 declare(strict_types=1);
 
 /**
@@ -7,21 +8,60 @@ declare(strict_types=1);
  */
 namespace OCA\DAV\SystemTag;
 
+use Sabre\Xml\Reader;
 use Sabre\Xml\Writer;
+use Sabre\Xml\XmlDeserializable;
 use Sabre\Xml\XmlSerializable;
 
 /**
  * This property contains multiple "object-id" elements.
  */
-class SystemTagsObjectList implements XmlSerializable {
+class SystemTagsObjectList implements XmlSerializable, XmlDeserializable {
+
 	public const NS_NEXTCLOUD = 'http://nextcloud.org/ns';
+	public const OBJECTID_ROOT_PROPERTYNAME = '{http://nextcloud.org/ns}object-id';
+	public const OBJECTID_PROPERTYNAME = '{http://nextcloud.org/ns}id';
+	public const OBJECTTYPE_PROPERTYNAME = '{http://nextcloud.org/ns}type';
 
 	/**
 	 * @param array<string, string> $objects An array of object ids and their types
 	 */
 	public function __construct(
 		private array $objects,
-	) {	}
+	) {
+	}
+
+	public function getObjects(): array {
+		return $this->objects;
+	}
+
+	public static function xmlDeserialize(Reader $reader) {
+		$tree = $reader->parseInnerTree();
+		if ($tree === null) {
+			return null;
+		}
+		
+		$objects = [];
+		foreach ($tree as $elem) {
+			if ($elem['name'] === self::OBJECTID_ROOT_PROPERTYNAME) {
+				$value = $elem['value'];
+				$id = '';
+				$type = '';
+				foreach ($value as $subElem) {
+					if ($subElem['name'] === self::OBJECTID_PROPERTYNAME) {
+						$id = $subElem['value'];
+					} elseif ($subElem['name'] === self::OBJECTTYPE_PROPERTYNAME) {
+						$type = $subElem['value'];
+					}
+				}
+				if ($id !== '' && $type !== '') {
+					$objects[$id] = $type;
+				}
+			}
+		}
+
+		return new self($objects);
+	}
 
 	/**
 	 * The xmlSerialize method is called during xml writing.
@@ -31,9 +71,9 @@ class SystemTagsObjectList implements XmlSerializable {
 	 */
 	public function xmlSerialize(Writer $writer) {
 		foreach ($this->objects as $objectsId => $type) {
-			$writer->startElement('{' . self::NS_NEXTCLOUD . '}object-id');
-			$writer->writeElement('{' . self::NS_NEXTCLOUD . '}id', $objectsId);
-			$writer->writeElement('{' . self::NS_NEXTCLOUD . '}type', $type);
+			$writer->startElement(SystemTagPlugin::OBJECTIDS_PROPERTYNAME);
+			$writer->writeElement(self::OBJECTID_PROPERTYNAME, $objectsId);
+			$writer->writeElement(self::OBJECTTYPE_PROPERTYNAME, $type);
 			$writer->endElement();
 		}
 	}
diff --git a/apps/systemtags/src/components/SystemTagPicker.vue b/apps/systemtags/src/components/SystemTagPicker.vue
index 28fff28be78..55b664e3c9a 100644
--- a/apps/systemtags/src/components/SystemTagPicker.vue
+++ b/apps/systemtags/src/components/SystemTagPicker.vue
@@ -11,48 +11,70 @@
 		close-on-click-outside
 		out-transition
 		@update:open="onCancel">
-		<!-- Search or create input -->
-		<div class="systemtags-picker__create">
-			<NcTextField :value.sync="input"
-				:label="t('systemtags', 'Search or create tag')">
-				<TagIcon :size="20" />
-			</NcTextField>
-			<NcButton>
-				{{ t('systemtags', 'Create tag') }}
-			</NcButton>
-		</div>
-
-		<!-- Tags list -->
-		<div class="systemtags-picker__tags">
-			<NcCheckboxRadioSwitch v-for="tag in filteredTags"
-				:key="tag.id"
-				:label="tag.displayName"
-				:checked="isChecked(tag)"
-				:indeterminate="isIndeterminate(tag)"
-				:disabled="!tag.canAssign"
-				@update:checked="onCheckUpdate(tag, $event)">
-				{{ formatTagName(tag) }}
-			</NcCheckboxRadioSwitch>
-		</div>
-
-		<!-- Note -->
-		<div class="systemtags-picker__note">
-			<NcNoteCard v-if="!hasChanges" type="info">
-				{{ t('systemtags', 'Select or create tags to apply to all selected files') }}
-			</NcNoteCard>
-			<NcNoteCard v-else type="info">
-				<span v-html="statusMessage" />
-			</NcNoteCard>
-		</div>
+		<NcEmptyContent v-if="loading || done" :name="t('systemtags', 'Applying changes…')">
+			<template #icon>
+				<NcLoadingIcon v-if="!done" />
+				<CheckIcon v-else fill-color="var(--color-success)" />
+			</template>
+		</NcEmptyContent>
+
+		<template v-else>
+			<!-- Search or create input -->
+			<div class="systemtags-picker__create">
+				<NcTextField :value.sync="input"
+					:label="t('systemtags', 'Search or create tag')">
+					<TagIcon :size="20" />
+				</NcTextField>
+				<NcButton>
+					{{ t('systemtags', 'Create tag') }}
+				</NcButton>
+			</div>
+
+			<!-- Tags list -->
+			<div v-if="filteredTags.length > 0" class="systemtags-picker__tags">
+				<NcCheckboxRadioSwitch v-for="tag in filteredTags"
+					:key="tag.id"
+					:label="tag.displayName"
+					:checked="isChecked(tag)"
+					:indeterminate="isIndeterminate(tag)"
+					:disabled="!tag.canAssign"
+					@update:checked="onCheckUpdate(tag, $event)">
+					{{ formatTagName(tag) }}
+				</NcCheckboxRadioSwitch>
+			</div>
+			<NcEmptyContent v-else :name="t('systemtags', 'No tags found')">
+				<template #icon>
+					<TagIcon />
+				</template>
+			</NcEmptyContent>
+
+			<!-- Note -->
+			<div class="systemtags-picker__note">
+				<NcNoteCard v-if="!hasChanges" type="info">
+					{{ t('systemtags', 'Select or create tags to apply to all selected files') }}
+				</NcNoteCard>
+				<NcNoteCard v-else type="info">
+					<span v-html="statusMessage" />
+				</NcNoteCard>
+			</div>
+		</template>
 
 		<template #actions>
-			<NcButton type="tertiary" @click="onCancel">
+			<NcButton :disabled="loading || done" type="tertiary" @click="onCancel">
 				{{ t('systemtags', 'Cancel') }}
 			</NcButton>
-			<NcButton :disabled="!hasChanges" @click="onSubmit">
+			<NcButton :disabled="!hasChanges || loading || done" @click="onSubmit">
 				{{ t('systemtags', 'Apply changes') }}
 			</NcButton>
 		</template>
+
+		<!-- Chip html for v-html tag rendering -->
+		<div v-show="false">
+			<NcChip ref="chip"
+				text="%s"
+				type="primary"
+				no-close />
+		</div>
 	</NcDialog>
 </template>
 
@@ -63,18 +85,25 @@ import type { TagWithId } from '../types'
 
 import { defineComponent } from 'vue'
 import { emit } from '@nextcloud/event-bus'
+import { sanitize } from 'dompurify'
+import { showInfo } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
+import escapeHTML from 'escape-html'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import TagIcon from 'vue-material-design-icons/Tag.vue'
+import CheckIcon from 'vue-material-design-icons/CheckCircle.vue'
 
-import logger from '../services/logger'
 import { getNodeSystemTags } from '../utils'
-import { showInfo } from '@nextcloud/dialogs'
+import { getTagObjects, setTagObjects } from '../services/api'
+import logger from '../services/logger'
 
 type TagListCount = {
 	string: number
@@ -84,9 +113,14 @@ export default defineComponent({
 	name: 'SystemTagPicker',
 
 	components: {
+		CheckIcon,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		// eslint-disable-next-line vue/no-unused-components
+		NcChip,
 		NcDialog,
+		NcEmptyContent,
+		NcLoadingIcon,
 		NcNoteCard,
 		NcTextField,
 		TagIcon,
@@ -113,8 +147,11 @@ export default defineComponent({
 
 	data() {
 		return {
-			input: '',
+			done: false,
+			loading: false,
 			opened: true,
+
+			input: '',
 			tagList: {} as TagListCount,
 
 			toAdd: [] as TagWithId[],
@@ -137,40 +174,44 @@ export default defineComponent({
 		},
 
 		statusMessage(): string {
+			if (this.toAdd.length === 0 && this.toRemove.length === 0) {
+				return ''
+			}
+
 			if (this.toAdd.length === 1 && this.toRemove.length === 1) {
 				return t('systemtags', '{tag1} will be set and {tag2} will be removed from {count} files.', {
-					tag1: this.toAdd[0].displayName,
-					tag2: this.toRemove[0].displayName,
+					tag1: this.formatTagChip(this.toAdd[0]),
+					tag2: this.formatTagChip(this.toRemove[0]),
 					count: this.nodes.length,
-				})
+				}, undefined, { escape: false })
 			}
 
-			const tagsAdd = this.toAdd.map(tag => tag.displayName)
+			const tagsAdd = this.toAdd.map(this.formatTagChip)
 			const lastTagAdd = tagsAdd.pop() as string
-			const tagsRemove = this.toRemove.map(tag => tag.displayName)
+			const tagsRemove = this.toRemove.map(this.formatTagChip)
 			const lastTagRemove = tagsRemove.pop() as string
 
 			const addStringSingular = t('systemtags', '{tag} will be set to {count} files.', {
-				tag: this.toAdd[0]?.displayName,
+				tag: lastTagAdd,
 				count: this.nodes.length,
-			})
+			}, undefined, { escape: false })
 
 			const removeStringSingular = t('systemtags', '{tag} will be removed from {count} files.', {
-				tag: this.toRemove[0]?.displayName,
+				tag: lastTagRemove,
 				count: this.nodes.length,
-			})
+			}, undefined, { escape: false })
 
 			const addStringPlural = t('systemtags', '{tags} and {lastTag} will be set to {count} files.', {
 				tags: tagsAdd.join(', '),
 				lastTag: lastTagAdd,
 				count: this.nodes.length,
-			})
+			}, undefined, { escape: false })
 
 			const removeStringPlural = t('systemtags', '{tags} and {lastTag} will be removed from {count} files.', {
 				tags: tagsRemove.join(', '),
 				lastTag: lastTagRemove,
 				count: this.nodes.length,
-			})
+			}, undefined, { escape: false })
 
 			// Singular
 			if (this.toAdd.length === 1 && this.toRemove.length === 0) {
@@ -213,6 +254,13 @@ export default defineComponent({
 	},
 
 	methods: {
+		// Format & sanitize a tag chip for v-html tag rendering
+		formatTagChip(tag: TagWithId): string {
+			const chip = this.$refs.chip as NcChip
+			const chipHtml = chip.$el.outerHTML
+			return chipHtml.replace('%s', escapeHTML(sanitize(tag.displayName)))
+		},
+
 		formatTagName(tag: TagWithId): string {
 			if (tag.userVisible) {
 				return t('systemtags', '{displayName} (hidden)', { displayName: tag.displayName })
@@ -226,11 +274,12 @@ export default defineComponent({
 		},
 
 		isChecked(tag: TagWithId): boolean {
-			return this.tagList[tag.displayName] === this.nodes.length
+			return tag.displayName in this.tagList
+				&& this.tagList[tag.displayName] === this.nodes.length
 		},
 
 		isIndeterminate(tag: TagWithId): boolean {
-			return this.tagList[tag.displayName]
+			return tag.displayName in this.tagList
 				&& this.tagList[tag.displayName] !== 0
 				&& this.tagList[tag.displayName] !== this.nodes.length
 		},
@@ -247,9 +296,37 @@ export default defineComponent({
 			}
 		},
 
-		onSubmit() {
-			logger.debug('onSubmit')
-			this.$emit('close', null)
+		async onSubmit() {
+			this.loading = true
+			logger.debug('Applying tags', {
+				toAdd: this.toAdd,
+				toRemove: this.toRemove,
+			})
+
+			// Add tags
+			for (const tag of this.toAdd) {
+				const { etag, objects } = await getTagObjects(tag, 'files')
+				let ids = [...objects.map(obj => obj.id), ...this.nodes.map(node => node.fileid)] as number[]
+				// Remove duplicates and empty ids
+				ids = [...new Set(ids.filter(id => !!id))]
+				await setTagObjects(tag, 'files', ids.map(id => ({ id, type: 'files' })), etag)
+			}
+
+			// Remove tags
+			for (const tag of this.toRemove) {
+				const { etag, objects } = await getTagObjects(tag, 'files')
+				let ids = objects.map(obj => obj.id) as number[]
+				// Remove the ids of the nodes and remove duplicates
+				ids = [...new Set(ids.filter(id => !this.nodes.map(node => node.fileid).includes(id)))]
+				await setTagObjects(tag, 'files', ids.map(id => ({ id, type: 'files' })), etag)
+			}
+
+			this.done = true
+			this.loading = false
+			setTimeout(() => {
+				this.opened = false
+				this.$emit('close', null)
+			}, 2000)
 		},
 
 		onCancel() {
@@ -291,4 +368,8 @@ export default defineComponent({
 	}
 }
 
+// Rendered chip in note
+.nc-chip {
+	display: inline !important;
+}
 </style>
diff --git a/apps/systemtags/src/services/api.ts b/apps/systemtags/src/services/api.ts
index 1e2c9aeb9d4..c37b6e51c20 100644
--- a/apps/systemtags/src/services/api.ts
+++ b/apps/systemtags/src/services/api.ts
@@ -15,7 +15,7 @@ import { formatTag, parseIdFromLocation, parseTags } from '../utils'
 import { logger } from '../logger.js'
 
 export const fetchTagsPayload = `<?xml version="1.0"?>
-<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
+<d:propfind xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
 	<d:prop>
 		<oc:id />
 		<oc:display-name />
@@ -79,7 +79,7 @@ export const createTag = async (tag: Tag | ServerTag): Promise<number> => {
 export const updateTag = async (tag: TagWithId): Promise<void> => {
 	const path = '/systemtags/' + tag.id
 	const data = `<?xml version="1.0"?>
-	<d:propertyupdate  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
+	<d:propertyupdate xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
 		<d:set>
 			<d:prop>
 				<oc:display-name>${tag.displayName}</oc:display-name>
@@ -109,3 +109,68 @@ export const deleteTag = async (tag: TagWithId): Promise<void> => {
 		throw new Error(t('systemtags', 'Failed to delete tag'))
 	}
 }
+
+type TagObject = {
+	id: number,
+	type: string,
+}
+
+type TagObjectResponse = {
+	etag: string,
+	objects: TagObject[],
+}
+
+export const getTagObjects = async function(tag: TagWithId, type: string): Promise<TagObjectResponse> {
+	const path = `/systemtags/${tag.id}/${type}`
+	const data = `<?xml version="1.0"?>
+	<d:propfind xmlns:d="DAV:" xmlns:nc="http://nextcloud.org/ns">
+		<d:prop>
+			<nc:object-ids />
+			<d:getetag />
+		</d:prop>
+	</d:propfind>`
+
+	const response = await davClient.stat(path, { data, details: true })
+	const etag = response?.data?.props?.getetag || '""'
+	const objects = Object.values(response?.data?.props?.['object-ids'] || []).flat() as TagObject[]
+
+	return {
+		etag,
+		objects,
+	}
+}
+
+/**
+ * Set the objects for a tag.
+ * Warning: This will overwrite the existing objects.
+ */
+export const setTagObjects = async function(tag: TagWithId, type: string, objectIds: TagObject[], etag: string = ''): Promise<void> {
+	const path = `/systemtags/${tag.id}/${type}`
+	let data = `<?xml version="1.0"?>
+	<d:propertyupdate xmlns:d="DAV:" xmlns:nc="http://nextcloud.org/ns">
+		<d:set>
+			<d:prop>
+				<nc:object-ids>${objectIds.map(({ id, type }) => `<nc:object-id><nc:id>${id}</nc:id><nc:type>${type}</nc:type></nc:object-id>`).join('')}</nc:object-ids>
+			</d:prop>
+		</d:set>
+	</d:propertyupdate>`
+
+	if (objectIds.length === 0) {
+		data = `<?xml version="1.0"?>
+		<d:propertyupdate xmlns:d="DAV:" xmlns:nc="http://nextcloud.org/ns">
+			<d:remove>
+				<d:prop>
+					<nc:object-ids />
+				</d:prop>
+			</d:remove>
+		</d:propertyupdate>`
+	}
+
+	await davClient.customRequest(path, {
+		method: 'PROPPATCH',
+		data,
+		headers: {
+			'if-match': etag,
+		},
+	})
+}