@conduction/nextcloud-vue 2.103.0 → 2.105.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1267,7 +1267,7 @@ import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { setReadState } from '../../utils/recordInteractions.js'
 import { slotRenders } from '../../utils/slotContent.js'
-import { evaluateVisibleWhen, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
+import { evaluateVisibleWhen, isLocallyDecidableVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import {
 	isCardWidgetDef,
 	isContentOnlyWidgetDef,
@@ -2567,6 +2567,22 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A field path whose value picks the tabs of the page's `tabs` widgets
+		 * and their order for this record (manifest `config.tabsFrom`), read
+		 * like a `visibleWhen` field: `@context.caseType.tabs` reads the list a
+		 * case type keeps. A non-empty list of tab ids (a tab's `id`, else its
+		 * `widgetId`, or the string entry itself) keeps those tabs in that
+		 * order and leaves the rest out. Any other value keeps the declared
+		 * tabs. Edit mode shows them all.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 */
+		tabsFrom: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -2582,6 +2598,22 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * A field path whose value picks the side column and its order for
+		 * this record (manifest `config.sideColumnFrom`), read like a
+		 * `visibleWhen` field: `@context.caseType.sideCards` reads the list a
+		 * case type keeps. A non-empty list of ids keeps those `sideColumn`
+		 * entries, in that order, and leaves the rest out; each still follows
+		 * its own `visibleWhen`. Any other value keeps `sideColumn` as
+		 * declared, so a record whose list is empty changes nothing.
+		 *
+		 * @spec openspec/changes/detail-side-column-from/specs/detail-page/spec.md#requirement-a-record-can-pick-the-side-column-and-its-order
+		 */
+		sideColumnFrom: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Draw the header as a card (manifest `config.headerCard: true`): the
 		 * pills, the title and the actions on the page's surface colour inside
@@ -3492,7 +3524,7 @@ export default {
 		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
 		 */
 		sideColumnWidgets() {
-			const resolved = this.declaredSideWidgets.filter((widget) => this.sideWidgetVisible(widget))
+			const resolved = this.pickedSideWidgets.filter((widget) => this.sideWidgetVisible(widget))
 			if (!this.isBoard) {
 				return resolved
 			}
@@ -3504,6 +3536,28 @@ export default {
 				.map(({ widget }) => widget)
 		},
 
+		/**
+		 * The side column's definitions as the record picks them
+		 * (`sideColumnFrom`): the ids it lists, in its order, or every
+		 * declared entry when it lists none. Edit mode shows them all.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/detail-side-column-from/specs/detail-page/spec.md#requirement-a-record-can-pick-the-side-column-and-its-order
+		 */
+		pickedSideWidgets() {
+			const declared = this.declaredSideWidgets
+			if (!this.sideColumnFrom || this.editingBody || !this.widgetVisibilityData) {
+				return declared
+			}
+			const ids = readVisibleWhenPath(this.widgetVisibilityData, this.sideColumnFrom)
+			if (!Array.isArray(ids) || ids.length === 0) {
+				return declared
+			}
+			return ids
+				.map((id) => declared.find((widget) => widget.id === id) || null)
+				.filter(Boolean)
+		},
+
 		/**
 		 * The side column's entries resolved to definitions, before any
 		 * `visibleWhen` is read: a string names a widget declared in
@@ -4513,7 +4567,7 @@ export default {
 		 */
 		bodyGridWidgets() {
 			if (this.hasGridLayout) {
-				return this.widgets
+				return this.pickTabs(this.widgets)
 			}
 			if (this.shouldRenderAutoBody) {
 				return this.autoBodyWidgets || []
@@ -4521,6 +4575,21 @@ export default {
 			return []
 		},
 
+		/**
+		 * The tab ids `tabsFrom` reads off this record, or null when it reads
+		 * no non-empty list (or the body is being edited).
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @return {Array<string>|null}
+		 */
+		pickedTabIds() {
+			if (!this.tabsFrom || this.editingBody || !this.widgetVisibilityData) {
+				return null
+			}
+			const ids = readVisibleWhenPath(this.widgetVisibilityData, this.tabsFrom)
+			return Array.isArray(ids) && ids.length > 0 ? ids.map((id) => String(id)) : null
+		},
+
 		/**
 		 * Whether the body renders as an adjustable widget grid (vs. the
 		 * hand-authored default slot). True for explicit grid pages and for the
@@ -4939,6 +5008,33 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The widget definitions with each `tabs` widget's tabs narrowed and
+		 * ordered by `pickedTabIds`; the definitions as given without a pick.
+		 * A new definition is returned for a changed widget; the declared one
+		 * is never mutated.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @param {Array<object>} widgets The widget definitions.
+		 * @return {Array<object>}
+		 */
+		pickTabs(widgets) {
+			const ids = this.pickedTabIds
+			if (!ids || !Array.isArray(widgets)) {
+				return widgets
+			}
+			const idOf = (tab) => String(typeof tab === 'string' ? tab : (tab && (tab.id ?? tab.widgetId)) ?? '')
+			return widgets.map((widget) => {
+				if (!widget || widget.type !== 'tabs' || !Array.isArray(widget.content?.tabs)) {
+					return widget
+				}
+				const tabs = ids
+					.map((id) => widget.content.tabs.find((tab) => idOf(tab) === id))
+					.filter(Boolean)
+				return tabs.length > 0 ? { ...widget, content: { ...widget.content, tabs } } : widget
+			})
+		},
+
 		/**
 		 * The tag after an admin-only entry in the board look ("beheerder",
 		 * DqZaakMeer), or null for any other entry or look. It is drawn by

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -460,7 +460,7 @@ export default {
 		 * @return {object}
 		 */
 		boardOptions() {
-			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton']
+			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton', 'actionsMenu']
 			const options = {}
 			for (const key of keys) {
 				if (this.board && this.board[key] !== undefined && this.board[key] !== null) {

package/src/components/CnFeaturesBoard/CnFeaturesBoard.vue

@@ -36,7 +36,7 @@
 						{{ t('nextcloud-vue', 'Suggest feature') }}
 					</NcButton>
 					<NcActions
-						v-if="!tabs"
+						v-if="!tabs && actionsMenu"
 						:menuName="t('nextcloud-vue', 'Actions')"
 						:forceName="true"
 						data-testid="cn-features-board-actions">
@@ -85,6 +85,7 @@
 				</button>
 			</div>
 			<NcActions
+				v-if="actionsMenu"
 				:menuName="t('nextcloud-vue', 'Actions')"
 				:forceName="true"
 				class="cn-features-board__tab-actions"
@@ -375,6 +376,8 @@ export default {
 
 		/** Show the Features and Roadmap folder tabs. */
 		tabs: { type: Boolean, default: true },
+		/** Show the Actions menu (suggest, buildiq, AI skills, support), in the header or the tab row; false draws none. */
+		actionsMenu: { type: Boolean, default: true },
 		/** `chips`: pill buttons with a count. `segmented`: a segmented control without counts. */
 		filter: {
 			type: String,

package/src/components/CnFlowsPage/CnFlowBoard.vue

@@ -36,7 +36,7 @@
 				<NcButton v-if="showRun"
 					:disabled="store.running || !store.flow.id"
 					data-testid="flow-board-run"
-					@click="$emit('run')">
+					@click="onRun">
 					{{ t('nextcloud-vue', 'Run') }}
 				</NcButton>
 				<NcButton v-if="testSubjectReady"
@@ -109,7 +109,7 @@
 					:key="group.app"
 					class="cn-flow-board__palette-group">
 					<h4 class="cn-flow-board__palette-app">
-						{{ group.app }}
+						{{ group.name }}
 					</h4>
 					<ul class="cn-flow-board__palette-list">
 						<li v-for="entry in group.entries" :key="entry.id">
@@ -135,7 +135,7 @@
 					:toolbarActions="false"
 					:addStep="!showPalette"
 					@save="$emit('save')"
-					@run="$emit('run')" />
+					@run="onRun" />
 				<div v-if="store.inRunView"
 					class="cn-flow-board__legend"
 					data-testid="flow-board-legend">
@@ -183,6 +183,15 @@
 					<h3 class="cn-flow-board__card-title" data-testid="flow-board-step-name">
 						{{ stepName }}
 					</h3>
+					<dl v-if="stepSettings.length > 0" class="cn-flow-board__settings">
+						<div v-for="setting in stepSettings"
+							:key="setting.key"
+							class="cn-flow-board__setting"
+							data-testid="flow-board-step-setting">
+							<dt>{{ setting.label }}</dt>
+							<dd>{{ setting.value }}</dd>
+						</div>
+					</dl>
 					<div class="cn-flow-board__step-actions">
 						<NcButton data-testid="flow-board-edit-step" @click="store.editingNodeId = store.selectedNodeId">
 							{{ t('nextcloud-vue', 'Edit step') }}
@@ -212,7 +221,23 @@
 						</NcButton>
 					</div>
 				</template>
-				<CnFlowSidebar v-else embedded />
+				<template v-else-if="showRuns">
+					<NcButton variant="tertiary"
+						class="cn-flow-board__runs-back"
+						data-testid="flow-board-hide-runs"
+						@click="showRuns = false">
+						{{ t('nextcloud-vue', 'Back to the step settings') }}
+					</NcButton>
+					<CnFlowSidebar embedded />
+				</template>
+				<div v-else class="cn-flow-board__inspector-empty" data-testid="flow-board-inspector-empty">
+					<p>{{ t('nextcloud-vue', 'Select a step on the canvas to see its settings.') }}</p>
+					<NcButton variant="secondary"
+						data-testid="flow-board-show-runs"
+						@click="showRuns = true">
+						{{ t('nextcloud-vue', 'Show runs') }}
+					</NcButton>
+				</div>
 			</aside>
 		</div>
 	</div>
@@ -232,6 +257,7 @@ import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import { FLOW_RUN_ACTIVE_STATUSES, useFlowStore } from '../../composables/useFlowStore.js'
 import { formatRelativeDate } from '../../utils/boardDate.js'
 import { flowOutcomeLevels, flowRunDurationMs, flowRunLogLines, flowRunName, formatFlowDuration } from '../../utils/flowRunLog.js'
+import { appDisplayNames } from '../../utils/nextcloudApps.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /**
@@ -278,7 +304,7 @@ export default {
 	},
 
 	data() {
-		return { runTab: 'step', testOpen: false, testRecord: null }
+		return { runTab: 'step', testOpen: false, testRecord: null, appNames: {}, showRuns: false }
 	},
 
 	computed: {
@@ -414,17 +440,25 @@ export default {
 			return { tone: 'success', text: this.t('nextcloud-vue', 'The flow is valid.') }
 		},
 
-		/** @return {Array<object>} The palette grouped by owning app. */
+		/**
+		 * The palette grouped by owning app, each group named by the app's
+		 * display name (its id when Nextcloud names none), the app that owns
+		 * this flow first.
+		 *
+		 * @return {Array<{app: string, name: string, entries: Array<object>}>} The groups.
+		 */
 		paletteGroups() {
 			const groups = {}
 			;(this.store.nodeCatalog || []).forEach((entry) => {
 				const app = String(entry?.app || String(entry?.id || '').split('.')[0] || '')
 				if (!groups[app]) {
-					groups[app] = { app, entries: [] }
+					groups[app] = { app, name: this.appNames[app] || app, entries: [] }
 				}
 				groups[app].entries.push(entry)
 			})
-			return Object.values(groups)
+			const list = Object.values(groups)
+			const host = list.findIndex((group) => group.app === this.app)
+			return host > 0 ? [list[host], ...list.slice(0, host), ...list.slice(host + 1)] : list
 		},
 
 		/** @return {object|null} The run on screen. */
@@ -477,6 +511,37 @@ export default {
 			return entry ? (entry.displayName || entry.id) : String(node?.type || '')
 		},
 
+		/**
+		 * The selected step's settings as its owner declares them in the
+		 * catalogue's `configForm`: label and value, a select's option label,
+		 * Yes or No for a switch. Unset settings are left out.
+		 *
+		 * @return {Array<{key: string, label: string, value: string}>} The settings.
+		 */
+		stepSettings() {
+			const node = this.store.selectedNode
+			const entry = node ? this.store.catalogEntry(node.type) : null
+			const config = (node && node.config) || {}
+			const form = (entry && Array.isArray(entry.configForm)) ? entry.configForm : []
+			return form
+				.filter((field) => field && field.key && config[field.key] !== undefined && config[field.key] !== null && config[field.key] !== '')
+				.map((field) => {
+					const raw = config[field.key]
+					const option = Array.isArray(field.options) ? field.options.find((o) => o && o.value === raw) : null
+					let value
+					if (option) {
+						value = String(option.label ?? option.value)
+					} else if (typeof raw === 'boolean') {
+						value = raw ? this.t('nextcloud-vue', 'Yes') : this.t('nextcloud-vue', 'No')
+					} else if (typeof raw === 'object') {
+						value = JSON.stringify(raw)
+					} else {
+						value = String(raw)
+					}
+					return { key: field.key, label: field.label || field.key, value }
+				})
+		},
+
 		/** @return {string} The selected step's name. */
 		stepName() {
 			const node = this.store.selectedNode
@@ -507,7 +572,36 @@ export default {
 		},
 	},
 
+	watch: {
+		// A selected step takes the panel back from the run history.
+		'store.selectedNodeId': function(id) {
+			if (id) {
+				this.showRuns = false
+			}
+		},
+	},
+
+	async created() {
+		// The palette names its groups by app display name; only the column
+		// palette draws them, so only it reads the names.
+		if (this.palette !== 'column') {
+			return
+		}
+		const { default: axios } = await import('@nextcloud/axios')
+		this.appNames = await appDisplayNames(axios)
+	},
+
 	methods: {
+		/**
+		 * Run the flow, with the run history in the panel to follow it.
+		 *
+		 * @return {void}
+		 */
+		onRun() {
+			this.showRuns = true
+			this.$emit('run')
+		},
+
 		/**
 		 * Run the saved flow once with the picked record as its subject, then
 		 * close the dialog; the run shows on the canvas as any run does.
@@ -822,6 +916,36 @@ export default {
 	text-align: center;
 }
 
+.cn-flow-board__settings {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin: 0;
+}
+
+.cn-flow-board__setting dt {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__setting dd {
+	margin: 2px 0 0;
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+
+.cn-flow-board__inspector-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__inspector-empty p {
+	margin: 0;
+}
+
 .cn-flow-board__step-actions,
 .cn-flow-board__step-footer {
 	display: flex;

package/src/components/CnIndexPage/CnIndexPage.md

@@ -389,6 +389,8 @@ export default {
 | `customComponents` | Object | `null` | Custom-component / handler registry. When set, takes precedence over the injected `cnCustomComponents` from CnAppRoot. Used to resolve `actions[].handler` registry names declared in the manifest (manifest-actions-dispatch). Named handlers resolve out of the v2 `registry` (a `kind: "handler"` entry) FIRST and fall back to this map. |
 | `showViewToggle` | Boolean | `true` | Whether to show the Cards/Table view toggle |
 | `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set. |
+| `search` | Boolean | `true` | `false` draws no inline search in the actions bar, also in the board look, which otherwise draws one on every index page (manifest: `config.search`). Wins over `inlineSearch`. |
+| `appConfig` | Object | `{}` | The app config `@config.<key>` tokens resolve against (manifest: `config.appConfig`), as on the dashboard and detail pages, merged over a config an ancestor provides on `cnAppConfig`. A quick filter's `filter` and its `label` / `activeLabel` take the token: `"Residence @config.municipality"` reads "Residence Zuiddrecht" (board DqContacten); the label is translated first, and a key the config does not hold leaves the token as written. |
 | `showCountWithSearch` | Boolean | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls (only relevant with `inlineSearch`, which otherwise takes the counter's place). Fed from the manifest as `pages[].config.showCountWithSearch`. |
 | `searchInFiles` | Boolean | `false` | "Also search inside files" switch beside the search box (manifest `config.searchInFiles`). On, a search with a term sends `_content_search=true`; rows found through a file show "Found in {file}" (`@self.matchedFile`). State kept in the route as `contentSearch=1`. Emits `content-search`. |
 | `searchPlaceholder` | String | `''` | Placeholder for the inline search field (manifest `config.searchPlaceholder`). |
@@ -878,8 +880,9 @@ The list view (`view-mode="list"`) and standalone sort dropdown add these props:
 | `listConfig` | Object | `{}` | Field mapping for the default list rows (`CnObjectRow`). |
 | `listComponent` | String | `''` | Custom row component, resolved against the v2 `registry` (any kind carrying a `component`) and then the legacy `customComponents` map. |
 | `showSortSelect` | Boolean | `false` | Show a standalone sort dropdown in the actions bar. |
-| `sortSelectOptions` | Array | `[]` | Options `{ value, label }` for the sort dropdown. |
-| `sortSelectValue` | String | `''` | Selected sort dropdown value (controlled). |
+| `sortSelectOptions` | Array | `[]` | Options `{ value, label, order? }` for the sort dropdown. On a self-fetch page a choice orders the list as a header click does (`_order`, kept in the address): by the option's `order`, else its `value` read as an order (`"-createdAt"`, `"priority:desc,title"`). |
+| `sortSelectValue` | String | `''` | Selected sort dropdown value. Empty lets a self-fetch page show the option matching its current order, so a header click that matches an option shows it. |
+| `defaultOrder` | String, Object or Array | `''` | The order a self-fetch page opens on when neither the address nor `sortKeys`/`sortKey` gives one (manifest `config.defaultOrder`): `"-createdAt"`, `"priority:desc,title"`, an `_order` map `{ "priority": "desc" }` or a `[{ key, order }]` list. |
 
 The `#list-item`, `#row-icon`, `#row-badges`, and `#row-actions` slots override the list rows (see [CnObjectList](./cn-object-list.md)). Emits `@sort-change` with the chosen sort value.