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

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" />
 
@@ -20,12 +11,12 @@
         </div>
         <div class="flex flex-row flex-wrap justify-between align-items-top">
           <div class="text-2xl mb-6">
-            <strong>{{ model }}</strong>
+            <strong class="mr-2">{{ model }}</strong>
             <ObjectIdentification
               :objectType="service + '_' + model"
               :object="object.to ?? object.id"
               :data="object"
-              class="ml-2"
+              class=""
             />
           </div>
           <div class="flex flex-row flex-wrap justify-between align-items-top gap-2">
@@ -41,6 +32,21 @@
 
       </div>
 
+      <div v-if="connectedActions" 
+              class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border mb-6">
+        <div class="text-xl mb-3">
+          Actions
+        </div>
+        <div class="flex flex-row flex-wrap gap-2">
+          <div v-for="action of connectedActions" class="mb-0">
+            <!-- <pre>{{ action }}</pre> -->
+            <router-link :to="actionRoute(action)">
+              <Button :label="action.label" icon="pi pi-play" class="p-button mb-0" />
+            </router-link>
+          </div>
+        </div>
+      </div>
+
       <div v-for="preparedRelation of visibleObjectRelations" class="mb-6">
         <ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
                      :views="preparedRelation.views">
@@ -98,7 +104,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">
@@ -109,9 +115,13 @@
             )
         }}</pre>
       </div>
+      <pre>accessControlRoles = {{ accessControlRoles }}</pre> -->
+      
+    <pre>id = {{ id }}</pre>
 
+    <pre>definition = {{ modelDefinition }}</pre>
 
-      <pre>accessControlRoles = {{ accessControlRoles }}</pre>
+    <pre>object = {{ object }}</pre>
 
     </div>
 
@@ -143,9 +153,9 @@
       type: String,
       required: true,
     },
-    identifiers: {
-      type: Object,
-      default: () => ({})
+    id: {
+      type: String,
+      required: true,
     },
     attributes: {
       type: Object,
@@ -156,7 +166,7 @@
       default: ''
     }
   })
-  const { service, model, identifiers, attributes, i18n } = toRefs(props)
+  const { service, model, id, attributes, i18n } = toRefs(props)
 
   const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
 
@@ -178,6 +188,25 @@
     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]
+      if(!actionDefinition) throw new Error("Action " + config.service + "_" + config.name + " definition not found")
+      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))
@@ -188,7 +217,7 @@
   const viewDataPromise = viewData({
     service: service.value,
     model: model.value,
-    identifiers: identifiers.value,
+    id: id.value,
     path, api
   })
 
@@ -205,14 +234,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
@@ -228,14 +261,41 @@
   const accessControlRoles = computed(() => modelDefinition.value?.accessRoles ?? [])
 
   const editRoute = computed(() => ({
-    name: 'auto-form:editor',
+    name: 'auto-form:edit',
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(identifiers.value)
+      id: id.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>
 

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

@@ -1,14 +1,14 @@
 <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>
+<pre>
+#### {{ prefix }} Data Schema
+
+{{ JSON.stringify(schema, null, 2) }}
+
+
+#### {{ prefix }} Data:
+
+{{ JSON.stringify(clearData, null, 2) }}
+</pre>
 </template>
 
 <script setup>
@@ -19,7 +19,11 @@
     data: {
       type: Object,
       required: true,
-    }    
+    },
+    prefix: {
+      type: String,
+      default: ''
+    }
   })
   const { data } = toRefs(props)
 

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/components/view/AutoView.vue

@@ -85,12 +85,25 @@
     filter: viewFilter.value
   }))
 
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
   const viewComponent = computed(() => {
     const type = definition.value.type ?? 'Object'
-    const defaultComponent = (type === 'Object')
-      ? defineAsyncComponent(() => import('./ObjectView.vue'))
-      : defineAsyncComponent(() => import('./JsonView.vue'))
-    return injectComponent(viewComponentRequest.value, defineAsyncComponent(() => import('./JsonView.vue')))
+    let defaultComponent = undefined
+    if(type.indexOf('_') > 0) {
+      const [service, model] = type.split('_')
+      const modelDefinition = api.getServiceDefinition(service)?.models[model]
+      if(modelDefinition) {
+        defaultComponent = defineAsyncComponent(() => import('../crud/InjectedObjectIndentification.vue'))
+      }
+    }
+    if(!defaultComponent) {
+      defaultComponent = (type === 'Object')
+        ? defineAsyncComponent(() => import('./ObjectView.vue'))
+        : defineAsyncComponent(() => import('./JsonView.vue'))
+    }
+    return injectComponent(viewComponentRequest.value, defaultComponent)
   })
 
   const viewClass = computed(() => [definition.value?.view?.class, props.class])
@@ -102,6 +115,8 @@
     ...(definition.value?.view?.attributes),
     ...(props.attributes),
     value: value.value,
+    type: definition.value.type,
+    object: value.value,
     definition: definition.value,
     class: viewClass.value,
     style: viewStyle.value,

package/front/src/components/view/DefaultFieldView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field" :class="fieldClass" :style="fieldStyle">
+  <div class="field flex flex-col" :class="fieldClass" :style="fieldStyle">
     <slot name="label"
           v-bind="{ uid, value, definition, viewClass, viewStyle, attributes, propName, rootValue, i18n }">
       <label :for="uid" class="font-medium text-lg">{{ t( label ) }}</label>

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/schema.js

@@ -28,27 +28,49 @@ function addSchema(schemas, 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,
+          enumDescriptions: prop.enumDescriptions,
+          description: `Type of ${keyWithoutType}`,
+        }
+        properties[keyWithoutType] = {
+          type: 'string',          
+          description: `Id of Object with type defined in ${key}`,                
+        }
+      }
+    }
     return {
       type: 'object',
-      properties: Object.fromEntries(
-        Object.entries(definition.properties).map(([key, value]) => [key, schemaFromDefinition(value, data[key], undefined, appContext)])
-      ),
-      description: definition.description
+      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
+      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) 
+    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
+      description: definition.description,
+      enum: definition.enum,
+      enumDescriptions: definition.enumDescriptions
     }
   } else if(type === 'Number') {
     return {
@@ -70,9 +92,8 @@ export function schemaFromDefinition(definition, data, type, appContext = getCur
     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') {
+    const modelDefinition = serviceDefinition?.models?.[modelName]      
+    if(!data || typeof data === 'string') {
       return {
         type: 'string',
         description: `Id of ${modelName} from ${serviceName} service.`
@@ -94,6 +115,7 @@ export function schemaFromDefinition(definition, data, type, appContext = getCur
 }
 
 function extendSchema(schema, data, viewName, serviceName, appContext) {
+  if(!data) return
   if(Array.isArray(data)) {
     if(!schema.items) {
       schema.items = generateSchema(data, schema, 'items', appContext)
@@ -108,7 +130,7 @@ function extendSchema(schema, data, viewName, serviceName, appContext) {
             description: schema.modelName ? `Id of ${schema.modelName} from ${schema.serviceName} service.` : `Id.`
           }
         } else {
-          generateSchema(value, schema.properties, property)
+          generateSchema(value, schema.properties, property, appContext)
         }
       }
     }
@@ -116,7 +138,7 @@ function extendSchema(schema, data, viewName, serviceName, appContext) {
 }
 
 function generateSchema(data, schemaObject, schemaProperty, appContext) {
-  const api = useApi(appContext)  
+  const api = useApi(appContext)
   if(!schemaObject[schemaProperty]) {
     schemaObject[schemaProperty] = {
       anyOf: []
@@ -180,4 +202,4 @@ export function cleanData(data) {
     }
     return cleanedProperties
   }
-}
+}

package/front/src/logic/viewData.js

@@ -5,7 +5,7 @@ export default async function viewData(options) {
   if(!options) throw new Error('options must be provided')
 
   const {
-    identifiers,
+    id,
     service: serviceName,
     model: modelName,
 
@@ -13,22 +13,22 @@ export default async function viewData(options) {
     api = useApi(),
   } = options
 
-  if(!identifiers) throw new Error('identifiers must be defined')
+  if(!id) throw new Error('id must be defined')
   if(!serviceName || !modelName) throw new Error('service and model must be defined')
 
   const service = api.services[serviceName]
   const model = service.models[modelName]
   const {
-    crudMethods = model.crud,
-    identifiersNames = model.identifiers,
+    crudMethods = model.crud
     //editableProperties = model.editableProperties ?? Object.keys(model.properties)
   } = options
 
   if(!crudMethods) throw new Error('crud methods must be defined in model or options')
-  if(!identifiersNames) throw new Error('identifiers names must be defined in model or options')
 //  if(!editableProperties) throw new Error('editableProperties must be defined in model or options')
 
-  const savedDataPath = path[serviceName][crudMethods.read](identifiers)
+  const savedDataPath = path[serviceName][crudMethods.read]({ 
+    [modelName[0].toLowerCase() + modelName.slice(1)]: id
+   })
 
   let data
   let error

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 → Create.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>
@@ -29,20 +29,12 @@
       type: String,
       required: true,
     },
-    identifiers: {
+    identifiersWithNames: {
       type: Array,
       default: () => []
-    },
-    identifiersTypes: {
-      type: Array,
-      default: () => undefined
-    },
-    identifiersProperties: {
-      type: Array,
-      default: () => undefined
     }
   })
-  const { serviceName, modelName, identifiers } = toRefs(props)
+  const { serviceName, modelName, identifiersWithNames } = toRefs(props)
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
@@ -58,13 +50,10 @@
 
   const identifiersObject = computed(() => {
     const result = {}
-    for(const [i, identifier] of Object.entries(identifiers.value)) {
-      const identifierDefinition = modelDefinition.value.identifiers[i]
-      if(typeof identifierDefinition === 'string') {
-        result[identifierDefinition] = identifier
-      } else {
-        result[identifierDefinition.name] = identifier
-      }
+    for(let i = 0; i < identifiersWithNames.value.length; i+=2) {
+      const name = identifiersWithNames.value[i]
+      const identifier = identifiersWithNames.value[i+1]
+      result[name] = identifier
     }
     return result
   })
@@ -73,24 +62,17 @@
   const router = useRouter()
 
   function handleCreated(id) {
-    const newIdentifiers = modelDefinition.value.identifiers.map((identifier, i) => {
-      if(typeof identifier === 'object' && identifier.field === 'id') {
-        return id
+    console.log("HANDLE CREATED", id)
+    //console.log("newIdentifiers", newIdentifiers)
+    router.push({
+      name: 'auto-form:view',
+      params: {
+        serviceName: serviceName.value,
+        modelName: modelName.value,
+        id
       }
-      return identifiers.value[i]
     })
-
-    //console.log("newIdentifiers", newIdentifiers)
-    if(JSON.stringify(identifiers.value) !== JSON.stringify(newIdentifiers)) {
-      router.push({
-        name: 'auto-form:editor',
-        params: {
-          serviceName: serviceName.value,
-          modelName: modelName.value,
-          identifiers: newIdentifiers
-        }
-      })
-    }
+    
   }
 
 </script>