@conduction/nextcloud-vue 2.106.0 → 2.107.0

package/src/components/CnSavedViewEditDialog/CnSavedViewEditDialog.vue

@@ -0,0 +1,192 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<NcDialog
+		:name="resolvedTitle"
+		size="small"
+		:noClose="loading"
+		@closing="onClose">
+		<div class="cn-edit-view" data-testid="cn-modal" data-testid-modal="cn-saved-view-edit-dialog">
+			<NcNoteCard v-if="error" type="error">
+				{{ error }}
+			</NcNoteCard>
+			<p class="cn-edit-view__intro">
+				{{ t('nextcloud-vue', 'Give the view another name, or replace its criteria with what the list shows now.') }}
+			</p>
+			<NcTextField
+				:modelValue="name"
+				:label="t('nextcloud-vue', 'Name')"
+				:labelVisible="true"
+				data-testid="cn-saved-view-edit-name"
+				@update:modelValue="(v) => name = v" />
+			<fieldset class="cn-edit-view__criteria" data-testid="cn-saved-view-edit-replace">
+				<legend>{{ t('nextcloud-vue', 'Criteria') }}</legend>
+				<NcCheckboxRadioSwitch
+					type="radio"
+					name="cn-edit-view-criteria"
+					value="keep"
+					:modelValue="replaceCriteria ? 'replace' : 'keep'"
+					data-testid="cn-saved-view-edit-keep"
+					@update:modelValue="replaceCriteria = false">
+					{{ t('nextcloud-vue', 'Keep what is saved') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					type="radio"
+					name="cn-edit-view-criteria"
+					value="replace"
+					:modelValue="replaceCriteria ? 'replace' : 'keep'"
+					data-testid="cn-saved-view-edit-replace-current"
+					@update:modelValue="replaceCriteria = true">
+					{{ t('nextcloud-vue', 'Replace with the current search term, filters and sort') }}
+				</NcCheckboxRadioSwitch>
+			</fieldset>
+			<p v-if="isShared" class="cn-edit-view__note">
+				{{ t('nextcloud-vue', 'Whoever you share the view with sees the change at once.') }}
+			</p>
+		</div>
+		<template #actions>
+			<NcButton :disabled="loading" @click="onClose">
+				{{ t('nextcloud-vue', 'Cancel') }}
+			</NcButton>
+			<NcButton
+				variant="primary"
+				:disabled="loading || !name.trim()"
+				data-testid="cn-saved-view-edit-confirm"
+				@click="onConfirm">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" :name="t('nextcloud-vue', 'Loading …')" />
+				</template>
+				{{ t('nextcloud-vue', 'Save') }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcCheckboxRadioSwitch, NcDialog, NcLoadingIcon, NcNoteCard, NcTextField } from '@nextcloud/vue'
+
+/**
+ * CnSavedViewEditDialog — rename an own saved view and, when asked, replace
+ * its criteria with the filters, search and sort the list shows now. Opened by
+ * `CnIndexPage` from the Edit entry of `CnSavedViewsControl`. Emits
+ * `confirm({ name, replaceCriteria })`; the parent saves and either closes the
+ * dialog or reports a failure through `setError()`, which keeps the form open.
+ *
+ * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-3
+ */
+export default {
+	name: 'CnSavedViewEditDialog',
+
+	components: { NcButton, NcCheckboxRadioSwitch, NcDialog, NcLoadingIcon, NcNoteCard, NcTextField },
+
+	props: {
+		/** The view being edited (its `name` fills the field). */
+		view: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** Dialog title; empty reads "Edit view: {name}". */
+		dialogTitle: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['close', 'confirm'],
+
+	data() {
+		return {
+			name: (this.view && typeof this.view.name === 'string') ? this.view.name : '',
+			replaceCriteria: false,
+			loading: false,
+			error: '',
+		}
+	},
+
+	computed: {
+		/** @return {string} The title. */
+		resolvedTitle() {
+			return this.dialogTitle || t('nextcloud-vue', 'Edit view: {name}', { name: (this.view && this.view.name) || '' })
+		},
+
+		/** @return {boolean} Whether the view is shared with anyone. */
+		isShared() {
+			return Array.isArray(this.view && this.view.sharedWith) && this.view.sharedWith.length > 0
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Save clicked with a non-empty name.
+		 *
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-3
+		 */
+		onConfirm() {
+			if (!this.name.trim()) {
+				return
+			}
+			this.loading = true
+			this.error = ''
+			/**
+			 * @event confirm Save clicked. Payload: `{ name, replaceCriteria }`.
+			 * @type {object}
+			 */
+			this.$emit('confirm', { name: this.name.trim(), replaceCriteria: this.replaceCriteria })
+		},
+
+		onClose() {
+			/** @event close Dialog dismissed. */
+			this.$emit('close')
+		},
+
+		/**
+		 * Parent-callable (via ref): show a refused save and re-enable the form.
+		 *
+		 * @param {string} message The server's message.
+		 * @public
+		 */
+		setError(message) {
+			this.loading = false
+			this.error = message || t('nextcloud-vue', 'Could not save the view')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-edit-view__intro,
+.cn-edit-view__note {
+	margin: 0;
+}
+
+.cn-edit-view__note {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-edit-view__criteria {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.cn-edit-view__criteria legend {
+	font-weight: bold;
+	margin-bottom: 4px;
+}
+
+.cn-edit-view {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-block: 8px;
+}
+</style>

package/src/components/CnSavedViewEditDialog/index.js

@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSavedViewEditDialog — rename a saved view, optionally with the current filters.
+ */
+
+import CnSavedViewEditDialog from './CnSavedViewEditDialog.vue'
+
+export { CnSavedViewEditDialog }
+export default CnSavedViewEditDialog

package/src/components/CnSavedViewShareDialog/CnSavedViewShareDialog.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<NcDialog
-		:name="dialogTitle"
+		:name="resolvedTitle"
 		size="small"
 		:noClose="loading"
 		@closing="onClose">
@@ -12,6 +12,9 @@
 			<NcNoteCard v-if="error" type="error">
 				{{ error }}
 			</NcNoteCard>
+			<p class="cn-share-view__intro">
+				{{ t('nextcloud-vue', 'Whoever gets the view sees it under Shared with me. It is yours and stays yours.') }}
+			</p>
 			<CnSavedViewShareFields v-model="sharedWith" />
 		</div>
 		<template #actions>
@@ -36,6 +39,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcDialog, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import CnSavedViewShareFields from '../CnSavedViewShareFields/CnSavedViewShareFields.vue'
+import { normalizeSharedWith } from '../../utils/savedViewHelpers.js'
 
 /**
  * CnSavedViewShareDialog — change who a saved view is shared with. Opened by
@@ -55,10 +59,10 @@ export default {
 			default: () => ({}),
 		},
 
-		/** Dialog title. */
+		/** Dialog title; empty reads "Share view: {name}". */
 		dialogTitle: {
 			type: String,
-			default: () => t('nextcloud-vue', 'Share view'),
+			default: '',
 		},
 	},
 
@@ -66,12 +70,19 @@ export default {
 
 	data() {
 		return {
-			sharedWith: Array.isArray(this.view && this.view.sharedWith) ? this.view.sharedWith.map((e) => ({ group: e.group, mode: e.mode === 'write' ? 'write' : 'read' })) : [],
+			sharedWith: normalizeSharedWith(this.view && this.view.sharedWith),
 			loading: false,
 			error: '',
 		}
 	},
 
+	computed: {
+		/** @return {string} The title: `dialogTitle`, else "Share view: {name}". */
+		resolvedTitle() {
+			return this.dialogTitle || t('nextcloud-vue', 'Share view: {name}', { name: (this.view && this.view.name) || '' })
+		},
+	},
+
 	methods: {
 		t,
 
@@ -79,8 +90,8 @@ export default {
 			this.loading = true
 			this.error = ''
 			/**
-			 * @event confirm Save clicked. Payload: the audience, `[{ group, mode }]` (`[]` to stop sharing).
-			 * @type {Array<{group: string, mode: string}>}
+			 * @event confirm Save clicked. Payload: the audience, `[{ group, mode }]` and `[{ user, mode }]` (`[]` to stop sharing).
+			 * @type {Array<{group?: string, user?: string, mode: string}>}
 			 */
 			this.$emit('confirm', this.sharedWith)
 		},
@@ -105,6 +116,10 @@ export default {
 </script>
 
 <style scoped>
+.cn-share-view__intro {
+	margin: 0;
+}
+
 .cn-share-view {
 	display: flex;
 	flex-direction: column;

package/src/components/CnSavedViewShareFields/CnSavedViewShareFields.vue

@@ -5,7 +5,7 @@
 <template>
 	<div v-if="available" class="cn-saved-view-share" data-testid="cn-saved-view-share">
 		<NcSelect
-			:inputLabel="t('nextcloud-vue', 'Share with groups')"
+			:inputLabel="t('nextcloud-vue', 'Share with')"
 			:modelValue="selectedOptions"
 			:options="options"
 			:multiple="true"
@@ -16,32 +16,75 @@
 			data-testid="cn-saved-view-share-groups"
 			@search="onSearch"
 			@update:modelValue="onGroups" />
-		<ul v-if="modelValue.length > 0" class="cn-saved-view-share__modes">
-			<li v-for="entry in modelValue" :key="entry.group" class="cn-saved-view-share__mode">
-				<span class="cn-saved-view-share__group">{{ labelOf(entry.group) }}</span>
-				<NcCheckboxRadioSwitch
-					:modelValue="entry.mode === 'write'"
-					:disabled="disabled"
-					:data-testid="`cn-saved-view-share-mode-${entry.group}`"
-					@update:modelValue="(on) => onMode(entry.group, on ? 'write' : 'read')">
-					{{ t('nextcloud-vue', 'May edit') }}
-				</NcCheckboxRadioSwitch>
-			</li>
-		</ul>
+		<p class="cn-saved-view-share__hint">
+			{{ t('nextcloud-vue', 'People and groups from your Nextcloud, as when sharing a file.') }}
+		</p>
+		<template v-if="modelValue.length > 0">
+			<h4 class="cn-saved-view-share__caption">
+				{{ t('nextcloud-vue', 'Shared with') }}
+			</h4>
+			<ul class="cn-saved-view-share__modes">
+				<li v-for="entry in modelValue" :key="keyOf(entry)" class="cn-saved-view-share__mode">
+					<span class="cn-saved-view-share__who">
+						<span class="cn-saved-view-share__group">{{ labelOf(keyOf(entry)) }}</span>
+						<span class="cn-saved-view-share__kind">{{ entry.user ? t('nextcloud-vue', 'Person') : t('nextcloud-vue', 'Group') }}</span>
+					</span>
+					<span
+						class="cn-saved-view-share__rights"
+						role="radiogroup"
+						:aria-label="t('nextcloud-vue', 'Rights of {name}', { name: labelOf(keyOf(entry)) })"
+						:data-testid="`cn-saved-view-share-mode-${keyOf(entry)}`">
+						<NcCheckboxRadioSwitch
+							type="radio"
+							:name="`cn-share-mode-${keyOf(entry)}`"
+							value="read"
+							:modelValue="entry.mode === 'write' ? 'write' : 'read'"
+							:disabled="disabled"
+							@update:modelValue="onMode(keyOf(entry), 'read')">
+							{{ t('nextcloud-vue', 'May use') }}
+						</NcCheckboxRadioSwitch>
+						<NcCheckboxRadioSwitch
+							type="radio"
+							:name="`cn-share-mode-${keyOf(entry)}`"
+							value="write"
+							:modelValue="entry.mode === 'write' ? 'write' : 'read'"
+							:disabled="disabled"
+							@update:modelValue="onMode(keyOf(entry), 'write')">
+							{{ t('nextcloud-vue', 'May update') }}
+						</NcCheckboxRadioSwitch>
+					</span>
+					<NcButton
+						variant="tertiary"
+						:aria-label="t('nextcloud-vue', 'Stop sharing with {name}', { name: labelOf(keyOf(entry)) })"
+						:disabled="disabled"
+						:data-testid="`cn-saved-view-share-remove-${keyOf(entry)}`"
+						@click="onRemove(keyOf(entry))">
+						<template #icon>
+							<Close :size="20" />
+						</template>
+					</NcButton>
+				</li>
+			</ul>
+			<p class="cn-saved-view-share__hint">
+				{{ t('nextcloud-vue', 'May use: sees the view under Shared with me. May update: can also replace the criteria. Deleting and sharing stay with you.') }}
+			</p>
+		</template>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
-import { searchGroupSharees } from '../../utils/searchGroupSharees.js'
+import { NcButton, NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import { searchUserAndGroupSharees } from '../../utils/searchGroupSharees.js'
 
 /**
- * CnSavedViewShareFields — the sharing section of a saved view: pick groups
- * from Nextcloud's sharee API and choose, per group, whether members may only
- * read the view or also edit it. Used by `CnSaveViewDialog` and the share
- * dialog of `CnIndexPage`. Renders nothing when the sharee API answers no
- * groups (sharing off, or no group the user may share with).
+ * CnSavedViewShareFields — the sharing section of a saved view: pick people
+ * and groups from Nextcloud's sharee API, within the instance's own sharing
+ * settings, and choose per entry whether it may only read the view or also
+ * edit it. Used by `CnSaveViewDialog` and the share dialog of `CnIndexPage`.
+ * Renders nothing when the sharee API answers nobody (sharing off, or nobody
+ * the user may share with). A group is keyed by its id, a user by `user:<uid>`.
  *
  * Example:
  * ```vue
@@ -51,13 +94,14 @@ import { searchGroupSharees } from '../../utils/searchGroupSharees.js'
 export default {
 	name: 'CnSavedViewShareFields',
 
-	components: { NcCheckboxRadioSwitch, NcSelect },
+	components: { Close, NcButton, NcCheckboxRadioSwitch, NcSelect },
 
 	props: {
 		/**
-		 * The chosen audience, `[{ group, mode }]` with `mode` `read` or `write`.
+		 * The chosen audience, `[{ group, mode }]` and `[{ user, mode }]` with
+		 * `mode` `read` or `write`.
 		 *
-		 * @type {Array<{group: string, mode: 'read'|'write'}>}
+		 * @type {Array<{group?: string, user?: string, mode: 'read'|'write'}>}
 		 */
 		modelValue: {
 			type: Array,
@@ -78,14 +122,14 @@ export default {
 			options: [],
 			known: {},
 			loading: false,
-			/** False until the first search came back with at least one group. */
+			/** False until the first search came back with at least one sharee. */
 			available: false,
 		}
 	},
 
 	computed: {
 		selectedOptions() {
-			return this.modelValue.map((e) => ({ id: e.group, label: this.labelOf(e.group) }))
+			return this.modelValue.map((e) => ({ id: this.keyOf(e), label: this.labelOf(this.keyOf(e)) }))
 		},
 	},
 
@@ -100,17 +144,28 @@ export default {
 	methods: {
 		t,
 
-		labelOf(group) {
-			return this.known[group] || group
+		/**
+		 * The key an audience entry or option goes by: the group id, or `user:<uid>`.
+		 *
+		 * @param {{group?: string, user?: string}} entry The entry.
+		 * @return {string}
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-5
+		 */
+		keyOf(entry) {
+			return typeof entry.user === 'string' && entry.user !== '' ? `user:${entry.user}` : entry.group
+		},
+
+		labelOf(key) {
+			return this.known[key] || (key.startsWith('user:') ? key.slice(5) : key)
 		},
 
 		async onSearch(query) {
 			this.loading = true
-			const found = await searchGroupSharees(query || '')
+			const found = await searchUserAndGroupSharees(query || '')
 			this.loading = false
-			this.options = found
-			found.forEach((g) => {
-				this.known = { ...this.known, [g.id]: g.label }
+			this.options = found.map((s) => ({ id: s.kind === 'user' ? `user:${s.id}` : s.id, label: s.label }))
+			this.options.forEach((o) => {
+				this.known = { ...this.known, [o.id]: o.label }
 			})
 			if (found.length > 0) {
 				this.available = true
@@ -120,15 +175,27 @@ export default {
 		onGroups(list) {
 			const groups = Array.isArray(list) ? list : []
 			const next = groups.map((g) => {
-				const existing = this.modelValue.find((e) => e.group === g.id)
-				return existing || { group: g.id, mode: 'read' }
+				const existing = this.modelValue.find((e) => this.keyOf(e) === g.id)
+				if (existing) {
+					return existing
+				}
+				return g.id.startsWith('user:') ? { user: g.id.slice(5), mode: 'read' } : { group: g.id, mode: 'read' }
 			})
-			/** @event update:modelValue The audience, `[{ group, mode }]`; `[]` when no group is picked. */
+			/** @event update:modelValue The audience, `[{ group, mode }]` and `[{ user, mode }]`; `[]` when nobody is picked. */
 			this.$emit('update:modelValue', next)
 		},
 
-		onMode(group, mode) {
-			this.$emit('update:modelValue', this.modelValue.map((e) => (e.group === group ? { ...e, mode } : e)))
+		/**
+		 * Stop sharing with one person or group.
+		 *
+		 * @param {string} key The entry's key.
+		 */
+		onRemove(key) {
+			this.$emit('update:modelValue', this.modelValue.filter((e) => this.keyOf(e) !== key))
+		},
+
+		onMode(key, mode) {
+			this.$emit('update:modelValue', this.modelValue.map((e) => (this.keyOf(e) === key ? { ...e, mode } : e)))
 		},
 	},
 }
@@ -145,6 +212,32 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 12px;
+	flex-wrap: wrap;
+	gap: 8px 12px;
+}
+
+.cn-saved-view-share__who {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 160px;
+	min-width: 0;
+}
+
+.cn-saved-view-share__kind,
+.cn-saved-view-share__hint {
+	margin: 0;
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-saved-view-share__rights {
+	display: flex;
+	gap: 8px;
+}
+
+.cn-saved-view-share__caption {
+	margin: 8px 0 0;
+	font-size: var(--default-font-size);
+	font-weight: bold;
 }
 </style>