@conduction/nextcloud-vue 2.143.0 → 2.145.0

package/src/components/CnObjectPartiesWidget/CnObjectPartiesWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-object-parties" data-testid="cn-object-parties">
+	<div class="cn-object-parties" :class="{ 'cn-object-parties--board': isBoard }" data-testid="cn-object-parties">
 		<div v-if="canAdd" class="cn-object-parties__manage">
 			<NcButton data-testid="cn-object-parties-add" @click="adding = true">
 				<template #icon>
@@ -112,51 +112,89 @@
 						class="cn-object-parties__party"
 						:data-party="party.partyUuid || party.contactUid"
 						data-testid="cn-object-parties-party">
-						<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
-						<span
-							v-if="primary && party.partyUuid === primary"
-							class="cn-status-badge cn-status-badge--primary"
-							data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
-						<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
-						<span
-							v-if="notAccepted(party)"
-							class="cn-status-badge cn-status-badge--warning"
-							data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
-						<span
-							v-for="(line, index) in extraLinesOf(party)"
-							:key="`line-${index}`"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-extra-line">{{ line }}</span>
-						<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
-						<span
-							v-if="representedBy(party)"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
-						<span
-							v-if="correspondenceOf(party)"
-							class="cn-object-parties__muted"
-							:data-party-documents="party.partyUuid || party.contactUid"
-							data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
-						<span
-							v-for="indicator in indicatorsFor(party)"
-							:key="`${party.partyUuid}-${indicator.key}`"
-							class="cn-status-badge cn-status-badge--default"
-							:class="`cn-object-parties__indicator--${indicator.severity}`"
-							:data-effect="indicator.effect"
-							:title="indicator.verdict"
-							data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
-						<NcButton
-							v-if="canRemove && party.partyUuid"
-							class="cn-object-parties__remove"
-							variant="tertiary"
-							:aria-label="removeLabel(party, group)"
-							:title="removeLabel(party, group)"
-							data-testid="cn-object-parties-remove"
-							@click="removing = { party, group }">
-							<template #icon>
-								<TrashCanOutline :size="20" />
-							</template>
-						</NcButton>
+						<!-- The board look draws a party as one ruled row (DqZaakBetrokkenen
+						     "Rollen"): an initials tile, the name over one meta line that
+						     names the role, the pills at the end. -->
+						<template v-if="isBoard">
+							<span class="cn-object-parties__tile" aria-hidden="true">{{ initialsOf(nameOf(party)) }}</span>
+							<span class="cn-object-parties__text">
+								<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+								<span class="cn-object-parties__meta" data-testid="cn-object-parties-meta">{{ boardMetaOf(party, group) }}</span>
+							</span>
+							<span class="cn-object-parties__end">
+								<span
+									v-if="notAccepted(party)"
+									class="cn-status-badge cn-status-badge--warning"
+									data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+								<span
+									v-for="indicator in indicatorsFor(party)"
+									:key="`${party.partyUuid}-${indicator.key}`"
+									class="cn-status-badge cn-status-badge--default"
+									:class="`cn-object-parties__indicator--${indicator.severity}`"
+									:data-effect="indicator.effect"
+									:title="indicator.verdict"
+									data-testid="cn-object-parties-indicator">{{ indicator.label }}</span>
+								<NcButton
+									v-if="canRemove && party.partyUuid"
+									class="cn-object-parties__remove"
+									variant="tertiary"
+									:aria-label="removeLabel(party, group)"
+									:title="removeLabel(party, group)"
+									data-testid="cn-object-parties-remove"
+									@click="removing = { party, group }">
+									<template #icon>
+										<TrashCanOutline :size="20" />
+									</template>
+								</NcButton>
+							</span>
+						</template>
+						<template v-else>
+							<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+							<span
+								v-if="primary && party.partyUuid === primary"
+								class="cn-status-badge cn-status-badge--primary"
+								data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
+							<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
+							<span
+								v-if="notAccepted(party)"
+								class="cn-status-badge cn-status-badge--warning"
+								data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+							<span
+								v-for="(line, index) in extraLinesOf(party)"
+								:key="`line-${index}`"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-extra-line">{{ line }}</span>
+							<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
+							<span
+								v-if="representedBy(party)"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
+							<span
+								v-if="correspondenceOf(party)"
+								class="cn-object-parties__muted"
+								:data-party-documents="party.partyUuid || party.contactUid"
+								data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
+							<span
+								v-for="indicator in indicatorsFor(party)"
+								:key="`${party.partyUuid}-${indicator.key}`"
+								class="cn-status-badge cn-status-badge--default"
+								:class="`cn-object-parties__indicator--${indicator.severity}`"
+								:data-effect="indicator.effect"
+								:title="indicator.verdict"
+								data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
+							<NcButton
+								v-if="canRemove && party.partyUuid"
+								class="cn-object-parties__remove"
+								variant="tertiary"
+								:aria-label="removeLabel(party, group)"
+								:title="removeLabel(party, group)"
+								data-testid="cn-object-parties-remove"
+								@click="removing = { party, group }">
+								<template #icon>
+									<TrashCanOutline :size="20" />
+								</template>
+							</NcButton>
+						</template>
 					</li>
 				</ul>
 			</section>
@@ -200,6 +238,7 @@ import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnPartyAddDialog from '../../dialogs/CnPartyAddDialog.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import innerHeading from '../../mixins/innerHeading.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { initialsOf } from '../../utils/initials.js'
@@ -287,6 +326,7 @@ export default {
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -347,6 +387,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws one ruled row per party. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/** @return {Array<object>} The role groups, primary first. */
 		groups() {
 			return rolesInOrder(this.listing, this.translatedMap(this.content?.roleLabels))
@@ -916,6 +961,29 @@ export default {
 		 * @param {object} party The listing row.
 		 * @return {Array<object>}
 		 */
+		/**
+		 * The board row's meta line: the primary mark, the role, the kind,
+		 * whom the party represents, its extra lines, e-mail and documents,
+		 * separated by middots.
+		 *
+		 * @param {object} party The party.
+		 * @param {object} group Its role group.
+		 * @return {string}
+		 */
+		boardMetaOf(party, group) {
+			const parts = []
+			if (this.primary && party.partyUuid === this.primary) {
+				parts.push(this.label('primary'))
+			}
+			parts.push(group.label, this.kindOf(party))
+			const represented = this.representedBy(party)
+			if (represented) {
+				parts.push(`${this.label('representedBy')}: ${represented}`)
+			}
+			parts.push(...this.extraLinesOf(party), party.email, this.correspondenceOf(party))
+			return parts.filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
 		indicatorsFor(party) {
 			const record = this.partyRecords[party.partyUuid]
 			if (!record) {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -53,15 +53,37 @@
 						scope="col"
 						:aria-sort="col.sortable ? sortStateOf(col.key) : undefined"
 						:class="{ 'cn-record-list__cell--end': col.align === 'end' }">
-						<button
-							v-if="col.sortable"
-							type="button"
-							class="cn-record-list__sort"
-							:data-testid="`cn-record-list-sort-${col.key}`"
-							@click="toggleTableSort(col.key)">
-							{{ col.label }}
-							<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
-						</button>
+						<span v-if="col.sortable || tableFilterable" class="cn-record-list__head">
+							<button
+								v-if="col.sortable"
+								type="button"
+								class="cn-record-list__sort"
+								:data-testid="`cn-record-list-sort-${col.key}`"
+								@click="toggleTableSort(col.key)">
+								{{ col.label }}
+								<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
+							</button>
+							<template v-else>
+								{{ col.label }}
+							</template>
+							<!-- `content.filterable`: the head offers the values the column holds and keeps the rows with a chosen one. -->
+							<NcActions
+								v-if="tableFilterable"
+								class="cn-record-list__head-filter"
+								:aria-label="filterLabelOf(col.label)"
+								:data-testid="`cn-record-list-filter-${col.key}`">
+								<template #icon>
+									<FilterOutline :size="14" />
+								</template>
+								<NcActionCheckbox
+									v-for="option in tableFilterOptions(col.key)"
+									:key="option"
+									:modelValue="(tableFilters[col.key] || []).includes(option)"
+									@update:modelValue="toggleTableFilter(col.key, option)">
+									{{ option }}
+								</NcActionCheckbox>
+							</NcActions>
+						</span>
 						<template v-else>
 							{{ col.label }}
 						</template>
@@ -550,10 +572,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnRecordNoteRows from './CnRecordNoteRows.vue'
@@ -649,7 +672,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon },
+	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -714,6 +737,8 @@ export default {
 		 * without a value.
 		 * `density: "compact"` draws the rows 10px above and below, at least
 		 * 56px tall, with the title at 500 (DqProcesanalyse).
+		 * On `cards` it draws the small framed card: 12px 14px in, the title
+		 * 15px/700 with the pill at its end (DqInspectie).
 		 * `density: "stacked"` stands the rows 10px apart with no rule and no
 		 * row padding (DqDagAfsluiten "Morgen eerst").
 		 * In `rows`, `text` is a line under the meta line ("12 dagen stil"),
@@ -809,6 +834,8 @@ export default {
 		return {
 			/** The reader's sort of a `table`: the column key and `ascending` or `descending`. */
 			tableSort: { key: '', dir: '' },
+			/** The reader's head filters of a `table`: `{ [columnKey]: cellTexts[] }`. */
+			tableFilters: {},
 			rows: [],
 			/** The `aggregates` figures per row id: `{ [rowId]: { [key]: value } }`. */
 			aggregateValues: {},
@@ -1183,7 +1210,16 @@ export default {
 			const isTemplate = (value) => typeof value === 'string' || (Array.isArray(value) && value.length > 0 && value.every((entry) => typeof entry === 'string'))
 			return columns
 				.filter((col) => col && typeof col === 'object' && isTemplate(col.value))
-				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '' }))
+				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '', sortable: col.sortable === true || this.content?.sortable === true }))
+		},
+
+		/**
+		 * Whether the `table` heads filter (`content.filterable`).
+		 *
+		 * @return {boolean}
+		 */
+		tableFilterable() {
+			return this.content?.filterable === true
 		},
 
 		/**
@@ -1193,8 +1229,27 @@ export default {
 		 * @spec openspec/changes/record-list-table/specs/record-list-table/spec.md#requirement-a-record-list-can-draw-its-rows-as-a-small-table
 		 */
 		tableRows() {
+			const rows = this.tableAllRows.filter((row) => Object.entries(this.tableFilters).every(([key, values]) => {
+				const index = this.tableColumns.findIndex((col) => col.key === key)
+				return values.length === 0 || index < 0 || values.includes(row.cells[index].text)
+			}))
+			const { key, dir } = this.tableSort
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0 || !dir) {
+				return rows
+			}
+			const sign = dir === 'descending' ? -1 : 1
+			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
+		},
+
+		/**
+		 * Every `table` row, before the reader's head filters and sort.
+		 *
+		 * @return {Array<object>} `{ key, cells: [{ key, text, align, alert }] }`.
+		 */
+		tableAllRows() {
 			const indentPath = this.content?.indentPath
-			const rows = this.items.map((item) => ({
+			return this.items.map((item) => ({
 				key: item.key,
 				row: item.row,
 				rowActions: this.rowActions.length > 0 ? this.rowActionsOf(item.row) : [],
@@ -1215,13 +1270,6 @@ export default {
 					}
 				}),
 			}))
-			const { key, dir } = this.tableSort
-			const index = this.tableColumns.findIndex((col) => col.key === key)
-			if (index < 0 || !dir) {
-				return rows
-			}
-			const sign = dir === 'descending' ? -1 : 1
-			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
 		},
 
 		/**
@@ -2246,6 +2294,41 @@ export default {
 			this.tableSort = { key, dir }
 		},
 
+		/**
+		 * The values a `table` column's head filter offers: each text the column holds, once.
+		 *
+		 * @param {string} key The column key.
+		 * @return {Array<string>} The texts, in row order.
+		 */
+		tableFilterOptions(key) {
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0) {
+				return []
+			}
+			return [...new Set(this.tableAllRows.map((row) => row.cells[index].text).filter((text) => text !== ''))]
+		},
+
+		/**
+		 * Keep or drop one value of a `table` column's head filter.
+		 *
+		 * @param {string} key The column key.
+		 * @param {string} value The cell text.
+		 */
+		toggleTableFilter(key, value) {
+			const current = this.tableFilters[key] || []
+			this.tableFilters = { ...this.tableFilters, [key]: current.includes(value) ? current.filter((v) => v !== value) : [...current, value] }
+		},
+
+		/**
+		 * The accessible name of a column's head filter.
+		 *
+		 * @param {string} label The column label.
+		 * @return {string}
+		 */
+		filterLabelOf(label) {
+			return t('nextcloud-vue', 'Filter by {column}', { column: label })
+		},
+
 		/**
 		 * The rows of a read with `flattenPath` set: each entry of the list at
 		 * that path on a record becomes a row, with the record at `@parent`.
@@ -3232,6 +3315,16 @@ export default {
 	font-size: 10px;
 }
 
+.cn-record-list__head {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+}
+
+.cn-record-list__head-filter {
+	--button-size: 22px;
+}
+
 .cn-record-list__table .cn-record-list__cell--end {
 	padding-inline-start: 12px;
 	text-align: end;
@@ -3383,6 +3476,24 @@ export default {
 	text-decoration: none;
 }
 
+/* `density: "compact"` on cards: the boards' small framed rows (DqInspectie
+   "Molenweg 4" and the outbox): 12px 14px in, the title 15px/700 on an
+   18px line with the pill at its end, the meta 6px under it. */
+.cn-record-list--compact .cn-record-list__card {
+	gap: 6px;
+	padding: 12px 14px;
+}
+
+.cn-record-list--compact .cn-record-list__card-head {
+	align-items: flex-start;
+}
+
+.cn-record-list--compact .cn-record-list__card .cn-record-list__title {
+	font-size: 15px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
 .cn-record-list__card--link:hover,
 .cn-record-list__card--link:focus-visible {
 	border-color: var(--color-border-dark, var(--color-border));

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -85,6 +85,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li v-for="hold in holds" :key="hold.id" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ hold.reason || t('nextcloud-vue', 'Legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'Placed on {date} by {by}', { date: hold.placedDate, by: hold.placedBy }) }}</span>
@@ -92,6 +93,7 @@
 						<CnStatusBadge :label="t('nextcloud-vue', 'Active')" variant="warning" />
 					</li>
 					<li v-if="holds.length === 0" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ t('nextcloud-vue', 'No legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'If an objection or appeal runs, destruction is suspended') }}</span>
@@ -107,6 +109,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li class="cn-retention__row">
+						<span class="cn-retention__mark" aria-hidden="true">ED</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ transfers ? t('nextcloud-vue', 'Goes to the e-Depot') : t('nextcloud-vue', 'Not applicable') }}</span>
 							<span class="cn-retention__muted">{{ transfers ? t('nextcloud-vue', 'After the retention period the record is transferred') : t('nextcloud-vue', 'Only records appraised to keep go to the e-Depot') }}</span>
@@ -643,17 +646,39 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
-	padding: 10px 0;
+	padding: 12px 0;
 	border-top: 1px solid var(--color-border);
 }
 
 .cn-retention__row-text {
 	display: flex;
+	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
 
+/* A round mark before a hold or transfer row: LH (legal hold) on the error
+   tint, ED (e-Depot) on the chip ground (DqZaakArchivering). */
+.cn-retention__mark {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-retention__mark--hold {
+	background: var(--color-error-light, #fcedec);
+	color: var(--color-error-text, #a30000);
+}
+
 .cn-retention__row-title {
 	font-weight: 600;
 }

package/src/components/CnSettingsField/CnSettingsField.vue

@@ -275,6 +275,7 @@
 			type="number"
 			:min="field.min"
 			:max="field.max"
+			:step="numberStep"
 			:modelValue="stringValue"
 			:readonly="field.readOnly"
 			:error="!!error"
@@ -424,6 +425,20 @@ export default {
 			return INPUT_TYPES.includes(this.kind) ? this.kind : 'text'
 		},
 
+		/**
+		 * The number input's step: the field's own, 1 for a whole number, else
+		 * any, so a decimal value (0.8) is not invalid to the browser.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/settings-number-decimal-step/specs/settings-fields/spec.md#requirement-a-number-setting-steps-as-it-is-declared
+		 */
+		numberStep() {
+			if (typeof this.field.step === 'number' || (typeof this.field.step === 'string' && this.field.step !== '')) {
+				return String(this.field.step)
+			}
+			return this.field.integer ? '1' : 'any'
+		},
+
 		/** @return {string} The label. */
 		label() {
 			return String(this.field.label || this.field.key || '')