@conduction/nextcloud-vue 0.1.0-beta.2 → 0.1.0-beta.4

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/CnSettingsCard.vue

@@ -1,92 +1,92 @@
-<template>
-	<div class="cn-settings-card" :class="{ 'cn-settings-card--collapsible': collapsible }">
-		<h4
-			v-if="title"
-			:class="{ 'cn-settings-card__header--clickable': collapsible }"
-			@click="collapsible ? toggleCollapsed() : null">
-			<span>{{ icon }} {{ title }}</span>
-			<ChevronDown
-				v-if="collapsible && !isCollapsed"
-				:size="20"
-				class="cn-settings-card__chevron" />
-			<ChevronUp
-				v-if="collapsible && isCollapsed"
-				:size="20"
-				class="cn-settings-card__chevron" />
-		</h4>
-
-		<transition v-if="collapsible" name="cn-slide-fade">
-			<div v-show="!isCollapsed" class="cn-settings-card__content">
-				<slot />
-			</div>
-		</transition>
-
-		<div v-else>
-			<slot />
-		</div>
-	</div>
-</template>
-
-<script>
-import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
-import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
-
-/**
- * CnSettingsCard — Collapsible card for settings and configuration sections.
- *
- * Extracted from OpenRegister's SettingsCard. Provides a titled card with
- * optional collapse/expand animation.
- *
- * @example
- * <CnSettingsCard title="Database Settings" icon="🗄️" collapsible>
- *   <p>Content here</p>
- * </CnSettingsCard>
- */
-export default {
-	name: 'CnSettingsCard',
-
-	components: {
-		ChevronDown,
-		ChevronUp,
-	},
-
-	props: {
-		/** Card title text */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** Icon emoji or text displayed before the title */
-		icon: {
-			type: String,
-			default: '',
-		},
-		/** Whether the card can be collapsed */
-		collapsible: {
-			type: Boolean,
-			default: false,
-		},
-		/** Whether the card starts collapsed (only applies when collapsible) */
-		defaultCollapsed: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			isCollapsed: this.defaultCollapsed,
-		}
-	},
-
-	methods: {
-		toggleCollapsed() {
-			if (this.collapsible) {
-				this.isCollapsed = !this.isCollapsed
-				/** @event toggle Emitted when collapse state changes. Payload: isCollapsed boolean. */
-				this.$emit('toggle', this.isCollapsed)
-			}
-		},
-	},
-}
-</script>
+<template>
+	<div class="cn-settings-card" :class="{ 'cn-settings-card--collapsible': collapsible }">
+		<h4
+			v-if="title"
+			:class="{ 'cn-settings-card__header--clickable': collapsible }"
+			@click="collapsible ? toggleCollapsed() : null">
+			<span>{{ icon }} {{ title }}</span>
+			<ChevronDown
+				v-if="collapsible && !isCollapsed"
+				:size="20"
+				class="cn-settings-card__chevron" />
+			<ChevronUp
+				v-if="collapsible && isCollapsed"
+				:size="20"
+				class="cn-settings-card__chevron" />
+		</h4>
+
+		<transition v-if="collapsible" name="cn-slide-fade">
+			<div v-show="!isCollapsed" class="cn-settings-card__content">
+				<slot />
+			</div>
+		</transition>
+
+		<div v-else>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+
+/**
+ * CnSettingsCard — Collapsible card for settings and configuration sections.
+ *
+ * Extracted from OpenRegister's SettingsCard. Provides a titled card with
+ * optional collapse/expand animation.
+ *
+ * @example
+ * <CnSettingsCard title="Database Settings" icon="🗄️" collapsible>
+ *   <p>Content here</p>
+ * </CnSettingsCard>
+ */
+export default {
+	name: 'CnSettingsCard',
+
+	components: {
+		ChevronDown,
+		ChevronUp,
+	},
+
+	props: {
+		/** Card title text */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Icon emoji or text displayed before the title */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/** Whether the card can be collapsed */
+		collapsible: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether the card starts collapsed (only applies when collapsible) */
+		defaultCollapsed: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			isCollapsed: this.defaultCollapsed,
+		}
+	},
+
+	methods: {
+		toggleCollapsed() {
+			if (this.collapsible) {
+				this.isCollapsed = !this.isCollapsed
+				/** @event toggle Emitted when collapse state changes. Payload: isCollapsed boolean. */
+				this.$emit('toggle', this.isCollapsed)
+			}
+		},
+	},
+}
+</script>

package/src/components/CnSettingsCard/index.js

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