@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.10

package/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue

@@ -0,0 +1,236 @@
+<template>
+	<div class="cn-schema-form__security-section">
+		<CnNoteCard type="info">
+			<p><strong>Role-Based Access Control (RBAC)</strong></p>
+			<p>Configure which Nextcloud user groups can perform CRUD operations on objects of this schema.</p>
+			<ul>
+				<li>If no groups are specified for an operation, all users can perform it</li>
+				<li>The 'admin' group always has full access (cannot be changed)</li>
+				<li>The object owner always has full access</li>
+				<li>'public' represents unauthenticated access</li>
+			</ul>
+		</CnNoteCard>
+
+		<div v-if="loadingGroups" class="cn-schema-form__loading-groups">
+			<NcLoadingIcon :size="20" />
+			<span>Loading user groups...</span>
+		</div>
+
+		<div v-else class="cn-schema-form__rbac-table-container">
+			<h3>Group Permissions</h3>
+			<table class="cn-schema-form__rbac-table">
+				<thead>
+					<tr>
+						<th>Group</th>
+						<th>Create</th>
+						<th>Read</th>
+						<th>Update</th>
+						<th>Delete</th>
+					</tr>
+				</thead>
+				<tbody>
+					<!-- Public group at top -->
+					<tr class="cn-schema-form__public-row">
+						<td class="cn-schema-form__group-name">
+							<span class="cn-schema-form__group-badge cn-schema-form__public">public</span>
+							<small>Unauthenticated users</small>
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('public', 'create')"
+								@update:checked="updateGroupPermission('public', 'create', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('public', 'read')"
+								@update:checked="updateGroupPermission('public', 'read', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('public', 'update')"
+								@update:checked="updateGroupPermission('public', 'update', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('public', 'delete')"
+								@update:checked="updateGroupPermission('public', 'delete', $event)" />
+						</td>
+					</tr>
+
+					<!-- User group (authenticated users) -->
+					<tr class="cn-schema-form__user-row">
+						<td class="cn-schema-form__group-name">
+							<span class="cn-schema-form__group-badge cn-schema-form__user">user</span>
+							<small>Authenticated users</small>
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('user', 'create')"
+								@update:checked="updateGroupPermission('user', 'create', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('user', 'read')"
+								@update:checked="updateGroupPermission('user', 'read', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('user', 'update')"
+								@update:checked="updateGroupPermission('user', 'update', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission('user', 'delete')"
+								@update:checked="updateGroupPermission('user', 'delete', $event)" />
+						</td>
+					</tr>
+
+					<!-- Regular user groups -->
+					<tr v-for="group in sortedUserGroups" :key="group.id">
+						<td class="cn-schema-form__group-name">
+							<span class="cn-schema-form__group-badge">{{ group.displayname || group.id }}</span>
+							<small v-if="group.displayname && group.displayname !== group.id">{{ group.id }}</small>
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission(group.id, 'create')"
+								@update:checked="updateGroupPermission(group.id, 'create', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission(group.id, 'read')"
+								@update:checked="updateGroupPermission(group.id, 'read', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission(group.id, 'update')"
+								@update:checked="updateGroupPermission(group.id, 'update', $event)" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="hasGroupPermission(group.id, 'delete')"
+								@update:checked="updateGroupPermission(group.id, 'delete', $event)" />
+						</td>
+					</tr>
+
+					<!-- Admin group at bottom (disabled) -->
+					<tr class="cn-schema-form__admin-row">
+						<td class="cn-schema-form__group-name">
+							<span class="cn-schema-form__group-badge cn-schema-form__admin">admin</span>
+							<small>Always has full access</small>
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="true"
+								:disabled="true" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="true"
+								:disabled="true" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="true"
+								:disabled="true" />
+						</td>
+						<td>
+							<NcCheckboxRadioSwitch
+								:checked="true"
+								:disabled="true" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<div class="cn-schema-form__rbac-summary">
+				<CnNoteCard v-if="!hasAnyPermissions" type="success">
+					<p><strong>Open Access:</strong> No specific permissions set - all users can perform all operations.</p>
+				</CnNoteCard>
+				<CnNoteCard v-else-if="isRestrictiveSchema" type="warning">
+					<p><strong>Restrictive Schema:</strong> Access is limited to specified groups only.</p>
+				</CnNoteCard>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	// NcNoteCard,
+	NcCheckboxRadioSwitch,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+import CnNoteCard from '../CnNoteCard/CnNoteCard.vue'
+
+/**
+ * CnSchemaSecurityTab — RBAC permissions table tab for CnSchemaFormDialog.
+ *
+ * Renders the schema-level authorization configuration. Mutates
+ * schemaItem.authorization directly.
+ */
+export default {
+	name: 'CnSchemaSecurityTab',
+	components: {
+		CnNoteCard,
+		NcCheckboxRadioSwitch,
+		NcLoadingIcon,
+	},
+	props: {
+		/** The full schema item — mutates authorization directly */
+		schemaItem: { type: Object, required: true },
+		/** Full user groups array */
+		userGroups: { type: Array, default: () => [] },
+		/** Filtered/sorted user groups (excludes admin/public) */
+		sortedUserGroups: { type: Array, default: () => [] },
+		/** Whether groups are loading */
+		loadingGroups: { type: Boolean, default: false },
+		/** Whether schema has any permissions set */
+		hasAnyPermissions: { type: Boolean, default: false },
+		/** Whether schema has restrictive permissions */
+		isRestrictiveSchema: { type: Boolean, default: false },
+	},
+	computed: {
+		/** Local alias to avoid vue/no-mutating-props on template bindings */
+		schema() {
+			return this.schemaItem
+		},
+	},
+	methods: {
+		hasGroupPermission(groupId, action) {
+			const auth = this.schema.authorization || {}
+			if (!auth[action] || !Array.isArray(auth[action])) {
+				return false
+			}
+			return auth[action].includes(groupId)
+		},
+
+		updateGroupPermission(groupId, action, hasPermission) {
+			if (!this.schema.authorization) {
+				this.$set(this.schema, 'authorization', {})
+			}
+
+			if (!this.schema.authorization[action]) {
+				this.$set(this.schema.authorization, action, [])
+			}
+
+			const currentPermissions = this.schema.authorization[action]
+			const groupIndex = currentPermissions.indexOf(groupId)
+
+			if (hasPermission && groupIndex === -1) {
+				currentPermissions.push(groupId)
+			} else if (!hasPermission && groupIndex !== -1) {
+				currentPermissions.splice(groupIndex, 1)
+			}
+
+			if (currentPermissions.length === 0) {
+				this.$delete(this.schema.authorization, action)
+			}
+
+			if (Object.keys(this.schema.authorization).length === 0) {
+				this.$set(this.schema, 'authorization', {})
+			}
+		},
+	},
+}
+</script>

package/src/components/CnSchemaFormDialog/index.js

@@ -0,0 +1 @@
+export { default as CnSchemaFormDialog } from './CnSchemaFormDialog.vue'

package/src/components/CnSettingsCard/index.js

@@ -1 +1 @@
-export { default as CnSettingsCard } from './CnSettingsCard.vue'
+export { default as CnSettingsCard } from './CnSettingsCard.vue'

package/src/components/CnSettingsSection/index.js

@@ -1 +1 @@
-export { default as CnSettingsSection } from './CnSettingsSection.vue'
+export { default as CnSettingsSection } from './CnSettingsSection.vue'

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -1,9 +1,9 @@
 <template>
 	<component
-		:is="clickable ? 'a' : 'div'"
+		:is="componentTag"
 		class="cn-stats-block"
 		:class="rootClasses"
-		v-bind="clickable ? { href: '#', role: 'button', tabindex: '0' } : {}"
+		v-bind="componentAttrs"
 		@click="onClick">
 		<!-- Icon -->
 		<div v-if="hasIcon" class="cn-stats-block__icon" :class="iconClasses">
@@ -18,7 +18,7 @@
 				<h4>{{ title || 'Objects' }}</h4>
 			</div>
 
-			<div v-if="count > 0" class="cn-stats-block__count">
+			<div v-if="count > 0 || (showZeroCount && count === 0)" class="cn-stats-block__count">
 				<span class="cn-stats-block__count-value">{{ formattedCount }}</span>
 				<span class="cn-stats-block__count-label">{{ countLabel }}</span>
 			</div>
@@ -31,7 +31,7 @@
 			</div>
 
 			<!-- Breakdown details -->
-			<div v-if="breakdown && count > 0" class="cn-stats-block__breakdown">
+			<div v-if="breakdown && (count > 0 || showZeroCount)" class="cn-stats-block__breakdown">
 				<div
 					v-for="(value, key) in breakdown"
 					:key="key"
@@ -70,6 +70,14 @@ import { NcLoadingIcon } from '@nextcloud/vue'
  *   clickable
  *   @click="goToCases" />
  *
+ * @example With route-based navigation (renders as <router-link>)
+ * <CnStatsBlock
+ *   title="Open Cases"
+ *   :count="42"
+ *   :icon="BriefcaseOutline"
+ *   variant="primary"
+ *   :route="{ name: 'Cases', query: { status: 'open' } }" />
+ *
  * @example With breakdown
  * <CnStatsBlock
  *   title="Cases"
@@ -152,6 +160,21 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** Whether to display 0 as a count value instead of the empty label */
+		showZeroCount: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Vue Router location object for declarative navigation.
+		 * When set, the card renders as a <router-link> and clickable styles are implied.
+		 * @example { name: 'Cases', query: { status: 'open' } }
+		 * @example { path: '/catalogi' }
+		 */
+		route: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	computed: {
@@ -163,10 +186,39 @@ export default {
 			return this.count.toLocaleString()
 		},
 
+		/**
+		 * Whether the card is interactive (clickable or has a route).
+		 * Used for applying hover/focus styles.
+		 */
+		isInteractive() {
+			return !!this.route || this.clickable
+		},
+
+		/**
+		 * Determines which HTML element or component to render.
+		 * - route set → 'router-link' (SPA navigation)
+		 * - clickable → 'a' (app handles click via event)
+		 * - neither → 'div' (static display)
+		 */
+		componentTag() {
+			if (this.route) return 'router-link'
+			if (this.clickable) return 'a'
+			return 'div'
+		},
+
+		/**
+		 * Dynamic attributes for the root element based on rendering mode.
+		 */
+		componentAttrs() {
+			if (this.route) return { to: this.route, tabindex: '0' }
+			if (this.clickable) return { href: '#', role: 'button', tabindex: '0' }
+			return {}
+		},
+
 		rootClasses() {
 			return {
 				'cn-stats-block--horizontal': this.horizontal,
-				'cn-stats-block--clickable': this.clickable,
+				'cn-stats-block--clickable': this.isInteractive,
 				[`cn-stats-block--${this.variant}`]: this.variant !== 'default',
 			}
 		},
@@ -184,6 +236,8 @@ export default {
 		},
 
 		onClick(event) {
+			// When route is set, router-link handles navigation — do not emit click
+			if (this.route) return
 			if (this.clickable) {
 				event.preventDefault()
 				this.$emit('click', event)
@@ -205,16 +259,22 @@ export default {
 	color: inherit;
 	border: 2px solid transparent;
 	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+	min-width: 0;
 }
 
 .cn-stats-block--horizontal {
 	flex-direction: row;
-	align-items: flex-start;
-	gap: 16px;
+	align-items: center;
+	gap: 12px;
 }
 
 .cn-stats-block--horizontal .cn-stats-block__content {
 	text-align: left;
+	min-width: 0;
 }
 
 .cn-stats-block--horizontal .cn-stats-block__count {
@@ -251,6 +311,8 @@ export default {
 
 .cn-stats-block--horizontal .cn-stats-block__icon {
 	margin-bottom: 0;
+	width: 36px;
+	height: 36px;
 }
 
 .cn-stats-block__icon--primary {
@@ -260,17 +322,17 @@ export default {
 
 .cn-stats-block__icon--success {
 	background: rgba(70, 186, 97, 0.1);
-	color: var(--color-success);
+	color: var(--color-element-success, var(--color-success));
 }
 
 .cn-stats-block__icon--warning {
 	background: rgba(232, 163, 24, 0.1);
-	color: var(--color-warning);
+	color: var(--color-element-warning, var(--color-warning));
 }
 
 .cn-stats-block__icon--error {
 	background: rgba(224, 36, 36, 0.1);
-	color: var(--color-error);
+	color: var(--color-element-error, var(--color-error));
 }
 
 /* Content */
@@ -282,34 +344,42 @@ export default {
 
 .cn-stats-block__header h4 {
 	margin-top: 0;
-	margin-bottom: 0.5rem;
+	margin-bottom: 0.25rem;
 	color: var(--color-main-text);
 	font-size: 14px;
 	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .cn-stats-block__count {
 	display: flex;
 	align-items: baseline;
 	justify-content: center;
-	gap: 0.5rem;
+	gap: 0.25rem;
 	font-size: 1.2rem;
-	margin-bottom: 0.5rem;
+	margin-bottom: 0.25rem;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
 .cn-stats-block__count-value {
 	font-size: 2rem;
 	font-weight: bold;
 	color: var(--color-primary-element);
+	flex-shrink: 0;
 }
 
 .cn-stats-block--primary .cn-stats-block__count-value { color: var(--color-primary-element); }
-.cn-stats-block--success .cn-stats-block__count-value { color: var(--color-success); }
-.cn-stats-block--warning .cn-stats-block__count-value { color: var(--color-warning); }
-.cn-stats-block--error .cn-stats-block__count-value { color: var(--color-error); }
+.cn-stats-block--success .cn-stats-block__count-value { color: var(--color-element-success, var(--color-success)); }
+.cn-stats-block--warning .cn-stats-block__count-value { color: var(--color-element-warning, var(--color-warning)); }
+.cn-stats-block--error .cn-stats-block__count-value { color: var(--color-element-error, var(--color-error)); }
 
 .cn-stats-block__count-label {
 	color: var(--color-text-maxcontrast);
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .cn-stats-block__loading {
@@ -360,7 +430,7 @@ export default {
 	background: var(--color-background-hover);
 }
 
-.cn-stats-block__breakdown-value--invalid { color: var(--color-warning); }
-.cn-stats-block__breakdown-value--deleted { color: var(--color-error); }
-.cn-stats-block__breakdown-value--published { color: var(--color-success); }
+.cn-stats-block__breakdown-value--invalid { color: var(--color-element-warning); }
+.cn-stats-block__breakdown-value--deleted { color: var(--color-element-error); }
+.cn-stats-block__breakdown-value--published { color: var(--color-element-success); }
 </style>

package/src/components/CnStatsBlock/index.js

@@ -1 +1 @@
-export { default as CnStatsBlock } from './CnStatsBlock.vue'
+export { default as CnStatsBlock } from './CnStatsBlock.vue'