@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -430,19 +430,19 @@
 			name="form-dialog"
 			:show="showFormDialogVisible"
 			:item="editItem"
-			:schema="effectiveSchema"
+			:schema="formSchema"
 			:confirm="onFormConfirm"
 			:close="closeFormDialog"
 			:refresh="onRefreshEvent">
 			<CnFormDialog
 				v-if="showFormDialogVisible && !useAdvancedFormDialog"
 				ref="formDialog"
-				:schema="effectiveSchema"
+				:schema="formSchema"
 				:item="editItem"
-				:register="register"
-				:excludeFields="excludeFields"
-				:includeFields="includeFields"
-				:fieldOverrides="fieldOverrides"
+				:register="formRegister"
+				:excludeFields="rowFormTarget ? [] : excludeFields"
+				:includeFields="rowFormTarget ? null : includeFields"
+				:fieldOverrides="rowFormTarget ? {} : fieldOverrides"
 				:nameField="massActionNameField"
 				:size="formSize"
 				:columns="formColumns"
@@ -456,11 +456,11 @@
 			<CnAdvancedFormDialog
 				v-if="showFormDialogVisible && useAdvancedFormDialog"
 				ref="formDialog"
-				:schema="effectiveSchema"
+				:schema="formSchema"
 				:item="editItem"
-				:excludeFields="excludeFields"
-				:includeFields="includeFields"
-				:fieldOverrides="fieldOverrides"
+				:excludeFields="rowFormTarget ? [] : excludeFields"
+				:includeFields="rowFormTarget ? null : includeFields"
+				:fieldOverrides="rowFormTarget ? {} : fieldOverrides"
 				:nameField="massActionNameField"
 				:initialValues="resolvedCreateDefaults"
 				@confirm="onFormConfirm"
@@ -533,7 +533,8 @@
 				<!-- Empty state -->
 				<div v-else-if="effectiveObjects.length === 0" class="cn-index-page__empty">
 					<slot name="empty">
-						<CnEmptyContent :name="resolvedEmptyText">
+						<CnEmptyContent :name="lensReasonText || resolvedEmptyText"
+							:data-lens-unavailable="lensReasonText ? 'true' : null">
 							<template #icon>
 								<CnIcon v-if="resolvedIcon" :name="resolvedIcon" :size="64" />
 								<DatabaseSearch v-else :size="64" />
@@ -573,14 +574,15 @@
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
 					@rowContextMenu="onRowContextMenu">
-					<!-- Star column (showFavouriteColumn) -->
-					<template v-if="showFavouriteColumn" #column-__favourite="{ row }">
-						<CnFavouriteToggle
-							v-if="row && row['@self'] && typeof row['@self'].favourite === 'boolean'"
+					<!-- Follow column (showFollowColumn, or the deprecated showFavouriteColumn) -->
+					<template v-if="followColumnOn" #column-__follow="{ row }">
+						<CnFollowToggle
+							v-if="row && row['@self'] && typeof row['@self'].watching === 'boolean'"
+							compact
 							:register="typeof register === 'string' ? register : ''"
 							:schema="favouriteSchemaSlug"
 							:objectId="String(row['@self'].id || row.id || '')"
-							:favourite="row['@self'].favourite === true" />
+							:watching="row['@self'].watching === true" />
 					</template>
 
 					<!-- Pass through column slots -->
@@ -788,6 +790,7 @@
 					:selectable="selectable"
 					:clickToView="rowClickOpens"
 					:cardFields="resolvedCardFields"
+					:accentOf="cardAccent"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
 					:emptyText="emptyText"
@@ -954,7 +957,7 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
-import CnFavouriteToggle from '../CnFavouriteToggle/CnFavouriteToggle.vue'
+import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
 import { useContextMenu } from '../../composables/index.js'
 import { useLook } from '../../composables/useLook.js'
 import { copyKindsOf } from '../../composables/useObjectCopy.js'
@@ -967,10 +970,12 @@ import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actio
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
+import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
+import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { withPersonalLenses } from '../../utils/personalLenses.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
 import { resolveRowActions } from '../../utils/resolveRowActions.js'
@@ -1016,7 +1021,7 @@ import { buildDefaultActions } from './defaultActions.js'
 import { dispatchAction } from './manifestActionDispatch.js'
 import { applyManualOrder, dropInOrder, manualOrderKey, moveInOrder, visibleIdsOf } from './manualOrder.js'
 import { orderColumns, personalColumnsKey, reconcilePersonalColumns } from './personalColumns.js'
-import { createSelfModeActions } from './selfModeActions.js'
+import { createSelfModeActions, resolveRowTarget } from './selfModeActions.js'
 import { applyRowPatches, normalisePaneWidth, rowIdOf, splitLayoutFor } from './splitView.js'
 import { useNamedSource } from './useNamedSource.js'
 import { useSelfFetchList } from './useSelfFetchList.js'
@@ -1035,8 +1040,8 @@ const CALENDAR_PAGE_SIZE = 200
  */
 const RANGE_SEPARATOR = '..'
 
-/** Key of the synthetic star column (`showFavouriteColumn`). */
-const FAVOURITE_COLUMN_KEY = '__favourite'
+/** Key of the synthetic follow column (`showFollowColumn`). */
+const FOLLOW_COLUMN_KEY = '__follow'
 
 /**
  * Whether a schema property wants a from/to pair rather than a value list.
@@ -1238,7 +1243,7 @@ export default {
 
 	components: {
 		CnBuildiqEditButton,
-		CnFavouriteToggle,
+		CnFollowToggle,
 		NcLoadingIcon,
 		CnEmptyContent,
 		NcActions,
@@ -1475,6 +1480,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Gives each card in the card view a status accent: a colored start
+		 * border and icon. See CnObjectCard `accent`.
+		 *
+		 * @type {((object: object) => ({variant: string, icon: string, label: string}|null))|null}
+		 */
+		cardAccent: {
+			type: Function,
+			default: null,
+		},
+
 		/**
 		 * Board look: free text after the footer's count ("8 of 48 · click a
 		 * column header to sort"). Manifest key `config.footerNote`.
@@ -1563,9 +1579,10 @@ export default {
 		},
 
 		/**
-		 * Personal lenses appended to the quick filters: any of `favourite`
-		 * (`_favourite`), `recent` (`_recent`), `watching` (`_watching`) and
-		 * `unread` (`_unread`).
+		 * Personal lenses appended to the quick filters: any of `watching`
+		 * (`_watching`, labelled Following), `recent` (`_recent`) and `unread`
+		 * (`_unread`). `favourite` is a deprecated alias of `watching`: a
+		 * favourite is a follow now, and asking for both gives one tab.
 		 * They combine with every other filter. While Recent is active column
 		 * sorting is off, because the lens owns the order. Manifest
 		 * `config.personalLenses`.
@@ -1578,9 +1595,20 @@ export default {
 		},
 
 		/**
-		 * Add a first column with a star per row (`CnFavouriteToggle`), bound to
-		 * each row's `@self.favourite`. Clicking it does not open the row.
-		 * Manifest `config.showFavouriteColumn`.
+		 * Add a first column with a follow toggle per row (`CnFollowToggle`,
+		 * compact), bound to each row's `@self.watching`. Clicking it does not
+		 * open the row. Manifest `config.showFollowColumn`.
+		 */
+		showFollowColumn: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Deprecated alias of `showFollowColumn`: the star column became the
+		 * follow column (OpenRegister `merge-follow-and-favourites`).
+		 *
+		 * @deprecated Use `showFollowColumn`.
 		 */
 		showFavouriteColumn: {
 			type: Boolean,
@@ -1646,6 +1674,21 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Self-fetch only: list from this endpoint instead of
+		 * `/api/objects/{register}/{schema}`, e.g. an app endpoint that searches
+		 * several register/schema pairs at once. `register` and `schema` stay the
+		 * page's own pair (columns, create, export, import). Rows of another pair,
+		 * read from their `@self.register` / `@self.schema`, are edited, copied and
+		 * deleted against that pair, with its own form. The endpoint takes
+		 * `_page`, `_limit`, `_search` and `_order[key]=dir` and answers
+		 * `{ results, total, page, pages }`.
+		 */
+		collectionUrl: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Offer an "Also search inside files" switch beside the search box. On,
 		 * a search also matches words inside attached files (OpenRegister
@@ -2060,6 +2103,34 @@ export default {
 			default: 'No items found',
 		},
 
+		/**
+		 * Personal-lens report of the list on screen, for a host that fetches
+		 * itself: the response's `@self.lenses` (`{ recent: { available,
+		 * reason } }`). In self-fetch mode the page reads it from the store
+		 * and this prop is ignored. When a lens reports `available: false`
+		 * the empty state explains why instead of showing `emptyText`.
+		 *
+		 * @type {object|null}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lenses: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * App wording for an unavailable lens, keyed `<lens>.<reason>`
+		 * (`recent.audit-trail-disabled`) or `<reason>`; the specific key
+		 * wins, and both win over the library's object-neutral text.
+		 *
+		 * @type {{[key: string]: string}|null}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonTexts: {
+			type: Object,
+			default: null,
+		},
+
 		/** Accessible label for the loading spinner (NcLoadingIcon aria-label) */
 		loadingText: {
 			type: String,
@@ -3153,6 +3224,8 @@ export default {
 			 */
 			persistedFilterKeys: [...(this.initialQueryFilterKeys || [])],
 			internalSelectedIds: [...this.selectedIds],
+			// Rows seen in a collectionUrl list, so a selection kept across pages still resolves its own pair.
+			collectionRowsById: markRaw(new Map()),
 			// Folder-sidebar state: selected folder id + the register-fetched list.
 			selectedFolderId: null,
 			/**
@@ -3190,6 +3263,9 @@ export default {
 			// Dialog targets
 			actionTargetItem: null,
 			editItem: null,
+			// The pair and schema of a row edited outside the page's own pair (collectionUrl).
+			rowFormTarget: null,
+			rowFormSchema: null,
 			// Drives the Actions-menu Refresh spinner during a self-fetch
 			// refresh, where the host has no promise to bind `:refreshing` to.
 			internalRefreshing: false,
@@ -3246,6 +3322,40 @@ export default {
 			return this.emptyText ? fn(this.emptyText) : this.emptyText
 		},
 
+		/**
+		 * The personal-lens reports of the list on screen: the store's copy
+		 * of the latest response in self-fetch mode, else the `lenses` prop.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-a-list-response-carries-the-report-of-the-lenses-it-was-asked-for
+		 */
+		effectiveLenses() {
+			if (this.isNamedSource) {
+				return {}
+			}
+			if (this.isSelfFetchMode) {
+				return (this.list.lenses && this.list.lenses.value) || {}
+			}
+			return this.lenses || {}
+		},
+
+		/**
+		 * Why the list is empty when a personal lens could not answer (the
+		 * audit trail is off, nobody is logged in, the history could not be
+		 * read), or `''` to keep the generic empty text.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonText() {
+			const text = lensUnavailableText(this.effectiveLenses, this.lensReasonTexts)
+			if (!text) {
+				return ''
+			}
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+			return fn(text)
+		},
+
 		/**
 		 * Whether the host manifest editor is in edit mode (unwraps the injected
 		 * `cnEditingBody`, which may be a Vue ref or a plain boolean). Drives the
@@ -4139,12 +4249,22 @@ export default {
 			if (this.recentLensActive) {
 				cols = cols.map((col) => (col && typeof col === 'object' ? { ...col, sortable: false } : col))
 			}
-			if (this.showFavouriteColumn && this.favouriteSchemaSlug !== '') {
-				cols = [{ key: FAVOURITE_COLUMN_KEY, label: '', sortable: false, width: '48px' }, ...cols]
+			if (this.followColumnOn && this.favouriteSchemaSlug !== '') {
+				cols = [{ key: FOLLOW_COLUMN_KEY, label: '', sortable: false, width: '48px' }, ...cols]
 			}
 			return cols
 		},
 
+		/**
+		 * Whether the follow column renders (`showFollowColumn`, or the deprecated `showFavouriteColumn`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/one-follow-control/specs/record-follow/spec.md#requirement-index-pages-offer-one-following-lens-and-a-follow-column
+		 */
+		followColumnOn() {
+			return this.showFollowColumn || this.showFavouriteColumn
+		},
+
 		/**
 		 * Whether the active quick filter is the Recent lens.
 		 *
@@ -4159,7 +4279,7 @@ export default {
 		},
 
 		/**
-		 * Schema slug the star column calls with: the page's own slug in self-fetch
+		 * Schema slug the follow column calls with: the page's own slug in self-fetch
 		 * mode, else the schema object's `slug`. Empty when neither is known.
 		 *
 		 * @return {string}
@@ -4471,6 +4591,16 @@ export default {
 			return (this.schema && typeof this.schema === 'object') ? this.schema : null
 		},
 
+		/** The form dialog's schema: the edited row's own when it is of another pair. */
+		formSchema() {
+			return this.rowFormTarget ? this.rowFormSchema : this.effectiveSchema
+		},
+
+		/** The form dialog's register, following `formSchema`. */
+		formRegister() {
+			return this.rowFormTarget ? this.rowFormTarget.register : this.register
+		},
+
 		/**
 		 * Schema slug for the export-leaf URL — the `schema` prop directly
 		 * when it's a string (self-fetch mode's precondition), else the
@@ -4857,8 +4987,7 @@ export default {
 							this.$emit('edit-open', row)
 							return
 						}
-						this.editItem = row
-						this.showFormDialogVisible = true
+						this.openFormFor(row)
 					},
 					onCopy: (row) => {
 						this.actionTargetItem = row
@@ -5367,6 +5496,21 @@ export default {
 	},
 
 	watch: {
+		effectiveObjects: {
+			immediate: true,
+			handler(rows) {
+				if (!this.collectionUrl || !this.isSelfFetchMode || !Array.isArray(rows)) {
+					return
+				}
+				for (const row of rows) {
+					const id = row?.id ?? row?.['@self']?.id
+					if (id !== undefined && id !== null) {
+						this.collectionRowsById.set(id, row)
+					}
+				}
+			},
+		},
+
 		// A column or form field bound to a property the schema lacks is told to the host once.
 		effectiveSchema: {
 			immediate: true,
@@ -5559,6 +5703,9 @@ export default {
 		if (this.splitViewEnabled && typeof window !== 'undefined') {
 			window.addEventListener('resize', this.measureSplitViewport)
 		}
+		if (typeof window !== 'undefined') {
+			window.addEventListener(OBJECTS_CHANGED_EVENT, this.onObjectsChanged)
+		}
 		this.loadManualOrder()
 		this.loadPersonalColumns()
 		this.publishHoistedSidebar()
@@ -5583,6 +5730,8 @@ export default {
 		this.selfActions = createSelfModeActions({
 			isSelfFetchMode: () => this.isSelfFetchMode,
 			selfObjectStore: () => this.selfObjectStore,
+			rowTarget: (row) => this.rowTypeTarget(row),
+			knownRow: (id) => this.collectionRowsById.get(id),
 			selfObjectType: () => this.selfObjectType,
 			list: () => this.list,
 			selectedIds: () => this.internalSelectedIds,
@@ -5608,13 +5757,14 @@ export default {
 	},
 
 	/**
-	 * Drop the resize listener and the hoisted sidebar.
+	 * Drop the window listeners and the hoisted sidebar.
 	 *
 	 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
 	 */
 	beforeUnmount() {
 		if (typeof window !== 'undefined') {
 			window.removeEventListener('resize', this.measureSplitViewport)
+			window.removeEventListener(OBJECTS_CHANGED_EVENT, this.onObjectsChanged)
 		}
 		// Clear the holder so the hoisted sidebar disappears when
 		// the user navigates away from the index page.
@@ -7076,6 +7226,33 @@ export default {
 			}
 		},
 
+		/**
+		 * Refresh the list when `dispatchObjectsChanged` names this page's
+		 * register and schema, by slug or id. A part missing on either side matches.
+		 *
+		 * @param {CustomEvent} event The objects-changed event.
+		 * @return {void}
+		 */
+		onObjectsChanged(event) {
+			// A collection list can hold rows of any pair, so any change may show in it.
+			if (this.isSelfFetchMode && this.collectionUrl) {
+				this.onRefreshEvent()
+				return
+			}
+			const detail = (event && event.detail) || {}
+			const schema = this.effectiveSchema
+			const schemaIds = [this.schema, schema && schema.id, schema && schema.slug]
+				.filter((v) => v !== undefined && v !== null && v !== '' && typeof v !== 'object')
+				.map(String)
+			if (detail.register && this.register && detail.register !== String(this.register)) {
+				return
+			}
+			if (detail.schema && schemaIds.length > 0 && !schemaIds.includes(detail.schema)) {
+				return
+			}
+			this.onRefreshEvent()
+		},
+
 		/** @return {Promise<void>} */
 		async onRefreshEvent() {
 			this.$emit('refresh')
@@ -8218,6 +8395,8 @@ export default {
 		closeFormDialog() {
 			this.showFormDialogVisible = false
 			this.editItem = null
+			this.rowFormTarget = null
+			this.rowFormSchema = null
 		},
 
 		/**
@@ -8278,8 +8457,55 @@ export default {
 		 * @public
 		 */
 		openFormDialog(item = null) {
-			this.editItem = item
-			this.showFormDialogVisible = true
+			return this.openFormFor(item)
+		},
+
+		/**
+		 * Open the form dialog for an item. A row of another pair (collectionUrl)
+		 * opens with its own schema; everything else opens at once, as before.
+		 *
+		 * @param {object|null} item The row to edit, or null to create.
+		 * @return {Promise<void>|void}
+		 */
+		openFormFor(item) {
+			const target = item ? this.rowTypeTarget(item) : null
+			if (!target) {
+				this.rowFormTarget = null
+				this.rowFormSchema = null
+				this.editItem = item
+				this.showFormDialogVisible = true
+				return
+			}
+			const store = this.selfObjectStore
+			return Promise.resolve(store.getSchema?.(target.type) || store.fetchSchema?.(target.type))
+				.catch(() => null)
+				.then((schema) => {
+					if (!schema) {
+						this.toastSavedView('error', t('nextcloud-vue', 'Could not load the form for this item.'))
+						return
+					}
+					this.rowFormTarget = target
+					this.rowFormSchema = schema
+					this.editItem = item
+					this.showFormDialogVisible = true
+				})
+		},
+
+		/**
+		 * The row's own pair when it differs from the page's in a collectionUrl list.
+		 *
+		 * @param {object} row The row.
+		 * @return {{register: string, schema: string, type: string}|null} The pair, or null.
+		 */
+		rowTypeTarget(row) {
+			return resolveRowTarget({
+				collectionUrl: this.isSelfFetchMode ? this.collectionUrl : '',
+				register: this.register,
+				schema: this.schema,
+				primarySchema: this.effectiveSchema,
+				primaryRegister: this.selfObjectStore?.getRegister?.(this.selfObjectType) || null,
+				store: this.selfObjectStore,
+			}, row)
 		},
 
 		/**