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

package/src/store/useObjectStore.js

@@ -103,6 +103,8 @@ function baseState() {
 		searchTerms: {},
 		/** @type {Object<string, object|null>} */
 		schemas: {},
+		/** @type {Object<string, object>} Facet data per type for CnIndexSidebar: { fieldName: { values: [{value, count}] } } */
+		facets: {},
 		/** @type {{baseUrl: string}} */
 		_options: {
 			baseUrl: DEFAULT_BASE_URL,
@@ -167,6 +169,12 @@ const baseGetters = {
 	 * @return {Function} (type: string) => object|null
 	 */
 	getSchema: (state) => (type) => state.schemas[type] || null,
+
+	/**
+	 * Get facet data for a type (CnIndexSidebar-compatible format).
+	 * @return {Function} (type: string) => object
+	 */
+	getFacets: (state) => (type) => state.facets[type] || {},
 }
 
 // ── Base actions ────────────────────────────────────────────────────────
@@ -191,14 +199,17 @@ const baseActions = {
 	 * @param {string} registerId OpenRegister register ID
 	 */
 	registerObjectType(slug, schemaId, registerId) {
-		this.objectTypeRegistry[slug] = { schema: schemaId, register: registerId }
-		this.collections[slug] = []
-		this.objects[slug] = {}
-		this.loading[slug] = false
-		this.errors[slug] = null
-		this.pagination[slug] = { total: 0, page: 1, pages: 1, limit: 20 }
-		this.searchTerms[slug] = ''
-		this.schemas[slug] = null
+		// Replace entire objects so Vue 2 reactivity detects the change
+		// (Vue 2 cannot track new properties added to existing reactive objects)
+		this.objectTypeRegistry = { ...this.objectTypeRegistry, [slug]: { schema: schemaId, register: registerId } }
+		this.collections = { ...this.collections, [slug]: [] }
+		this.objects = { ...this.objects, [slug]: {} }
+		this.loading = { ...this.loading, [slug]: false }
+		this.errors = { ...this.errors, [slug]: null }
+		this.pagination = { ...this.pagination, [slug]: { total: 0, page: 1, pages: 1, limit: 20 } }
+		this.searchTerms = { ...this.searchTerms, [slug]: '' }
+		this.schemas = { ...this.schemas, [slug]: null }
+		this.facets = { ...this.facets, [slug]: {} }
 	},
 
 	/**
@@ -215,6 +226,7 @@ const baseActions = {
 		delete this.pagination[slug]
 		delete this.searchTerms[slug]
 		delete this.schemas[slug]
+		delete this.facets[slug]
 	},
 
 	/**
@@ -254,7 +266,7 @@ const baseActions = {
 	 * @param {string} type The type slug
 	 */
 	clearError(type) {
-		this.errors[type] = null
+		this.errors = { ...this.errors, [type]: null }
 	},
 
 	/**
@@ -264,7 +276,7 @@ const baseActions = {
 	 * @param {string} term The search term
 	 */
 	setSearchTerm(type, term) {
-		this.searchTerms[type] = term
+		this.searchTerms = { ...this.searchTerms, [type]: term }
 	},
 
 	/**
@@ -273,7 +285,7 @@ const baseActions = {
 	 * @param {string} type The type slug
 	 */
 	clearSearchTerm(type) {
-		this.searchTerms[type] = ''
+		this.searchTerms = { ...this.searchTerms, [type]: '' }
 	},
 
 	/**
@@ -299,7 +311,7 @@ const baseActions = {
 			if (!response.ok) return null
 
 			const schema = await response.json()
-			this.schemas[type] = schema
+			this.schemas = { ...this.schemas, [type]: schema }
 			return schema
 		} catch {
 			return null
@@ -314,11 +326,23 @@ const baseActions = {
 	 * @return {Promise<Array>} The fetched collection (also stored in state)
 	 */
 	async fetchCollection(type, params = {}) {
-		this.loading[type] = true
-		this.errors[type] = null
+		this.loading = { ...this.loading, [type]: true }
+		this.errors = { ...this.errors, [type]: null }
 
 		try {
-			const url = this._buildUrl(type) + buildQueryString(params)
+			// Auto-include _facets=extend when schema has facetable properties
+			const fetchParams = { ...params }
+			if (!fetchParams._facets) {
+				const schema = this.schemas[type]
+				const hasFacetable = schema
+					&& schema.properties
+					&& Object.values(schema.properties).some((p) => p.facetable)
+				if (hasFacetable) {
+					fetchParams._facets = 'extend'
+				}
+			}
+
+			const url = this._buildUrl(type) + buildQueryString(fetchParams)
 
 			const response = await fetch(url, {
 				method: 'GET',
@@ -326,30 +350,54 @@ const baseActions = {
 			})
 
 			if (!response.ok) {
-				this.errors[type] = await parseResponseError(response, type)
+				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) }
 				console.error(`Error fetching ${type} collection:`, this.errors[type])
 				return []
 			}
 
 			const data = await response.json()
+			const results = data.results || data
+
+			this.collections = { ...this.collections, [type]: results }
+			this.pagination = {
+				...this.pagination,
+				[type]: {
+					total: data.total || results.length,
+					page: data.page || 1,
+					pages: data.pages || 1,
+					limit: params._limit || 20,
+				},
+			}
 
-			this.collections[type] = data.results || data
-			this.pagination[type] = {
-				total: data.total || (data.results || data).length,
-				page: data.page || 1,
-				pages: data.pages || 1,
-				limit: params._limit || 20,
+			// Parse facet data from API response and transform to CnIndexSidebar format
+			if (data.facets) {
+				const transformed = {}
+				for (const [key, facet] of Object.entries(data.facets)) {
+					if (facet.buckets || facet.data?.buckets) {
+						const buckets = facet.buckets || facet.data.buckets
+						transformed[key] = {
+							values: buckets.map((b) => ({
+								value: b.key ?? b.value,
+								count: b.count || 0,
+							})),
+						}
+					}
+				}
+				this.facets = { ...this.facets, [type]: transformed }
 			}
 
-			return this.collections[type]
+			return results
 		} catch (error) {
-			this.errors[type] = error.name === 'TypeError'
-				? networkError(error)
-				: genericError(error)
+			this.errors = {
+				...this.errors,
+				[type]: error.name === 'TypeError'
+					? networkError(error)
+					: genericError(error),
+			}
 			console.error(`Error fetching ${type} collection:`, error)
 			return []
 		} finally {
-			this.loading[type] = false
+			this.loading = { ...this.loading, [type]: false }
 		}
 	},
 
@@ -361,8 +409,8 @@ const baseActions = {
 	 * @return {Promise<object|null>} The fetched object (also cached in state)
 	 */
 	async fetchObject(type, id) {
-		this.loading[type] = true
-		this.errors[type] = null
+		this.loading = { ...this.loading, [type]: true }
+		this.errors = { ...this.errors, [type]: null }
 
 		try {
 			const url = this._buildUrl(type, id)
@@ -373,27 +421,30 @@ const baseActions = {
 			})
 
 			if (!response.ok) {
-				this.errors[type] = await parseResponseError(response, type)
+				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) }
 				console.error(`Error fetching ${type}/${id}:`, this.errors[type])
 				return null
 			}
 
 			const data = await response.json()
 
-			if (!this.objects[type]) {
-				this.objects[type] = {}
+			this.objects = {
+				...this.objects,
+				[type]: { ...(this.objects[type] || {}), [id]: data },
 			}
-			this.objects[type][id] = data
 
 			return data
 		} catch (error) {
-			this.errors[type] = error.name === 'TypeError'
-				? networkError(error)
-				: genericError(error)
+			this.errors = {
+				...this.errors,
+				[type]: error.name === 'TypeError'
+					? networkError(error)
+					: genericError(error),
+			}
 			console.error(`Error fetching ${type}/${id}:`, error)
 			return null
 		} finally {
-			this.loading[type] = false
+			this.loading = { ...this.loading, [type]: false }
 		}
 	},
 
@@ -405,8 +456,8 @@ const baseActions = {
 	 * @return {Promise<object|null>} The saved object or null on error
 	 */
 	async saveObject(type, objectData) {
-		this.loading[type] = true
-		this.errors[type] = null
+		this.loading = { ...this.loading, [type]: true }
+		this.errors = { ...this.errors, [type]: null }
 
 		try {
 			const isUpdate = !!objectData.id
@@ -422,28 +473,31 @@ const baseActions = {
 			})
 
 			if (!response.ok) {
-				this.errors[type] = await parseResponseError(response, type)
+				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) }
 				console.error(`Error saving ${type}:`, this.errors[type])
 				return null
 			}
 
 			const data = await response.json()
+			const savedId = data.id || objectData.id
 
-			if (!this.objects[type]) {
-				this.objects[type] = {}
+			this.objects = {
+				...this.objects,
+				[type]: { ...(this.objects[type] || {}), [savedId]: data },
 			}
-			const savedId = data.id || objectData.id
-			this.objects[type][savedId] = data
 
 			return data
 		} catch (error) {
-			this.errors[type] = error.name === 'TypeError'
-				? networkError(error)
-				: genericError(error)
+			this.errors = {
+				...this.errors,
+				[type]: error.name === 'TypeError'
+					? networkError(error)
+					: genericError(error),
+			}
 			console.error(`Error saving ${type}:`, error)
 			return null
 		} finally {
-			this.loading[type] = false
+			this.loading = { ...this.loading, [type]: false }
 		}
 	},
 
@@ -455,8 +509,8 @@ const baseActions = {
 	 * @return {Promise<boolean>} True if deleted successfully
 	 */
 	async deleteObject(type, id) {
-		this.loading[type] = true
-		this.errors[type] = null
+		this.loading = { ...this.loading, [type]: true }
+		this.errors = { ...this.errors, [type]: null }
 
 		try {
 			const url = this._buildUrl(type, id)
@@ -467,29 +521,34 @@ const baseActions = {
 			})
 
 			if (!response.ok) {
-				this.errors[type] = await parseResponseError(response, type)
+				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) }
 				console.error(`Error deleting ${type}/${id}:`, this.errors[type])
 				return false
 			}
 
 			if (this.objects[type]) {
-				delete this.objects[type][id]
+				const { [id]: _, ...remaining } = this.objects[type]
+				this.objects = { ...this.objects, [type]: remaining }
 			}
 			if (this.collections[type]) {
-				this.collections[type] = this.collections[type].filter(
-					(obj) => obj.id !== id,
-				)
+				this.collections = {
+					...this.collections,
+					[type]: this.collections[type].filter((obj) => obj.id !== id),
+				}
 			}
 
 			return true
 		} catch (error) {
-			this.errors[type] = error.name === 'TypeError'
-				? networkError(error)
-				: genericError(error)
+			this.errors = {
+				...this.errors,
+				[type]: error.name === 'TypeError'
+					? networkError(error)
+					: genericError(error),
+			}
 			console.error(`Error deleting ${type}/${id}:`, error)
 			return false
 		} finally {
-			this.loading[type] = false
+			this.loading = { ...this.loading, [type]: false }
 		}
 	},
 
@@ -527,8 +586,10 @@ const baseActions = {
 					})
 					if (response.ok) {
 						const data = await response.json()
-						if (!this.objects[type]) this.objects[type] = {}
-						this.objects[type][id] = data
+						this.objects = {
+							...this.objects,
+							[type]: { ...(this.objects[type] || {}), [id]: data },
+						}
 						result[id] = data
 					}
 				} catch {

package/src/utils/headers.js

@@ -32,7 +32,13 @@ export function buildQueryString(params = {}) {
 
 	for (const [key, value] of Object.entries(params)) {
 		if (value === undefined || value === null || value === '') continue
-		if (key === '_order' && typeof value === 'object') {
+		if (Array.isArray(value)) {
+			for (const item of value) {
+				if (item !== undefined && item !== null && item !== '') {
+					queryParams.append(key, String(item))
+				}
+			}
+		} else if (key === '_order' && typeof value === 'object') {
 			queryParams.set(key, JSON.stringify(value))
 		} else {
 			queryParams.set(key, String(value))

package/src/utils/index.js

@@ -1,3 +1,3 @@
 export { buildHeaders, buildQueryString } from './headers.js'
 export { parseResponseError, networkError, genericError } from './errors.js'
-export { columnsFromSchema, formatValue, filtersFromSchema } from './schema.js'
+export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './schema.js'

package/src/utils/schema.js

@@ -1,6 +1,7 @@
 /**
  * Schema utility functions for auto-generating table columns, cell formatting,
- * and faceted filter definitions from OpenRegister schema property definitions.
+ * form field definitions, and faceted filter definitions from OpenRegister
+ * schema property definitions.
  *
  * @module utils/schema
  */
@@ -236,6 +237,136 @@ function truncateString(str, maxLength) {
 	return str.substring(0, maxLength) + '...'
 }
 
+/**
+ * Resolve the form widget type for a JSON Schema property.
+ *
+ * Resolution priority (first match wins):
+ * 1. Explicit `prop.widget` — pass-through custom widget name
+ * 2. `prop.enum` → `'select'`
+ * 3. Type-based: `boolean` → `'checkbox'`, `integer`/`number` → `'number'`,
+ *    `array` + `items.enum` → `'multiselect'`, `array` → `'tags'`
+ * 4. Format-based: `date-time` → `'datetime'`, `date` → `'date'`,
+ *    `email` → `'email'`, `uri`/`url` → `'url'`,
+ *    `markdown`/`textarea` → `'textarea'`
+ * 5. Long text: `maxLength > 255` → `'textarea'`
+ * 6. Fallback → `'text'`
+ *
+ * @param {object} prop The schema property definition (type, format, enum, widget, items, maxLength)
+ * @return {string} Widget identifier: 'text'|'email'|'url'|'number'|'checkbox'|'select'|'multiselect'|'tags'|'textarea'|'date'|'datetime' or a custom string
+ */
+function resolveWidget(prop) {
+	// Explicit widget hint takes priority
+	if (prop.widget) return prop.widget
+
+	// Enum → select
+	if (prop.enum) return 'select'
+
+	const type = prop.type || 'string'
+	const format = prop.format || ''
+
+	// Boolean → switch/checkbox
+	if (type === 'boolean') return 'checkbox'
+
+	// Number types
+	if (type === 'integer' || type === 'number') return 'number'
+
+	// Array types
+	if (type === 'array') {
+		if (prop.items && prop.items.enum) return 'multiselect'
+		return 'tags'
+	}
+
+	// Format-based widgets
+	if (format === 'date-time') return 'datetime'
+	if (format === 'date') return 'date'
+	if (format === 'email') return 'email'
+	if (format === 'uri' || format === 'url') return 'url'
+	if (format === 'markdown' || format === 'textarea') return 'textarea'
+
+	// Long text → textarea
+	if (prop.maxLength && prop.maxLength > 255) return 'textarea'
+
+	return 'text'
+}
+
+/**
+ * Generate form field definitions from a schema's properties.
+ *
+ * Reads `schema.properties` and creates field descriptor objects suitable
+ * for auto-generating form UIs. Follows the same pattern as
+ * `columnsFromSchema()` — filters, sorts, and supports overrides.
+ *
+ * @param {object} schema The schema object with a `properties` field
+ * @param {object} [options] Configuration options
+ * @param {string[]} [options.exclude] Property keys to exclude
+ * @param {string[]} [options.include] Property keys to include (whitelist mode)
+ * @param {object} [options.overrides] Per-key field overrides, e.g. `{ status: { widget: 'select' } }`
+ * @param {boolean} [options.includeReadOnly=false] Whether to include readOnly properties
+ * @return {Array<{key: string, label: string, description: string, type: string, format: string|null, widget: string, required: boolean, readOnly: boolean, default: *, enum: Array|null, items: object|null, validation: object, order: number}>}
+ */
+export function fieldsFromSchema(schema, options = {}) {
+	const { exclude = [], include = null, overrides = {}, includeReadOnly = false } = options
+
+	if (!schema || !schema.properties) {
+		return []
+	}
+
+	const requiredKeys = Array.isArray(schema.required) ? schema.required : []
+
+	const entries = Object.entries(schema.properties)
+		.filter(([key, prop]) => {
+			// Skip properties marked as not visible
+			if (prop.visible === false) return false
+			// Skip readOnly properties by default
+			if (prop.readOnly === true && !includeReadOnly) return false
+			// Apply exclude list
+			if (exclude.includes(key)) return false
+			// Apply include whitelist
+			if (include && !include.includes(key)) return false
+			// Skip complex object types (not supported in auto-form)
+			if (prop.type === 'object') return false
+			return true
+		})
+		.sort(([keyA, propA], [keyB, propB]) => {
+			// Sort by order hint first, then alphabetically
+			const orderA = typeof propA.order === 'number' ? propA.order : Infinity
+			const orderB = typeof propB.order === 'number' ? propB.order : Infinity
+			if (orderA !== orderB) return orderA - orderB
+			return keyA.localeCompare(keyB)
+		})
+
+	return entries.map(([key, prop]) => {
+		const field = {
+			key,
+			label: prop.title || key,
+			description: prop.description || '',
+			type: prop.type || 'string',
+			format: prop.format || null,
+			widget: resolveWidget(prop),
+			required: requiredKeys.includes(key),
+			readOnly: prop.readOnly || false,
+			default: prop.default !== undefined ? prop.default : null,
+			enum: prop.enum || null,
+			items: prop.items || null,
+			validation: {
+				minLength: prop.minLength,
+				maxLength: prop.maxLength,
+				minimum: prop.minimum,
+				maximum: prop.maximum,
+				pattern: prop.pattern,
+			},
+			order: typeof prop.order === 'number' ? prop.order : Infinity,
+		}
+
+		// Apply per-field overrides
+		if (overrides[key]) {
+			Object.assign(field, overrides[key])
+		}
+
+		return field
+	})
+}
+
 /**
  * Generate faceted filter definitions from a schema's facetable properties.
  *
@@ -263,6 +394,7 @@ export function filtersFromSchema(schema) {
 			const filter = {
 				key,
 				label: prop.title || key,
+				description: prop.description || '',
 				propertyType: prop.type || 'string',
 				options: [],
 				value: null,

package/src/components/CnDetailViewLayout/CnDetailViewLayout.vue

@@ -1,88 +0,0 @@
-<template>
-	<div class="cn-detail-layout">
-		<!-- Header -->
-		<div class="cn-detail-layout__header">
-			<NcButton @click="$emit('back')">
-				<template #icon>
-					<ArrowLeft :size="20" />
-				</template>
-				{{ backLabel }}
-			</NcButton>
-
-			<h2 class="cn-detail-layout__title">
-				<slot name="title">{{ title }}</slot>
-			</h2>
-
-			<div class="cn-detail-layout__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-loading-container">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Main content -->
-		<div v-else class="cn-detail-layout__content">
-			<slot />
-		</div>
-
-		<!-- Delete confirmation dialog -->
-		<slot name="dialogs" />
-	</div>
-</template>
-
-<script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-
-/**
- * CnDetailViewLayout — Detail page layout with back button, title, actions, and content.
- *
- * Provides the standard structure for detail/edit views: back navigation,
- * page title, action buttons, and a content area. Supports loading state
- * and a dialogs slot for modals.
- *
- * @example
- * <CnDetailViewLayout
- *   title="Client: Acme Corp"
- *   :loading="isLoading"
- *   @back="goBack">
- *   <template #actions>
- *     <NcButton @click="edit">Edit</NcButton>
- *     <NcButton type="error" @click="confirmDelete">Delete</NcButton>
- *   </template>
- *   <div class="cn-detail-grid">
- *     <div class="cn-detail-item">...</div>
- *   </div>
- * </CnDetailViewLayout>
- */
-export default {
-	name: 'CnDetailViewLayout',
-
-	components: {
-		NcButton,
-		NcLoadingIcon,
-		ArrowLeft,
-	},
-
-	props: {
-		/** Page title */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** Back button label */
-		backLabel: {
-			type: String,
-			default: 'Back',
-		},
-	},
-}
-</script>

package/src/components/CnDetailViewLayout/index.js

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