@live-change/frontend-auto-form 0.9.83 → 0.9.85

package/front/src/components/crud/ModelEditor.vue

@@ -33,15 +33,16 @@
     </div>
 
     <form v-if="editor" @submit="handleSave" @reset="handleReset">
-      <div v-for="identifier in modelDefinition.identifiers">        
+      <div v-for="identifier in modelDefinition.identifiers">                
         <template v-if="(identifier.name ?? identifier).slice(-4) !== 'Type'">
-          <div v-if="identifiers[identifier]" class="flex flex-col mb-3">        
+          <div v-if="identifiers[identifier.name ?? identifier]" class="flex flex-col mb-3">        
             <div class="min-w-[8rem] font-medium">{{ identifier.name ?? identifier }}</div>
             <div class="">
-              <InjectedObjectIndentification
-                :type="identifiers[(identifier.field ?? identifier)+'Type']
-                       ?? modelDefinition.properties[identifier.field ?? identifier].type"
-                :object="identifiers[identifier.field ?? identifier]"
+              <InjectedObjectIndentification v-if="identifiers[(identifier.name ?? identifier)+'Type']
+                       ?? modelDefinition.properties[identifier.field ?? identifier]?.type"
+                :type="identifiers[(identifier.name ?? identifier)+'Type']
+                       ?? modelDefinition.properties[identifier.field ?? identifier]?.type"
+                :object="identifiers[identifier.name ?? identifier]"
               />
             </div>
           </div>      

package/front/src/components/crud/ModelView.vue

@@ -28,7 +28,12 @@
               class="ml-2"
             />
           </div>
-          <Button label="Access" icon="pi pi-key" class="p-button mb-6" @click="showAccessControl" />
+          <div class="flex flex-row flex-wrap justify-between align-items-top gap-2">
+            <Button label="Access" icon="pi pi-key" class="p-button mb-6" @click="showAccessControl" />
+            <router-link :to="editRoute">
+              <Button label="Edit" icon="pi pi-pencil" class="p-button mb-6" />
+            </router-link>
+          </div>
         </div>
 
         <AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
@@ -222,6 +227,16 @@
   }
   const accessControlRoles = computed(() => modelDefinition.value?.accessRoles ?? [])
 
+  const editRoute = computed(() => ({
+    name: 'auto-form:editor',
+    params: {
+      serviceName: service.value,
+      modelName: model.value,
+      identifiers: Object.values(identifiers.value)
+    }
+  }))
+
+
 </script>
 
 <style scoped>

package/front/src/components/schema/DataWithSchema.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="surface-card p-3">
+      <h4>#### Schema:</h4>
+      <pre>{{ '```\n'  + JSON.stringify(schema, null, 2) + '\n```' }}</pre>
+    </div>
+    <div class="surface-card p-3">
+      <h4>#### Data:</h4>
+      <pre>{{ '```\n'  + JSON.stringify(clearData, null, 2) + '\n```' }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import { computed, toRefs, defineProps, getCurrentInstance } from 'vue'
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      required: true,
+    }    
+  })
+  const { data } = toRefs(props)
+
+  import { getSchemaFromData, cleanData } from "../../logic/schema.js"
+
+  const appContext = getCurrentInstance().appContext
+
+  const schema = computed(() => getSchemaFromData(data.value, appContext))
+  const clearData = computed(() => cleanData(data.value))
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/logic/editorData.js

@@ -40,10 +40,10 @@ export default function editorData(options) {
 
     appContext = getCurrentInstance().appContext,
 
-    toast = useToast(options.appContext),
-    path = usePath(options.appContext),
-    api = useApi(options.appContext),
-    workingZone = inject('workingZone', options.appContext),
+    toast = useToast(options.appContext || getCurrentInstance().appContext),
+    path = usePath(options.appContext || getCurrentInstance().appContext),
+    api = useApi(options.appContext || getCurrentInstance().appContext),
+    workingZone = inject('workingZone', options.appContext || getCurrentInstance().appContext),
 
   } = options
 

package/front/src/logic/relations.js

@@ -255,7 +255,10 @@ export function parentObjectsFromIdentifiers(identifiers, modelDefinition) {
   const results = []
   for(const [key, value] of Object.entries(identifiers)) {
     if(key.endsWith('Type')) continue
+    const identifierDefinition = (modelDefinition.identifiers ?? []).find(i => i.name === key)
+    if(identifierDefinition && identifierDefinition.field === 'id') continue
     const propertyDefinition = modelDefinition.properties[key]
+    if(!propertyDefinition) continue
     const propertyType = propertyDefinition.type
     if(propertyType === 'any') {
       results.push({

package/front/src/logic/schema.js

@@ -0,0 +1,183 @@
+import { sourceSymbol } from '@live-change/dao'
+import { useApi } from '@live-change/vue3-ssr'
+import { getCurrentInstance } from 'vue'
+
+
+function mergeSchemas(s1, s2) {
+  return {
+    ...s1,
+    ...s2,
+    properties: {
+      ...s1.properties,
+      ...s2.properties
+    }
+  }
+}
+
+function addSchema(schemas, schema) {
+  for(let i = 0; i < schemas.length; i++) {
+    const s = schemas[i]
+    if(s.modelName === schema.modelName && s.serviceName === schema.serviceName) {
+      schemas[i] = mergeSchemas(s, schema)
+      return
+    }
+  }
+  schemas.push(schema)
+}
+
+export function schemaFromDefinition(definition, data, type, appContext = getCurrentInstance().appContext) {
+  if(!type) type = definition.type
+  if(type === 'Object') {
+    return {
+      type: 'object',
+      properties: Object.fromEntries(
+        Object.entries(definition.properties).map(([key, value]) => [key, schemaFromDefinition(value, data[key], undefined, appContext)])
+      ),
+      description: definition.description
+    }      
+  } else if(type === 'Array') {
+    const schema = {
+      type: 'array',        
+      items: schemaFromDefinition(definition.items ?? definition.of, data[0], undefined, appContext),
+      description: definition.description
+    }    
+    for(const item of data) {
+      extendSchema(schema.items, item, schema.items.modelName, schema.items.serviceName) 
+    }
+    return schema
+  } else if(type === 'String') {
+    return {
+      type: 'string',
+      description: definition.description
+    }
+  } else if(type === 'Number') {
+    return {
+      type: 'number',
+      description: definition.description
+    }
+  } else if(type === 'Boolean') {
+    return {
+      type: 'boolean',
+      description: definition.description
+    }
+  } else if(type === 'Date') {
+    return {
+      type: 'string',
+      format: 'date-time',
+      description: definition.description
+    }
+  } else if(type) {
+    const api = useApi(appContext)
+    const [serviceName, modelName] = definition.type.split('_')
+    const serviceDefinition = api.getServiceDefinition(serviceName)
+    const modelDefinition = serviceDefinition?.models?.[modelName]
+    //console.log("MODEL DEFINITION", modelDefinition, "DATA", data, typeof data)
+    if(typeof data === 'string') {
+      return {
+        type: 'string',
+        description: `Id of ${modelName} from ${serviceName} service.`
+          + (modelDefinition?.description ? `\n${modelDefinition.description}` : '')
+      }
+    } else {
+      const schema = schemaFromDefinition(modelDefinition, data, 'Object', appContext)
+      schema.serviceName = serviceName
+      schema.modelName = modelName
+      schema.description = [
+        `Object ${modelName} from ${serviceName} service.`,
+        definition.description,schema.description
+      ].filter(Boolean).join('\n')
+      return schema
+    }
+  } else {
+    console.log("UNHANDLED TYPE", definition)
+  }
+}
+
+function extendSchema(schema, data, viewName, serviceName, appContext) {
+  if(Array.isArray(data)) {
+    if(!schema.items) {
+      schema.items = generateSchema(data, schema, 'items', appContext)
+    }
+  } else {
+    for(const property in data) {
+      const value = data[property]
+      if(!schema.properties[property]) { /// additional property
+        if(property === 'id' || property === 'to') {
+          schema.properties.id = {
+            type: 'string',
+            description: schema.modelName ? `Id of ${schema.modelName} from ${schema.serviceName} service.` : `Id.`
+          }
+        } else {
+          generateSchema(value, schema.properties, property)
+        }
+      }
+    }
+  }
+}
+
+function generateSchema(data, schemaObject, schemaProperty, appContext) {
+  const api = useApi(appContext)  
+  if(!schemaObject[schemaProperty]) {
+    schemaObject[schemaProperty] = {
+      anyOf: []
+    }    
+  }
+  let schemas = schemaObject[schemaProperty].anyOf
+  let viewDefinition = null
+  if(data?.[sourceSymbol]) {
+    const [serviceName, viewName] = data[sourceSymbol]
+    const serviceDefinition = api.getServiceDefinition(serviceName)
+    viewDefinition = serviceDefinition?.views?.[viewName]
+  }
+  if(viewDefinition) {
+    //console.log("VIEW DEFINITION", viewDefinition)
+    const schema = schemaFromDefinition(viewDefinition.returns, data, undefined, appContext)
+    extendSchema(schema, data, undefined, undefined, appContext)
+    addSchema(schemas, schema)
+  } else {
+    
+  }
+}
+
+function cleanSchema(schema) {
+  if(schema.anyOf && schema.anyOf.length === 1) {
+    return cleanSchema(schema.anyOf[0])
+  } else if(schema.type === 'object') {
+    const cleanedProperties = Object.fromEntries(
+      Object.entries(schema.properties).map(([key, value]) => [key, cleanSchema(value)])
+    )
+    return {
+      ...schema,
+      properties: cleanedProperties
+    }
+  } else if(schema.type === 'array') {
+    return {
+      type: 'array',
+      items: cleanSchema(schema.items)
+    }
+  } else {  
+    return schema
+  }
+}
+
+export function getSchemaFromData(data, appContext = getCurrentInstance().appContext) {
+  let schemaOutput = {}
+  generateSchema(data, schemaOutput, 'schema', appContext)
+  return cleanSchema(schemaOutput.schema)
+}
+
+export function cleanData(data) {
+  if(typeof data !== 'object') return data
+  if(Array.isArray(data)) {
+    return data.map(cleanData)
+  } else {
+    const cleanedProperties = Object.fromEntries(
+      Object.entries(data).map(([key, value]) => [key, cleanData(value)])
+    )
+    if(data.to && data.id) {
+      cleanedProperties.id = data.to
+      delete cleanedProperties.to
+    }
+    return cleanedProperties
+  }
+}

package/index.js

@@ -45,6 +45,10 @@ export { AutoObjectIdentification }
 
 export * from './front/src/router.js'
 
+import DataWithSchema from './front/src/components/schema/DataWithSchema.vue'
+export { DataWithSchema }
+export * from './front/src/logic/schema.js'
+
 import en from "./front/locales/en.json"
 const locales = { en }
 export { locales }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.83",
+  "version": "0.9.85",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,16 +22,16 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/cli": "^0.9.83",
-    "@live-change/dao": "^0.9.83",
-    "@live-change/dao-vue3": "^0.9.83",
-    "@live-change/dao-websocket": "^0.9.83",
-    "@live-change/framework": "^0.9.83",
-    "@live-change/image-frontend": "^0.9.83",
-    "@live-change/image-service": "^0.9.83",
-    "@live-change/session-service": "^0.9.83",
-    "@live-change/vue3-components": "^0.9.83",
-    "@live-change/vue3-ssr": "^0.9.83",
+    "@live-change/cli": "^0.9.85",
+    "@live-change/dao": "^0.9.85",
+    "@live-change/dao-vue3": "^0.9.85",
+    "@live-change/dao-websocket": "^0.9.85",
+    "@live-change/framework": "^0.9.85",
+    "@live-change/image-frontend": "^0.9.85",
+    "@live-change/image-service": "^0.9.85",
+    "@live-change/session-service": "^0.9.85",
+    "@live-change/vue3-components": "^0.9.85",
+    "@live-change/vue3-ssr": "^0.9.85",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -52,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.83",
+    "@live-change/codeceptjs-helper": "^0.9.85",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "db3fcd19e6e3a47dda84d3906e697623f057713a"
+  "gitHead": "126afb0aad3ab6e03aa5742726f429c95c46783a"
 }

package/front/src/components/crud/ActionButtons.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="flex flex-col-reverse md:flex-row justify-between items-center">
-    <div class="flex flex-col mt-2 md:mt-0">
-      <div v-if="savingDraft" class="text-surface-500 dark:text-surface-300 mr-2 flex flex-row items-center">
-        <i class="pi pi-spin pi-spinner mr-2" style="font-size: 1.23rem"></i>
-        <span>Executing...</span>
-      </div>
-      <div v-else-if="draftChanged" class="text-sm text-surface-500 dark:text-surface-300 mr-2">
-        Draft changed
-      </div>
-      <Message v-else-if="validationResult" severity="error" variant="simple" size="small" class="mr-2">
-        Before running, please correct the errors above.
-      </Message>
-    </div>
-    <div class="flex flex-row">
-      <slot name="submit" v-if="!validationResult">
-        <div class="ml-2">
-          <Button 
-            type="submit"
-            :label="submitting === true ? 'Executing...' : 'Execute'" 
-            :icon="submitting === true ? 'pi pi-spin pi-spinner' : 'pi pi-play'"
-            :disabled="submitting"
-          />         
-        </div>
-      </slot>
-      <slot name="reset" v-if="resetButton">
-        <div>
-          <Button type="reset" label="Reset" class="ml-2" :disabled="!changed" icon="pi pi-eraser"/>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-
-  import Message from "primevue/message"
-
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance, unref } from 'vue'
-
-  const props = defineProps({
-    actionFormData: {
-      type: Object,
-      required: true,
-    },
-    resetButton: {
-      type: Boolean,
-      required: true,
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    i18n: {
-      type: String,
-      default: ''
-    }
-  })
-  const { actionFormData, resetButton, options, i18n } = toRefs(props)
-
-  const changed = computed(() => unref(actionFormData).changed.value)
-  const draftChanged = computed(() => unref(actionFormData).draftChanged?.value)
-  const savingDraft = computed(() => unref(actionFormData).savingDraft?.value)
-  const submitting = computed(() => unref(actionFormData).submitting?.value)
-  const propertiesErrors = computed(() => unref(actionFormData).propertiesErrors?.value)
-
-
-  const validationResult = computed(() => {
-    const errors = propertiesErrors.value
-    if(errors && Object.keys(errors).length > 0) {
-      return errors
-    }
-    return null
-  })
-
-</script>
-
-<style scoped>
-
-</style>