@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnFilesBrowser/openRegisterSource.js

@@ -0,0 +1,248 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * A data source for CnFilesBrowser that reads and writes one OpenRegister
+ * object's folder through OpenRegister's own files API, not WebDAV.
+ *
+ * Why: an object's files live in the `openregister` account's home, outside
+ * every person's Files app, so a reader has no WebDAV path to them. Every call
+ * here goes through the object's access rule on the server, as the signed-in
+ * person: a listing needs read on the object, a change needs update. Nothing
+ * is shared to make the folder visible.
+ *
+ * Paths are relative to the object folder and written with a leading slash
+ * (`/`, `/Bijlagen`), the same shape the WebDAV browser uses for its own
+ * paths, so crumbs and navigation work unchanged.
+ *
+ * @spec openspec/changes/files-browser-openregister-source/specs/files-browser/spec.md
+ */
+import axios from '@nextcloud/axios'
+import { FileType } from '@nextcloud/files'
+import { generateUrl } from '@nextcloud/router'
+
+/**
+ * A browser path (`/a/b`) as the API's relative path (`a/b`).
+ *
+ * @param {string} path The browser path.
+ * @return {string} The relative path, empty for the root.
+ */
+export function toApiPath(path) {
+	return String(path || '').replace(/^\/+|\/+$/g, '')
+}
+
+/**
+ * One API listing entry as a row the browser can render and sort.
+ *
+ * The shape follows what the browser reads off an `@nextcloud/files` node
+ * (basename, type, mime, size, mtime, fileid, path, source, attributes), so
+ * the table, the sorter and the icons need no second code path.
+ *
+ * @param {object} entry The API entry: `{ id, name, type, mimetype, size, mtime, path }`.
+ * @return {object} The row.
+ */
+export function entryToNode(entry) {
+	const isFolder = entry.type === 'folder'
+	return {
+		source: `openregister:${entry.id}`,
+		fileid: entry.id,
+		basename: entry.name,
+		displayname: entry.name,
+		path: `/${toApiPath(entry.path)}`,
+		type: isFolder ? FileType.Folder : FileType.File,
+		mime: isFolder ? 'httpd/unix-directory' : (entry.mimetype || ''),
+		size: typeof entry.size === 'number' ? entry.size : undefined,
+		mtime: typeof entry.mtime === 'number' ? new Date(entry.mtime * 1000) : undefined,
+		attributes: {},
+	}
+}
+
+/**
+ * The status of a failed request, or null.
+ *
+ * @param {Error} err The error.
+ * @return {number|null} The HTTP status.
+ */
+function statusOf(err) {
+	return err?.response?.status ?? err?.status ?? null
+}
+
+/**
+ * The server's own message on a failed request, or null.
+ *
+ * @param {Error} err The error.
+ * @return {string|null} The message.
+ */
+function messageOf(err) {
+	const data = err?.response?.data
+	return (data && typeof data.error === 'string' && data.error !== '') ? data.error : null
+}
+
+/**
+ * Build the OpenRegister source for one object.
+ *
+ * @param {object} options The object.
+ * @param {string} [options.apiBase] OpenRegister's API base, `/apps/openregister/api`.
+ * @param {string} options.register The register slug or id.
+ * @param {string} options.schema The schema slug or id.
+ * @param {string} options.objectId The object's uuid.
+ * @return {object} The source CnFilesBrowser takes as `source`.
+ */
+export function createOpenRegisterSource({ apiBase = '/apps/openregister/api', register, schema, objectId }) {
+	const objectUrl = (suffix) => generateUrl(`${apiBase}/objects/{register}/{schema}/{objectId}${suffix}`, { register, schema, objectId })
+
+	/**
+	 * Re-throw a failed request with its status and the server's message.
+	 *
+	 * @param {Error} err The error.
+	 * @return {never}
+	 */
+	const fail = (err) => {
+		const error = new Error(messageOf(err) || err?.message || 'Request failed')
+		error.status = statusOf(err)
+		throw error
+	}
+
+	return {
+		kind: 'openregister',
+
+		/**
+		 * List a folder.
+		 *
+		 * @param {string} path The browser path.
+		 * @return {Promise<{folder: object, nodes: Array<object>}>} The folder (with `canChange`) and its rows.
+		 */
+		async list(path) {
+			try {
+				const { data } = await axios.get(objectUrl('/folder'), { params: { path: toApiPath(path) } })
+				if (!Array.isArray(data?.entries)) {
+					// Not a folder listing: an OpenRegister without these endpoints.
+					const error = new Error('This OpenRegister has no folder endpoint')
+					error.status = 501
+					throw error
+				}
+				const relative = toApiPath(data?.path ?? path)
+				return {
+					folder: {
+						fileid: data?.folderId ?? null,
+						path: `/${relative}`,
+						basename: relative.split('/').pop() || '',
+						type: FileType.Folder,
+						canChange: data?.canChange === true,
+					},
+					nodes: data.entries.map(entryToNode),
+				}
+			} catch (err) {
+				if (err?.status && !err.response) {
+					throw err
+				}
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Create a folder.
+		 *
+		 * @param {string} path Where, as a browser path.
+		 * @param {string} name The new folder's name.
+		 * @return {Promise<object>} The new folder's row.
+		 */
+		async createFolder(path, name) {
+			try {
+				const { data } = await axios.post(objectUrl('/folder'), { path: toApiPath(path), name })
+				return entryToNode(data)
+			} catch (err) {
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Upload one file into a folder.
+		 *
+		 * @param {string} path The target folder, as a browser path.
+		 * @param {File} file The file.
+		 * @param {(percent: number) => void} [onProgress] Called with 0..100.
+		 * @return {Promise<object>} The stored file's row.
+		 */
+		async upload(path, file, onProgress) {
+			const form = new FormData()
+			form.append('path', toApiPath(path))
+			form.append('files[]', file, file.name)
+			try {
+				const { data } = await axios.post(objectUrl('/folder/upload'), form, {
+					onUploadProgress: (progress) => {
+						if (progress?.total && typeof onProgress === 'function') {
+							onProgress(Math.round((progress.loaded / progress.total) * 100))
+						}
+					},
+				})
+				const stored = Array.isArray(data?.stored) ? data.stored : []
+				if (stored.length === 0) {
+					const error = new Error(data?.rejected?.[0]?.error || 'The upload failed')
+					error.status = 400
+					throw error
+				}
+				return entryToNode(stored[0])
+			} catch (err) {
+				if (err?.status && !err.response) {
+					throw err
+				}
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Rename a file or folder.
+		 *
+		 * @param {object} node The row.
+		 * @param {string} name The new name.
+		 * @return {Promise<object>} The renamed row.
+		 */
+		async rename(node, name) {
+			try {
+				const { data } = await axios.put(objectUrl(`/folder/${encodeURIComponent(node.fileid)}`), { name })
+				return entryToNode(data)
+			} catch (err) {
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Delete a file or folder.
+		 *
+		 * @param {object} node The row.
+		 * @return {Promise<void>}
+		 */
+		async remove(node) {
+			try {
+				await axios.delete(objectUrl(`/folder/${encodeURIComponent(node.fileid)}`))
+			} catch (err) {
+				fail(err)
+			}
+		},
+
+		/**
+		 * Where a file downloads from: the object's own file endpoint, which
+		 * checks read on the object.
+		 *
+		 * @param {object} node The row.
+		 * @return {string|null} The url, or null for a folder.
+		 */
+		downloadUrl(node) {
+			if (!node?.fileid || node.type === FileType.Folder) {
+				return null
+			}
+			return objectUrl(`/files/${encodeURIComponent(node.fileid)}`)
+		},
+
+		/**
+		 * A small preview of an image, through the object's preview endpoint.
+		 *
+		 * @param {object} node The row.
+		 * @return {string} The url.
+		 */
+		previewUrl(node) {
+			return objectUrl(`/files/${encodeURIComponent(node.fileid)}/preview?width=64&height=64`)
+		},
+	}
+}

package/src/components/CnFormDialog/CnFormDialog.md

@@ -113,7 +113,7 @@ export default {
 | `allowDraft` | `false` | Offer a **Save draft** button that stores the record with a draft marker instead of validating it. Inert unless the schema declares `draftField`. |
 | `draftField` | `'isDraft'` | The boolean property that marks a record as a draft. |
 | `draftAppId` | `''` | The app the draft belongs to, for the storage key. |
-| `draftUserId` | `''` | Who is typing, for the storage key. **Pass this on any shared device.** |
+| `draftUserId` | `''` | Who is typing, for the storage key. Empty: the signed-in Nextcloud user, and `anonymous` only when nobody is signed in. |
 
 #### What the draft does and does not do
 
@@ -122,9 +122,15 @@ Restore and Discard; the values go in only when somebody presses Restore. A form
 that filled itself would be indistinguishable from one the server prefilled, and
 somebody would submit last week's answers without knowing they were there.
 
-`draftUserId` is part of the storage key. A shared browser profile at a service
+The user is part of the storage key. A shared browser profile at a service
 desk is the ordinary case in a municipality, and a draft keyed without the user
-hands the next person at the counter what the last one typed. Pass it.
+hands the next person at the counter what the last one typed. Without
+`draftUserId` the dialog uses the signed-in Nextcloud user. A draft stored
+under `anonymous` is removed, never offered, once somebody is signed in.
+
+A draft is written only after a person changes a field, and only while that
+field differs from the value the form opened with. Opening a dialog, or the
+form filling in values by itself, writes nothing and shows no Saving or Saved.
 
 A draft is dropped rather than offered when it is more than seven days old, when
 the record has been saved by somebody else since it was written, or when the

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -186,7 +186,7 @@
 								:error="!!errors[field.key]"
 								:type="field.widget === 'email' ? 'email' : field.widget === 'url' ? 'url' : 'text'"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -208,7 +208,7 @@
 								:error="!!errors[field.key]"
 								type="number"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value !== '' ? Number(value) : null)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -230,7 +230,7 @@
 								v-bind="fieldAria(field)"
 								:value="formData[field.key] || ''"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								rows="4"
 								@input="updateField(field.key, $event.target.value)" />
 							<CnFieldHelper
@@ -652,7 +652,7 @@
 								:modelValue="formData[field.key] != null ? String(formData[field.key]) : ''"
 								:error="!!errors[field.key]"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -787,7 +787,7 @@ import CnPropertySourceField from '../CnPropertySourceField/CnPropertySourceFiel
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import CnSubObjectsField from '../CnSubObjectsField/CnSubObjectsField.vue'
 import { describeRowProblem, useChildRecords } from '../../composables/useChildRecords.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, hasDraftChanges, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { heldFromFailures, splitHeldFiles, uploadHeldFiles } from '../../composables/useHeldFileUpload.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
@@ -1172,16 +1172,16 @@ export default {
 		 * 🔴 THE USER IS PART OF THE DRAFT KEY. A shared browser profile at a
 		 * service desk is the ordinary case in a municipality, and a draft
 		 * keyed without the user hands the next person at the counter what the
-		 * last one typed. A host that passes nothing gets `anonymous`, which
-		 * is correct for a single-user context and wrong for a counter — so
-		 * the prop exists and is documented rather than guessed at.
+		 * last one typed. A host that passes nothing gets the signed-in
+		 * Nextcloud user (`@nextcloud/auth`), and `anonymous` only when
+		 * nobody is signed in.
 		 */
 		draftAppId: {
 			type: String,
 			default: '',
 		},
 
-		/** Who is typing, for the draft key. See `draftAppId`. */
+		/** Who is typing, for the draft key. Empty: the signed-in user. See `draftAppId`. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -1442,10 +1442,20 @@ export default {
 				appId: this.draftAppId,
 				schema: (this.schema?.slug || this.schema?.title || ''),
 				objectId: (this.item?.id || this.item?.uuid || ''),
-				userId: this.draftUserId,
+				userId: this.draftUserOwner,
 			})
 		},
 
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
+		},
+
 		/**
 		 * Whether "Save draft" may be offered.
 		 *
@@ -1757,17 +1767,6 @@ export default {
 		formData: {
 			deep: true,
 			handler(values) {
-				// 🔴 THE FIRST CHANGE IS THE COMPONENT SEEDING THE FORM, NOT
-				// SOMEBODY TYPING. Writing a draft for it stores the empty
-				// form over a real one, and the indicator announces "Saving
-				// draft" about work nobody did — an instrument reporting
-				// activity that did not happen, which is the whole class of
-				// defect this library keeps paying down.
-				if (this.draftSeeded !== true) {
-					this.draftSeeded = true
-					return
-				}
-
 				// Nothing is written while a draft is being offered: the user
 				// has not chosen yet, and overwriting the stored draft with the
 				// empty form they are looking at would destroy the thing they
@@ -1776,6 +1775,19 @@ export default {
 					return
 				}
 
+				// 🔴 ONLY A PERSON'S CHANGE IS WORTH A DRAFT. The form fills
+				// in values by itself after it opens (an input reporting its
+				// value back, normalised dates, defaults, the organisation),
+				// and each of those used to write a draft and say "Saved just
+				// now" on a dialog nobody had touched. A field counts once a
+				// person edited it AND it differs from what the form opened
+				// with, so undoing the edit drops the draft again.
+				const edited = Object.keys(this.touchedFields || {}).filter((key) => this.touchedFields[key])
+				if (!hasDraftChanges(values, this.draftBaseline, edited)) {
+					this.settleUnchangedDraft(this.formDraftKey)
+					return
+				}
+
 				this.scheduleDraftWrite(this.formDraftKey, values)
 			},
 		},
@@ -1940,6 +1952,12 @@ export default {
 		// Silently refilling a form is how somebody submits last week's answers
 		// without noticing they were there, and a form that fills itself is
 		// indistinguishable from one the server prefilled.
+		// A draft stored under `anonymous` was written by a page that did not
+		// know who was typing. Once somebody is signed in it is removed, never
+		// offered: it may be another person's.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey, {
 				objectUpdated: (this.item?.updated || this.item?.['@self']?.updated || ''),
@@ -2298,6 +2316,10 @@ export default {
 				this.runAssignments(null)
 				this.loadProfileDefaults()
 			}
+			// What the form opened with. A draft is written only once a field
+			// a person edited differs from this (see the `formData` watcher).
+			// Not reactive: nothing renders from it.
+			this.draftBaseline = JSON.parse(JSON.stringify(this.formData || {}))
 		},
 
 		/**
@@ -3085,6 +3107,27 @@ export default {
 			return this.showsOuterLabel(field) ? '' : this.errors[field.key]
 		},
 
+		/**
+		 * The placeholder of a text, number or textarea control.
+		 *
+		 * The field's description already shows as the help line under the
+		 * control, so the placeholder stays empty rather than repeat it word
+		 * for word. The help line is the one kept: it is still there after
+		 * somebody typed (a placeholder disappears with the first keystroke),
+		 * it is read out through `aria-describedby`, and in the Nextcloud look
+		 * a placeholder is hidden until the field has focus anyway. While an
+		 * error takes the help line's place, the description returns as the
+		 * placeholder so it is not lost.
+		 *
+		 * @param {object} field The field definition.
+		 * @return {string} The placeholder, or '' when the help line says it.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-field-description-shows-once
+		 */
+		fieldPlaceholder(field) {
+			const description = field.description || ''
+			return this.helperError(field) ? description : ''
+		},
+
 		/**
 		 * The accessibility attributes of a text control. In both looks an invalid
 		 * control is `aria-invalid` and `aria-describedby` lists the error before
@@ -3891,7 +3934,7 @@ export default {
 					const mappedProps = propertiesFromDefinitions(
 						Array.isArray(records) ? records : [],
 						config,
-						{ orderFrom: 1000 + Object.keys(properties).length },
+						{ orderFrom: 1000 + Object.keys(properties).length, create: this.isCreateMode },
 					)
 					Object.assign(properties, mappedProps.properties)
 					required.push(...mappedProps.required)
@@ -4567,6 +4610,11 @@ export default {
 			}
 
 			this.formData = { ...this.formData, ...this.draftOffer.values }
+			// What the person typed last time is their edit now: it counts for
+			// the next draft write and survives the record arriving late.
+			for (const key of Object.keys(this.draftOffer.values)) {
+				this.touchedFields[key] = true
+			}
 			this.draftOffer = null
 		},
 

package/src/components/CnFormPage/CnFormPage.vue

@@ -397,7 +397,7 @@ import CnFormErrorSummary from '../CnFormErrorSummary/CnFormErrorSummary.vue'
 import CnFormField from '../CnFormField/CnFormField.vue'
 import CnStepper from '../CnStepper/CnStepper.vue'
 import { cnRenderFormField } from '../../composables/cnFormFieldRenderer.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { loadCurrentUserProfile } from '../../utils/currentUserProfile.js'
@@ -529,7 +529,7 @@ export default {
 			default: '',
 		},
 
-		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. */
+		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. Empty: the signed-in Nextcloud user. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -949,7 +949,17 @@ export default {
 			if (this.recoverDraft !== true) {
 				return ''
 			}
-			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserId })
+			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserOwner })
+		},
+
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
 		},
 
 		/**
@@ -997,6 +1007,11 @@ export default {
 		this.calcTimers = {}
 		// Offered, never applied: a form that fills itself is indistinguishable
 		// from one the server prefilled.
+		// A draft under `anonymous` may be somebody else's: removed once a
+		// signed-in user is known, never offered.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey)
 		}