@live-change/frontend-auto-form 0.9.84 → 0.9.86

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

@@ -7,10 +7,41 @@
       Action <strong>{{ action }}</strong>
     </div>
 
-    <form @submit="handleSubmit" @reset="handleReset">
+    <div v-if="task">
+      <Task :task="rootTask" :tasks="tasksData" />
+      <pre>rootTask = {{ rootTask }}</pre>
+    </div>
+    <div v-else-if="resultWithType">      
+      <div class="text-xl mb-2">
+        Result:
+      </div>
+      <div class="text-sm text-gray-500">
+        <pre>{{ resultWithType }}</pre>
+      </div>
+    </div>
+    <form v-else @submit="handleSubmit" @reset="handleReset">
       <div class="flex flex-col gap-4">
+
+        <div v-for="[name, parameter] in Object.entries(actionFormData.parameters)"
+             class="flex flex-col mb-3">                    
+          <template v-if="!name.endsWith('Type')">
+            <div class="min-w-[8rem] font-medium">{{ actionFormData.action.definition.properties[name].label ?? name }}</div>    
+            <div>
+              <InjectedObjectIndentification v-if="actionFormData.parameters[name+'Type']
+                        ?? actionFormData.action.definition.properties[name]?.type 
+                        ?? actionFormData.action.definition.properties[name]?.type.split('_').length > 1"
+                :type="actionFormData.parameters[name+'Type']
+                        ?? actionFormData.action.definition.properties[name]?.type"
+                :object="actionFormData.parameters[name]"
+              />
+              <pre v-else>parameter</pre>
+            </div>
+          </template>
+        </div>
+
         <auto-editor
           :definition="actionFormData.action.definition"
+          :editableProperties="actionFormData.editableProperties"
           v-model="actionFormData.value"
           :rootValue="actionFormData.value"
           :errors="actionFormData.propertiesErrors"
@@ -49,10 +80,14 @@
 
 <script setup>
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, watch } from 'vue'
   import Button from 'primevue/button'
   import AutoEditor from '../form/AutoEditor.vue'
   import ActionButtons from './ActionButtons.vue'
+  import { Task } from '@live-change/task-frontend'
+
+  import InjectedObjectIndentification from './InjectedObjectIndentification.vue'
+
   import { useToast } from 'primevue/usetoast'
   const toast = useToast()
 
@@ -68,34 +103,128 @@
     i18n: {
       type: String,
       default: ''
+    },
+    initialValue: {
+      type: Object,
+      default: () => ({})
+    },
+    parameters: {
+      type: Object,
+      default: () => ({})
     }
   })
 
-  const { service, action, i18n } = toRefs(props)
+  const { service, action, i18n, initialValue, parameters } = toRefs(props)
 
   const emit = defineEmits(['done', 'error'])
 
-  import { useApi } from '@live-change/vue3-ssr'
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
+  const path = usePath()
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
 
   import { actionData } from '@live-change/frontend-auto-form'
 
-  const actionFormData = await actionData({
+  const resultWithType = ref(null)  
+  const task = ref(null)
+
+  const tasksPath = computed(() => task.value && path.task.tasksByRoot({
+    root: task.value,
+    rootType: 'task_Task'
+  }))
+
+  const actionFormDataPromise = actionData({
     service: service.value,
     action: action.value,
-    i18n: i18n.value
+    i18n: i18n.value,
+    initialValue: initialValue.value,
+    parameters: parameters.value,
+    onDone: handleDone
+  })
+
+  const [
+    actionFormData,
+    tasksData
+  ] = await Promise.all([
+    actionFormDataPromise,
+    live(tasksPath)
+  ])
+
+  const returnType = computed(() => {
+    const returnType = actionFormData.action.definition.returns
+    return returnType.type
   })
 
-  const handleSubmit = (ev) => {
+  function handleSubmit(ev) {
     ev.preventDefault()
     actionFormData.submit()
   }
 
-  const handleReset = (ev) => {
+  function handleReset(ev) {
     ev.preventDefault()
     actionFormData.reset()
   }
 
+  function handleDone(result) {
+    console.log('handleDone', result)
+    handleResult(result, returnType.value)
+  }
+
+  function handleResult(result, type) {
+    console.log('handleResult', result, type)
+    task.value = null
+    resultWithType.value = null
+    if(type === 'task_Task') {
+      task.value = result
+    } else if(type.split('_').length === 1) {
+      if(typeof result === 'object') {
+        resultWithType.value = {
+          type: type,
+          result: result
+        }
+      } else { /// redirect to object view
+        router.push({
+          name: 'auto-form:view',
+          params: {
+            serviceName: service.value,
+            modelName: type.split('_')[0],
+            identifiers: [result]
+          }
+        })
+      }
+    } else {
+      resultWithType.value = {
+        type: type,
+        result: result
+      }
+    }
+  }
+
+  const rootTask = computed(() => {
+    if(task.value && tasksData.value) {
+      return tasksData.value.find(t => t.id === task.value)
+    }
+  })
+
+  const rootTaskDone = computed(() => {
+    if(rootTask.value) {
+      return rootTask.value.state === 'done'
+    }
+    return false
+  })
+
+/*   watch(rootTaskDone, (done) => {
+    if(done) {
+      const taskType = rootTask.value.type
+      const taskService = rootTask.value.service      
+      const taskDefinition = api.serviceDefinition(taskService).tasks[taskType]
+      handleResult(rootTask.value.result, taskDefinition.returns.type)
+    }
+  }, { immediate: true }) */
+
+
 </script>
 
 <style scoped>

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

@@ -26,22 +26,30 @@
     <div class="">
       Service <strong>{{ service }}</strong>
     </div>
-    <div class="text-2xl mb-6">
-      <span v-if="isNew">Create </span>
-      <span v-else>Edit </span>
-      <strong>{{ model }}</strong>
+    <div class="flex flex-row flex-wrap justify-between align-items-top">
+      <div class="text-2xl mb-6">
+        <span v-if="isNew">Create </span>
+        <span v-else>Edit </span>
+        <strong>{{ model }}</strong>
+      </div>
+      <div v-if="!isNew" class="flex flex-row flex-wrap justify-between align-items-top gap-2">
+        <router-link :to="viewRoute">
+          <Button label="View" icon="pi pi-eye" class="p-button mb-6" />
+        </router-link>
+      </div>
     </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>      
@@ -161,10 +169,20 @@
     console.log("SAVED", saveResult, isNew.value, editor.value.isNew)
     if(saveResult && isNew.value && editor.value.isNew) {
       emit('created', saveResult)
-    }
-    emit('saved', saveResult)
+    } else {
+      emit('saved', saveResult)
+    }    
   }
 
+  const viewRoute = computed(() => ({
+    name: 'auto-form:editor',
+    params: {
+      serviceName: service.value,
+      modelName: model.value,
+      identifiers: Object.values(identifiers.value)
+    }
+  }))
+
   const scopesPath = computed(() => path.scope.objectScopes({
     objectType: parentObjects.value[0].objectType, /// TODO: support multiple parent objects!
     object: parentObjects.value[0].object

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

@@ -1,15 +1,6 @@
 <template>
   <div>
 
-<!--    <h4>identifiers</h4>
-    <pre>{{ identifiers }}</pre>
-
-    <h4>definition</h4>
-    <pre>{{ modelDefinition }}</pre>
-
-    <h4>object</h4>
-    <pre>{{ object }}</pre>-->
-
     <div v-if="object">
       <ObjectPath :objectType="service + '_' + model" :object="object.to ?? object.id" class="mb-6" />
 
@@ -28,7 +19,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"
@@ -36,6 +32,15 @@
 
       </div>
 
+      <div v-if="connectedActions" class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border mb-6">
+        <div v-for="action of connectedActions" class="mb-6">
+          <pre>{{ action }}</pre>
+          <router-link :to="actionRoute(action)">
+            <Button :label="action.label" icon="pi pi-play" class="p-button mb-6" />
+          </router-link>
+        </div>
+      </div>
+
       <div v-for="preparedRelation of visibleObjectRelations" class="mb-6">
         <ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
                      :views="preparedRelation.views">
@@ -93,7 +98,7 @@
 
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
 
-      <pre>visibleRangeRelations = {{ visibleRangeRelations }}</pre>
+<!--       <pre>visibleRangeRelations = {{ visibleRangeRelations }}</pre>
       <pre>preparedRelations = {{ preparedRelations }}</pre>
 
       <div v-if="backwardRelations">
@@ -104,9 +109,13 @@
             )
         }}</pre>
       </div>
+      <pre>accessControlRoles = {{ accessControlRoles }}</pre> -->
+      
+    <pre>identifiers = {{ identifiers }}</pre>
 
+    <pre>definition = {{ modelDefinition }}</pre>
 
-      <pre>accessControlRoles = {{ accessControlRoles }}</pre>
+    <pre>object = {{ object }}</pre>
 
     </div>
 
@@ -173,6 +182,24 @@
     return api.services?.[service.value]?.models?.[model.value]
   })
 
+  const connectedActions = computed(() => {
+    const srcActions = modelDefinition.value?.connectedActions
+    if(!srcActions) return null
+    return Object.values(srcActions).map(action => {      
+      const config = {
+        service: service.value,
+        ...action        
+      }
+      const actionDefinition = api.getServiceDefinition(config.service).actions[config.name]
+      const label = actionDefinition.label ?? action.label ?? actionDefinition.name 
+      return {
+        ...config,
+        definition: actionDefinition,
+        label
+      }
+    })
+  })
+
   import { getForwardRelations, getBackwardRelations, anyRelationsTypes, prepareObjectRelations } 
     from '../../logic/relations.js'
   const forwardRelations = computed(() => getForwardRelations(modelDefinition.value, () => true, api))
@@ -200,14 +227,18 @@
     return prepareObjectRelations(objectType.value, object.value.to ?? object.value.id, api)
   })
 
-  const visibleRangeRelations = computed(() => preparedRelations.value.map(preparedRelation => {
-    const accessibleViews = preparedRelation.views.filter(view => preparedRelation.access.value[view.name])
-    if(accessibleViews.length === 0) return null
-    return {
-      ...preparedRelation,
-      views: accessibleViews
-    }
-  }).filter(x => x !== null))
+  const visibleRangeRelations = computed(() => preparedRelations.value
+    .filter(preparedRelation => !preparedRelation.singular)
+    .map(preparedRelation => {
+      const accessibleViews = preparedRelation.views.filter(view => preparedRelation.access.value[view.name])
+      if(accessibleViews.length === 0) return null
+      return {
+        ...preparedRelation,
+        views: accessibleViews
+      }
+    })
+    .filter(x => x !== null)
+  )
 
   const visibleObjectRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
     if(!preparedRelation.singular) return false
@@ -222,6 +253,43 @@
   }
   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)
+    }
+  }))
+
+  function actionRoute(action) {
+    const myType = service.value + '_' + model.value
+    const parameterName = action.objectParameter ?? 
+      Object.entries(action.definition.properties).find(([key, value]) => value.type === myType)?.[0] ??
+      Object.keys(action.definition.properties)?.[0]
+
+    if(parameterName) {
+      const parametersJson = JSON.stringify({
+        [parameterName]: object.value.to ?? object.value.id
+      })
+      return {
+        name: 'auto-form:actionParameters',
+        params: {
+          serviceName: action.service,
+          actionName: action.name,
+          parametersJson
+        }
+      }
+    }
+    return {
+      name: 'auto-form:action',
+      params: {
+        serviceName: action.service,
+        actionName: action.name
+      }
+    }
+  }
+
 </script>
 
 <style scoped>

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

@@ -0,0 +1,41 @@
+<template>
+<pre>
+#### {{ prefix }} Data Schema
+
+{{ JSON.stringify(schema, null, 2) }}
+
+
+#### {{ prefix }} Data:
+
+{{ JSON.stringify(clearData, null, 2) }}
+</pre>
+</template>
+
+<script setup>
+
+  import { computed, toRefs, defineProps, getCurrentInstance } from 'vue'
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      required: true,
+    },
+    prefix: {
+      type: String,
+      default: ''
+    }
+  })
+  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/components/schema/SchemaFromDefinition.vue

@@ -0,0 +1,23 @@
+<template>
+<pre>{{ schema }}</pre>
+</template>
+
+<script setup>
+
+  import { schemaFromDefinition } from "../../logic/schema.js"
+  import { defineProps, toRefs, computed, getCurrentInstance } from "vue"
+
+  const props = defineProps({
+    definition: {
+      type: Object,
+      required: true,
+    }
+  })
+
+  const { definition } = toRefs(props)
+
+  const appContext = getCurrentInstance().appContext
+
+  const schema = computed(() => schemaFromDefinition(definition.value, undefined, undefined, appContext))
+
+</script>

package/front/src/logic/actionData.js

@@ -11,7 +11,7 @@ export default async function actionData(options) {
   if(!options) throw new Error('options must be provided')
 
   const {
-    parameters,
+    parameters = {},
     initialValue = {},
 
     service: serviceName,    
@@ -50,7 +50,10 @@ export default async function actionData(options) {
   if(!service) throw new Error('service must be defined in options')
   const action = service.actions[actionName]  
   if(!action) throw new Error('action must be defined in options')
-  
+
+  const editableProperties = (action.definition.editableProperties ?? Object.keys(action.definition.properties))
+    .filter(key => !parameters[key])
+
   let draftIdParts = []
   let idKey = null
   for(const [parameterName, parameter] of Object.entries(parameters || {})) {
@@ -152,7 +155,6 @@ export default async function actionData(options) {
       const result = await submitData(synchronizedData.value.value)
       if(result === Error) return // silent return on error, because it's handled in onError
       if(draftData.value) await removeDraftAction(draftIdentifiers)
-      onDone(result)
       if(toast && doneToast) toast.add({ severity: 'success', summary: doneToast, life: 1500 })
     }
 
@@ -179,6 +181,7 @@ export default async function actionData(options) {
     return {
       parameters,
       initialValue,
+      editableProperties,
       value: synchronizedData.value,
       changed,
       submit,
@@ -200,7 +203,6 @@ export default async function actionData(options) {
     async function submit() {
       const result = await submitData(formData.value)
       if(result === Error) return // silent return on error, because it's handled in onError
-      onSaved(result)
       if(toast && doneToast) toast.add({ severity: 'success', summary: doneToast, life: 1500 })
     }
 
@@ -214,8 +216,9 @@ export default async function actionData(options) {
     }
 
     return {
-      parameters,
+      parameters,    
       initialValue,
+      editableProperties,
       value: formData,
       changed,
       submit,

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,202 @@
+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') {
+    const properties = Object.fromEntries(
+      Object.entries(definition.properties).map(
+        ([key, value]) => [key, schemaFromDefinition(value, data?.[key], undefined, appContext)])
+    )
+    for(const key in definition.properties) {
+      const prop = definition.properties[key]
+      if(key.endsWith('Type') && prop.type === 'type') {
+        const keyWithoutType = key.slice(0, -4)
+        properties[key] = {
+          type: 'string',
+          enum: prop.enum,
+          description: `Type of ${keyWithoutType}`          
+        }
+        properties[keyWithoutType] = {
+          type: 'string',          
+          description: `Id of Object with type defined in ${key}`          
+        }
+      }
+    }
+    return {
+      type: 'object',
+      properties,
+      description: definition.description
+    }      
+  } else if(type === 'Array') {
+    const schema = {
+      type: 'array',        
+      items: schemaFromDefinition(definition.items ?? definition.of, data?.[0], undefined, appContext),
+      description: definition.description
+    }    
+    if(data) {
+      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]      
+    if(!data || 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(!data) return
+  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, appContext)
+        }
+      }
+    }
+  }
+}
+
+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/front/src/pages/Action.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="w-full lg:w-8/12 md:w-11/12">
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
-      <div class="text-xl mb-2">
-        Service <strong>{{ serviceName }}</strong>
-      </div>
-      <div class="text-2xl mb-4">
-        Action <strong>{{ actionName }}</strong>
-      </div>
 
       <ActionForm 
         :service="serviceName" 
-        :action="actionName"
+        :action="actionName"        
+        :parameters="parameters"
         @done="handleDone"
       />
+
     </div>
   </div>
 </template>
@@ -29,9 +25,14 @@
     actionName: {
       type: String,
       required: true
+    },
+    parametersJson: {
+      type: String
     }
   })
-  const { serviceName, actionName } = toRefs(props)
+  const { serviceName, actionName, parametersJson } = toRefs(props)
+  
+  const parameters = computed(() => parametersJson.value ? JSON.parse(parametersJson.value) : {})
 
   import { useApi } from '@live-change/vue3-ssr'
   const api = useApi()

package/front/src/pages/Editor.vue

@@ -8,7 +8,7 @@
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
 
       <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft
-                   @created="handleCreated"/>
+                   @created="handleCreated" @saved="handleSaved" />
 
     </div>
   </div>
@@ -83,7 +83,7 @@
     //console.log("newIdentifiers", newIdentifiers)
     if(JSON.stringify(identifiers.value) !== JSON.stringify(newIdentifiers)) {
       router.push({
-        name: 'auto-form:editor',
+        name: 'auto-form:view',
         params: {
           serviceName: serviceName.value,
           modelName: modelName.value,
@@ -93,6 +93,17 @@
     }
   }
 
+  function handleSaved(id) {
+    router.push({
+      name: 'auto-form:view',
+      params: {
+        serviceName: serviceName.value,
+        modelName: modelName.value,
+        identifiers: identifiers.value
+      }
+    })
+  }
+
 </script>
 
 <style scoped>

package/front/src/router.js

@@ -38,6 +38,12 @@ export function autoFormRoutes(config = {}) {
       props: true
     }),
 
+    route({
+      name: 'auto-form:actionParameters', path: prefix + '/action/:serviceName/:actionName/:parametersJson', meta: { },
+      component: () => import("./pages/Action.vue"),
+      props: true
+    }),
+
   ]
 }
 

package/index.js

@@ -45,6 +45,12 @@ export { AutoObjectIdentification }
 
 export * from './front/src/router.js'
 
+import DataWithSchema from './front/src/components/schema/DataWithSchema.vue'
+export { DataWithSchema }
+import SchemaFromDefinition from './front/src/components/schema/SchemaFromDefinition.vue'
+export { SchemaFromDefinition }
+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.84",
+  "version": "0.9.86",
   "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.84",
-    "@live-change/dao": "^0.9.84",
-    "@live-change/dao-vue3": "^0.9.84",
-    "@live-change/dao-websocket": "^0.9.84",
-    "@live-change/framework": "^0.9.84",
-    "@live-change/image-frontend": "^0.9.84",
-    "@live-change/image-service": "^0.9.84",
-    "@live-change/session-service": "^0.9.84",
-    "@live-change/vue3-components": "^0.9.84",
-    "@live-change/vue3-ssr": "^0.9.84",
+    "@live-change/cli": "^0.9.86",
+    "@live-change/dao": "^0.9.86",
+    "@live-change/dao-vue3": "^0.9.86",
+    "@live-change/dao-websocket": "^0.9.86",
+    "@live-change/framework": "^0.9.86",
+    "@live-change/image-frontend": "^0.9.86",
+    "@live-change/image-service": "^0.9.86",
+    "@live-change/session-service": "^0.9.86",
+    "@live-change/vue3-components": "^0.9.86",
+    "@live-change/vue3-ssr": "^0.9.86",
     "@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.84",
+    "@live-change/codeceptjs-helper": "^0.9.86",
     "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": "5881a5406e3a39e673034f172266409ddb306f2e"
+  "gitHead": "7b0013ef101d9033402eeec45fd1be60e151aada"
 }