@conduction/nextcloud-vue 2.56.0-beta.63 → 2.56.0-beta.64

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 44689364 bytes
-sha256: b83f2aba1e645e27b38f5a17226ea51f6df400ee03b80d2aadbda9b350cfc459
+size: 44704290 bytes
+sha256: e14648ce27bae8fed4271ddde5d95e10a1a5616bf123c75c6ae73769d697d1e6

package/dist/nextcloud-vue.css

@@ -28366,35 +28366,35 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-work-queue[data-v-793630f4] {
+.cn-work-queue[data-v-d5bc0a42] {
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
 }
-.cn-work-queue__head[data-v-793630f4],
-.cn-work-queue__group-head[data-v-793630f4] {
+.cn-work-queue__head[data-v-d5bc0a42],
+.cn-work-queue__group-head[data-v-d5bc0a42] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
 }
-.cn-work-queue__title[data-v-793630f4] {
+.cn-work-queue__title[data-v-d5bc0a42] {
 	margin: 0;
 	font-size: 28px;
 	font-weight: 700;
 }
-.cn-work-queue__actions[data-v-793630f4] {
+.cn-work-queue__actions[data-v-d5bc0a42] {
 	display: flex;
 	gap: 8px;
 }
-.cn-work-queue__group[data-v-793630f4] {
+.cn-work-queue__group[data-v-d5bc0a42] {
 	padding: 20px 24px;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	background: var(--color-main-background);
 }
-.cn-work-queue__group-title[data-v-793630f4] {
+.cn-work-queue__group-title[data-v-d5bc0a42] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -28402,33 +28402,33 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-work-queue__count[data-v-793630f4] {
+.cn-work-queue__count[data-v-d5bc0a42] {
 	padding: 0 8px;
 	border-radius: 10px;
 	background: var(--color-background-dark);
 	font-size: 12px;
 	font-weight: 600;
 }
-.cn-work-queue__muted[data-v-793630f4] {
+.cn-work-queue__muted[data-v-d5bc0a42] {
 	margin: 4px 0 8px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-work-queue__items[data-v-793630f4] {
+.cn-work-queue__items[data-v-d5bc0a42] {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-work-queue__item[data-v-793630f4] {
+.cn-work-queue__item[data-v-d5bc0a42] {
 	display: flex;
 	align-items: center;
 	gap: 16px;
 	padding: 12px 0;
 	border-block-end: 1px solid var(--color-border);
 }
-.cn-work-queue__item[data-v-793630f4]:last-child {
+.cn-work-queue__item[data-v-d5bc0a42]:last-child {
 	border-block-end: none;
 }
-.cn-work-queue__avatar[data-v-793630f4] {
+.cn-work-queue__avatar[data-v-d5bc0a42] {
 	display: inline-flex;
 	flex: none;
 	align-items: center;
@@ -28441,24 +28441,24 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 12px;
 	font-weight: 700;
 }
-.cn-work-queue__body[data-v-793630f4] {
+.cn-work-queue__body[data-v-d5bc0a42] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-work-queue__link[data-v-793630f4] {
+.cn-work-queue__link[data-v-d5bc0a42] {
 	color: var(--color-main-text);
 	font-weight: 700;
 	text-decoration: none;
 }
-.cn-work-queue__link[data-v-793630f4]:hover {
+.cn-work-queue__link[data-v-d5bc0a42]:hover {
 	text-decoration: underline;
 }
-.cn-work-queue__item--late .cn-work-queue__link[data-v-793630f4] {
+.cn-work-queue__item--late .cn-work-queue__link[data-v-d5bc0a42] {
 	color: var(--color-error);
 }
-.cn-work-queue__sub[data-v-793630f4] {
+.cn-work-queue__sub[data-v-d5bc0a42] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 12px;
@@ -41817,12 +41817,12 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-action-dialog[data-v-53fea6f0] {
+.cn-action-dialog[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-action-dialog__summary[data-v-53fea6f0] {
+.cn-action-dialog__summary[data-v-0bb28fd1] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -41830,13 +41830,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-action-dialog__summary-text[data-v-53fea6f0] {
+.cn-action-dialog__summary-text[data-v-0bb28fd1] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-action-dialog__badge[data-v-53fea6f0] {
+.cn-action-dialog__badge[data-v-0bb28fd1] {
 	padding: 3px 10px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -41844,25 +41844,25 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-weight: 600;
 	white-space: nowrap;
 }
-.cn-action-dialog__title[data-v-53fea6f0] {
+.cn-action-dialog__title[data-v-0bb28fd1] {
 	margin: 0 0 8px;
 	font-size: 15px;
 	font-weight: 700;
 }
-.cn-action-dialog__facts[data-v-53fea6f0] {
+.cn-action-dialog__facts[data-v-0bb28fd1] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 	gap: 8px 16px;
 	margin: 0;
 }
-.cn-action-dialog__facts dt[data-v-53fea6f0] {
+.cn-action-dialog__facts dt[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-action-dialog__facts dd[data-v-53fea6f0] {
+.cn-action-dialog__facts dd[data-v-0bb28fd1] {
 	margin: 0;
 }
-.cn-action-dialog__checks[data-v-53fea6f0] {
+.cn-action-dialog__checks[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -41870,28 +41870,28 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	padding: 0;
 	list-style: none;
 }
-.cn-action-dialog__check[data-v-53fea6f0] {
+.cn-action-dialog__check[data-v-0bb28fd1] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-action-dialog__check-icon[data-v-53fea6f0] {
+.cn-action-dialog__check-icon[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-action-dialog__check-icon--met[data-v-53fea6f0] {
+.cn-action-dialog__check-icon--met[data-v-0bb28fd1] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-action-dialog__muted[data-v-53fea6f0] {
+.cn-action-dialog__muted[data-v-0bb28fd1] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-action-dialog__field[data-v-53fea6f0] {
+.cn-action-dialog__field[data-v-0bb28fd1] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-action-dialog__error[data-v-53fea6f0] {
+.cn-action-dialog__error[data-v-0bb28fd1] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.63",
+  "version": "2.56.0-beta.64",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionDialog/CnActionDialog.vue

@@ -5,7 +5,7 @@
 <template>
 	<CnDialog
 		:name="text(config.title) || t('nextcloud-vue', 'Confirm')"
-		:eyebrow="text(config.eyebrow)"
+		:eyebrow="eyebrowText"
 		:subtitle="text(config.subtitle)"
 		width="form"
 		:noClose="busy"
@@ -63,6 +63,24 @@
 				</ul>
 			</section>
 
+			<!-- Fields the action asks for, sent beside the reason. -->
+			<div v-for="field in fields"
+				:key="field.field"
+				class="cn-action-dialog__field"
+				:data-testid="`cn-action-dialog-field-${field.field}`">
+				<NcSelect v-if="field.type === 'select'"
+					:modelValue="selectedOption(field)"
+					:options="optionsOf(field)"
+					:inputLabel="text(field.label) || field.field"
+					:clearable="field.required === false"
+					@update:modelValue="(option) => pick(field, option)" />
+				<NcTextField v-else
+					:modelValue="values[field.field] || ''"
+					:type="field.type === 'datetime' ? 'datetime-local' : (field.type === 'date' ? 'date' : 'text')"
+					:label="text(field.label) || field.field"
+					@update:modelValue="(value) => setValue(field.field, value)" />
+			</div>
+
 			<div v-if="config.reason" class="cn-action-dialog__field">
 				<NcTextArea
 					:id="reasonId"
@@ -116,7 +134,7 @@ import axios from '@nextcloud/axios'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcNoteCard, NcTextArea } from '@nextcloud/vue'
+import { NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
@@ -141,7 +159,8 @@ let reasonSeq = 0
  * note and Archive it.
  *
  * `config`:
- * - `title`, `eyebrow`, `subtitle`, `doneText`: texts, through the host translate.
+ * - `title`, `subtitle`, `doneText`: texts, through the host translate;
+ *   `eyebrow` a template filled from the record ("Close off · {identifier}").
  * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
  *   the record (`source` an endpointSource to read it from, else `object`).
  * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template.
@@ -149,8 +168,14 @@ let reasonSeq = 0
  *   `{ id, met, label?, detail? }` read from `source`; `labels[id]` gives an
  *   item's `{ label, detail?, unmetDetail? }`; the ids in `required` must be
  *   met before the action can run. `met: null` reads as unknown.
- * - `permission`: `{ source, allowedPath, reasonPath? }`: the action runs only
- *   while `allowedPath` reads true; `reasonPath` says why not.
+ * - `permission`: `{ source, listPath?, match?, allowedPath, reasonPath? }`:
+ *   the action runs only while `allowedPath` reads true; `reasonPath` says
+ *   why not. With `listPath` the paths read the entry of that list whose
+ *   fields equal `match` (`{ act: "archive" }`).
+ * - `fields`: `[{ field, type?: "text"|"date"|"datetime"|"select", label?,
+ *   required?, options?: [{ value, label, fills? }] }]`: inputs sent beside
+ *   the reason, required by default; a select option's `fills` sets other
+ *   fields that are still empty.
  * - `reason`: `{ label?, hint?, required?, field? }`: a text area; required by
  *   default; sent as `field` (default `reason`).
  * - `note`: `{ variant?, title?, text }`: a read-only note.
@@ -163,7 +188,7 @@ let reasonSeq = 0
 export default {
 	name: 'CnActionDialog',
 
-	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcTextArea },
+	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField },
 
 	inject: {
 		/** The host app's translate (CnAppRoot `cnTranslate`). */
@@ -209,6 +234,7 @@ export default {
 			checklistError: '',
 			allowed: true,
 			reason: '',
+			values: {},
 			busy: false,
 			refusal: '',
 			done: false,
@@ -219,7 +245,21 @@ export default {
 	computed: {
 		/** @return {object} The token context. */
 		tokenCtx() {
-			return { objectId: this.objectId, object: this.record || {} }
+			return { objectId: this.recordId, object: this.record || {} }
+		},
+
+		/**
+		 * The record's id: `objectId`, or the route's `id` when the prop is
+		 * empty or a token the opener could not resolve.
+		 *
+		 * @return {string|number}
+		 */
+		recordId() {
+			const given = this.objectId
+			if (given !== '' && given !== null && given !== undefined && !String(given).startsWith('@')) {
+				return given
+			}
+			return (this.$route && this.$route.params && this.$route.params.id) || ''
 		},
 
 		/** @return {object} The confirm config. */
@@ -305,7 +345,27 @@ export default {
 		 * @return {boolean}
 		 */
 		canConfirm() {
-			return !this.busy && this.allowed && this.requiredMet && (!this.reasonNeeded || this.reason.trim() !== '')
+			return !this.busy && this.allowed && this.requiredMet && this.fieldsFilled && (!this.reasonNeeded || this.reason.trim() !== '')
+		},
+
+		/** @return {string} The eyebrow, filled from the record once it is known. */
+		eyebrowText() {
+			return this.record ? this.fill(this.config.eyebrow) || this.text(this.config.eyebrow) : this.text(this.config.eyebrow)
+		},
+
+		/** @return {Array<object>} The fields with a name. */
+		fields() {
+			return (Array.isArray(this.config.fields) ? this.config.fields : []).filter((f) => f && f.field)
+		},
+
+		/**
+		 * Whether every required field has a value.
+		 *
+		 * @spec openspec/changes/action-dialog-fields-and-acts/specs/action-dialog/spec.md#requirement-an-action-dialog-asks-for-fields-and-reads-a-permission-from-a-list
+		 * @return {boolean}
+		 */
+		fieldsFilled() {
+			return this.fields.every((f) => f.required === false || String(this.values[f.field] ?? '').trim() !== '')
 		},
 	},
 
@@ -380,6 +440,63 @@ export default {
 			}
 		},
 
+		/**
+		 * The entry of a list whose fields equal `match`, or null.
+		 *
+		 * @param {unknown} list The list.
+		 * @param {object} [match] The fields to match.
+		 * @return {object|null}
+		 */
+		matchIn(list, match) {
+			const wanted = Object.entries(match || {})
+			return (Array.isArray(list) ? list : []).find((entry) => entry && wanted.every(([key, value]) => String(entry[key]) === String(value))) || null
+		},
+
+		/**
+		 * A select field's options, labels translated.
+		 *
+		 * @param {object} field The field.
+		 * @return {Array<{id: string, label: string, fills?: object}>}
+		 */
+		optionsOf(field) {
+			return (Array.isArray(field.options) ? field.options : []).map((o) => ({ id: String(o.value), label: this.text(o.label) || String(o.value), fills: o.fills }))
+		},
+
+		/**
+		 * A select field's chosen option.
+		 *
+		 * @param {object} field The field.
+		 * @return {object|null}
+		 */
+		selectedOption(field) {
+			return this.optionsOf(field).find((o) => o.id === String(this.values[field.field] ?? '')) || null
+		},
+
+		/**
+		 * Set a field's value.
+		 *
+		 * @param {string} name The field.
+		 * @param {unknown} value The value.
+		 */
+		setValue(name, value) {
+			this.values = { ...this.values, [name]: value === null || value === undefined ? '' : String(value) }
+		},
+
+		/**
+		 * Choose a select option; its `fills` set the fields still empty.
+		 *
+		 * @param {object} field The select field.
+		 * @param {{id: string, fills?: object}|null} option The option.
+		 */
+		pick(field, option) {
+			this.setValue(field.field, option ? option.id : '')
+			for (const [name, value] of Object.entries((option && option.fills) || {})) {
+				if (String(this.values[name] ?? '').trim() === '') {
+					this.setValue(name, this.text(value) || value)
+				}
+			}
+		},
+
 		/** @return {Promise<void>} */
 		async loadPermission() {
 			const def = this.config.permission
@@ -388,8 +505,9 @@ export default {
 			}
 			try {
 				const data = await this.read(def.source)
-				this.allowed = readPath(data, def.allowedPath || 'allowed') === true
-				this.refusal = this.allowed || !def.reasonPath ? '' : String(readPath(data, def.reasonPath) || '')
+				const entry = def.listPath ? this.matchIn(readPath(data, def.listPath), def.match) : data
+				this.allowed = readPath(entry, def.allowedPath || 'allowed') === true
+				this.refusal = this.allowed || !def.reasonPath ? '' : String(readPath(entry, def.reasonPath) || '')
 			} catch {
 				this.allowed = false
 			}
@@ -420,15 +538,18 @@ export default {
 					if (this.config.reason) {
 						body[this.config.reason.field || 'reason'] = reason
 					}
+					for (const field of this.fields) {
+						body[field.field] = this.values[field.field] ?? ''
+					}
 					const method = String(request.method || 'POST').toLowerCase()
 					await axios[['post', 'put', 'patch', 'delete'].includes(method) ? method : 'post'](/^https?:\/\//i.test(url) ? url : generateUrl(url), body)
 				} else if (this.confirmConfig.action && typeof this.cnDispatchAction === 'function') {
-					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { reason }] })
+					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { ...this.values, reason }] })
 				}
 				this.done = true
 				emit(PAGE_REFRESH, {})
-				/** @event done The action ran. Payload: `{ reason }`. */
-				this.$emit('done', { reason })
+				/** @event done The action ran. Payload: the field values and `reason`. */
+				this.$emit('done', { ...this.values, reason })
 			} catch (failure) {
 				const data = failure && failure.response && failure.response.data
 				this.refusal = String((data && (data.message || data.error)) || t('nextcloud-vue', 'The action could not be completed.'))

package/src/components/CnWorkQueue/CnWorkQueue.vue

@@ -93,6 +93,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
@@ -109,7 +110,8 @@ import { openRowTarget } from '../../utils/linkNavigation.js'
  * not be read is named at the top rather than folded into "nothing is
  * waiting". A group can be hidden until tomorrow, through the server, so the
  * choice follows the reader to another device. dossiq's personal queue is
- * the first; pipelinq's queue has the same shape.
+ * the first; pipelinq's queue has the same shape. It reads again on
+ * `cn:page:refresh`, so work planned or closed in a dialog shows at once.
  *
  * `content`:
  * - `source`: an endpointSource answering `{ groups, hiddenGroups?, unavailable? }`.
@@ -176,9 +178,14 @@ export default {
 	},
 
 	mounted() {
+		subscribe('cn:page:refresh', this.load)
 		this.load()
 	},
 
+	beforeUnmount() {
+		unsubscribe('cn:page:refresh', this.load)
+	},
+
 	methods: {
 		t,
 

package/src/utils/actionsDispatcher.js

@@ -857,7 +857,10 @@ export function dispatchAction(action, context = {}) {
 				return
 			}
 
-			context.openModal(target, action.props ?? {})
+			// A prop that is exactly a token (`"objectId": "@objectId"`) resolves
+			// against the page's object; one the page cannot answer stays as written.
+			const props = context.tokenCtx ? resolveDeepTokens(action.props ?? {}, context.tokenCtx) : (action.props ?? {})
+			context.openModal(target, props)
 			break
 		}