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

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

@@ -98,7 +98,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(objectData.value))
+        id: objectData.value?.to ?? objectData.value?.id
       }
     }
   })

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

@@ -1,8 +1,22 @@
 <template>
-  <template v-if="typeof identificationConfig === 'string'">
+  <template v-if="identificationParts.length > 0">
     <span>
-      <i :class="[icon, 'mr-2']" style="font-size: 0.9em;"></i>{{ objectData[identificationConfig] }}
-    </span>    
+      <i v-if="modelDefinition.icon" :class="[modelDefinition.icon, 'mr-2']" style="font-size: 0.9em;"></i>
+      <template v-for="(part, index) in identificationParts">
+        <i v-if="part.icon" :class="[part.icon, 'mr-2']" style="font-size: 0.9em;"></i>
+        <span :class="{ 'mr-2': index < identificationParts.length - 1 }">
+          <span v-if="part.isObject">
+            <InjectedObjectIndentification :type="part.type" :object="part.value" />
+          </span>
+          <span v-else-if="part.field">
+            {{ part.value }}
+          </span>
+          <span v-else>
+            {{ part.text ?? '' }}
+          </span>
+        </span>
+      </template>
+    </span>
   </template>
   <template v-else>
     <span>      
@@ -13,7 +27,7 @@
 
 <script setup>
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, defineAsyncComponent } from 'vue'
 
   const props = defineProps({
     objectType: {
@@ -70,9 +84,63 @@
     })
   })
 
+  function getDefinitionProperty(path) {
+    const parts = path.split('.')
+    let current = modelDefinition.value
+    for(const part of parts) {
+      if(part === '*') {
+        return current?.items ?? current?.of
+      } else {
+        current = current?.properties?.[part]
+      }
+    }
+    return current
+  }
+
+  const InjectedObjectIndentification = defineAsyncComponent(() => import('./InjectedObjectIndentification.vue'))
+
   const loadedObjectData = await live(objectDataPath)
   const objectData = computed(() => data.value || loadedObjectData.value)
 
+  function getObjectData(path) {
+    const parts = path.split('.')
+    let current = objectData.value
+    for(const part of parts) {
+      current = current[part]
+    }
+    return current
+  }
+
+  const identificationParts = computed(() => {
+    const config = identificationConfig.value
+    if(!config) return []
+    const configArray = Array.isArray(config) ? config : [config]
+    return configArray.map(fieldConfig => {      
+      if(typeof fieldConfig === 'string') {
+        const field = getDefinitionProperty(fieldConfig)
+        if(field) {
+          const isObject = field.type.indexOf('_') > 0                    
+          return { field: fieldConfig, isObject, type: field.type }
+        } else {
+          return { text: fieldConfig }
+        }
+      } else if(typeof fieldConfig === 'object') {
+        return fieldConfig
+      } else {
+        throw new Error('Unknown identification config: ' + JSON.stringify(fieldConfig))
+      }
+    }).map(part => {
+      if(part.type === 'any') {
+        part.type = getObjectData(part.field + 'Type')
+        part.isObject = (part.type && part.type.indexOf('_') > 0) || false
+      }
+      if(part.field) {
+        part.value = getObjectData(part.field)
+      }      
+      return part
+    })
+  })
+
 
   const icon = computed(() => {
     if(modelDefinition.value?.iconProperty) return objectData[modelDefinition.value?.iconProperty]

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

@@ -45,7 +45,7 @@
   })
   const { type, object, data, link, inline } = toRefs(props)
 
-  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
+  import DefaultObjectIdentification from './DefaultObjectIdentification.vue'
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
@@ -64,7 +64,7 @@
       type: type.value,
       service: service.value,
       model: model.value
-    }, AutoObjectIdentification)
+    }, DefaultObjectIdentification)
   )
 
   const modelDefinition = computed(() => {
@@ -115,7 +115,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(objectData.value))
+        id: objectData.value?.to ?? objectData.value?.id
       }
     }
   })

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

@@ -19,9 +19,9 @@
       </div>
     </div>
 
-    <pre>parentObjects = {{ parentObjects }}</pre>
+<!--     <pre>parentObjects = {{ parentObjects }}</pre>
     <pre>scopesPath = {{ scopesPath }}</pre>
-    <pre>scopes = {{ scopes }}</pre>
+    <pre>scopes = {{ scopes }}</pre> -->
 
     <div class="">
       Service <strong>{{ service }}</strong>
@@ -171,19 +171,19 @@
       emit('created', saveResult)
     } else {
       emit('saved', saveResult)
-    }    
+    }
   }
 
-  const viewRoute = computed(() => ({
-    name: 'auto-form:editor',
+  const viewRoute = computed(() => editor.value?.saved && ({
+    name: 'auto-form:view',
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(identifiers.value)
+      id: editor.value.saved?.value?.to ?? editor.value.saved?.value?.id
     }
   }))
 
-  const scopesPath = computed(() => path.scope.objectScopes({
+  const scopesPath = computed(() => parentObjects.value[0] && path.scope.objectScopes({
     objectType: parentObjects.value[0].objectType, /// TODO: support multiple parent objects!
     object: parentObjects.value[0].object
   }))

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

@@ -27,7 +27,7 @@
                     :key="JSON.stringify(modelsPathRangeConfig)+index"
                     :pathFunction="modelsPathRangeFunction"
                     :canLoadTop="false" canDropBottom
-                    loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
+                    loadBottomSensorSize="4000px" dropBottomSensorSize="7000px">
         <template #empty>
           <div class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
             No <strong>{{ pluralize(model[0].toLowerCase() +  model.slice(1)) }}</strong> found.
@@ -43,7 +43,7 @@
                 class="text-xl"
               />
             </router-link>
-            <div class="flex flex-row">
+            <div class="flex flex-row ml-4">
               <router-link :to="viewRoute(object)" class="no-underline">
                 <Button icon="pi pi-eye" severity="primary" label="View" class="mr-2" />
               </router-link>
@@ -70,9 +70,11 @@
       </div>
     </div>
 
-    <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-end mr-2">
-      <router-link :to="createRoute" class="no-underline2">
-        <Button icon="pi pi-plus" :label="'Create new '+model" />
+    <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-end mr-2 gap-2">
+      <router-link v-for="createButton in createButtons" :key="JSON.stringify(createButton.identifiers)"
+                   :to="createButton.route" class="no-underline2">
+        <Button v-if="createButton.as" icon="pi pi-plus" :label="'Create new '+model + ' as '+createButton.as" />
+        <Button v-else icon="pi pi-plus" :label="'Create new '+model" />
       </router-link>
     </div>
 
@@ -198,11 +200,11 @@
 
   function editRoute(object) {
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:edit',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
@@ -213,23 +215,62 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
 
-  const createRoute = computed(() => {
-    const identifiersObject =  viewsArray?.value[0]?.identifiers
-    if(!identifiersObject) return null
-    const identifiers = Object.values(identifiersObject)
+  function createRoute(identifiersObject) {
+    const identifiersWithNames = Object.entries(identifiersObject).flat()
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:create',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers     
+        identifiersWithNames
       }
     }
+  }
+
+  const createButtons = computed(() => {
+    const model = modelDefinition.value
+    const results = []
+    for(const view of viewsArray.value) {
+      const identifiersObject = view?.identifiers
+      if(!identifiersObject) continue
+      
+      const identifierNames = Object.keys(identifiersObject)
+      const fieldParameters = identifierNames.filter(name => model.properties[name])
+      const otherParameters = identifierNames.filter(name => !model.properties[name])      
+
+      if(otherParameters.length > 0) {
+        const viewName = model.crud[view.name]
+        const viewDefinition = serviceDefinition.value.views[viewName]
+        for(const otherParameter of otherParameters) {
+          const otherParameterType = viewDefinition.properties[otherParameter].type
+          const modelParameters = Object.entries(model.properties)
+            .filter(([name, property]) => otherParameterType === property.type)
+          for(const [name, property] of modelParameters) {
+            const newIdentifiersObject = {
+              [name]: identifiersObject[otherParameter]
+            }
+            results.push({
+              identifiers: newIdentifiersObject,              
+              as: name,
+              route: createRoute(newIdentifiersObject)
+            })
+          }
+        }
+      } else {
+        results.push({ 
+          identifiers: identifiersObject,
+          route: createRoute(identifiersObject)
+        })
+      }
+      
+      
+    }
+    return results
   })
 
   function deleteObject(event, object) {

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

@@ -189,11 +189,11 @@
 
   function editRoute(object) {
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:edit',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
@@ -204,17 +204,17 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
 
   const createRoute = computed(() => ({
-    name: 'auto-form:editor',
+    name: 'auto-form:create',
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(objectIdentifiers(views.value[0].identifiers))
+      identifiersWithNames: Object.entries(objectIdentifiers(views.value[0].identifiers)).flat()
     }
   }))
 

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

@@ -11,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">
@@ -32,12 +32,18 @@
 
       </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 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>
 
@@ -111,7 +117,7 @@
       </div>
       <pre>accessControlRoles = {{ accessControlRoles }}</pre> -->
       
-    <pre>identifiers = {{ identifiers }}</pre>
+    <pre>id = {{ id }}</pre>
 
     <pre>definition = {{ modelDefinition }}</pre>
 
@@ -147,9 +153,9 @@
       type: String,
       required: true,
     },
-    identifiers: {
-      type: Object,
-      default: () => ({})
+    id: {
+      type: String,
+      required: true,
     },
     attributes: {
       type: Object,
@@ -160,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' ])
 
@@ -191,6 +197,7 @@
         ...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,
@@ -210,7 +217,7 @@
   const viewDataPromise = viewData({
     service: service.value,
     model: model.value,
-    identifiers: identifiers.value,
+    id: id.value,
     path, api
   })
 
@@ -254,11 +261,11 @@
   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
     }
   }))
 

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

@@ -39,24 +39,25 @@ export function schemaFromDefinition(definition, data, type, appContext = getCur
         properties[key] = {
           type: 'string',
           enum: prop.enum,
-          description: `Type of ${keyWithoutType}`          
+          enumDescriptions: prop.enumDescriptions,
+          description: `Type of ${keyWithoutType}`,
         }
         properties[keyWithoutType] = {
           type: 'string',          
-          description: `Id of Object with type defined in ${key}`          
+          description: `Id of Object with type defined in ${key}`,                
         }
       }
     }
     return {
       type: 'object',
       properties,
-      description: definition.description
+      description: definition.description,
     }      
   } else if(type === 'Array') {
     const schema = {
       type: 'array',        
       items: schemaFromDefinition(definition.items ?? definition.of, data?.[0], undefined, appContext),
-      description: definition.description
+      description: definition.description,
     }    
     if(data) {
       for(const item of data) {
@@ -67,7 +68,9 @@ export function schemaFromDefinition(definition, data, type, appContext = getCur
   } else if(type === 'String') {
     return {
       type: 'string',
-      description: definition.description
+      description: definition.description,
+      enum: definition.enum,
+      enumDescriptions: definition.enumDescriptions
     }
   } else if(type === 'Number') {
     return {

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/{Editor.vue → Create.vue}

@@ -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,35 +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
-      }
-      return identifiers.value[i]
-    })
-
+    console.log("HANDLE CREATED", id)
     //console.log("newIdentifiers", newIdentifiers)
-    if(JSON.stringify(identifiers.value) !== JSON.stringify(newIdentifiers)) {
-      router.push({
-        name: 'auto-form:view',
-        params: {
-          serviceName: serviceName.value,
-          modelName: modelName.value,
-          identifiers: newIdentifiers
-        }
-      })
-    }
-  }
-
-  function handleSaved(id) {
     router.push({
       name: 'auto-form:view',
       params: {
         serviceName: serviceName.value,
         modelName: modelName.value,
-        identifiers: identifiers.value
+        id
       }
     })
+    
   }
 
 </script>

package/front/src/pages/Edit.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="w-full lg:w-8/12 md:w-11/12">
+
+<!--    <pre>{{ identifiers }}</pre>
+    <pre>{{ modelDefinition.identifiers }}</pre> -->
+    <!-- <pre>{{identifiersObject}}</pre> -->
+
+    <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
+
+      <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft
+                   @saved="handleSaved" />
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import ModelEditor from "../components/crud/ModelEditor.vue"
+
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+
+  const props = defineProps({
+    serviceName: {
+      type: String,
+      required: true,
+    },
+    modelName: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    }
+  })
+  const { serviceName, modelName, id } = toRefs(props)
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const modelDefinition = computed(() => {
+    const service = api.services[serviceName.value]
+    if(!service) return null
+    const model = service.models[modelName.value]
+    if(!model) return null
+    return model
+  })
+
+  const identifiersObject = computed(() => {
+    return {
+      [modelName.value[0].toLowerCase() + modelName.value.slice(1)]: id.value
+    }
+  })
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleSaved(result) {
+    console.log("HANDLE SAVED", result)
+    router.push({
+      name: 'auto-form:view',
+      params: {
+        serviceName: serviceName.value,
+        modelName: modelName.value,
+        id: id.value
+      }
+    })
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/pages/Models.vue

@@ -73,7 +73,7 @@
 
   function createRoute(serviceName, model) {
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:create',
       params: {
         serviceName,
         modelName: model.name

package/front/src/pages/View.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full lg:w-8/12 md:w-11/12">
 
-    <ModelView :service="serviceName" :model="modelName" :identifiers="identifiersObject" />
+    <ModelView :service="serviceName" :model="modelName" :id="id" />
 
   </div>
 </template>
@@ -21,37 +21,12 @@
       type: String,
       required: true,
     },
-    identifiers: {
-      type: Array,
-      default: []
-    }
-  })
-  const { serviceName, modelName, identifiers } = toRefs(props)
-
-  import { useApi, usePath, live } from '@live-change/vue3-ssr'
-  const api = useApi()
-  const path = usePath()
-
-  const modelDefinition = computed(() => {
-    const service = api.services[serviceName.value]
-    if(!service) return null
-    const model = service.models[modelName.value]
-    if(!model) return null
-    return model
-  })
-
-  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
-      }
+    id: {
+      type: String,
+      required: true,
     }
-    return result
   })
+  const { serviceName, modelName, id } = toRefs(props)
 
 </script>
 

package/front/src/router.js

@@ -15,13 +15,19 @@ export function autoFormRoutes(config = {}) {
     }),
 
     route({
-      name: 'auto-form:editor', path: prefix + '/editor/:serviceName/:modelName/:identifiers*', meta: { },
-      component: () => import("./pages/Editor.vue"),
+      name: 'auto-form:create', path: prefix + '/create/:serviceName/:modelName/:identifiersWithNames*', meta: { },
+      component: () => import("./pages/Create.vue"),
       props: true
     }),
 
     route({
-      name: 'auto-form:view', path: prefix + '/view/:serviceName/:modelName/:identifiers*', meta: { },
+      name: 'auto-form:edit', path: prefix + '/edit/:serviceName/:modelName/:id', meta: { },
+      component: () => import("./pages/Edit.vue"),
+      props: true
+    }),
+
+    route({
+      name: 'auto-form:view', path: prefix + '/view/:serviceName/:modelName/:id', meta: { },
       component: () => import("./pages/View.vue"),
       props: true
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.86",
+  "version": "0.9.87",
   "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.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",
+    "@live-change/cli": "^0.9.87",
+    "@live-change/dao": "^0.9.87",
+    "@live-change/dao-vue3": "^0.9.87",
+    "@live-change/dao-websocket": "^0.9.87",
+    "@live-change/framework": "^0.9.87",
+    "@live-change/image-frontend": "^0.9.87",
+    "@live-change/image-service": "^0.9.87",
+    "@live-change/session-service": "^0.9.87",
+    "@live-change/vue3-components": "^0.9.87",
+    "@live-change/vue3-ssr": "^0.9.87",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -49,10 +49,10 @@
     "v-shared-element": "3.1.1",
     "vue-meta": "^3.0.0-alpha.9",
     "vue-router": "^4.5.0",
-    "vue3-scroll-border": "0.1.6"
+    "vue3-scroll-border": "0.1.7"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.86",
+    "@live-change/codeceptjs-helper": "^0.9.87",
     "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": "7b0013ef101d9033402eeec45fd1be60e151aada"
+  "gitHead": "7a7694ad2801b7ffa16f347aed441ca5f81ab5fd"
 }