@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -26,6 +26,15 @@ function resolveInitialQuickFilterIndex(quickFilters) {
  * @param {Array<object>} filterMaps Already route-resolved filter maps.
  * @return {object} The merged filter (scalar when a key has one value, array when many).
  */
+/**
+ * Rows one board fetch asks for. A board shows every matching row at once,
+ * so it loads far more than a table page (OpenRegister serves up to 1000);
+ * past this the board offers "Load more".
+ *
+ * @type {number}
+ */
+export const BOARD_PAGE_SIZE = 500
+
 /**
  * The sort a quick filter sets while it is active (`sort: { key, order }`, or a
  * list of those for a multi-column order), as sort keys, or null when it sets
@@ -236,7 +245,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 		defaultSortKeys: initialSortKeys,
 		defaultActiveFilters: initialActiveFilters,
 		defaultSearchTerm: initialSearchTerm,
-		defaultPageSize: (props.pagination && props.pagination.limit) || undefined,
+		defaultPageSize: props.viewMode === 'board' ? BOARD_PAGE_SIZE : ((props.pagination && props.pagination.limit) || undefined),
 		defaultVisibleColumns: configuredColumnKeys.length ? configuredColumnKeys : null,
 		// `pages[].config.extend` → OpenRegister's repeated `_extend[]`. A
 		// getter so a reactive change re-scopes the next fetch, matching how

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -158,6 +158,7 @@ import { useFileComments } from '../../composables/useFileComments.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { extractMentionedGroupIds, extractMentionedIds } from '../../utils/mentions.js'
 import { quoteFor, supportsReplies, threadNotes, threadRootId } from '../../utils/noteThreads.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * CnNotesCard — Inline notes widget for detail pages.
@@ -655,7 +656,7 @@ export default {
 				return ''
 			}
 			try {
-				return new Date(dateStr).toLocaleString(undefined, {
+				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/components/CnObjectCalendar/CnObjectCalendar.vue

@@ -95,6 +95,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * CnObjectCalendar — plots objects on a month calendar by a date property.
@@ -210,7 +211,7 @@ export default {
 
 	computed: {
 		monthLabel() {
-			return this.internalDate.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+			return this.internalDate.toLocaleDateString(userLocale(), { month: 'long', year: 'numeric' })
 		},
 
 		prevMonthLabel() {
@@ -460,7 +461,7 @@ export default {
 		 * @return {string}
 		 */
 		dayLabel(day) {
-			const date = this.parseDate(day.iso).toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
+			const date = this.parseDate(day.iso).toLocaleDateString(userLocale(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
 			return day.objects.length === 0 ? date : `${date}, ${t('nextcloud-vue', '{count} records', { count: day.objects.length })}`
 		},
 

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -291,6 +291,14 @@
 									<CnGroupNameCell :gid="gid" />
 								</template>
 							</span>
+							<!-- A Nextcloud user (or list): the display name, the
+							     uid while it loads or when it cannot be found. -->
+							<span
+								v-else-if="isUserPicker(field) && userIdsOf(field).length"
+								class="cn-object-data-widget__users"
+								:title="userIdsOf(field).join(', ')">
+								{{ userIdsOf(field).map((uid) => personLabel(field, uid)).join(', ') }}
+							</span>
 							<img v-else-if="isImageField(field) && rawOf(field)"
 								:src="rawOf(field)"
 								:alt="field.label"
@@ -1132,12 +1140,14 @@ export default {
 				}
 				// Resolve relation display names whenever the object changes.
 				this.resolveRelations()
+				this.resolveUserNames()
 			},
 		},
 
 		schema: {
 			handler() {
 				this.resolveRelations()
+				this.resolveUserNames()
 			},
 		},
 
@@ -1161,6 +1171,7 @@ export default {
 
 	mounted() {
 		this.resolveRelations()
+		this.resolveUserNames()
 		this.publishPanelActions()
 		this.observeCell()
 		this.scheduleFit()
@@ -2189,6 +2200,31 @@ export default {
 			return list.filter((v) => typeof v === 'string' && v !== '')
 		},
 
+		/**
+		 * The uids a user field holds, for the display mode. The same list
+		 * shape a group field holds.
+		 *
+		 * @spec openspec/changes/a-user-field-reads-its-display-name/specs/data-display/spec.md#requirement-a-user-field-shows-the-users-display-name
+		 * @param {object} field Field descriptor.
+		 * @return {string[]}
+		 */
+		userIdsOf(field) {
+			return this.groupIdsOf(field)
+		},
+
+		/**
+		 * Look up the display names of every user field's value, so the read
+		 * mode shows "Thomas Kuiper" rather than `thomas.kuiper`. Each uid is
+		 * asked once per widget.
+		 *
+		 * @spec openspec/changes/a-user-field-reads-its-display-name/specs/data-display/spec.md#requirement-a-user-field-shows-the-users-display-name
+		 * @return {Promise<void>}
+		 */
+		async resolveUserNames() {
+			const fields = (this.resolvedFields || []).filter((field) => this.isUserPicker(field))
+			await Promise.all(fields.map((field) => this.resolvePersonLabels(field, this.rawOf(field))))
+		},
+
 		/**
 		 * The display name of a group id or uid, falling back to the id.
 		 *

package/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue

@@ -55,6 +55,7 @@
 <script>
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { userLocale } from '../../utils/userLocale.js'
 import { CnDetailCard } from '../CnDetailCard/index.js'
 import { CnDetailGrid } from '../CnDetailGrid/index.js'
 
@@ -516,7 +517,7 @@ export default {
 				if (Number.isNaN(date.getTime())) {
 					return String(value)
 				}
-				return date.toLocaleDateString(undefined, {
+				return date.toLocaleDateString(userLocale(), {
 					day: '2-digit',
 					month: '2-digit',
 					year: 'numeric',
@@ -530,11 +531,11 @@ export default {
 					if (Number.isNaN(date.getTime())) {
 						return String(value)
 					}
-					return date.toLocaleDateString(undefined, {
+					return date.toLocaleDateString(userLocale(), {
 						day: '2-digit',
 						month: '2-digit',
 						year: 'numeric',
-					}) + ', ' + date.toLocaleTimeString(undefined, {
+					}) + ', ' + date.toLocaleTimeString(userLocale(), {
 						hour: '2-digit',
 						minute: '2-digit',
 						second: '2-digit',
@@ -579,7 +580,7 @@ export default {
 			if (holder && hasUntil) {
 				return t('nextcloud-vue', 'Locked by {user} until {date}', {
 					user: holder,
-					date: until.toLocaleString(),
+					date: until.toLocaleString(userLocale()),
 				})
 			}
 

package/src/components/CnObjectSidebar/CnAuditTrailTab.vue

@@ -146,6 +146,7 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import { useRestoreVersion } from '../../composables/useRestoreVersion.js'
 import { buildHeaders } from '../../utils/index.js'
 import { isLockedByCurrentUser, isObjectLocked, lockHolder } from '../../utils/objectLock.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnAuditTrailTab',
@@ -426,7 +427,7 @@ export default {
 				return ''
 			}
 			try {
-				return new Date(dateStr).toLocaleString(undefined, {
+				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/components/CnObjectSidebar/CnFlowTasksPanel.vue

@@ -118,6 +118,7 @@ import { taskDeepLink, taskDueLabel } from '../../composables/indexSources.js'
 import { useTaskInboxStore } from '../../composables/useTaskInboxStore.js'
 import { searchGroupSharees } from '../../utils/searchGroupSharees.js'
 import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /** The verbs this panel has a control for, in the order a row shows them. */
 const VERBS = ['claim', 'unclaim', 'reassign', 'complete', 'cancel']
@@ -239,7 +240,7 @@ export default {
 				return label
 			}
 			const d = new Date(task.dueAt)
-			const date = Number.isNaN(d.getTime()) ? String(task.dueAt) : d.toLocaleDateString()
+			const date = Number.isNaN(d.getTime()) ? String(task.dueAt) : d.toLocaleDateString(userLocale())
 			return this.isOverdue(task) ? t('nextcloud-vue', 'Overdue: {date}', { date }) : date
 		},
 

package/src/components/CnObjectSidebar/CnNotesTab.vue

@@ -169,6 +169,7 @@ import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { extractMentionedGroupIds, extractMentionedIds } from '../../utils/mentions.js'
 import { quoteFor, supportsReplies, threadNotes, threadRootId } from '../../utils/noteThreads.js'
 import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnNotesTab',
@@ -595,7 +596,7 @@ export default {
 				return ''
 			}
 			try {
-				return new Date(dateStr).toLocaleString(undefined, {
+				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/components/CnObjectSidebar/CnTasksTab.vue

@@ -145,6 +145,7 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import CnFlowTasksPanel from './CnFlowTasksPanel.vue'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnTasksTab',
@@ -471,7 +472,7 @@ export default {
 				return ''
 			}
 			try {
-				return new Date(dateStr).toLocaleDateString(undefined, {
+				return new Date(dateStr).toLocaleDateString(userLocale(), {
 					day: 'numeric',
 					month: 'short',
 				})

package/src/components/CnPropertySourceField/CnPropertySourceField.vue

@@ -45,6 +45,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcSelect, NcTextField } from '@nextcloud/vue'
 import { isAppInstalled } from '../../utils/appInstalled.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 const BASE = '/apps/integriq/api/property-sources'
 
@@ -207,7 +208,7 @@ export default {
 	methods: {
 		formatTime(iso) {
 			const d = new Date(iso)
-			return Number.isNaN(d.getTime()) ? String(iso) : d.toLocaleString()
+			return Number.isNaN(d.getTime()) ? String(iso) : d.toLocaleString(userLocale())
 		},
 
 		url(path) {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -141,9 +141,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
+import { inject, ref } from 'vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
+import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { actionLink, dispatchAction, interpolateActionTarget } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { ageInDays } from '../../utils/boardDate.js'
@@ -180,7 +182,8 @@ function unwrap(value) {
  * objects filtered on a reference to this record. The source keys are those of
  * `object-list` (`register`, `schema`, `filter` with the `@objectId` /
  * `@object.<field>` / `@workspace.<key>` tokens, `sort`, `limit`, `extend`,
- * `rowRoute`, `pageControls`); `avatar` puts a circle with the initials of a name
+ * `rowRoute`, `pageControls`), or `endpointSource` (an app endpoint whose
+ * payload, after `responsePath`, is the array of rows, as on the object table); `avatar` puts a circle with the initials of a name
  * template before the title; what differs is the drawing: `presentation` is `rows`, `feed`
  * or `inline`, and each line is a template (`"{identifier} · {caseTypeName}"`,
  * `"Termijn {deadline|date}"`).
@@ -213,7 +216,9 @@ export default {
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
 		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
-		 * valueLabels? }`. `valueLabels` maps a field's stored values to the labels
+		 * valueLabels?, endpointSource? }`. `endpointSource` (`{ url, method?,
+		 * params?, responsePath? }`) reads the rows from an app endpoint instead
+		 * of `register` / `schema`. `valueLabels` maps a field's stored values to the labels
 		 * the templates show.
 		 *
 		 * @type {object}
@@ -238,6 +243,28 @@ export default {
 
 	emits: ['header'],
 
+	setup(props) {
+		const objectCtxRaw = inject('cnObjectContext', null)
+		const workspaceRaw = inject('cnWorkspaceContext', null)
+		const appConfigRaw = inject('cnAppConfig', ref({}))
+		const { data, loading, error } = useEndpointSource(
+			() => props.content?.endpointSource || null,
+			{
+				ctx: () => {
+					const injected = unwrap(objectCtxRaw) || {}
+					return {
+						...injected,
+						objectId: props.objectId ?? injected.objectId ?? props.objectData?.id ?? null,
+						object: props.objectData || injected.object || null,
+						workspace: unwrap(workspaceRaw) || {},
+						config: unwrapAppConfig(appConfigRaw) || {},
+					}
+				},
+			},
+		)
+		return { epData: data, epLoading: loading, epError: error }
+	},
+
 	data() {
 		return {
 			rows: [],
@@ -294,6 +321,22 @@ export default {
 			return { config: unwrapAppConfig(this.cnAppConfig) }
 		},
 
+		/**
+		 * Whether the rows come from `endpointSource` rather than OpenRegister.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		endpointActive() {
+			const source = this.content?.endpointSource
+			return Boolean(source && typeof source === 'object' && source.url)
+		},
+
+		/** @return {string} The endpoint read's state, to copy into the list when it changes. */
+		endpointKey() {
+			return this.endpointActive ? JSON.stringify([this.epData, this.epLoading, this.epError]) : ''
+		},
+
 		/** @return {number} The fetch cap. */
 		limit() {
 			const value = Number(this.content?.limit)
@@ -398,6 +441,10 @@ export default {
 		requestKey() {
 			this.fetchRows()
 		},
+
+		endpointKey() {
+			this.fetchRows()
+		},
 	},
 
 	mounted() {
@@ -854,6 +901,23 @@ export default {
 			return { rows, total: typeof head.total === 'number' ? head.total : rows.length }
 		},
 
+		/**
+		 * Copy the endpoint read into the list: its payload must be an array of
+		 * rows (anything else is an empty list), and a failed read is an error.
+		 *
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		takeEndpointRows() {
+			this.rows = Array.isArray(this.epData) ? this.epData : []
+			this.total = this.rows.length
+			this.loading = this.epLoading === true
+			this.error = Boolean(this.epError)
+			this.lenses = {}
+			if (!this.loading) {
+				this.emitHeader()
+			}
+		},
+
 		/**
 		 * Fetch the list. Sends nothing while a required token is unresolved
 		 * or the source is incomplete.
@@ -862,6 +926,10 @@ export default {
 		 */
 		async fetchRows() {
 			const c = this.content || {}
+			if (this.endpointActive) {
+				this.takeEndpointRows()
+				return
+			}
 			if (!c.register || !c.schema || this.waiting) {
 				this.rows = []
 				this.total = 0

package/src/components/CnRegisterMapping/CnRegisterMapping.md

@@ -111,6 +111,10 @@ export default {
 </script>
 ```
 
+## Several groups
+
+With more than one group each group starts closed: its heading is a button that shows the group name and how many of its types are configured ("2/8 configured"), and opens the register select and type list on a click or Enter. A page with several registers is a short card until the administrator opens the group they need.
+
 ## Additional props
 
 | Prop | Type | Default | Description |
@@ -122,5 +126,6 @@ export default {
 | `reimporting` | Boolean | `false` | Disables the reimport button and shows a spinner while reimport is in progress |
 | `saveButtonText` | String | `'Save configuration'` | Label for the save button |
 | `reimportButtonText` | String | `'Re-import configuration'` | Label for the reimport button |
+| `collapseGroups` | Boolean | `null` | Draw each group as a heading button that opens and closes it, with its configured count shown while closed; the groups start closed. `null` does this when there is more than one group, `true` or `false` forces it |
 | `autoMatch` | Boolean | `true` | Automatically match schema titles to type slugs when a register is selected |
 | `labels` | Object | *(see below)* | UI label overrides for all user-visible strings (register, schema, notConfigured, noSchemas, selectRegister, selectSchema, allConfigured, partiallyConfigured) |