@conduction/nextcloud-vue 2.76.0 → 2.78.0

package/dist/esm/components/CnObjectDataWidget/CnObjectDataWidget.vue2.js

@@ -1,21 +1,24 @@
 import axios__default from '@nextcloud/axios';
 import { translate } from '@nextcloud/l10n';
 import { generateUrl } from '@nextcloud/router';
-import { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcCheckboxRadioSwitch, NcActionButton } from '@nextcloud/vue';
+import { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcSelectUsers, NcCheckboxRadioSwitch, NcActionButton } from '@nextcloud/vue';
 import Check from 'vue-material-design-icons/Check.vue';
 import Close from 'vue-material-design-icons/Close.vue';
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue';
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue';
 import Pencil from 'vue-material-design-icons/Pencil.vue';
-import __sfc_main$3 from '../CnFormDialog/CnFormDialog.vue.js';
+import __sfc_main$1 from '../CnCellRenderer/CnGroupNameCell.vue.js';
+import __sfc_main$4 from '../CnFormDialog/CnFormDialog.vue.js';
 import { normalizeLook } from '../../composables/useLook.js';
+import { groupDisplayName, searchNextcloudGroups, loadGroupDisplayName } from '../../utils/groupAutocomplete.js';
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js';
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js';
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js';
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js';
+import { searchNextcloudUsers, resolveNextcloudUser } from '../../utils/userAutocomplete.js';
 import __sfc_main from '../CnIcon/CnIcon.vue.js';
-import __sfc_main$2 from '../CnObjectMetadataModal/CnObjectMetadataModal.vue.js';
-import __sfc_main$1 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
+import __sfc_main$3 from '../CnObjectMetadataModal/CnObjectMetadataModal.vue.js';
+import __sfc_main$2 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
 
 /**
@@ -58,11 +61,13 @@ var script = {
 		NcLoadingIcon,
 		NcTextField,
 		NcSelect,
+		NcSelectUsers,
+		CnGroupNameCell: __sfc_main$1,
 		NcCheckboxRadioSwitch,
 		NcActionButton,
-		CnWidgetWrapper: __sfc_main$1,
-		CnObjectMetadataModal: __sfc_main$2,
-		CnFormDialog: __sfc_main$3,
+		CnWidgetWrapper: __sfc_main$2,
+		CnObjectMetadataModal: __sfc_main$3,
+		CnFormDialog: __sfc_main$4,
 		ContentSaveOutline,
 		InformationOutline,
 		Pencil,
@@ -437,6 +442,12 @@ var script = {
 			relationOptions: {},
 			/** Whether relation picker options are being fetched. */
 			relationOptionsLoading: false,
+			/** Group and user picker options per field key ({ id, label }[]). */
+			personOptions: {},
+			/** Key of the group or user field whose options are loading, or null. */
+			personLoading: null,
+			/** Display names of users seen in a user picker, by uid. */
+			userLabels: {},
 			/** Whether the user expanded the widget to see every field. */
 			expanded: false,
 			/** Fields that fit the cell while collapsed; null when all fit. */
@@ -1350,6 +1361,11 @@ var script = {
 			if (this.isSingleRelationField(field.key)) {
 				this.loadRelationOptions(field.key);
 			}
+			// Group and user fields pick from Nextcloud's own directory.
+			if (this.isPersonPicker(field)) {
+				this.searchPeople(field, '');
+				this.resolvePersonLabels(field, currentValue);
+			}
 
 			this.$nextTick(() => {
 				// Focus the editor
@@ -1575,6 +1591,182 @@ var script = {
 			return options.find((opt) => opt.id === val) || { id: val, label: String(val) }
 		},
 
+		/**
+		 * Whether a field picks a Nextcloud group (widget `group` or
+		 * `group-multiselect`, from `referenceType: nextcloud-group`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isGroupPicker(field) {
+			return !!field && (field.widget === 'group' || field.widget === 'group-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a Nextcloud user (widget `user` or
+		 * `user-multiselect`, from `referenceType: nextcloud-user`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isUserPicker(field) {
+			return !!field && (field.widget === 'user' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a group or a user.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonPicker(field) {
+			return this.isGroupPicker(field) || this.isUserPicker(field)
+		},
+
+		/**
+		 * Whether a group or user field holds a list.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonMultiple(field) {
+			return !!field && (field.widget === 'group-multiselect' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * The group ids a group field holds, for the display mode.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {string[]}
+		 */
+		groupIdsOf(field) {
+			const raw = this.rawOf(field);
+			const list = Array.isArray(raw) ? raw : [raw];
+			return list.filter((v) => typeof v === 'string' && v !== '')
+		},
+
+		/**
+		 * The display name of a group id or uid, falling back to the id.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} id The group id or uid.
+		 * @return {string}
+		 */
+		personLabel(field, id) {
+			if (this.isGroupPicker(field)) {
+				return groupDisplayName(id) || String(id)
+			}
+			return this.userLabels[id] || String(id)
+		},
+
+		/**
+		 * Search Nextcloud groups or users for a picker. Fails soft (the
+		 * helpers return `[]`), so the picker stays usable with what it has.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} query The search term.
+		 * @return {Promise<void>}
+		 */
+		async searchPeople(field, query) {
+			this.personLoading = field.key;
+			try {
+				const options = this.isGroupPicker(field)
+					? await searchNextcloudGroups(query || '')
+					: await searchNextcloudUsers(query || '');
+				const list = Array.isArray(options) ? options : [];
+				if (this.isUserPicker(field)) {
+					const labels = { ...this.userLabels };
+					for (const opt of list) {
+						labels[opt.id] = opt.label;
+					}
+					this.userLabels = labels;
+				}
+				this.personOptions = { ...this.personOptions, [field.key]: list };
+			} finally {
+				if (this.personLoading === field.key) {
+					this.personLoading = null;
+				}
+			}
+		},
+
+		/**
+		 * Look up the display names of the value a group or user field holds,
+		 * so the open editor shows names rather than ids.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {unknown} value The held value (an id or a list of ids).
+		 * @return {Promise<void>}
+		 */
+		async resolvePersonLabels(field, value) {
+			const ids = (Array.isArray(value) ? value : [value])
+				.filter((v) => typeof v === 'string' && v !== '');
+			if (this.isGroupPicker(field)) {
+				await Promise.all(ids.map((gid) => loadGroupDisplayName(gid)));
+				return
+			}
+			const unknown = ids.filter((uid) => !this.userLabels[uid]);
+			const options = await Promise.all(unknown.map((uid) => resolveNextcloudUser(uid)));
+			if (options.length > 0) {
+				const labels = { ...this.userLabels };
+				for (const opt of options) {
+					if (opt && opt.id) {
+						labels[opt.id] = opt.label || opt.id;
+					}
+				}
+				this.userLabels = labels;
+			}
+		},
+
+		/**
+		 * The selected option(s) of a group or user picker.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {object|object[]|null}
+		 */
+		personSelected(field) {
+			const toOption = (id) => {
+				const label = this.personLabel(field, id);
+				return { id, label, displayName: label }
+			};
+			const v = this.editData[field.key];
+			if (this.isPersonMultiple(field)) {
+				return (Array.isArray(v) ? v : [])
+					.filter((id) => typeof id === 'string' && id !== '')
+					.map(toOption)
+			}
+			return (typeof v === 'string' && v !== '') ? toOption(v) : null
+		},
+
+		/**
+		 * Store a group or user choice as the id (or list of ids).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {object|object[]|null} selected The chosen option(s).
+		 */
+		onPersonChange(field, selected) {
+			if (this.isPersonMultiple(field)) {
+				const ids = (Array.isArray(selected) ? selected : [])
+					.map((opt) => (opt && typeof opt === 'object' ? opt.id : opt))
+					.filter((id) => typeof id === 'string' && id !== '');
+				this.updateField(field.key, ids);
+				return
+			}
+			if (selected && this.isUserPicker(field) && selected.id) {
+				this.userLabels = { ...this.userLabels, [selected.id]: selected.label || selected.id };
+			}
+			this.updateField(field.key, selected && selected.id ? selected.id : null);
+		},
+
 		onSelectChange(field, option) {
 			this.updateField(field.key, option ? option.id : null);
 		},