From 09078ce75f96355f87f28284a019140451731290 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 07:44:56 +0100
Subject: [PATCH 1/2] feat: Inline editing - usergroup

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellUsergroup.vue   | 157 ++++++++++++++++--
 .../components/ncTable/partials/TableRow.vue  |   1 -
 2 files changed, 146 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index 9a52d2c824..e233599b1a 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -3,26 +3,70 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<!-- eslint-disable-next-line vue/no-v-html -->
-	<div v-if="value" class="table-cell-usergroup">
-		<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
-			<NcUserBubble :user="item.id" :avatar-image="getAvatarImage(item)" :is-no-user="!isUser(item)" :display-name="item.displayName ?? item.id" :show-user-status="isUser(item) && column.showUserStatus" :size="column.showUserStatus ? 34 : 20" :primary="isCurrentUser(item)" />
+	<div class="cell-usergroup">
+		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+			<div v-if="value" class="table-cell-usergroup">
+				<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
+					<NcUserBubble :user="item.id" :avatar-image="getAvatarImage(item)" :is-no-user="!isUser(item)" :display-name="item.displayName ?? item.id" :show-user-status="isUser(item) && column.showUserStatus" :size="column.showUserStatus ? 34 : 20" :primary="isCurrentUser(item)" />
+				</div>
+			</div>
+		</div>
+		<div v-else
+			ref="editingContainer"
+			class="edit-mode"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<NcSelect v-model="editValue"
+				style="width: 100%;"
+				:loading="loading || localLoading"
+				:options="options"
+				:placeholder="getPlaceholder()"
+				:searchable="true"
+				:get-option-key="(option) => option.key"
+				label="displayName"
+				:aria-label-combobox="getPlaceholder()"
+				:user-select="true"
+				:close-on-select="false"
+				:multiple="column.usergroupMultipleItems"
+				data-cy="usergroupCellSelect"
+				@search="asyncFind">
+				<template #noResult>
+					{{ noResultText }}
+				</template>
+			</NcSelect>
+			<div v-if="localLoading" class="loading-indicator">
+				<div class="icon-loading-small icon-loading-inline" />
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { NcUserBubble } from '@nextcloud/vue'
+import { NcUserBubble, NcSelect } from '@nextcloud/vue'
 import { USERGROUP_TYPE } from '../../../constants.ts'
+import cellEditMixin from '../mixins/cellEditMixin.js'
+import searchUserGroup from '../../../mixins/searchUserGroup.js'
+import ShareTypes from '../../../mixins/shareTypesMixin.js'
+import { translate as t } from '@nextcloud/l10n'
 
 const currentUser = getCurrentUser()
 
 export default {
 	name: 'TableCellUsergroup',
+
 	components: {
 		NcUserBubble,
+		NcSelect,
 	},
+
+	mixins: [
+		cellEditMixin,
+		searchUserGroup,
+		ShareTypes,
+	],
+
 	props: {
 		column: {
 			type: Object,
@@ -37,6 +81,16 @@ export default {
 			default: () => [],
 		},
 	},
+
+	data() {
+		return {
+			editValue: [],
+			selectUsers: this.column?.usergroupSelectUsers ?? true,
+			selectGroups: this.column?.usergroupSelectGroups ?? false,
+			selectCircles: false,
+		}
+	},
+
 	computed: {
 		isCurrentUser() {
 			return (item) => this.isUser(item) && item.id === currentUser?.uid
@@ -45,7 +99,32 @@ export default {
 			return (item) => item.type === USERGROUP_TYPE.USER
 		},
 	},
+
+	watch: {
+		isEditing(isEditing) {
+			if (isEditing) {
+				this.editValue = this.value ? [...this.value] : []
+
+				// Use a small delay to prevent the same click event that triggered editing
+				// from immediately triggering the click outside handler
+				this.$nextTick(() => {
+					setTimeout(() => {
+						document.addEventListener('click', this.handleClickOutside)
+					}, 10)
+				})
+			} else {
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
+	created() {
+		this.selectCircles = this.isCirclesEnabled ? this.column?.usergroupSelectTeams ?? false : false
+	},
+
 	methods: {
+		t,
+
 		getAvatarImage(item) {
 			if (item.type === USERGROUP_TYPE.GROUP) {
 				return 'icon-group'
@@ -55,18 +134,74 @@ export default {
 			}
 			return ''
 		},
+
+		formatResult(autocompleteResult) {
+			return {
+				id: autocompleteResult.id,
+				type: this.getType(autocompleteResult.source),
+				key: autocompleteResult.source + '-' + autocompleteResult.id,
+				displayName: autocompleteResult.label,
+			}
+		},
+
+		filterOutUnwantedItems(list) {
+			return list
+		},
+
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			let newValue = !Array.isArray(this.editValue) ? [this.editValue] : this.editValue
+			// If the column does not allow multiple items, limit to one item
+			// in case we switched from multiple to single selection
+			if (!this.column.usergroupMultipleItems) {
+				newValue = newValue.slice(0, 1)
+			}
+			const success = await this.updateCellValue(newValue)
+
+			if (!success) {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+			this.isEditing = false
+		},
+
+		handleClickOutside(event) {
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-	.table-cell-usergroup {
-		display: flex;
-		flex-wrap: wrap;
-		padding: 10px;
+.cell-usergroup {
+	width: 100%;
+
+	.non-edit-mode {
+		cursor: pointer;
 	}
+}
+
+.table-cell-usergroup {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 10px;
+}
+
+.usergroup-entry {
+	padding-right: 10px;
+}
 
-	.usergroup-entry {
-		padding-right: 10px;
+.edit-mode {
+	padding: 10px 0;
+
+	.icon-loading-inline {
+		margin-left: 4px;
 	}
+}
 </style>
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index 7c71f018eb..afea9d3d5d 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -112,7 +112,6 @@ export default {
 		nonInlineEditableColumnTypes() {
 			return [
 				ColumnTypes.TextRich,
-				ColumnTypes.Usergroup,
 				ColumnTypes.SelectionMulti,
 				ColumnTypes.TextLink,
 				ColumnTypes.NumberStars,

From 507a5af104fc7ca188325e79a90a006da5fdc296 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 17 Aug 2025 19:36:00 +0100
Subject: [PATCH 2/2] fix: Refard event handling, fix border

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellUsergroup.vue   | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index e233599b1a..c08516a080 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="cell-usergroup">
-		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			<div v-if="value" class="table-cell-usergroup">
 				<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
 					<NcUserBubble :user="item.id" :avatar-image="getAvatarImage(item)" :is-no-user="!isUser(item)" :display-name="item.displayName ?? item.id" :show-user-status="isUser(item) && column.showUserStatus" :size="column.showUserStatus ? 34 : 20" :primary="isCurrentUser(item)" />
@@ -88,6 +88,7 @@ export default {
 			selectUsers: this.column?.usergroupSelectUsers ?? true,
 			selectGroups: this.column?.usergroupSelectGroups ?? false,
 			selectCircles: false,
+			isInitialEditClick: false,
 		}
 	},
 
@@ -105,15 +106,14 @@ export default {
 			if (isEditing) {
 				this.editValue = this.value ? [...this.value] : []
 
-				// Use a small delay to prevent the same click event that triggered editing
-				// from immediately triggering the click outside handler
+				// Add click outside listener after the current event loop
+				// to avoid the same click that triggered editing from closing the editor
 				this.$nextTick(() => {
-					setTimeout(() => {
-						document.addEventListener('click', this.handleClickOutside)
-					}, 10)
+					document.addEventListener('click', this.handleClickOutside)
 				})
 			} else {
 				document.removeEventListener('click', this.handleClickOutside)
+				this.isInitialEditClick = false
 			}
 		},
 	},
@@ -125,6 +125,13 @@ export default {
 	methods: {
 		t,
 
+		handleStartEditing(event) {
+			this.isInitialEditClick = true
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
 		getAvatarImage(item) {
 			if (item.type === USERGROUP_TYPE.GROUP) {
 				return 'icon-group'
@@ -170,6 +177,11 @@ export default {
 		},
 
 		handleClickOutside(event) {
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
+				return
+			}
+
 			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
 				this.saveChanges()
 			}
@@ -187,6 +199,10 @@ export default {
 	}
 }
 
+:deep(.vs__dropdown-toggle) {
+    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
+}
+
 .table-cell-usergroup {
 	display: flex;
 	flex-wrap: wrap;