enh: make UserPicker component more generic

Signed-off-by: Cleopatra Enjeck M <[email protected]>
nextcloud · Jun 20, 2024 · 48d1010 · 48d1010
1 parent b81be9a
commit 48d1010
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/src/modules/modals/TransferContext.vue b/src/modules/modals/TransferContext.vue
@@ -10,7 +10,7 @@
 			</div>
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer this application to another user') }}</h3>
-				<NcUserAndGroupPicker :select-users="true" :select-groups="false" :new-owner-user-id.sync="newOwnerId" />
+				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="newOwnerId" />
 			</div>
 			<div class="row">
 				<div class="fix-col-4 space-T end">
@@ -28,7 +28,7 @@ import { NcModal, NcButton } from '@nextcloud/vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
-import NcUserAndGroupPicker from '../../shared/components/ncUserAndGroupPicker/NcUserAndGroupPicker.vue'
+import NcUserPicker from '../../shared/components/ncUserPicker/NcUserPicker.vue'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -37,7 +37,7 @@ export default {
 	components: {
 		NcModal,
 		NcButton,
-		NcUserAndGroupPicker,
+		NcUserPicker,
 	},
 	mixins: [permissionsMixin],
 	props: {

diff --git a/src/modules/modals/TransferTable.vue b/src/modules/modals/TransferTable.vue
@@ -10,11 +10,11 @@
 			</div>
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer this table to another user') }}</h3>
-				<NcUserAndGroupPicker :select-users="true" :select-groups="false" :new-owner-user-id.sync="newOwnerUserId" />
+				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="selectedUserId" />
 			</div>
 			<div class="row">
 				<div class="fix-col-4 space-T end">
-					<NcButton type="warning" :disabled="newOwnerUserId === ''" data-cy="transferTableButton" @click="transferMe">
+					<NcButton type="warning" :disabled="selectedUserId === ''" data-cy="transferTableButton" @click="transferMe">
 						{{ t('tables', 'Transfer') }}
 					</NcButton>
 				</div>
@@ -28,7 +28,7 @@ import { NcModal, NcButton } from '@nextcloud/vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
-import NcUserAndGroupPicker from '../../shared/components/ncUserAndGroupPicker/NcUserAndGroupPicker.vue'
+import NcUserPicker from '../../shared/components/ncUserPicker/NcUserPicker.vue'
 import { mapGetters } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -37,7 +37,7 @@ export default {
 	components: {
 		NcModal,
 		NcButton,
-		NcUserAndGroupPicker,
+		NcUserPicker,
 	},
 	mixins: [permissionsMixin],
 	props: {
@@ -53,7 +53,7 @@ export default {
 	data() {
 		return {
 			loading: false,
-			newOwnerUserId: '',
+			selectedUserId: '',
 		}
 	},
 	computed: {
@@ -84,9 +84,9 @@ export default {
 			if (this.activeTable) {
 				activeTableId = !this.isView ? this.activeTable.id : null
 			}
-			const res = await this.$store.dispatch('transferTable', { id: this.table.id, data: { newOwnerUserId: this.newOwnerUserId } })
+			const res = await this.$store.dispatch('transferTable', { id: this.table.id, data: { newOwnerUserId: this.selectedUserId } })
 			if (res) {
-				showSuccess(t('tables', 'Table "{emoji}{table}" transferred to {user}', { emoji: this.table?.emoji ? this.table?.emoji + ' ' : '', table: this.table?.title, user: this.newOwnerUserId }))
+				showSuccess(t('tables', 'Table "{emoji}{table}" transferred to {user}', { emoji: this.table?.emoji ? this.table?.emoji + ' ' : '', table: this.table?.title, user: this.selectedUserId }))
 
 				if (transferId === activeTableId) {
 					await this.$router.push('/').catch(err => err)

diff --git a/...erAndGroupPicker/NcUserAndGroupPicker.vue → .../components/ncUserPicker/NcUserPicker.vue b/...erAndGroupPicker/NcUserAndGroupPicker.vue → .../components/ncUserPicker/NcUserPicker.vue
@@ -13,9 +13,9 @@
 
 <script>
 import { NcSelect } from '@nextcloud/vue'
-import formatting from '../../../shared/mixins/formatting.js'
+import formatting from '../../mixins/formatting.js'
 import '@nextcloud/dialogs/style.css'
-import searchUserGroup from '../../../shared/mixins/searchUserGroup.js'
+import searchUserGroup from '../../mixins/searchUserGroup.js'
 
 export default {
 
@@ -26,7 +26,7 @@ export default {
 	mixins: [formatting, searchUserGroup],
 
 	props: {
-		newOwnerUserId: {
+		selectedUserId: {
 			type: String,
 			default: '',
 		},
@@ -49,10 +49,10 @@ export default {
 	computed: {
 		localValue: {
 			get() {
-				return this.newOwnerUserId
+				return this.selectedUserId
 			},
 			set(v) {
-				this.$emit('update:newOwnerUserId', v?.id)
+				this.$emit('update:selectedUserId', v?.id)
 			},
 		},
 	},
@@ -61,8 +61,19 @@ export default {
 		addTransfer(selectedItem) {
 			this.localValue = selectedItem
 		},
-		filterOutUnwantedItems(list) {
-			return this.filterOutCurrentUser(list)
+
+		filterOutUnwantedItems(items) {
+			return items.filter((item) => !(item.isUser && item.id === this.currentUserId))
+		},
+
+		formatResult(autocompleteResult) {
+			return {
+				id: autocompleteResult.id,
+				displayName: autocompleteResult.label,
+				icon: autocompleteResult.icon,
+				isUser: autocompleteResult.source.startsWith('users'),
+				key: autocompleteResult.source + '-' + autocompleteResult.id,
+			}
 		},
 	},
 }