@conduction/nextcloud-vue 2.120.0 → 2.122.0

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -37,6 +37,7 @@ import CnRelatedObjectsWidgetForm from '../CnRelatedObjectsWidgetForm/CnRelatedO
 import CnRetentionWidget from '../CnRetentionWidget/CnRetentionWidget.vue'
 import CnSavedViewWidget2 from '../CnSavedViewWidget/CnSavedViewWidget.vue'
 import CnSavedViewWidgetForm2 from '../CnSavedViewWidgetForm/CnSavedViewWidgetForm.vue'
+import CnSchemaRulesWidget from '../CnSchemaRulesWidget/CnSchemaRulesWidget.vue'
 import CnStackedBarWidget from '../CnStackedBarWidget/CnStackedBarWidget.vue'
 import CnStackedBarWidgetForm from '../CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue'
 import CnStagesWidget from '../CnStagesWidget/CnStagesWidget.vue'
@@ -311,6 +312,15 @@ registerDashboardWidget('retention', {
 	ownsTitle: true,
 })
 
+registerDashboardWidget('schema-rules', {
+	renderer: CnSchemaRulesWidget,
+	form: null,
+	defaultContent: { register: '', schema: '', objectId: '' },
+	displayName: 'Schema rules',
+	icon: 'ScaleBalance',
+	surfaces: ['detail-page'],
+})
+
 registerDashboardWidget('plan', {
 	renderer: CnPlanWidget,
 	form: null,

package/src/components/index.js

@@ -464,3 +464,7 @@ export { CnBrandStripe } from './CnBrandStripe/index.js'
 export { CnDuplicateWarning } from './CnDuplicateWarning/index.js'
 export { CnEndpointNotice } from './CnEndpointNotice/index.js'
 export { CnCountTablesReport } from './CnCountTablesReport/index.js'
+export { CnShippedConfigurationSection } from './CnShippedConfigurationSection/index.js'
+export { CnSearchIndexStatus } from './CnSearchIndexStatus/index.js'
+export { CnSchemaRulesWidget } from './CnSchemaRulesWidget/index.js'
+export { CnReadinessChecklist } from './CnReadinessChecklist/index.js'

package/src/composables/indexSources.js

@@ -737,6 +737,14 @@ function readRowsPath(body, path) {
 	return String(path).split('.').reduce((value, key) => (value && typeof value === 'object' ? value[key] : undefined), body)
 }
 
+/**
+ * The `sourceConfig` keys the endpoint source reads itself; every other key
+ * goes along as a query parameter.
+ *
+ * @type {Array<string>}
+ */
+const ENDPOINT_SOURCE_KEYS = ['url', 'rowsPath', 'totalPath', 'searchParam', 'searchFields', 'notePath', 'noteText', 'refusedText']
+
 /**
  * The endpoint source: rows from an app's own endpoint
  * (`entitySource: "endpoint"`), for a list that is not OpenRegister objects,
@@ -759,25 +767,46 @@ function readRowsPath(body, path) {
  * request with that tab's filter, its total read at `sourceConfig.totalPath`
  * (`total` by default), else the number of rows the answer holds.
  *
+ * Three more keys shape what the page says around the rows:
+ * - `searchParam`: the page's search box sends its term as this parameter
+ *   (`sender`), so the endpoint does the searching.
+ * - `notePath` and `noteText`: a value read off the answer (`filterOrder`) and
+ *   the sentence it is said in ("Filters run in this order: {order}", its one
+ *   placeholder taking the value); a list
+ *   is joined with commas. Shown above the rows.
+ * - `refusedText`: what a refused load (403) says when the endpoint gave no
+ *   `message` of its own. A refusal is not an empty list, so the page shows it
+ *   instead of the rows, and a failed load is not one either.
+ * - `searchFields`: the filters the endpoint takes, in the same shape a
+ *   registered source declares them (`{ status: { param: 'status', single:
+ *   true } }`), so a filter strip or sidebar on the page narrows the
+ *   endpoint's query.
+ *
+ * @param {object} [declared] The page's `sourceConfig`, for `searchParam` and `searchFields`.
+ * @param {object} [context] The page's helpers; `translate` is the app's catalogue.
  * @return {object} The source adapter.
  * @spec openspec/changes/index-endpoint-source/specs/index-page/spec.md#requirement-an-index-page-can-list-rows-from-an-app-endpoint
  */
-function endpointSource() {
-	const state = reactive({ rows: [], loading: false })
+function endpointSource(declared = {}, context = {}) {
+	const state = reactive({ rows: [], loading: false, refusal: '', failed: false, note: '' })
+	const translate = typeof context.translate === 'function' ? context.translate : (text) => text
+	const searchParam = typeof declared.searchParam === 'string' && declared.searchParam !== '' ? declared.searchParam : null
+	const searchFields = declared.searchFields && typeof declared.searchFields === 'object' && !Array.isArray(declared.searchFields) ? declared.searchFields : null
 	let seq = 0
 	let warned = false
 
 	/**
-	 * The query parameters for a config: every key but the url and the paths,
-	 * empty values left out, a list joined by commas.
+	 * The query parameters for a config: every key but the source's own
+	 * (`url`, the paths, the texts), empty values left out, a list joined by
+	 * commas.
 	 *
-	 * @param {object} rest The config without `url`, `rowsPath` and `totalPath`.
+	 * @param {object} config The config.
 	 * @return {object} The parameters.
 	 */
-	const paramsOf = (rest) => {
+	const paramsOf = (config) => {
 		const params = {}
-		for (const [key, value] of Object.entries(rest)) {
-			if (value === undefined || value === null || value === '') {
+		for (const [key, value] of Object.entries(config)) {
+			if (ENDPOINT_SOURCE_KEYS.includes(key) || value === undefined || value === null || value === '') {
 				continue
 			}
 			params[key] = Array.isArray(value) ? value.join(',') : (typeof value === 'object' ? JSON.stringify(value) : value)
@@ -797,15 +826,61 @@ function endpointSource() {
 		return typeof url === 'string' && url !== '' && !Object.hasOwn(config, 'entitySource')
 	}
 
+	/**
+	 * The note read off an answer, in the page's sentence.
+	 *
+	 * @param {object} body The response body.
+	 * @param {string} [path] Where the value sits.
+	 * @param {string} [text] The sentence, with one `{placeholder}` where the value goes.
+	 * @return {string} The note, or '' when there is nothing to say.
+	 */
+	const noteOf = (body, path, text) => {
+		if (!path || !body || typeof body !== 'object' || Array.isArray(body)) {
+			return ''
+		}
+		const raw = readRowsPath(body, path)
+		const value = Array.isArray(raw) ? raw.filter((v) => v !== null && v !== undefined && v !== '').join(', ') : (raw === null || raw === undefined ? '' : String(raw))
+		if (value === '') {
+			return ''
+		}
+		return text ? translate(text).replace(/\{\w+\}/, value) : value
+	}
+
+	/**
+	 * The sentence a refused load is said in: the endpoint's own, else the
+	 * page's, else the library's.
+	 *
+	 * @param {object} body The refusal's body.
+	 * @param {string} [text] The page's `refusedText`.
+	 * @return {string} The sentence.
+	 */
+	const refusalOf = (body, text) => {
+		if (body && typeof body.message === 'string' && body.message.trim() !== '') {
+			return body.message
+		}
+		return text ? translate(text) : t('nextcloud-vue', 'You may not read this list.')
+	}
+
 	return {
+		/**
+		 * The parameter the page's search term is sent as, or null when this
+		 * endpoint takes no search.
+		 */
+		searchParam,
+
+		/**
+		 * The page filters this endpoint takes, and the parameter each becomes.
+		 */
+		searchFields,
+
 		/**
 		 * Fetch the rows.
 		 *
 		 * @param {object} config The page's source config with the tab filter merged in.
-		 * @return {Promise<void>} Resolves when loaded; a failed request leaves no rows and rethrows.
+		 * @return {Promise<void>} Resolves when loaded or refused; a failed request leaves no rows and rethrows.
 		 */
 		load: async (config) => {
-			const { url, rowsPath, totalPath, ...rest } = config || {}
+			const { url, rowsPath, notePath, noteText, refusedText } = config || {}
 			const mine = ++seq
 			if (!requestable(config)) {
 				state.rows = []
@@ -817,7 +892,7 @@ function endpointSource() {
 				}
 				return
 			}
-			const params = paramsOf(rest)
+			const params = paramsOf(config)
 			state.loading = true
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
@@ -826,12 +901,22 @@ function endpointSource() {
 				const rows = Array.isArray(body) ? body : readRowsPath(body, rowsPath || 'results')
 				if (mine === seq) {
 					state.rows = Array.isArray(rows) ? rows : []
+					state.refusal = ''
+					state.failed = false
+					state.note = noteOf(body, notePath, noteText)
 				}
 			} catch (error) {
-				if (mine === seq) {
-					state.rows = []
+				if (mine !== seq) {
+					return
+				}
+				state.rows = []
+				state.note = ''
+				const refused = error && error.response && error.response.status === 403
+				state.refusal = refused ? refusalOf(error.response.data, refusedText) : ''
+				state.failed = !refused
+				if (!refused) {
+					throw error
 				}
-				throw error
 			} finally {
 				if (mine === seq) {
 					state.loading = false
@@ -850,9 +935,9 @@ function endpointSource() {
 			if (!requestable(config)) {
 				return Number.NaN
 			}
-			const { url, rowsPath, totalPath, ...rest } = config
+			const { url, rowsPath, totalPath } = config
 			const { default: axios } = await import('@nextcloud/axios')
-			const res = await axios.get(generateUrl(url), { params: paramsOf(rest) })
+			const res = await axios.get(generateUrl(url), { params: paramsOf(config) })
 			const body = res ? res.data : null
 			const total = body && typeof body === 'object' && !Array.isArray(body) ? readRowsPath(body, totalPath || 'total') : undefined
 			if (typeof total === 'number' && Number.isFinite(total)) {
@@ -871,6 +956,21 @@ function endpointSource() {
 		 * @return {boolean} Whether a load is in flight.
 		 */
 		loading: () => state.loading,
+
+		/**
+		 * @return {string} The sentence the last load was refused with, or ''.
+		 */
+		refusal: () => state.refusal,
+
+		/**
+		 * @return {boolean} Whether the last load failed for another reason than a refusal.
+		 */
+		failed: () => state.failed,
+
+		/**
+		 * @return {string} The note read off the last answer, or ''.
+		 */
+		note: () => state.note,
 	}
 }
 

package/src/css/index-page.css

@@ -222,6 +222,13 @@
 	color: var(--color-text-maxcontrast);
 }
 
+/* A note the named source read off its answer, above the rows. */
+.cn-index-page__source-note {
+	margin: 0 0 8px;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
 .cn-index-page__scope-heading {
 	display: flex;
 	flex-direction: column;

package/src/css/look-board-detail.css

@@ -974,3 +974,30 @@
 .cn-look-board .cn-tasks-widget .cn-tasks-widget__cell-actions .button-vue .button-vue__text.button-vue__text {
 	padding-inline: 0;
 }
+
+/* ---- Grouped cards (CnGroupedCardsWidget, DqZaaktype "Fasen en taken") --- */
+/* Groups 14px apart, each padded 14px with a 10px radius and a bold title; a
+   card in a group is padded 9px 12px with the 8px control radius, its title
+   15px. The doubled class outranks the widget's scoped rules.
+   @spec openspec/changes/board-grouped-cards/specs/board-grouped-cards/spec.md#requirement-board-grouped-cards-take-the-boards-group-and-card-shape */
+.cn-look-board .cn-grouped-cards__grid.cn-grouped-cards__grid {
+	gap: 14px;
+}
+
+.cn-look-board .cn-grouped-cards__group.cn-grouped-cards__group {
+	padding: 14px;
+	border-radius: 10px;
+}
+
+.cn-look-board .cn-grouped-cards__group-title.cn-grouped-cards__group-title {
+	font-weight: 700;
+}
+
+.cn-look-board .cn-grouped-cards__item.cn-grouped-cards__item {
+	padding: 9px 12px;
+	border-radius: var(--cn-board-control-radius, 8px);
+}
+
+.cn-look-board .cn-grouped-cards__item-title.cn-grouped-cards__item-title {
+	font-size: 15px;
+}

package/src/css/look-board-index.css

@@ -634,16 +634,36 @@
 	width: 18%;
 }
 
-/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
-   the selection column; the selection and menu columns keep 16px. */
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+/* An index table pads every cell 16px at the sides (DqZaken). The plain-title
+   table (`rowTitle: "plain"`: PqTickets, OcPublicaties) sets its data cells
+   12px apart and its title column 18px from the selection column; the
+   selection and menu columns keep 16px. The title column is left out of the
+   12px rule, which would otherwise outrank the 18px one.
+   @spec openspec/changes/board-table-density/specs/board-table-density/spec.md#requirement-a-board-table-pads-its-cells-as-the-boards-draw-them */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-head--title),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-col--title) {
 	padding-inline: 12px;
 }
 
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
-	padding-inline-start: 18px;
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	padding-inline: 18px 12px;
+}
+
+/* A table that is not an index page's main list sits in a card and is the
+   compact one: 10px 12px in the header, 11px 12px in the cells
+   (DqInstellingen, DqVthInstellingen, DqZaaktype, DqTermijnen). The selection
+   column keeps its 16px, so it stays 60px wide. */
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table th {
+	padding: 10px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table td {
+	padding: 11px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table .cn-table-col--checkbox {
+	padding-inline: 16px;
 }
 
 .cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
@@ -873,12 +893,15 @@
 }
 
 /* A page link is a <button>: Nextcloud's `button` rule sets it bold, the
-   boards set the links at the regular weight and only the current page at 600. */
+   boards set the links at the regular weight and only the current page at 600.
+   The boards size a link's content box at 34px, so a bordered link is 36px
+   and the borderless current page 34px (DqZaken "2", "Volgende", "1").
+   @spec openspec/changes/board-pagination-links/specs/board-pagination-links/spec.md#requirement-a-board-page-link-is-sized-as-the-boards-draw-it */
 .cn-look-board .cn-pagination--board .cn-pagination__board-link {
 	box-sizing: border-box;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
+	min-width: 36px;
+	height: 36px;
+	min-height: 36px;
 	margin: 0;
 	padding: 0 8px;
 	border: 1px solid var(--color-border);
@@ -903,7 +926,10 @@
 }
 
 .cn-look-board .cn-pagination--board .cn-pagination__board-link--current {
-	border-color: var(--color-primary-element);
+	min-width: 34px;
+	height: 34px;
+	min-height: 34px;
+	border: 0;
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-weight: 600;
@@ -1406,3 +1432,73 @@
 	border-bottom: none;
 	padding-block: 2px;
 }
+
+/* ---- The index side panel (CnIndexSidebar, board IndexZijpaneel) -------- */
+/* The panel's title is 20px bold without the schema icon, and its tabs are
+   one row of 40px labels, 14px weight 600 in the soft ink, the open one in
+   the deep primary ink and underlined 2px in the primary colour on the
+   strip's rule (DqFilterBeheren). NcAppSidebar stacks the icon over the
+   label in a 54px tile with a highlight bar; the board does neither. The
+   header rule repeats NcAppSidebar's own chain to outrank it.
+   @spec openspec/changes/board-index-sidebar-tabs/specs/board-index-sidebar-tabs/spec.md#requirement-the-board-index-side-panel-draws-the-boards-header-and-tab-row */
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__desc .app-sidebar-header__name-container .app-sidebar-header__mainname-container h2.app-sidebar-header__mainname {
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.2;
+	min-height: 0;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__figure:has(> .cn-index-sidebar__header-icon) {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__nav[role="tablist"] {
+	justify-content: flex-start;
+	gap: 4px;
+	margin: 0;
+	padding: 14px 12px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__highlight {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] {
+	flex: 0 0 auto;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+	box-sizing: border-box;
+	height: 40px;
+	min-height: 40px;
+	margin: 0 0 -1px;
+	padding: 0 10px;
+	border: 0;
+	border-bottom: 2px solid transparent;
+	border-radius: 0;
+	background: transparent;
+	color: var(--cn-board-text-soft);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] * {
+	font-weight: inherit;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]::after {
+	content: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]:hover {
+	background: transparent;
+	border-bottom-color: var(--color-border-dark);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"][aria-selected="true"] {
+	background: transparent;
+	border-bottom-color: var(--color-primary-element);
+	color: var(--color-primary-element-light-text);
+}

package/src/css/look-board.css

@@ -228,9 +228,15 @@
    look sets 600 on each button, so every NcButton on a board page draws the
    board's weight without a rule per surface. Breadcrumb buttons keep the
    crumb weight.
-   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600 */
+   The boards also draw a button's text at 14px, against Nextcloud's 15px.
+   NcButton reads its size from --default-font-size, so the look sets that
+   variable on the button: a surface that sets its own `font-size` (the next
+   step card's 15px) keeps it.
+   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600
+   @spec openspec/changes/board-control-text/specs/board-control-text/spec.md#requirement-a-board-button-draws-its-text-at-14px */
 .cn-look-board .button-vue:not(.cn-look-nextcloud *):not(.vue-crumb *) {
 	--font-weight-element: 600;
+	--default-font-size: 14px;
 }
 
 /* ---- A button with an icon and a label --------------------------------- */
@@ -393,6 +399,26 @@
 	background: var(--color-background-hover);
 }
 
+/* ---- A secondary button --------------------------------------------------- */
+/* The boards draw every secondary button neutral: the main background, a 1px
+   control border, the main text, the hover ground on hover (DqFlow "Testen
+   met een zaak", DqFunctionaliteiten "Documentatie", DqTaak "Afronden").
+   NcButton draws its secondary from the primary-light variables, on a 2px
+   bottom edge; the look points those variables at the neutral colours on the
+   button itself. The selector weighs (0,3,0): it outranks NcButton's border
+   (0,2,0), and a surface rule of the same weight later in the cascade (a
+   dialog's cancel) still decides for its surface.
+   @spec openspec/changes/board-secondary-neutral/specs/board-secondary-neutral/spec.md#requirement-a-board-secondary-button-is-neutral */
+.cn-look-board .button-vue.button-vue--secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)),
+.cn-look-board .button-vue.button-vue--vue-secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--color-primary-element-light: var(--color-main-background);
+	--color-primary-element-light-hover: var(--color-background-hover);
+	--color-primary-element-light-text: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--cn-board-control-border);
+	color: var(--color-main-text);
+}
+
 /* ---- Header action buttons (CnActionButtons) ----------------------------- */
 /* The board draws a page's secondary actions as neutral 40px buttons: the
    main background, a grey border, the main text at 600 (DqZaak "Bericht",

package/src/index.js

@@ -275,6 +275,7 @@ export {
 	CnQuicklinksWidget,
 	CnQuicklinksWidgetForm,
 	CnRadioCardsWidget,
+	CnReadinessChecklist,
 	CnRecordListWidget,
 	CnRedactionEditor,
 	CnReferencePreview,
@@ -304,6 +305,8 @@ export {
 	CnSavedViewWidgetForm,
 	CnSaveViewDialog,
 	CnSchemaFormDialog,
+	CnSchemaRulesWidget,
+	CnSearchIndexStatus,
 	CnSearchPage,
 	CnSearchSelect,
 	CnSectionsWidget,
@@ -315,6 +318,7 @@ export {
 	CnSettingsPage,
 	CnSettingsSection,
 	CnSetupWizard,
+	CnShippedConfigurationSection,
 	CnSignatureCapture,
 	CnSpendAnalyticsWidget,
 	CnSpendAnalyticsWidgetForm,

package/src/utils/libraryWidgetKeys.js

@@ -151,6 +151,7 @@ export const DASHBOARD_CATALOG_WIDGET_KEYS = Object.freeze([
 	'retention',
 	'saved-view',
 	'saved-views',
+	'schema-rules',
 	'sections',
 	'settings-form',
 	'spend-analytics',