@conduction/nextcloud-vue 2.105.0 → 2.106.0

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -164,24 +164,37 @@
 							@selectObject="onSelectObject" />
 					</div>
 				</div>
-				<CnDetailWidgetHost
-					v-else-if="entry.widget"
-					:widget="entry.widget"
-					chrome="bare"
-					:availableWidgets="availableWidgets"
-					:objectId="objectId"
-					:object="objectData"
-					:objectType="objectType"
-					:schemaObject="schemaObject"
-					:register="register"
-					:schema="schema"
-					:store="store"
-					:surface="surface"
-					:integrationContext="integrationContext"
-					:cnRegistry="cnRegistry"
-					@geoSaved="onGeoSaved"
-					@openIntegration="onOpenIntegration"
-					@selectObject="onSelectObject" />
+				<template v-else-if="entry.widget">
+					<!-- A single widget with a title of its own heads its panel
+					     (DqZaakDocumenten); a title the tab already shows is not
+					     repeated. -->
+					<div
+						v-if="panelHeading(entry)"
+						class="cn-tabs-widget__panel-heading"
+						data-testid="cn-tabs-widget-panel-heading">
+						<h2 class="cn-tabs-widget__panel-title">
+							{{ panelHeading(entry).title }}
+						</h2>
+						<span v-if="panelHeading(entry).subtitle" class="cn-tabs-widget__panel-subtitle">{{ panelHeading(entry).subtitle }}</span>
+					</div>
+					<CnDetailWidgetHost
+						:widget="entry.widget"
+						chrome="bare"
+						:availableWidgets="availableWidgets"
+						:objectId="objectId"
+						:object="objectData"
+						:objectType="objectType"
+						:schemaObject="schemaObject"
+						:register="register"
+						:schema="schema"
+						:store="store"
+						:surface="surface"
+						:integrationContext="integrationContext"
+						:cnRegistry="cnRegistry"
+						@geoSaved="onGeoSaved"
+						@openIntegration="onOpenIntegration"
+						@selectObject="onSelectObject" />
+				</template>
 				<CnEmptyContent v-else :name="missingLabel(entry)" />
 			</CnTab>
 		</CnTabs>
@@ -361,6 +374,11 @@ export default {
 		 * label written in the manifest reads in the user's language.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * CnDetailPage's report of the open body tab, so its side column can
+		 * follow the tab (a side entry's `tabs`). Null on any other page.
+		 */
+		cnDetailReportTab: { default: null },
 	},
 
 	props: {
@@ -804,6 +822,16 @@ export default {
 			this.activeKey = this.resolvedTabs[index]?.key || ''
 		},
 
+		// Tell the detail page which tab is open (side cards per tab).
+		'activeTab.id': {
+			immediate: true,
+			handler(id) {
+				if (typeof this.cnDetailReportTab === 'function') {
+					this.cnDetailReportTab(id || '')
+				}
+			},
+		},
+
 		// A tab appeared or went. Keep the same tab active; when it is the active
 		// tab that went, the first visible one takes over and the hash follows.
 		visibleKeys() {
@@ -996,6 +1024,33 @@ export default {
 			return [tab?.widgetId]
 		},
 
+		/**
+		 * The title row a single widget's panel draws: the widget's own title
+		 * and its description, through the app's translate. None when the
+		 * widget has no title or no description, or the tab already shows the
+		 * title: a title alone names what the tab already names, so the
+		 * widget stays bare in its panel.
+		 *
+		 * @param {object} entry A resolved tab.
+		 * @return {{title: string, subtitle: string}|null} The heading, or null.
+		 */
+		panelHeading(entry) {
+			const widget = entry && entry.widget
+			const raw = widgetTitleOf(widget)
+			if (!raw) {
+				return null
+			}
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			const title = translate(raw)
+			if (title === entry.label) {
+				return null
+			}
+			if (!widget || typeof widget.description !== 'string' || widget.description === '') {
+				return null
+			}
+			return { title, subtitle: translate(widget.description) }
+		},
+
 		/**
 		 * The label a tab shows: the authored `label`, else (board look) History
 		 * for the activity widget, else the child widget's title, else its id.
@@ -1254,6 +1309,24 @@ export default {
 
 <style scoped>
 /* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
+.cn-tabs-widget__panel-heading {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 16px;
+}
+
+.cn-tabs-widget__panel-title {
+	margin: 0;
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-tabs-widget__panel-subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-tabs-widget__stack {
 	display: flex;
 	flex-direction: column;

package/src/components/CnTeamWorkloadWidget/CnTeamWorkloadWidget.md

@@ -0,0 +1,11 @@
+The team today from an app's workload endpoint, with each person's Nextcloud user status.
+
+```vue
+<CnTeamWorkloadWidget
+  :content="{
+    source: { url: '/apps/dossiq/api/work-queue/workload', responsePath: 'handlers', userField: 'handler', countField: 'openCaseCount' },
+    capacity: 12,
+  }" />
+```
+
+Props: `content` holds the source, the capacity and the labels.

package/src/components/CnTeamWorkloadWidget/CnTeamWorkloadWidget.vue

@@ -0,0 +1,382 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div class="cn-team-workload" data-testid="cn-team-workload">
+		<p v-if="loading && members.length === 0" class="cn-team-workload__state-line" role="status">
+			{{ loadingLabel }}
+		</p>
+		<p v-else-if="members.length === 0" class="cn-team-workload__state-line">
+			{{ emptyLabel }}
+		</p>
+		<ul v-else class="cn-team-workload__list">
+			<li
+				v-for="member in members"
+				:key="member.id"
+				class="cn-team-workload__member"
+				data-testid="cn-team-workload-member">
+				<div class="cn-team-workload__row">
+					<span class="cn-team-workload__avatar" aria-hidden="true">{{ member.initials }}</span>
+					<span class="cn-team-workload__who">
+						<strong class="cn-team-workload__name">{{ member.name }}</strong>
+						<span
+							class="cn-team-workload__state"
+							:class="{ 'cn-team-workload__state--away': !member.available }">{{ member.line }}</span>
+					</span>
+					<span class="cn-team-workload__count">{{ member.countText }}</span>
+				</div>
+				<span class="cn-team-workload__bar" aria-hidden="true">
+					<span
+						class="cn-team-workload__bar-fill"
+						:class="{ 'cn-team-workload__bar-fill--hot': member.hot }"
+						:style="{ width: member.percent + '%' }" />
+				</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { fetchStatuses } from '../../utils/nextcloudDirectory.js'
+import { readPath } from '../../utils/readPath.js'
+import { userLocale } from '../../utils/userLocale.js'
+
+/** The share of the capacity from which a load bar reads as full. */
+const HOT_PERCENT = 90
+
+/**
+ * CnTeamWorkloadWidget: the `team-workload` widget ("Team vandaag" on board
+ * DqTeamwachtrij). Each person of the team with their initials, name, an
+ * availability line, their open count and a load bar; the card's header
+ * note says how many are present ("4 of 5 present").
+ *
+ * The counts come from the app (`content.source`, an endpoint that answers a
+ * row per person). The availability comes from Nextcloud's user status, read
+ * on the client through the OCS user status API: the person's own message
+ * with the time it ends ("In a meeting until 14:00"), else Available, Away or
+ * Busy, and Absent today without a status. Present means any status but
+ * offline.
+ *
+ * `content`:
+ * - `source`: `{ url, responsePath?, userField?, nameField?, countField? }`;
+ *   the url goes through `generateUrl`, the rows are read at `responsePath`
+ *   (else the body), each with the user id at `userField` (default
+ *   `userId`), the name at `nameField` (default `displayName`) and the count
+ *   at `countField` (default `count`).
+ * - `capacity`: the count at a full bar; without it the highest count is.
+ * - `countLabel`: `{ one, other }` with `{count}`, through the app's
+ *   translate; without it the count reads "{count} open".
+ * - `emptyText`: shown without anyone to list.
+ */
+export default {
+	name: 'CnTeamWorkloadWidget',
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/** The widget's content: `source`, `capacity`, `countLabel`, `emptyText`. */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	emits: ['header'],
+
+	data() {
+		return {
+			/** The rows the source answered. */
+			rows: [],
+			/** The user statuses by user id. */
+			statuses: {},
+			/** Whether the source is being read. */
+			loading: false,
+		}
+	},
+
+	computed: {
+		/** @return {string} The signed-in user's id. */
+		viewerId() {
+			return String(getCurrentUser()?.uid || '')
+		},
+
+		/**
+		 * The people to list, the viewer first and the rest by name, each with
+		 * the line, count and bar to draw.
+		 *
+		 * @return {Array<object>} The members.
+		 */
+		members() {
+			const source = this.content?.source || {}
+			const userField = source.userField || 'userId'
+			const nameField = source.nameField || 'displayName'
+			const countField = source.countField || 'count'
+			const people = this.rows
+				.filter((row) => row && typeof row === 'object' && readPath(row, userField))
+				.map((row) => {
+					const id = String(readPath(row, userField))
+					const name = String(readPath(row, nameField) || id)
+					return { id, name, count: Number(readPath(row, countField)) || 0 }
+				})
+			const capacity = Number(this.content?.capacity) > 0
+				? Number(this.content.capacity)
+				: Math.max(1, ...people.map((p) => p.count))
+			return people
+				.sort((a, b) => (Number(b.id === this.viewerId) - Number(a.id === this.viewerId)) || a.name.localeCompare(b.name))
+				.map((person) => {
+					const status = this.statuses[person.id] || null
+					const percent = Math.min(100, Math.round((person.count / capacity) * 100))
+					return {
+						...person,
+						name: person.id === this.viewerId ? t('nextcloud-vue', '{name} (you)', { name: person.name }) : person.name,
+						initials: initialsOf(person.name),
+						line: this.lineOf(status),
+						available: !!status && status.status === 'online',
+						present: isPresent(status),
+						countText: this.countText(person.count),
+						percent,
+						hot: percent >= HOT_PERCENT,
+					}
+				})
+		},
+
+		/** @return {string} The header note: how many of the team are present. */
+		headerNote() {
+			const total = this.members.length
+			if (total === 0) {
+				return ''
+			}
+			const present = this.members.filter((member) => member.present).length
+			return t('nextcloud-vue', '{present} of {total} present', { present, total })
+		},
+
+		/** @return {string} What the card says while it reads. */
+		loadingLabel() {
+			return t('nextcloud-vue', 'Loading…')
+		},
+
+		/** @return {string} What the card says without anyone to list. */
+		emptyLabel() {
+			return this.content?.emptyText ? this.cnTranslate(this.content.emptyText) : t('nextcloud-vue', 'No one in the team')
+		},
+	},
+
+	watch: {
+		headerNote: {
+			immediate: true,
+			handler(note) {
+				/**
+				 * @event header The card header's parts: `{ link, note, action, pill }`, the note being how many are present.
+				 */
+				this.$emit('header', { link: null, note, action: null, pill: null })
+			},
+		},
+
+		'content.source': {
+			deep: true,
+			handler() {
+				this.load()
+			},
+		},
+	},
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+		/**
+		 * Read the counts and the user statuses. A failed read leaves the card
+		 * empty; a failed status read leaves everyone without a status.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async load() {
+			const source = this.content?.source
+			if (!source || typeof source.url !== 'string' || source.url === '') {
+				this.rows = []
+				return
+			}
+			this.loading = true
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const [answer, statuses] = await Promise.all([
+					axios.get(generateUrl(source.url)),
+					fetchStatuses(axios),
+				])
+				const body = answer && answer.data
+				const rows = source.responsePath ? readPath(body, source.responsePath) : body
+				this.rows = Array.isArray(rows) ? rows : []
+				this.statuses = statuses || {}
+			} catch {
+				this.rows = []
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * The availability line of a user status.
+		 *
+		 * @param {object|null} status The user status, or null without one.
+		 * @return {string} The line.
+		 */
+		lineOf(status) {
+			if (!status) {
+				return t('nextcloud-vue', 'Absent today')
+			}
+			const message = typeof status.message === 'string' ? status.message.trim() : ''
+			if (message !== '') {
+				const clearAt = Number(status.clearAt)
+				if (!Number.isFinite(clearAt) || clearAt <= 0) {
+					return message
+				}
+				const time = new Date(clearAt * 1000).toLocaleTimeString(userLocale() || undefined, { hour: '2-digit', minute: '2-digit' })
+				return t('nextcloud-vue', '{message} until {time}', { message, time })
+			}
+			switch (status.status) {
+				case 'online':
+					return t('nextcloud-vue', 'Available')
+				case 'away':
+					return t('nextcloud-vue', 'Away')
+				case 'dnd':
+				case 'busy':
+					return t('nextcloud-vue', 'Busy')
+				default:
+					return t('nextcloud-vue', 'Absent today')
+			}
+		},
+
+		/**
+		 * The count as words: the content's `countLabel`, else "{count} open".
+		 *
+		 * @param {number} count The open count.
+		 * @return {string} The text.
+		 */
+		countText(count) {
+			const label = this.content?.countLabel
+			if (label && typeof label === 'object' && typeof label.one === 'string' && typeof label.other === 'string') {
+				return this.cnTranslate(count === 1 ? label.one : label.other).replace('{count}', String(count))
+			}
+			return n('nextcloud-vue', '{count} open', '{count} open', count, { count })
+		},
+	},
+}
+
+/**
+ * Up to two initials of a name.
+ *
+ * @param {string} name The name.
+ * @return {string} The initials, upper case.
+ */
+function initialsOf(name) {
+	const parts = String(name || '').trim().split(/\s+/).filter(Boolean)
+	if (parts.length === 0) {
+		return ''
+	}
+	const last = parts.length > 1 ? parts[parts.length - 1].charAt(0) : ''
+	return (parts[0].charAt(0) + last).toUpperCase()
+}
+
+/**
+ * Whether a person is at work today: any status but offline or invisible.
+ *
+ * @param {object|null} status The user status.
+ * @return {boolean} True when present.
+ */
+function isPresent(status) {
+	return !!status && status.status !== 'offline' && status.status !== 'invisible'
+}
+</script>
+
+<style scoped>
+.cn-team-workload__list {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-team-workload__member {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-team-workload__row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.cn-team-workload__avatar {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-team-workload__who {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-team-workload__name {
+	font-size: 14px;
+}
+
+.cn-team-workload__state {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-team-workload__state--away {
+	color: var(--color-warning-text, var(--color-text-maxcontrast));
+}
+
+.cn-team-workload__count {
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-team-workload__bar {
+	display: block;
+	height: 6px;
+	overflow: hidden;
+	border-radius: 3px;
+	background: var(--color-border);
+}
+
+.cn-team-workload__bar-fill {
+	display: block;
+	height: 100%;
+	background: var(--color-primary-element);
+}
+
+.cn-team-workload__bar-fill--hot {
+	background: var(--color-error);
+}
+
+.cn-team-workload__state-line {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnTeamWorkloadWidget/index.js

@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnTeamWorkloadWidget: the `team-workload` widget (the team today, with
+ * each person's availability and open count). It is registered in
+ * `CnWidgetGrid/registerDashboardWidgets.js`, inline, because a bare
+ * side-effect import of this module may be tree-shaken away.
+ */
+
+import CnTeamWorkloadWidget from './CnTeamWorkloadWidget.vue'
+
+export { CnTeamWorkloadWidget }
+export default CnTeamWorkloadWidget

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -40,6 +40,7 @@ import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnStatsBlockWidgetForm from '../CnStatsBlockWidgetForm/CnStatsBlockWidgetForm.vue'
 import CnTabsWidget from '../CnTabsWidget/CnTabsWidget.vue'
 import CnTabsWidgetForm from '../CnTabsWidgetForm/CnTabsWidgetForm.vue'
+import CnTeamWorkloadWidget from '../CnTeamWorkloadWidget/CnTeamWorkloadWidget.vue'
 import CnWeekStripWidget from '../CnWeekStripWidget/CnWeekStripWidget.vue'
 import CnWeekStripWidgetForm from '../CnWeekStripWidgetForm/CnWeekStripWidgetForm.vue'
 // Typed widgets registered with an explicit renderer + config FORM. chart /
@@ -381,6 +382,17 @@ registerDashboardWidget('stacked-bar', {
 	icon: 'ChartBar',
 })
 
+// The team today: availability from the Nextcloud user status and each
+// person's open count from the app (DqTeamwachtrij "Team vandaag"). Placed
+// from the manifest: there is no config form yet.
+registerDashboardWidget('team-workload', {
+	renderer: CnTeamWorkloadWidget,
+	form: null,
+	defaultContent: { source: { url: '', responsePath: '', userField: 'userId', nameField: 'displayName', countField: 'count' } },
+	displayName: 'Team workload',
+	icon: 'AccountGroup',
+})
+
 /**
  * Explicit no-op that guarantees this module (and therefore every widget's
  * self-registration side effect) is evaluated. Now optional: `CnDashboardPage`

package/src/components/index.js

@@ -426,6 +426,7 @@ export { CnGuardianHome } from './CnGuardianHome/index.js'
 export { CnWeekStripWidget } from './CnWeekStripWidget/index.js'
 export { CnWeekStripWidgetForm } from './CnWeekStripWidgetForm/index.js'
 export { CnStackedBarWidget } from './CnStackedBarWidget/index.js'
+export { CnTeamWorkloadWidget } from './CnTeamWorkloadWidget/index.js'
 export { CnStackedBarWidgetForm } from './CnStackedBarWidgetForm/index.js'
 export { CnSegmentedControl } from './CnSegmentedControl/index.js'
 export { CnBrandStripe } from './CnBrandStripe/index.js'

package/src/css/index-page.css

@@ -411,11 +411,12 @@
 .cn-index-page--with-side-panel {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) var(--cn-index-side-panel-width, 300px);
-	grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+	grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
 	grid-template-areas:
 		"head head"
 		"below below"
 		"stats stats"
+		"chips side"
 		"bar side"
 		"body side"
 		"extra extra";
@@ -444,6 +445,10 @@
 	grid-area: bar;
 }
 
+.cn-index-page--with-side-panel > .cn-index-page__quick-filter-row {
+	grid-area: chips;
+}
+
 .cn-index-page--with-side-panel > .cn-index-page__body {
 	grid-area: body;
 }
@@ -461,10 +466,11 @@
 			"below"
 			"stats"
 			"side"
+			"chips"
 			"bar"
 			"body"
 			"extra";
-		grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
+		grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
 	}
 
 	.cn-index-page--with-side-panel > .cn-index-page__side-panel {
@@ -472,6 +478,12 @@
 	}
 }
 
+/* `quickFilterPlacement: "row"` (DqTeamwachtrij): the chips on a row of
+   their own above the toolbar, wrapping onto more lines. */
+.cn-index-page__quick-filter-row {
+	margin-bottom: 12px;
+}
+
 /* The second filter strip (`filterStrip`, board PqWachtrij "Kanaal"): 34px
    pills, radius 17, the active one in ink, each with a muted count. */
 .cn-index-page__filter-strip {