@conduction/nextcloud-vue 2.83.0 → 2.85.0

package/l10n/en.json

@@ -1,5 +1,16 @@
 {
   "translations": {
+    "Channel": "Channel",
+    "Outcome": "Outcome",
+    "Chat": "Chat",
+    "Counter": "Counter",
+    "Social media": "Social media",
+    "Letter": "Letter",
+    "Save contact moment": "Save contact moment",
+    "Saving…": "Saving…",
+    "Subject is required": "Subject is required",
+    "Cannot save right now": "Cannot save right now",
+    "Failed to save interaction": "Failed to save interaction",
     "You cannot see these files": "You cannot see these files",
     "Delete {name}? This cannot be undone here.": "Delete {name}? This cannot be undone here.",
     "Linked items": "Linked items",
@@ -326,6 +337,9 @@
     "Constant": "Constant",
     "Copy": "Copy",
     "Copied": "Copied",
+    "Copy the name": "Copy the name",
+    "Copy the value": "Copy the value",
+    "Copying did not work. Select the text and copy it yourself.": "Copying did not work. Select the text and copy it yourself.",
     "Show": "Show",
     "Copy {label}": "Copy {label}",
     "Show {label}": "Show {label}",
@@ -1403,7 +1417,30 @@
     "This answer was refused.": "This answer was refused.",
     "No value ({count})": "No value ({count})",
     "{start} to {end}": "{start} to {end}",
-    "Breadcrumb": "Breadcrumb"
+    "Breadcrumb": "Breadcrumb",
+    "Moving to {stage}": "Moving to {stage}",
+    "Application name": "Application name",
+    "Configured version": "Configured version",
+    "Updating…": "Updating…",
+    "Up to date": "Up to date",
+    "Loading version information…": "Loading version information…",
+    "Configuration re-imported successfully": "Configuration re-imported successfully",
+    "Configure your {app} installation": "Configure your {app} installation",
+    "For support, contact us at": "For support, contact us at",
+    "For a Service Level Agreement (SLA), contact": "For a Service Level Agreement (SLA), contact",
+    "Help us": "Help us",
+    "Importing…": "Importing…",
+    "Information about the current {app} installation": "Information about the current {app} installation",
+    "Re-import failed": "Re-import failed",
+    "Run setup wizard": "Run setup wizard",
+    "Support": "Support",
+    "{app} Settings": "{app} Settings",
+    "Loading registers…": "Loading registers…",
+    "Object type": "Object type",
+    "Register {id}": "Register {id}",
+    "Schema {id}": "Schema {id}",
+    "The registers could not be loaded: {reason}": "The registers could not be loaded: {reason}",
+    "no connection": "no connection"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1,5 +1,16 @@
 {
   "translations": {
+    "Channel": "Kanaal",
+    "Outcome": "Uitkomst",
+    "Chat": "Chat",
+    "Counter": "Balie",
+    "Social media": "Sociale media",
+    "Letter": "Brief",
+    "Save contact moment": "Contactmoment opslaan",
+    "Saving…": "Opslaan…",
+    "Subject is required": "Onderwerp is verplicht",
+    "Cannot save right now": "Opslaan kan nu niet",
+    "Failed to save interaction": "Het contactmoment is niet opgeslagen",
     "You cannot see these files": "Je kunt deze bestanden niet zien",
     "Delete {name}? This cannot be undone here.": "{name} verwijderen? Dit kun je hier niet ongedaan maken.",
     "Linked items": "Gekoppelde items",
@@ -348,6 +359,9 @@
     "Constant": "Constante",
     "Copy": "Kopiëren",
     "Copied": "Gekopieerd",
+    "Copy the name": "Naam kopiëren",
+    "Copy the value": "Waarde kopiëren",
+    "Copying did not work. Select the text and copy it yourself.": "Kopiëren lukte niet. Selecteer de tekst en kopieer hem zelf.",
     "Show": "Tonen",
     "Copy {label}": "{label} kopiëren",
     "Show {label}": "{label} tonen",
@@ -1547,7 +1561,70 @@
     "This answer was refused.": "Dit antwoord is geweigerd.",
     "No value ({count})": "Geen waarde ({count})",
     "{start} to {end}": "{start} tot {end} uur",
-    "Breadcrumb": "Kruimelpad"
+    "Breadcrumb": "Kruimelpad",
+    "Cannot move: this record has no id, so the move would create a duplicate instead of updating it.": "Verplaatsen kan niet: dit record heeft geen id, dus de verplaatsing zou een kopie maken in plaats van het record bij te werken.",
+    "Could not check whether this stage can be reached": "Kon niet controleren of deze fase bereikbaar is",
+    "Could not check which stages can be reached": "Kon niet controleren welke fases bereikbaar zijn",
+    "Could not load the stages": "De fases konden niet worden geladen",
+    "Just a moment, the last move is still running": "Een moment, de vorige verplaatsing loopt nog",
+    "Loading stages": "Fases laden",
+    "Move to {stage}": "Naar {stage} verplaatsen",
+    "Moved to {stage}": "Verplaatst naar {stage}",
+    "No stages to show": "Geen fases om te tonen",
+    "Not reachable from the current stage": "Niet bereikbaar vanuit de huidige fase",
+    "Stages": "Fases",
+    "The move could not be made": "De verplaatsing is niet gelukt",
+    "The record is not loaded yet": "Het record is nog niet geladen",
+    "The stages cannot be read for this record yet": "De fases van dit record zijn nog niet te lezen",
+    "This move is not possible right now": "Deze verplaatsing kan nu niet",
+    "This stage cannot be chosen right now": "Deze fase kan nu niet worden gekozen",
+    "Are you sure you want to \"{action}\"?": "Weet je zeker dat je \"{action}\" wilt uitvoeren?",
+    "Moved to {state}": "Verplaatst naar {state}",
+    "Moved {title} to {state}": "{title} verplaatst naar {state}",
+    "Transition failed": "De overgang is mislukt",
+    "Closed": "Afgesloten",
+    "Skip to {action}": "Ga naar {action}",
+    "Moving to {stage}": "Bezig met verplaatsen naar {stage}",
+    "Due {date}": "Termijn {date}",
+    "Overdue {date}": "Over tijd sinds {date}",
+    "Elsewhere": "Elders",
+    "Move to": "Verplaatsen naar",
+    "Nothing here": "Niets in deze kolom",
+    "Open in new tab": "Openen in nieuw tabblad",
+    "Show {count} more": "Toon {count} meer",
+    "Somebody else moved this card. It is shown where it is now.": "Iemand anders heeft deze kaart al verplaatst. Je ziet hem nu op zijn nieuwe plek.",
+    "That move was refused.": "Die verplaatsing is geweigerd.",
+    "This list has no status field with stages, so it cannot be shown as a board.": "Deze lijst heeft geen statusveld met fases, dus er is geen bord van te maken.",
+    "not allowed": "niet toegestaan",
+    "on this page": "op deze pagina",
+    "{count} on this page": "{count} op deze pagina",
+    "{name} cannot move to {column}.": "{name} kan niet naar {column}.",
+    "{name}, in {column}": "{name}, in {column}",
+    "This card cannot move to that column.": "Deze kaart kan niet naar die kolom.",
+    "Nobody": "Niemand",
+    "{label}:": "{label}:",
+    "Application name": "Naam van de app",
+    "Configured version": "Ingestelde versie",
+    "Updating…": "Bijwerken…",
+    "Up to date": "Bijgewerkt",
+    "Loading version information…": "Versie-informatie laden…",
+    "Configuration re-imported successfully": "De configuratie is opnieuw geïmporteerd",
+    "Configure your {app} installation": "Stel je {app}-installatie in",
+    "For support, contact us at": "Voor ondersteuning mail je naar",
+    "For a Service Level Agreement (SLA), contact": "Voor een Service Level Agreement (SLA) mail je naar",
+    "Help us": "Help ons",
+    "Importing…": "Importeren…",
+    "Information about the current {app} installation": "Informatie over de huidige {app}-installatie",
+    "Re-import failed": "Opnieuw importeren is mislukt",
+    "Run setup wizard": "Installatiehulp starten",
+    "Support": "Ondersteuning",
+    "{app} Settings": "{app}-instellingen",
+    "Loading registers…": "Registers laden…",
+    "Object type": "Soort object",
+    "Register {id}": "Register {id}",
+    "Schema {id}": "Schema {id}",
+    "The registers could not be loaded: {reason}": "De registers konden niet worden geladen: {reason}",
+    "no connection": "geen verbinding"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.83.0",
+  "version": "2.85.0",
   "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/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -56,14 +56,38 @@
 			</div>
 		</div>
 
+		<!-- `tabs`: a strip under the header (boards ShInstellingen,
+		     LpBeheerAlgemeen). Each tab's panel holds the `tab-<id>` slot; the
+		     version card, the credential broker and the default slot below
+		     belong to the first tab and show only while it is open. -->
+		<CnTabs
+			v-if="tabItems.length > 0"
+			class="cn-admin-settings-shell__tabs"
+			:look="isBoard ? 'board' : 'nextcloud'"
+			:ariaLabel="resolvedTitle"
+			data-testid="cn-admin-settings-tabs"
+			@update:activeIndex="onTabIndex">
+			<CnTab
+				v-for="tab in tabItems"
+				:key="tab.id"
+				:title="tab.label"
+				:count="tab.count"
+				:active="tab.id === activeTabId">
+				<div class="cn-admin-settings-shell__panel" :data-tab="tab.id">
+					<!-- @slot tab-<id> The panel of the tab with that `id` in `tabs`. -->
+					<slot :name="`tab-${tab.id}`" />
+				</div>
+			</CnTab>
+		</CnTabs>
+
 		<!-- `versionCardPosition: "end"`: the app's sections come first, and the
 		     version card and the credential broker follow them (board DcBeheer
 		     starts with the app's own card). The same slot, rendered once. -->
-		<slot v-if="versionCardAtEnd" />
+		<slot v-if="versionCardAtEnd && onFirstTab" />
 
 		<!-- Version information card (version, up-to-date check, re-import, support footer) -->
 		<CnVersionInfoCard
-			v-if="showVersionCard"
+			v-if="showVersionCard && onFirstTab"
 			:appName="appName"
 			:appVersion="resolvedVersion"
 			:configuredVersion="resolvedConfiguredVersion"
@@ -72,6 +96,7 @@
 			:updating="updating"
 			:title="versionTitle"
 			:description="resolvedVersionDescription"
+			:wide="versionCardWide"
 			@update="onUpdate">
 			<template #actions>
 				<!-- Canonical "Re-import configuration" action (POST /apps/<appId>/api/settings/load) -->
@@ -149,15 +174,15 @@
 			informational "apps requesting credentials" list inside.
 		-->
 		<CnCredentials
-			v-if="showOrganisationCredentials"
+			v-if="showOrganisationCredentials && onFirstTab"
 			scope="organisation"
 			:appId="appId"
 			:appName="appName"
 			:appCredentials="appCredentials"
 			data-testid="cn-admin-organisation-credentials" />
 
-		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. -->
-		<slot v-if="!versionCardAtEnd" />
+		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. With `tabs`, only while the first tab is open. -->
+		<slot v-if="!versionCardAtEnd && onFirstTab" />
 
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
@@ -176,7 +201,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcLoadingIcon, NcSettingsSection } from '@nextcloud/vue'
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 import AutoFix from 'vue-material-design-icons/AutoFix.vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
@@ -189,8 +214,38 @@ import { useEnvironment } from '../../composables/useEnvironment.js'
 import { normalizeLook, useLook } from '../../composables/useLook.js'
 import { buildFeatureRequestUrl } from '../../utils/forge.js'
 import { prefixUrl } from '../../utils/headers.js'
+import { CnTab, CnTabs } from '../CnTabs/index.js'
 import { CnVersionInfoCard } from '../CnVersionInfoCard/index.js'
 
+/**
+ * The tab the address names.
+ *
+ * @param {string} key The query parameter.
+ * @return {string} Its value, or ''.
+ */
+function readTabFromAddress(key) {
+	if (typeof window === 'undefined' || !key) {
+		return ''
+	}
+	return new URLSearchParams(window.location.search).get(key) || ''
+}
+
+/**
+ * Put the open tab in the address without a new history entry.
+ *
+ * @param {string} key The query parameter.
+ * @param {string} id The tab's id.
+ * @return {void}
+ */
+function writeTabToAddress(key, id) {
+	if (typeof window === 'undefined' || !key || !window.history?.replaceState) {
+		return
+	}
+	const url = new URL(window.location.href)
+	url.searchParams.set(key, id)
+	window.history.replaceState(window.history.state, '', url.toString())
+}
+
 /**
  * CnAdminSettingsShell — the canonical chrome for a Conduction app's Nextcloud
  * admin settings page.
@@ -235,6 +290,8 @@ export default {
 		CnCredentials,
 		CnVersionInfoCard,
 		CnSetupWizard,
+		CnTab,
+		CnTabs,
 		NcButton,
 		NcLoadingIcon,
 		Refresh,
@@ -357,12 +414,49 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A tab strip under the header, as `[{ id, label, count? }]`. Each
+		 * tab's panel is the `tab-<id>` slot; the version card, the credential
+		 * broker and the default slot show only on the first tab. The open tab
+		 * is in the address (`?<tabQueryKey>=<id>`), so a link opens it and a
+		 * reload keeps it. The strip is keyboard operable (arrow keys, Home,
+		 * End). Empty draws no strip.
+		 *
+		 * @type {Array<{id: string, label: string, count?: number}>}
+		 * @spec openspec/changes/admin-settings-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-draw-a-tab-strip
+		 */
+		tabs: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The query parameter that holds the open tab's `id`.
+		 *
+		 * @spec openspec/changes/admin-settings-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-draw-a-tab-strip
+		 */
+		tabQueryKey: {
+			type: String,
+			default: 'tab',
+		},
+
 		/** Whether to render the version card. */
 		showVersionCard: {
 			type: Boolean,
 			default: true,
 		},
 
+		/**
+		 * Under the board look the version card spans the whole settings grid.
+		 * Set to `false` to keep it one card in the grid.
+		 *
+		 * @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid
+		 */
+		versionCardWide: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Where the version card (and the organisation credential broker) sits:
 		 * `start`, above the app's sections (the default), or `end`, after them,
@@ -481,15 +575,18 @@ export default {
 		},
 	},
 
-	emits: ['update', 'reimported', 'reimport-error'],
+	emits: ['update', 'reimported', 'reimport-error', 'tab-change'],
 
 	setup(props) {
 		// The app's own `environment` setting, else the active organisation's.
 		const { environment: environmentName } = useEnvironment({ environment: () => props.environment })
-		const { isBoard } = useLook(props)
+		const { look, isBoard } = useLook(props)
 		// A shell told `look: "board"` itself draws the board look also on an
 		// admin page that no CnAppRoot wraps, as Nextcloud's settings pages are.
 		const ownLookClass = computed(() => (normalizeLook(props.look) === 'board' ? 'cn-look-board' : ''))
+		// Everything inside the shell, its own version card and the app's
+		// sections alike, follows the shell's look without the app providing it.
+		provide('cnLook', look)
 		return { environmentName, isBoard, ownLookClass }
 	},
 
@@ -497,10 +594,44 @@ export default {
 		return {
 			reimporting: false,
 			setupWizardOpen: false,
+			// The open tab's id; empty until a tab is picked or the address names one.
+			chosenTabId: readTabFromAddress(this.tabQueryKey),
 		}
 	},
 
 	computed: {
+		/**
+		 * The tabs that have an id and a label.
+		 *
+		 * @return {Array<{id: string, label: string, count: number|null}>}
+		 * @spec openspec/changes/admin-settings-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-draw-a-tab-strip
+		 */
+		tabItems() {
+			return (Array.isArray(this.tabs) ? this.tabs : [])
+				.filter((tab) => tab && typeof tab.id === 'string' && tab.id !== '' && typeof tab.label === 'string' && tab.label !== '')
+				.map((tab) => ({ id: tab.id, label: tab.label, count: tab.count ?? null }))
+		},
+
+		/**
+		 * The open tab: the one picked or named in the address, else the first.
+		 *
+		 * @return {string} Its id, or '' without tabs.
+		 */
+		activeTabId() {
+			const ids = this.tabItems.map((tab) => tab.id)
+			return ids.includes(this.chosenTabId) ? this.chosenTabId : (ids[0] || '')
+		},
+
+		/**
+		 * Whether the shell's own content shows: always without tabs, else on
+		 * the first tab.
+		 *
+		 * @return {boolean}
+		 */
+		onFirstTab() {
+			return this.tabItems.length === 0 || this.activeTabId === this.tabItems[0].id
+		},
+
 		/**
 		 * Whether the app's sections come before the version card.
 		 *
@@ -625,6 +756,27 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A tab was picked in the strip: remember it, put it in the address
+		 * (replacing the entry, so Back leaves the page) and tell the app.
+		 *
+		 * @param {number} index The picked tab's index.
+		 * @return {void}
+		 * @spec openspec/changes/admin-settings-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-draw-a-tab-strip
+		 */
+		onTabIndex(index) {
+			const tab = this.tabItems[index]
+			if (!tab || tab.id === this.chosenTabId) {
+				return
+			}
+			this.chosenTabId = tab.id
+			writeTabToAddress(this.tabQueryKey, tab.id)
+			/**
+			 * @event tab-change Emitted when the reader opens another tab. Payload: its `id`.
+			 */
+			this.$emit('tab-change', tab.id)
+		},
+
 		/** Forward the version card's update-button click to the parent. */
 		onUpdate() {
 			/**

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -154,7 +154,7 @@ export default {
 			if (!this.register || !this.schema || !this.objectId) {
 				return ''
 			}
-			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trail?${params.toString()}`
+			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trails?${params.toString()}`
 		},
 	},