updated schema version and properties

package.json

@@ -41,7 +41,6 @@
     "remark-preset-lint-consistent": "^6.0.0",
     "remark-preset-lint-recommended": "^7.0.0",
     "style-loader": "^3.3.3",
-    "uuid": "^10.0.0",
     "vue": "^2.7.14",
     "vue-apexcharts": "^1.6.2",
     "vue-codemirror6": "^1.3.4",

src/entities/schema/schema.ts

@@ -31,7 +31,7 @@ export class Schema implements TSchema {
 		const schema = z.object({
 			id: z.string().min(1),
 			title: z.string().min(1),
-			version: z.string(),
+			version: z.string().regex(/^(?:\d+\.){2}\d+$/g, 'Invalid version format'),
 			description: z.string(),
 			summary: z.string(),
 			required: z.array(z.string()),

src/modals/Modals.vue

@@ -8,10 +8,10 @@ import { navigationStore } from '../store/store.js'
 		<EditRegister />
 		<UploadRegister />
 		<DeleteRegister />
-		<EditSchema />
+		<EditSchema v-if="navigationStore.modal === 'editSchema'" />
 		<DeleteSchema />
 		<UploadSchema />
-		<EditSchemaProperty />
+		<EditSchemaProperty v-if="navigationStore.modal === 'editSchemaProperty'" />
 		<DeleteSchemaProperty />
 		<EditSource />
 		<DeleteSource />

src/modals/schema/EditSchema.vue

@@ -3,8 +3,7 @@ import { schemaStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editSchema'"
-		:name="schemaStore.schemaItem?.id && !createAnother ? 'Edit Schema' : 'Add Schema'"
+	<NcDialog :name="schemaStore.schemaItem?.id && !createAnother ? 'Edit Schema' : 'Add Schema'"
 		size="normal"
 		:can-close="false">
 		<NcNoteCard v-if="success" type="success">
@@ -18,9 +17,6 @@ import { schemaStore, navigationStore } from '../../store/store.js'
 			<NcTextField :disabled="loading"
 				label="Title *"
 				:value.sync="schemaItem.title" />
-			<NcTextField :disabled="loading"
-				label="Version"
-				:value.sync="schemaItem.version" />
 			<NcTextArea :disabled="loading"
 				label="Description"
 				:value.sync="schemaItem.description" />
@@ -91,36 +87,26 @@ export default {
 		return {
 			schemaItem: {
 				title: '',
-				version: '',
+				version: '0.0.0',
 				description: '',
 				summary: '',
-				created: '',
-				updated: '',
 			},
 			createAnother: false,
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
 			closeModalTimeout: null,
 		}
 	},
 	mounted() {
 		this.initializeSchemaItem()
 	},
-	updated() {
-		if (navigationStore.modal === 'editSchema' && !this.hasUpdated) {
-			this.initializeSchemaItem()
-			this.hasUpdated = true
-		}
-	},
 	methods: {
 		initializeSchemaItem() {
 			if (schemaStore.schemaItem?.id) {
 				this.schemaItem = {
 					...schemaStore.schemaItem,
 					title: schemaStore.schemaItem.title || '',
-					version: schemaStore.schemaItem.version || '',
 					description: schemaStore.schemaItem.description || '',
 					summary: schemaStore.schemaItem.summary || '',
 				}
@@ -129,46 +115,35 @@ export default {
 		closeModal() {
 			navigationStore.setModal(false)
 			clearTimeout(this.closeModalTimeout)
-			this.success = null
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.schemaItem = {
-				title: '',
-				version: '',
-				description: '',
-				summary: '',
-				created: '',
-				updated: '',
-			}
 		},
 		async editSchema() {
 			this.loading = true
 
 			schemaStore.saveSchema({
 				...this.schemaItem,
 			}).then(({ response }) => {
+
 				if (this.createAnother) {
+					// since saveSchema populates the schema item, we need to clear it
 					schemaStore.setSchemaItem(null)
+
+					// clear the form after 0.5s
 					setTimeout(() => {
-						this.initializeSchemaItem()
 						this.schemaItem = {
 							title: '',
-							version: '0.0.1',
+							version: '0.0.0',
 							description: '',
 							summary: '',
-							created: '',
-							updated: '',
 						}
-						this.loading = false
 					}, 500)
-					setTimeout(() => {
-						this.success = null
-					}, 2000)
+
 					this.success = response.ok
-					this.hasUpdated = false
 					this.error = false
 
+					// clear the success message after 2s
+					setTimeout(() => {
+						this.success = null
+					}, 2000)
 				} else {
 					this.success = response.ok
 					this.error = false

src/modals/schema/EditSchemaProperty.vue

@@ -2,9 +2,8 @@
 import { navigationStore, schemaStore } from '../../store/store.js'
 </script>
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editSchemaProperty'"
-		:name="schemaStore.schemaPropertyKey
-			? `Edit Property '${schemaStore.schemaItem.properties[schemaStore.schemaPropertyKey].title}' of '${schemaStore.schemaItem.title}'`
+	<NcDialog :name="schemaStore.schemaPropertyKey
+			? `Edit Property '${schemaStore.schemaPropertyKey}' of '${schemaStore.schemaItem.title}'`
 			: `Add Property to '${schemaStore.schemaItem?.title}'`"
 		size="normal"
 		:can-close="false">
@@ -23,7 +22,9 @@ import { navigationStore, schemaStore } from '../../store/store.js'
 		<div v-if="success === null" class="form-group">
 			<NcTextField :disabled="loading"
 				label="Title*"
-				:value.sync="properties.title" />
+				:error="keyExists()"
+				:helper-text="keyExists() ? 'This key already exists on this schema' : ''"
+				:value.sync="propertyTitle" />
 
 			<NcTextField :disabled="loading"
 				label="Description"
@@ -241,7 +242,7 @@ import { navigationStore, schemaStore } from '../../store/store.js'
 			</NcButton>
 
 			<NcButton v-if="success === null"
-				:disabled="!properties.title || !properties.type || loading"
+				:disabled="!propertyTitle || !properties.type || loading || keyExists()"
 				type="primary"
 				@click="addSchemaProperty()">
 				<template #icon>
@@ -276,8 +277,6 @@ import Cancel from 'vue-material-design-icons/Cancel.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 
-import { v4 as uuidv4 } from 'uuid'
-
 export default {
 	name: 'EditSchemaProperty',
 	components: {
@@ -294,8 +293,8 @@ export default {
 	},
 	data() {
 		return {
+			propertyTitle: '',
 			properties: {
-				title: '',
 				description: '',
 				type: 'string',
 				format: '',
@@ -328,7 +327,6 @@ export default {
 			loading: false,
 			success: null,
 			error: false,
-			hasUpdated: false,
 			closeModalTimeout: null,
 		}
 	},
@@ -363,17 +361,12 @@ export default {
 	mounted() {
 		this.initializeSchemaItem()
 	},
-	updated() {
-		if (navigationStore.modal === 'editSchemaProperty' && !this.hasUpdated) {
-			this.initializeSchemaItem()
-			this.hasUpdated = true
-		}
-	},
 	methods: {
 		initializeSchemaItem() {
 			if (schemaStore.schemaPropertyKey) {
 				const schemaProperty = schemaStore.schemaItem.properties[schemaStore.schemaPropertyKey]
 
+				this.propertyTitle = schemaStore.schemaPropertyKey
 				this.properties = {
 					...schemaProperty,
 					minLength: schemaProperty.minLength ?? 0,
@@ -386,42 +379,35 @@ export default {
 				}
 			}
 		},
+		/**
+		 * check if the title already exists on properties as a key.
+		 * returns true if it exists, false if it doesn't.
+		 *
+		 * When dealing with a key which is the same key as you are editing return false
+		 */
+		keyExists() {
+			if (this.propertyTitle === schemaStore.schemaPropertyKey) return false
+			return Object.keys(schemaStore.schemaItem.properties).includes(this.propertyTitle)
+		},
 		closeModal() {
-			navigationStore.setModal(false)
+			navigationStore.setModal(null)
 			schemaStore.setSchemaPropertyKey(null)
 			clearTimeout(this.closeModalTimeout)
-			this.success = null
-			this.hasUpdated = false
-			this.properties = {
-				title: '',
-				description: '',
-				type: '',
-				format: '',
-				pattern: '',
-				default: '',
-				behavior: '',
-				required: false,
-				deprecated: false,
-				minLength: 0,
-				maxLength: 0,
-				example: '',
-				minimum: 0,
-				maximum: 0,
-				multipleOf: 0,
-				exclusiveMin: false,
-				exclusiveMax: false,
-				minItems: 0,
-				maxItems: 0,
-			}
 		},
 		addSchemaProperty() {
 			this.loading = true
 
+			// delete the key when its an edit modal (the item will be re-created later, so don't worry about it)
+			// this is done incase you are also editing the title which acts as a key
+			if (schemaStore.schemaPropertyKey) {
+				delete schemaStore.schemaItem.properties[schemaStore.schemaPropertyKey]
+			}
+
 			const newSchemaItem = {
 				...schemaStore.schemaItem,
 				properties: {
 					...schemaStore.schemaItem.properties,
-					[schemaStore.schemaPropertyKey || uuidv4()]: { // if no key is set, generate a new uuid
+					[this.propertyTitle]: { // create the new property with title as key
 						...this.properties,
 						// due to bad (no) support for number fields inside nextcloud/vue, parse the text to a number
 						minLength: parseFloat(this.properties.minLength) || null,

src/store/modules/schema.js

@@ -100,6 +100,7 @@ export const useSchemaStore = defineStore('schema', {
 			const method = isNewSchema ? 'POST' : 'PUT'
 
 			schemaItem.updated = new Date().toISOString()
+			delete schemaItem.version
 
 			const response = await fetch(
 				endpoint,

src/views/schema/SchemaDetails.vue

@@ -62,9 +62,11 @@ import { schemaStore, navigationStore } from '../../store/store.js'
 							<div v-if="Object.keys(schemaStore.schemaItem.properties).length">
 								<NcListItem v-for="(property, key) in schemaStore.schemaItem.properties"
 									:key="key"
-									:name="property.title"
+									:name="key"
+									:active="schemaStore.schemaPropertyKey === key"
 									:bold="false"
-									:force-display-actions="true">
+									:force-display-actions="true"
+									@click="setActiveProperty(key)">
 									<template #icon>
 										<CircleOutline disable-menu
 											:size="44" />
@@ -73,14 +75,14 @@ import { schemaStore, navigationStore } from '../../store/store.js'
 										{{ property.description }}
 									</template>
 									<template #actions>
-										<NcActionButton :aria-label="`Edit '${property.title}'`"
+										<NcActionButton :aria-label="`Edit '${key}'`"
 											@click="schemaStore.setSchemaPropertyKey(key); navigationStore.setModal('editSchemaProperty')">
 											<template #icon>
 												<Pencil :size="20" />
 											</template>
 											Edit
 										</NcActionButton>
-										<NcActionButton :aria-label="`Delete '${property.title}'`"
+										<NcActionButton :aria-label="`Delete '${key}'`"
 											@click="schemaStore.setSchemaPropertyKey(key); navigationStore.setModal('deleteSchemaProperty')">
 											<template #icon>
 												<TrashCanOutline :size="20" />
@@ -149,6 +151,13 @@ export default {
 		Download,
 		Upload,
 	},
+	methods: {
+		setActiveProperty(key) {
+			if (JSON.stringify(schemaStore.schemaPropertyKey) === JSON.stringify(key)) {
+				schemaStore.setSchemaPropertyKey(null)
+			} else { schemaStore.setSchemaPropertyKey(key) }
+		},
+	},
 }
 </script>