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

package/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue

@@ -0,0 +1,418 @@
+<template>
+	<div class="cn-advanced-form-dialog__table-container">
+		<table class="cn-advanced-form-dialog__table">
+			<thead>
+				<tr class="cn-advanced-form-dialog__table-row">
+					<th class="cn-advanced-form-dialog__table-col-constrained">
+						Property
+					</th>
+					<th class="cn-advanced-form-dialog__table-col-expanded">
+						Value
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr
+					v-for="([key, value]) in objectProperties"
+					:key="key"
+					class="cn-advanced-form-dialog__table-row"
+					:class="{
+						'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
+						'cn-advanced-form-dialog__table-row--edited': formData[key] !== undefined,
+						'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
+						[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
+					}"
+					@click="handleRowClick(key, $event)">
+					<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell">
+						<div class="cn-advanced-form-dialog__prop-cell-content">
+							<AlertCircle
+								v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
+								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
+								:size="16"
+								:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
+							<Alert
+								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
+								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
+								:size="16"
+								:title="getPropertyWarningMessage(key, resolvedValue(key, value))" />
+							<Plus
+								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'new'"
+								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--new"
+								:size="16"
+								:title="getPropertyNewMessage(key)" />
+							<LockOutline
+								v-else-if="!isPropertyEditable(key, resolvedValue(key, value))"
+								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--lock"
+								:size="16"
+								:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
+							<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
+						</div>
+					</td>
+					<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
+						<CnPropertyValueCell
+							:ref="'cell-' + key"
+							:property-key="key"
+							:schema="schema"
+							:value="resolvedValue(key, value)"
+							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+							:is-editing="selectedProperty === key"
+							:display-name="getPropertyDisplayName(key)"
+							:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
+							@update:value="onPropertyValueUpdate(key, $event)" />
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Alert from 'vue-material-design-icons/Alert.vue'
+import LockOutline from 'vue-material-design-icons/LockOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import CnPropertyValueCell from './CnPropertyValueCell.vue'
+
+export default {
+	name: 'CnPropertiesTab',
+
+	components: {
+		AlertCircle,
+		Alert,
+		LockOutline,
+		Plus,
+		CnPropertyValueCell,
+	},
+
+	props: {
+		schema: { type: Object, default: null },
+		item: { type: Object, default: null },
+		formData: { type: Object, default: () => ({}) },
+		selectedProperty: { type: String, default: null },
+		editableTypes: { type: Array, default: () => ['string', 'number', 'integer', 'boolean'] },
+		validationDisplay: { type: String, default: 'indicator' },
+		excludeFields: { type: Array, default: () => [] },
+		includeFields: { type: Array, default: null },
+	},
+
+	computed: {
+		objectProperties() {
+			const schemaProps = this.schema?.properties || {}
+			const obj = this.item || {}
+			const exclude = this.excludeFields || []
+			const include = this.includeFields
+			const filterKey = (k) => {
+				if (k === '@self' || k === 'id') return false
+				if (exclude.includes(k)) return false
+				if (include && !include.includes(k)) return false
+				return true
+			}
+			const existing = Object.entries(obj).filter(([k]) => filterKey(k))
+			const missing = []
+			for (const [key, prop] of Object.entries(schemaProps)) {
+				if (!filterKey(key)) continue
+				if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+					let def
+					switch (prop.type) {
+					case 'string': def = prop.const ?? ''; break
+					case 'number':
+					case 'integer': def = 0; break
+					case 'boolean': def = false; break
+					case 'array': def = []; break
+					case 'object': def = {}; break
+					default: def = ''
+					}
+					missing.push([key, def])
+				}
+			}
+			return [...existing, ...missing]
+		},
+	},
+
+	methods: {
+		/** The effective value for a key: formData override or the object's own value */
+		resolvedValue(key, objectValue) {
+			return this.formData[key] !== undefined ? this.formData[key] : objectValue
+		},
+
+		onPropertyValueUpdate(key, value) {
+			this.$emit('update:property-value', { key, value })
+		},
+
+		isPropertyEditable(key, value) {
+			const prop = this.schema?.properties?.[key]
+			if (!prop) return true
+			if (prop.const !== undefined) return false
+			if (prop.immutable && value != null && value !== '') return false
+			const type = prop.type || 'string'
+			return this.editableTypes.includes(type)
+		},
+
+		getPropertyDisplayName(key) {
+			return (this.schema?.properties?.[key]?.title) || key
+		},
+
+		getPropertyTooltip(key) {
+			const prop = this.schema?.properties?.[key]
+			if (prop?.description) {
+				if (prop.title && prop.title !== key) {
+					return `${prop.title}: ${prop.description}`
+				}
+				return prop.description
+			}
+			return `Property: ${key}`
+		},
+
+		getPropertyValidationClass(key, value) {
+			const state = this.getPropertyValidationState(key, value)
+			switch (state) {
+			case 'invalid': return 'cn-advanced-form-dialog__table-row--invalid'
+			case 'warning': return 'cn-advanced-form-dialog__table-row--warning'
+			case 'new': return 'cn-advanced-form-dialog__table-row--new'
+			case 'valid': return 'cn-advanced-form-dialog__table-row--valid'
+			default: return ''
+			}
+		},
+
+		getPropertyValidationState(key, value) {
+			const prop = this.schema?.properties?.[key]
+			const existsInObject = this.item ? Object.prototype.hasOwnProperty.call(this.item, key) : false
+			if (!prop) return 'warning'
+			if (!existsInObject) return 'new'
+			if (this.isValidPropertyValue(key, value, prop)) return 'valid'
+			return 'invalid'
+		},
+
+		isValidPropertyValue(key, value, schemaProperty) {
+			if (value === null || value === undefined || value === '') {
+				const required = (this.schema?.required || []).includes(key) || schemaProperty?.required
+				return !required
+			}
+			const type = schemaProperty?.type || 'string'
+			switch (type) {
+			case 'string':
+				if (typeof value !== 'string') return false
+				if (schemaProperty?.format === 'date-time' && !this.isValidDate(value)) return false
+				if (schemaProperty?.const && value !== schemaProperty.const) return false
+				return true
+			case 'number':
+				return typeof value === 'number' && !Number.isNaN(value)
+			case 'boolean':
+				return typeof value === 'boolean'
+			case 'array':
+				return Array.isArray(value)
+			case 'object':
+				return typeof value === 'object' && value !== null && !Array.isArray(value)
+			default:
+				return true
+			}
+		},
+
+		getPropertyErrorMessage(key, value) {
+			const prop = this.schema?.properties?.[key]
+			if (!prop) {
+				return `Property '${key}' is not defined in the current schema. This property exists in the object but is not part of the schema definition.`
+			}
+			const isRequired = (this.schema?.required || []).includes(key) || prop.required
+			if ((value === null || value === undefined || value === '') && isRequired) {
+				return `Required property '${key}' is missing or empty.`
+			}
+			const expectedType = prop.type
+			const actualType = Array.isArray(value) ? 'array' : typeof value
+			if (expectedType && expectedType !== actualType) {
+				return `Property '${key}' should be ${expectedType} but is ${actualType}.`
+			}
+			if (prop.format === 'date-time' && !this.isValidDate(value)) {
+				return `Property '${key}' should be a valid date-time value.`
+			}
+			if (prop.const && value !== prop.const) {
+				return `Property '${key}' should be '${prop.const}' but is '${value}'.`
+			}
+			return `Property '${key}' has an invalid value.`
+		},
+
+		getPropertyWarningMessage(key, value) {
+			const displayValue = String(value).length > 100 ? String(value).slice(0, 100) + '…' : String(value)
+			return `Property '${key}' exists in the object but is not defined in the current schema. This might happen when property names are changed in the schema. Current value: '${displayValue}'.`
+		},
+
+		getPropertyNewMessage(key) {
+			return `Property '${key}' is defined in the schema but doesn't have a value yet. Click to add a value.`
+		},
+
+		getPropertyEditabilityWarning(key, value) {
+			if (!this.isPropertyEditable(key, value)) {
+				return 'This property cannot be edited in the Properties tab. Use the Data tab to modify it.'
+			}
+			return null
+		},
+
+		getEditabilityWarning(key, value) {
+			const prop = this.schema?.properties?.[key]
+			if (prop?.const !== undefined) {
+				return `This property is constant and must always be '${prop.const}'. Const properties cannot be modified to maintain data integrity.`
+			}
+			if (prop?.immutable && (value !== null && value !== undefined && value !== '')) {
+				const displayValue = String(value).length > 100 ? String(value).slice(0, 100) + '…' : String(value)
+				return `This property is immutable and cannot be changed once it has a value. Current value: '${displayValue}'. Immutable properties preserve data consistency.`
+			}
+			if (!this.isPropertyEditable(key, value)) {
+				return this.getPropertyEditabilityWarning(key, value)
+			}
+			return null
+		},
+
+		handleRowClick(key, event) {
+			if (event.target.tagName === 'INPUT' || event.target.tagName === 'BUTTON' || event.target.closest('.cn-advanced-form-dialog__value-input-container')) return
+			const value = this.resolvedValue(key, this.objectProperties.find(([k]) => k === key)?.[1])
+			if (!this.isPropertyEditable(key, value)) return
+			const prop = this.schema?.properties?.[key]
+			if (prop && !this.editableTypes.includes(prop.type || 'string')) return
+			this.$emit('update:selected-property', key)
+			this.$nextTick(() => {
+				const ref = this.$refs['cell-' + key]
+				const cell = ref && (Array.isArray(ref) ? ref[0] : ref)
+				if (cell && cell.focus) cell.focus()
+			})
+		},
+
+		isValidDate(v) {
+			if (!v) return false
+			const d = new Date(v)
+			return d instanceof Date && !Number.isNaN(d.getTime())
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-advanced-form-dialog__table-container {
+	background: var(--color-main-background);
+	border-radius: var(--border-radius);
+	overflow: hidden;
+	box-shadow: 0 2px 4px var(--color-box-shadow);
+	border: 1px solid var(--color-border);
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-advanced-form-dialog__table {
+	width: 100%;
+	border-collapse: collapse;
+	background-color: var(--color-main-background);
+}
+
+.cn-advanced-form-dialog__table th,
+.cn-advanced-form-dialog__table td {
+	padding: calc(3 * var(--default-grid-baseline));
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+	vertical-align: middle;
+}
+
+.cn-advanced-form-dialog__table th {
+	background: var(--color-background-dark);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-advanced-form-dialog__table-row {
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+	background-color: var(--color-main-background);
+}
+
+.cn-advanced-form-dialog__table-row:hover {
+	background-color: var(--color-background-hover);
+}
+
+/* Active/selected row: light blue; ensure it wins over validation state classes */
+.cn-advanced-form-dialog__table-row.cn-advanced-form-dialog__table-row--selected,
+.cn-advanced-form-dialog__table-row--selected:hover {
+	background-color: var(--color-primary-light);
+	box-shadow: inset 3px 0 0 0 var(--color-primary);
+}
+
+.cn-advanced-form-dialog__table-row--edited {
+	background-color: var(--color-success-light);
+	box-shadow: inset 3px 0 0 0 var(--color-success);
+}
+
+.cn-advanced-form-dialog__table-row--non-editable {
+	background-color: var(--color-background-dark);
+	cursor: not-allowed;
+	opacity: 0.7;
+}
+
+.cn-advanced-form-dialog__table-row--non-editable * {
+	cursor: not-allowed !important;
+}
+
+.cn-advanced-form-dialog__table-row--valid {
+	box-shadow: inset 3px 0 0 0 var(--color-success);
+}
+
+.cn-advanced-form-dialog__table-row--invalid {
+	background-color: var(--color-error-light);
+	box-shadow: inset 3px 0 0 0 var(--color-error);
+}
+
+.cn-advanced-form-dialog__table-row--warning {
+	background-color: var(--color-warning-light);
+	box-shadow: inset 3px 0 0 0 var(--color-warning);
+}
+
+.cn-advanced-form-dialog__table-row--new {
+	box-shadow: inset 3px 0 0 0 var(--color-primary-element);
+}
+
+.cn-advanced-form-dialog__table-col-constrained {
+	width: 150px;
+	max-width: 150px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-advanced-form-dialog__table-col-expanded {
+	width: auto;
+	min-width: 200px;
+}
+
+.cn-advanced-form-dialog__prop-cell {
+	width: 30%;
+	font-weight: 600;
+	box-shadow: inset 3px 0 0 0 var(--color-primary);
+}
+
+.cn-advanced-form-dialog__value-cell {
+	width: 70%;
+	word-break: break-word;
+	border-radius: 4px;
+}
+
+.cn-advanced-form-dialog__prop-cell-content {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-advanced-form-dialog__validation-icon {
+	flex-shrink: 0;
+}
+
+.cn-advanced-form-dialog__validation-icon--error {
+	color: var(--color-error);
+}
+
+.cn-advanced-form-dialog__validation-icon--warning {
+	color: var(--color-warning);
+}
+
+.cn-advanced-form-dialog__validation-icon--lock {
+	color: var(--color-text-lighter);
+}
+
+.cn-advanced-form-dialog__validation-icon--new {
+	color: var(--color-primary-element);
+}
+</style>

package/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue

@@ -0,0 +1,247 @@
+<template>
+	<!-- Edit mode -->
+	<div
+		v-if="isEditable && (inputComponent === 'NcCheckboxRadioSwitch' || isEditing)"
+		class="cn-advanced-form-dialog__value-input-container"
+		@click.stop>
+		<div
+			v-if="inputComponent === 'NcCheckboxRadioSwitch'"
+			class="cn-advanced-form-dialog__boolean-input-row">
+			<NcCheckboxRadioSwitch
+				:checked="value"
+				type="switch"
+				class="cn-advanced-form-dialog__boolean-input-row__input"
+				@update:checked="emit($event)">
+				{{ displayName }}
+			</NcCheckboxRadioSwitch>
+			<InformationOutline
+				v-if="schemaProp && schemaProp.description"
+				v-tooltip="schemaProp.description"
+				class="cn-advanced-form-dialog__info-icon"
+				:size="16" />
+		</div>
+		<NcDateTimePickerNative
+			v-else-if="inputComponent === 'NcDateTimePickerNative'"
+			:value="value"
+			:type="inputType"
+			:label="displayName"
+			@update:value="emit($event)" />
+		<NcTextField
+			v-else
+			ref="inputRef"
+			:value="stringValue"
+			:type="inputType"
+			:placeholder="displayName"
+			:min="minimum"
+			:max="maximum"
+			:step="step"
+			@update:value="emitConverted($event)" />
+	</div>
+
+	<!-- Display mode -->
+	<div
+		v-else
+		:title="editabilityWarning">
+		<pre
+			v-if="typeof value === 'object' && value !== null"
+			class="cn-advanced-form-dialog__json-value">{{ formattedObjectValue }}</pre>
+		<span
+			v-else-if="inputComponent === 'NcDateTimePickerNative' && isValidDate(value)">{{
+			new Date(value).toLocaleString()
+		}}</span>
+		<span v-else>{{ displayValue }}</span>
+	</div>
+</template>
+
+<script>
+import {
+	NcTextField,
+	NcCheckboxRadioSwitch,
+	NcDateTimePickerNative,
+} from '@nextcloud/vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import { formatValue } from '../../utils/schema.js'
+
+export default {
+	name: 'CnPropertyValueCell',
+
+	directives: { tooltip: Tooltip },
+
+	components: {
+		NcTextField,
+		NcCheckboxRadioSwitch,
+		NcDateTimePickerNative,
+		InformationOutline,
+	},
+
+	props: {
+		/** The schema property key */
+		propertyKey: { type: String, required: true },
+		/** Full JSON schema object */
+		schema: { type: Object, default: null },
+		/** Resolved current value (formData[key] ?? objectValue) */
+		value: { default: null },
+		/** Whether this property is editable at all */
+		isEditable: { type: Boolean, default: true },
+		/** Whether this row is currently selected for editing */
+		isEditing: { type: Boolean, default: false },
+		/** Display name for the property (used in labels/placeholders) */
+		displayName: { type: String, default: '' },
+		/** Editability warning message shown as title when not editable */
+		editabilityWarning: { type: String, default: null },
+	},
+
+	computed: {
+		schemaProp() {
+			return this.schema?.properties?.[this.propertyKey] || null
+		},
+
+		inputComponent() {
+			const prop = this.schemaProp
+			if (!prop) return 'NcTextField'
+			if (prop.type === 'boolean') return 'NcCheckboxRadioSwitch'
+			if (prop.type === 'string' && ['date', 'time', 'date-time'].includes(prop.format)) {
+				return 'NcDateTimePickerNative'
+			}
+			return 'NcTextField'
+		},
+
+		inputType() {
+			const prop = this.schemaProp
+			if (!prop) return 'text'
+			const fmt = prop.format || ''
+			if (prop.type === 'string') {
+				if (fmt === 'date') return 'date'
+				if (fmt === 'time') return 'time'
+				if (fmt === 'date-time') return 'datetime-local'
+				if (fmt === 'email') return 'email'
+				if (fmt === 'url' || fmt === 'uri') return 'url'
+			}
+			if (prop.type === 'number' || prop.type === 'integer') return 'number'
+			return 'text'
+		},
+
+		minimum() {
+			return this.schemaProp?.minimum
+		},
+
+		maximum() {
+			return this.schemaProp?.maximum
+		},
+
+		step() {
+			const prop = this.schemaProp
+			if (prop?.type === 'integer') return '1'
+			if (prop?.type === 'number') return 'any'
+			return undefined
+		},
+
+		stringValue() {
+			const v = this.value
+			if (v == null) return ''
+			if (typeof v === 'string') return v
+			if (typeof v === 'object') return JSON.stringify(v)
+			return String(v)
+		},
+
+		formattedObjectValue() {
+			return formatValue(this.value, this.schemaProp || {})
+		},
+
+		displayValue() {
+			const prop = this.schemaProp
+			if (prop?.const !== undefined) return prop.const
+			const v = this.value
+			if (v === null || v === undefined || v === '') return '—'
+			return formatValue(v, prop || {})
+		},
+	},
+
+	methods: {
+		/** Focus the underlying text input (called by parent after row click) */
+		focus() {
+			const ref = this.$refs.inputRef
+			if (!ref) return
+			const input = ref.$el?.querySelector('input')
+			if (input) {
+				input.focus()
+				input.select()
+			}
+		},
+
+		emit(newVal) {
+			this.$emit('update:value', newVal)
+		},
+
+		emitConverted(newVal) {
+			const prop = this.schemaProp
+			let converted = newVal
+			if (prop) {
+				switch (prop.type) {
+				case 'number':
+					converted = newVal === '' ? null : parseFloat(newVal)
+					if (Number.isNaN(converted)) converted = null
+					break
+				case 'integer':
+					converted = newVal === '' ? null : parseInt(newVal, 10)
+					if (Number.isNaN(converted)) converted = null
+					break
+				case 'boolean':
+					converted = Boolean(newVal)
+					break
+				default:
+					converted = newVal
+				}
+			}
+			this.$emit('update:value', converted)
+		},
+
+		isValidDate(v) {
+			if (!v) return false
+			const d = new Date(v)
+			return d instanceof Date && !Number.isNaN(d.getTime())
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-advanced-form-dialog__value-input-container :deep(.text-field) {
+	margin: 0;
+	padding: 0;
+}
+
+.cn-advanced-form-dialog__boolean-input-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+/* patch extreme size in field */
+.cn-advanced-form-dialog__boolean-input-row__input > span {
+	padding-left: 0;
+	padding-block: 0;
+}
+.cn-advanced-form-dialog__boolean-input-row__input > input {
+	margin: 0;
+}
+
+.cn-advanced-form-dialog__info-icon {
+	flex-shrink: 0;
+	color: var(--color-text-maxcontrast);
+	cursor: help;
+}
+
+.cn-advanced-form-dialog__json-value {
+	max-height: 200px;
+	overflow-y: auto;
+	white-space: pre-wrap;
+	font-family: monospace;
+	font-size: 12px;
+	background: var(--color-background-dark);
+	padding: 8px;
+	border-radius: 4px;
+	margin: 0;
+}
+</style>

package/src/components/CnAdvancedFormDialog/index.js

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