@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/src/components/CnFollowToggle/CnFollowToggle.vue

@@ -3,22 +3,41 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<span class="cn-follow-toggle" data-testid="cn-follow-toggle">
+	<span class="cn-follow-toggle"
+		:class="{ 'cn-follow-toggle--compact': compact }"
+		data-testid="cn-follow-toggle">
 		<NcButton
-			:variant="state ? 'secondary' : 'tertiary'"
+			:variant="state && !compact ? 'secondary' : 'tertiary'"
 			:aria-pressed="state ? 'true' : 'false'"
+			:aria-label="compact ? (state ? followingLabel : followLabel) : undefined"
 			:title="tooltip"
 			:disabled="busy"
 			data-testid="cn-follow-toggle-button"
 			@click.stop="toggle">
 			<template #icon>
-				<Bell v-if="state" :size="20" />
-				<BellOutline v-else :size="20" />
+				<Eye v-if="state" :size="20" class="cn-follow-toggle__on" />
+				<EyeOutline v-else :size="20" />
+			</template>
+			<template v-if="!compact">
+				{{ state ? followingLabel : followLabel }}
+			</template>
+		</NcButton>
+		<NcButton
+			v-if="showNotifySwitch"
+			variant="tertiary"
+			:aria-pressed="notifyState ? 'true' : 'false'"
+			:aria-label="notifyLabel"
+			:title="notifyLabel"
+			:disabled="busy"
+			data-testid="cn-follow-toggle-notify"
+			@click.stop="toggleNotify">
+			<template #icon>
+				<Bell v-if="notifyState" :size="20" />
+				<BellOffOutline v-else :size="20" />
 			</template>
-			{{ state ? followingLabel : followLabel }}
 		</NcButton>
 		<NcPopover
-			v-if="count !== null"
+			v-if="count !== null && !compact"
 			v-model:shown="open"
 			placement="bottom-start">
 			<template #trigger>
@@ -82,15 +101,26 @@
 import { translate as t } from '@nextcloud/l10n'
 import { NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect } from '@nextcloud/vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
-import BellOutline from 'vue-material-design-icons/BellOutline.vue'
+import BellOffOutline from 'vue-material-design-icons/BellOffOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { listWatchers, setWatcher, setWatching } from '../../utils/recordInteractions.js'
 import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 
 /**
- * CnFollowToggle — a Follow toggle bound to a record's `@self.watching` marker,
- * with the follower count and a followers popover for users who may see them.
+ * CnFollowToggle — the one Follow control of a record: a Follow toggle bound to
+ * `@self.watching`, a notifications switch bound to `@self.watchNotify`, the
+ * follower count and a followers popover for users who may see them.
+ *
+ * Following and favourites are one feature (OpenRegister's
+ * `merge-follow-and-favourites`): a favourite is a follow with notifications
+ * off, so there is no separate star. While the user follows, a bell beside the
+ * toggle turns the follow's notifications on or off (`PUT .../watch` with
+ * `{"notify": bool}`). With `notifies` false (the register sends no change
+ * notifications) the bell is not offered. `compact` renders the toggle as an
+ * icon only, without the bell, count or popover, for a column in a list.
  *
  * A click flips the toggle at once and sends `PUT` or `DELETE .../watch`; on
  * failure it flips back and shows the server's message, and a 404 says the
@@ -105,13 +135,14 @@ import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
  * Example:
  * ```vue
  * <CnFollowToggle register="pipelinq" schema="ticket" :object-id="id"
- *   :watching="self.watching" :watcher-count="self.watcherCount" :can-manage="self.can && self.can.manage" />
+ *   :watching="self.watching" :notify="self.watchNotify"
+ *   :watcher-count="self.watcherCount" :can-manage="self.can && self.can.manage" />
  * ```
  */
 export default {
 	name: 'CnFollowToggle',
 
-	components: { Bell, BellOutline, Close, NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect },
+	components: { Bell, BellOffOutline, Close, Eye, EyeOutline, NcAvatar, NcButton, NcLoadingIcon, NcPopover, NcSelect },
 
 	props: {
 		/** Register slug of the record. */
@@ -138,6 +169,21 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Whether the user's follow notifies them (`@self.watchNotify`). Null
+		 * (an older server, or not following) reads as on.
+		 */
+		notify: {
+			type: Boolean,
+			default: null,
+		},
+
+		/** Icon only, without the bell, count or popover: for a column in a list. */
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Number of followers (`@self.watcherCount`). Null hides the count and the popover. */
 		watcherCount: {
 			type: Number,
@@ -168,6 +214,7 @@ export default {
 	data() {
 		return {
 			state: this.watching,
+			notifyState: this.notify !== false,
 			count: this.watcherCount,
 			busy: false,
 			open: false,
@@ -196,6 +243,21 @@ export default {
 			return t('nextcloud-vue', 'Add a colleague')
 		},
 
+		notifyLabel() {
+			return this.notifyState
+				? t('nextcloud-vue', 'Turn notifications off')
+				: t('nextcloud-vue', 'Turn notifications on')
+		},
+
+		/**
+		 * Whether the bell renders: following, not compact, and the register notifies.
+		 *
+		 * @return {boolean}
+		 */
+		showNotifySwitch() {
+			return this.state && !this.compact && this.notifies
+		},
+
 		followersLabel() {
 			return t('nextcloud-vue', '{count} followers', { count: this.count })
 		},
@@ -216,6 +278,10 @@ export default {
 			this.state = value
 		},
 
+		notify(value) {
+			this.notifyState = value !== false
+		},
+
 		watcherCount(value) {
 			this.count = value
 		},
@@ -272,12 +338,47 @@ export default {
 				}
 				return
 			}
+			// A new follow notifies (the server's default); an unfollow has no switch.
+			this.notifyState = this.state
 			patchStoredSelf(this.register, this.schema, this.objectId, {
 				watching: this.state,
+				favourite: this.state,
+				watchNotify: this.state ? true : undefined,
 				...(this.count !== null ? { watcherCount: this.count } : {}),
 			})
-			/** @event change Emitted after a successful call. Payload: `{ watching, count }`. */
-			this.$emit('change', { watching: this.state, count: this.count })
+			/** @event change Emitted after a successful call. Payload: `{ watching, notify, count }`. */
+			this.$emit('change', { watching: this.state, notify: this.state ? this.notifyState : null, count: this.count })
+		},
+
+		/**
+		 * Turn the follow's notifications on or off, optimistically.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/one-follow-control/specs/record-follow/spec.md#requirement-one-follow-control-with-a-notifications-switch
+		 */
+		async toggleNotify() {
+			if (this.busy || !this.state) {
+				return
+			}
+			const previous = this.notifyState
+			this.notifyState = !previous
+			this.busy = true
+			const result = await setWatching(this.register, this.schema, this.objectId, true, { notify: this.notifyState })
+			this.busy = false
+			if (!result.ok) {
+				this.notifyState = previous
+				const message = result.status === 404
+					? t('nextcloud-vue', 'You can no longer see this record.')
+					: (result.message || t('nextcloud-vue', 'Could not change notifications.'))
+				import('@nextcloud/dialogs').then(({ showError }) => showError(message)).catch(() => {})
+				this.$emit('error', message)
+				if (result.status === 404) {
+					this.$emit('not-found')
+				}
+				return
+			}
+			patchStoredSelf(this.register, this.schema, this.objectId, { watchNotify: this.notifyState })
+			this.$emit('change', { watching: true, notify: this.notifyState, count: this.count })
 		},
 
 		async loadWatchers() {
@@ -340,6 +441,10 @@ export default {
 	gap: 4px;
 }
 
+.cn-follow-toggle__on {
+	color: var(--color-primary-element);
+}
+
 .cn-follow-toggle__popover {
 	min-width: 260px;
 	padding: 12px;

package/src/components/CnIndexPage/CnIndexPage.md

@@ -358,6 +358,8 @@ export default {
 | `includeColumns` | Array | `null` | Column keys to show (whitelist); `null` means all |
 | `columnOverrides` | Object | `{}` | Per-column config overrides in schema mode |
 | `emptyText` | String | `'No items found'` | Text shown in the empty state |
+| `lenses` | Object \| null | `null` | The personal-lens report of the list on screen (`@self.lenses` of the response) for a host that fetches itself. In self-fetch mode the page reads it from the store. See [When a lens cannot answer](#when-a-lens-cannot-answer). |
+| `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable lens, keyed `<lens>.<reason>` or `<reason>`. |
 | `loadingText` | String | `'Loading…'` | Accessible label for the loading spinner (NcLoadingIcon aria-label) |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every table row — a static MDI name or `(row) => iconName`. Forwarded to CnDataTable; fed from the manifest as `pages[].config.rowIcon`. Unset = no icon column. |
 | `rowClass` | Function | `null` | Callback returning CSS class(es) for a row |
@@ -434,6 +436,21 @@ list nested under a parent route (`/forms/:id/submissions`) is a fully
 declarative page. When `objects` **is** supplied (every existing consumer),
 nothing changes — no store is touched and `filter` has no effect.
 
+### Mixed-schema lists (`collectionUrl`)
+
+Set `collectionUrl` to list from an endpoint that searches several
+register/schema pairs at once. `register` and `schema` stay the page's own
+pair (columns, Add, export, import); a row of another pair edits, saves and
+deletes through its own `@self.register` / `@self.schema`.
+
+```js static
+<CnIndexPage
+  title="Publications"
+  register="19"
+  schema="24"
+  :collection-url="generateUrl('/apps/opencatalogi/api/{slug}', { slug })" />
+```
+
 ## Named entity sources (`config.entitySource`) — lists that are not OpenRegister objects
 
 Self-fetch needs a `register` + `schema` pair. Some lists have neither: a flow
@@ -979,6 +996,40 @@ A person who has claimed no teams gets an empty list, and the tab says so
 through `narrowsToNothing`. A lens labelled "my teams" that quietly showed
 every team would be a label stating one rule while the fetch ran another.
 
+### When a lens cannot answer
+
+OpenRegister reports, for every personal lens a list asked for, whether it
+could answer (openregister#4514, needed for any effect):
+
+```json
+{ "results": [], "@self": { "lenses": { "recent": { "available": false, "reason": "audit-trail-disabled" } } } }
+```
+
+When a lens reports `available: false`, the empty state says why instead of
+showing `emptyText`:
+
+| Reason | Text |
+|---|---|
+| `audit-trail-disabled` | This server does not keep track of what you open. |
+| `anonymous` | Log in to see what you opened recently. |
+| `read-history-unavailable` | Your recent items are not available right now. |
+
+The texts are object-neutral and translated (Dutch: "Deze server houdt niet
+bij welke items je opent.", "Log in om te zien wat je onlangs opende.", "Je
+recente items zijn nu niet beschikbaar."). Say it in the app's own words with
+`lensReasonTexts`:
+
+```html
+<CnIndexPage :lens-reason-texts="{ 'recent.audit-trail-disabled': t('dossiq', 'This server does not keep track of which cases you open.') }" />
+```
+
+A response without `@self.lenses`, a lens that is available, or a reason with
+no text keeps `emptyText`, and an `#empty` slot still wins. The lens name is a
+key, so another lens (`watching`) that starts reporting needs only text. The
+store keeps the report as `lenses[type]` and `useListView` exposes it as
+`lenses`; `readLensReports` and `lensUnavailableText` are in
+`src/utils/lensAvailability.js`.
+
 ### Row actions and indicators
 
 See the two sections below. Row actions are the intersection of what the page