@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

package/l10n/en.json

@@ -73,7 +73,7 @@
     "Could not change the favourite.": "Could not change the favourite.",
     "Follow": "Follow",
     "Following": "Following",
-    "Loading …": "Loading …",
+    "Loading …": "Loading …",
     "Add a colleague": "Add a colleague",
     "{count} followers": "{count} followers",
     "Follow this record to get its updates": "Follow this record to get its updates",
@@ -1418,7 +1418,62 @@
     "No value ({count})": "No value ({count})",
     "{start} to {end}": "{start} to {end}",
     "Breadcrumb": "Breadcrumb",
-    "Moving to {stage}": "Moving to {stage}"
+    "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",
+    "Confirm action": "Confirm action",
+    "Are you sure you want to continue?": "Are you sure you want to continue?",
+    "Confirm": "Confirm",
+    "Action failed.": "Action failed.",
+    "Could not open the form.": "Could not open the form.",
+    "Could not open this action.": "Could not open this action.",
+    "Saved.": "Saved.",
+    "Save failed.": "Save failed.",
+    "Action completed.": "Action completed.",
+    "Run queued": "Run queued",
+    "Agent runtime unavailable": "Agent runtime unavailable",
+    "Run completed.": "Run completed.",
+    "Edit with Buildiq": "Edit with Buildiq",
+    "Save page": "Save page",
+    "Edit page": "Edit page",
+    "Add widget…": "Add widget…",
+    "Edit pages…": "Edit pages…",
+    "Edit menu…": "Edit menu…",
+    "Edit sidebar…": "Edit sidebar…",
+    "Edit actions…": "Edit actions…",
+    "Edit data…": "Edit data…",
+    "Edit flows…": "Edit flows…",
+    "This value was not accepted.": "This value was not accepted.",
+    "Provide details": "Provide details",
+    "This field is required.": "This field is required.",
+    "This action does not accept the field \"{field}\".": "This action does not accept the field \"{field}\".",
+    "Are you sure?": "Are you sure?",
+    "Loading": "Loading",
+    "Configure widget": "Configure widget",
+    "Link related object": "Link related object",
+    "{type} parts": "{type} parts",
+    "Cannot save: this record has no id, so the edit would create a duplicate instead of updating it.": "Cannot save: this record has no id, so the edit would create a duplicate instead of updating it.",
+    "Save failed": "Save failed"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -73,7 +73,7 @@
     "Could not change the favourite.": "De favoriet kon niet worden gewijzigd.",
     "Follow": "Volgen",
     "Following": "Volgend",
-    "Loading …": "Laden …",
+    "Loading …": "Laden …",
     "Add a colleague": "Collega toevoegen",
     "{count} followers": "{count} volgers",
     "Follow this record to get its updates": "Volg dit dossier om de wijzigingen te ontvangen",
@@ -1584,7 +1584,83 @@
     "Transition failed": "De overgang is mislukt",
     "Closed": "Afgesloten",
     "Skip to {action}": "Ga naar {action}",
-    "Moving to {stage}": "Bezig met verplaatsen naar {stage}"
+    "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}",
+    "full": "vol",
+    "{count} / {capacity}": "{count} / {capacity}",
+    "{column} is full: {count} of {capacity}.": "{column} is vol: {count} van {capacity}.",
+    "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",
+    "Confirm action": "Actie bevestigen",
+    "Are you sure you want to continue?": "Weet je zeker dat je wilt doorgaan?",
+    "Confirm": "Bevestigen",
+    "Action failed.": "De actie is mislukt.",
+    "Could not open the form.": "Het formulier kon niet worden geopend.",
+    "Could not open this action.": "Deze actie kon niet worden geopend.",
+    "Saved.": "Opgeslagen.",
+    "Save failed.": "Opslaan is mislukt.",
+    "Action completed.": "Actie uitgevoerd.",
+    "Run queued": "Run staat in de wachtrij",
+    "Agent runtime unavailable": "De agent-runtime is niet beschikbaar",
+    "Run completed.": "Run voltooid.",
+    "Edit with Buildiq": "Bewerken met Buildiq",
+    "Save page": "Pagina opslaan",
+    "Edit page": "Pagina bewerken",
+    "Add widget…": "Widget toevoegen…",
+    "Edit pages…": "Pagina's bewerken…",
+    "Edit menu…": "Menu bewerken…",
+    "Edit sidebar…": "Zijbalk bewerken…",
+    "Edit actions…": "Acties bewerken…",
+    "Edit data…": "Gegevens bewerken…",
+    "Edit flows…": "Flows bewerken…",
+    "This value was not accepted.": "Deze waarde is niet geaccepteerd.",
+    "Provide details": "Geef de details op",
+    "This field is required.": "Dit veld is verplicht.",
+    "This action does not accept the field \"{field}\".": "Deze actie accepteert het veld \"{field}\" niet.",
+    "Are you sure?": "Weet je het zeker?",
+    "Loading": "Laden",
+    "Configure widget": "Widget instellen",
+    "Link related object": "Gerelateerd object koppelen",
+    "{type} parts": "Onderdelen van {type}",
+    "Cannot save: this record has no id, so the edit would create a duplicate instead of updating it.": "Opslaan kan niet: dit record heeft geen id, dus de wijziging zou een kopie maken in plaats van het record bij te werken.",
+    "Save failed": "Opslaan is mislukt"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.36",
+  "version": "2.56.0-beta.38",
   "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/CnAdvancedFormDialog/CnMetadataTab.vue

@@ -30,6 +30,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnMetadataTab',
@@ -62,13 +63,13 @@ export default {
 		metadataCreated() {
 			const o = this.item?.['@self']
 			const v = o?.created
-			return v ? new Date(v).toLocaleString() : '—'
+			return v ? new Date(v).toLocaleString(userLocale()) : '—'
 		},
 
 		metadataUpdated() {
 			const o = this.item?.['@self']
 			const v = o?.updated
-			return v ? new Date(v).toLocaleString() : '—'
+			return v ? new Date(v).toLocaleString(userLocale()) : '—'
 		},
 
 		defaultRows() {

package/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue

@@ -186,6 +186,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import CnColorPicker from '../CnColorPicker/CnColorPicker.vue'
 import CnJsonViewer from '../CnJsonViewer/CnJsonViewer.vue'
 import { formatValue, validateValue } from '../../utils/schema.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 const SUPPORTED_WIDGETS = ['text', 'number', 'boolean', 'datetime', 'textarea', 'array', 'select', 'object', 'objectArray', 'color']
 
@@ -729,19 +730,19 @@ export default {
 			// Same local-midnight parse as datetimeValue to avoid UTC-shift in display.
 			if (fmt === 'date' && typeof v === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(v)) {
 				const [year, month, day] = v.split('-').map(Number)
-				return new Date(year, month - 1, day).toLocaleDateString()
+				return new Date(year, month - 1, day).toLocaleDateString(userLocale())
 			}
 			const d = new Date(v)
 			if (Number.isNaN(d.getTime())) {
 				return String(v)
 			}
 			if (fmt === 'date') {
-				return d.toLocaleDateString()
+				return d.toLocaleDateString(userLocale())
 			}
 			if (fmt === 'time') {
-				return d.toLocaleTimeString()
+				return d.toLocaleTimeString(userLocale())
 			}
-			return d.toLocaleString()
+			return d.toLocaleString(userLocale())
 		},
 	},
 

package/src/components/CnAnalyticsReportPicker/CnAnalyticsReportPicker.vue

@@ -101,6 +101,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcDialog, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcTextField } from '@nextcloud/vue'
 import ChartBar from 'vue-material-design-icons/ChartBar.vue'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnAnalyticsReportPicker',
@@ -247,7 +248,7 @@ export default {
 				if (Number.isNaN(d.getTime())) {
 					return ''
 				}
-				return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+				return d.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 			} catch {
 				return ''
 			}

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -49,6 +49,7 @@ import { markRaw } from 'vue'
 import History from 'vue-material-design-icons/History.vue'
 import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * CnAuditTrailCard — compact audit-trail widget rendered by the
@@ -214,7 +215,7 @@ export default {
 			if (Number.isNaN(d.getTime()) === true) {
 				return String(raw)
 			}
-			return d.toLocaleString()
+			return d.toLocaleString(userLocale())
 		},
 	},
 }