@live-change/frontend-auto-form 0.9.61 → 0.9.63

package/front/locales/en.json

@@ -12,5 +12,12 @@
   },
   "autoform": {
     "addItem": "Add next item"
+  },
+  "objectPicker": {
+    "selectObjectType": "Select object type",
+    "currentType": "Select",
+    "fromService": "from",
+    "modelOption": "{model}",
+    "modelOptionWithService": "{service} - {model}"
   }
 }

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

@@ -1,18 +1,14 @@
 <template>
-  <template v-if="typeof identificationConfig === 'string'">
-    <span><i class="pi pi-box mr-1"></i>{{ objectData[identificationConfig] }}</span>
-  </template>
-  <template v-else>
-    <span>
-      <i class="pi pi-box mr-1"></i>
-      <strong>{{ objectType }}</strong>: {{ object ?? objectData.to ?? objectData.id }}
-    </span>
-  </template>
+  <router-link v-if="link" :to="viewRoute">
+    <ObjectIdentification :objectType="objectType" :object="object" :data="data" />
+  </router-link>
+  <ObjectIdentification v-else :objectType="objectType" :object="object" :data="data" />
 </template>
 
 <script setup>
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { defineProps, computed, inject, toRefs } from 'vue'
+  import { injectComponent } from '@live-change/vue3-components'
 
   const props = defineProps({
     objectType: {
@@ -24,15 +20,14 @@
       required: true
     },
     data: {
-      type: Object,
-      default: null
+      type: Object,      
     },
-    inline: {
+    link: {
       type: Boolean,
       default: false
     }
   })
-  const { objectType, object, data, inline } = toRefs(props)
+  const { objectType, object, data, link } = toRefs(props)
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
@@ -45,6 +40,16 @@
   const service = computed(() => serviceAndModel.value.service)
   const model = computed(() => serviceAndModel.value.model)
 
+  import DefaultObjectIdentification from './DefaultObjectIdentification.vue'
+  const ObjectIdentification = computed(() =>
+    injectComponent({
+      name: 'ObjectIdentification',
+      type: service.value + '_' + model.value,
+      service: service.value,
+      model: model.value
+    }, DefaultObjectIdentification)
+  )
+
   const modelDefinition = computed(() => {
     return api.services?.[service.value]?.models?.[model.value]
   })
@@ -71,9 +76,34 @@
   const loadedObjectData = await live(objectDataPath)
   const objectData = computed(() => data.value || loadedObjectData.value)
 
+  function objectIdentifiers(object) {
+    const identifiers = {}
+    for(const identifierDefinition of modelDefinition.value.identifiers) {
+      if(typeof identifierDefinition === 'string') {
+        identifiers[identifierDefinition] = object[identifierDefinition]
+      } else {
+        if(identifierDefinition.field === 'id') {
+          identifiers[identifierDefinition.name] = object?.to ?? object.id
+        } else {
+          identifiers[identifierDefinition.name] = object[identifierDefinition.field]
+        }
+      }
+    }
+    return identifiers
+  }
+
+  const viewRoute = computed(() => {  
+    return {
+      name: 'auto-form:view',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(objectData.value))
+      }
+    }
+  })
+
 
 </script>
 
-<style scoped>
 
-</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <template v-if="typeof identificationConfig === 'string'">
+    <span>
+      <i :class="[icon, 'mr-2']" style="font-size: 0.9em;"></i>{{ objectData[identificationConfig] }}
+    </span>    
+  </template>
+  <template v-else>
+    <span>      
+      <strong>{{ objectType }}</strong>: {{ object ?? objectData.to ?? objectData.id }}
+    </span>
+  </template>
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const { objectType, object, data, inline } = toRefs(props)
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const serviceAndModel = computed(() => {
+    const [service, model] = objectType.value.split('_')
+    return { service, model }
+  })
+  const service = computed(() => serviceAndModel.value.service)
+  const model = computed(() => serviceAndModel.value.model)
+
+  const modelDefinition = computed(() => {
+    return api.services?.[service.value]?.models?.[model.value]
+  })
+
+  const identificationViewName = computed(() => {
+    return modelDefinition.value?.crud?.identification || modelDefinition.value?.crud?.read
+  })
+
+  const identificationConfig = computed(() => {
+    return modelDefinition.value?.identification
+  })
+
+  const objectDataPath = computed(() => {
+    if(data.value) return null
+    if(!identificationConfig.value) return null
+    const viewName = identificationViewName.value
+    if(!viewName) return null
+    const modelName = model.value
+    return path[service.value][viewName]({
+      [modelName[0].toLowerCase() + modelName.slice(1)]: object.value
+    })
+  })
+
+  const loadedObjectData = await live(objectDataPath)
+  const objectData = computed(() => data.value || loadedObjectData.value)
+
+
+  const icon = computed(() => {
+    if(modelDefinition.value?.iconProperty) return objectData[modelDefinition.value?.iconProperty]
+    return modelDefinition.value?.icon || 'pi pi-box'  
+  })
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -45,7 +45,7 @@
   })
   const { type, object, data, link, inline } = toRefs(props)
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()

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

@@ -16,23 +16,24 @@
     </div>
 
     <form v-if="editor" @submit="handleSave" @reset="handleReset">
-      <div v-for="identifier in modelDefinition.identifiers">
-        <template v-if="identifier.slice(-4) !== 'Type'">
+      <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 class="min-w-[8rem] font-medium">{{ identifier }}</div>
+            <div class="min-w-[8rem] font-medium">{{ identifier.name ?? identifier }}</div>
             <div class="">
               <InjectedObjectIndentification
-                :type="identifiers[identifier+'Type'] ?? modelDefinition.properties[identifier].type"
-                :object="identifiers[identifier]"
+                :type="identifiers[(identifier.field ?? identifier)+'Type']
+                       ?? modelDefinition.properties[identifier.field ?? identifier].type"
+                :object="identifiers[identifier.field ?? identifier]"
               />
             </div>
           </div>      
           <div v-else class="flex flex-col mb-3">
             <auto-field :key="identifier"
-                  v-model="editor.value.value[identifier]"              
-                  :definition="modelDefinition.properties[identifier]"
-                  :label="identifier"
-                  :rootValue="props.rootValue" :propName="identifier"
+                  v-model="editor.value.value[identifier.field ?? identifier]"              
+                  :definition="modelDefinition.properties[identifier.field ?? identifier]"
+                  :label="identifier.name ?? identifier"
+                  :rootValue="props.rootValue" :propName="identifier.field ?? identifier"
                   :i18n="i18n"
                   class="col-span-12" />
           </div>
@@ -67,7 +68,7 @@
     },
     identifiers: {
       type: Object,
-      default: []
+      default: () => ({})
     },
     draft: {
       type: Boolean,

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

@@ -18,6 +18,9 @@
       </slot>
     </div>
 
+    <!-- <pre>modelsPathRangeConfig = {{ modelsPathRangeConfig }}</pre>
+    <pre>modelsPathRangeFunctions = {{ modelsPathRangeFunctions }}</pre> -->
+
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border" v-if="modelsPathRangeFunctions">
       <range-viewer v-for="(modelsPathRangeFunction, index) in modelsPathRangeFunctions"
                     :key="JSON.stringify(modelsPathRangeConfig)+index"
@@ -55,6 +58,7 @@
         </template>
       </range-viewer>
     </div>
+    
     <div v-else class="flex items-start p-6 bg-pink-100 rounded-border border border-pink-300 mb-6">
       <i class="pi pi-times-circle text-pink-900 text-2xl mr-4" />
       <div class="mr-4">
@@ -113,18 +117,20 @@
       type: String,
       required: true,
     },
-    identifiers: {
-      type: Object,
-      default: () => ({})
-    },
-    view: {
-      type: String,
-      default: undefined
+    views: {
+      type: Array,
+      default: () => ([]) // it can be array of identifiers or single identifier
     }
   })
-  const { service, model, identifiers, view } = toRefs(props)
+  const { service, model, views } = toRefs(props)
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  const viewsArray = computed(() => views.value?.length ? views.value : [{
+    name: 'range',
+    identifiers: {
+    }
+  }])
+
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
 
   const ObjectIdentification = computed(() =>
     injectComponent({
@@ -139,28 +145,34 @@
   const api = useApi()
   const path = usePath()
 
+  const serviceDefinition = computed(() => {
+    const serviceDefinition = api.metadata.api.value.services.find(s => s.name === service.value)
+    return serviceDefinition
+  })
+
   const modelDefinition = computed(() => {
-    return api.services?.[service.value]?.models?.[model.value]
+    return serviceDefinition.value.models[model.value]
   })
 
   const modelsPathRangeConfig = computed(() => {
     return {
       service: service.value,
       model: model.value,
-      definition: modelDefinition.value,
+      //definition: modelDefinition.value,
       reverse: true,
-      view: modelDefinition.value?.crud?.[view.value ?? 'range']
+      views: viewsArray.value.map(view => ({
+        ...view,
+        view: modelDefinition.value?.crud?.[view.name]
+      }))
     }
   })
   const modelsPathRangeFunctions = computed(() => {
-    const config = modelsPathRangeConfig.value
-    const rangeView = config.view
+    const config = modelsPathRangeConfig.value    
     if(!path[config.service]) return null
-    if(!path[config.service][rangeView]) return null
-    let idents = identifiers.value
-    if(!Array.isArray(idents)) idents = [idents]
-    return idents.map(ident => (range) =>  path[config.service][rangeView]({
-      ...ident,
+    const views = config.views
+    const serviceViews = serviceDefinition.value.views
+    return views.map(view => (range) => serviceViews[view.view] && path[config.service][view.view]({
+      ...view.identifiers,
       ...(config.reverse ? reverseRange(range) : range),
     }))
   })
@@ -203,14 +215,19 @@
     }
   }
 
-  const createRoute = computed(() => ({
-    name: 'auto-form:editor',
-    params: {
-      serviceName: service.value,
-      modelName: model.value,
-      identifiers: Object.values(identifiers.value[0])
+  const createRoute = computed(() => {
+    const identifiersObject =  viewsArray?.value[0]?.identifiers
+    if(!identifiersObject) return null
+    const identifiers = Object.values(identifiersObject)
+    return {
+      name: 'auto-form:editor',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers     
+      }
     }
-  }))
+  })
 
   function deleteObject(event, object) {
     confirm.require({

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

@@ -15,6 +15,8 @@
       </slot>
     </div>
 
+    <!-- <pre>{{  modelDefinition  }}</pre> -->
+
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border" v-if="modelsPaths">
       <div v-for="({ value: object }, index) in (modelsData ?? [])">
         <div v-if="!object" class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
@@ -105,14 +107,14 @@
       type: String,
       required: true,
     },
-    identifiers: {
+    views: {
       type: Object,
       default: () => ({})
     },
   })
-  const { service, model, identifiers } = toRefs(props)
+  const { service, model, views } = toRefs(props)
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
 
   const ObjectIdentification = computed(() =>
     injectComponent({
@@ -127,8 +129,13 @@
   const api = useApi()
   const path = usePath()
 
+  const serviceDefinition = computed(() => {
+    const serviceDefinition = api.metadata.api.value.services.find(s => s.name === service.value)
+    return serviceDefinition
+  })
+
   const modelDefinition = computed(() => {
-    return api.services?.[service.value]?.models?.[model.value]
+    return serviceDefinition.value.models[model.value]
   })
 
   const modelsPathConfig = computed(() => {
@@ -138,15 +145,26 @@
       definition: modelDefinition.value,
     }
   })
+
+  const modelsPathRangeConfig = computed(() => {
+    return {
+      service: service.value,
+      model: model.value,
+      //definition: modelDefinition.value,
+      reverse: true,
+      views: views.value.map(view => ({
+        ...view,
+        view: modelDefinition.value?.crud?.[view.name]
+      }))
+    }
+  })
   const modelsPaths = computed(() => {
-    const config = modelsPathConfig.value
-    const readView = config.definition?.crud?.read
+    const config = modelsPathRangeConfig.value    
     if(!path[config.service]) return null
-    if(!path[config.service][readView]) return null
-    let idents = identifiers.value
-    if(!Array.isArray(idents)) idents = [idents]
-    return idents.map(ident => path[config.service][readView]({
-      ...ident
+    const views = config.views
+    const serviceViews = serviceDefinition.value.views
+    return views.map(view => serviceViews[view.view] && path[config.service][view.view]({
+      ...view.identifiers,
     }))
   })
 

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

@@ -10,6 +10,8 @@
     <h4>object</h4>
     <pre>{{ object }}</pre>-->
 
+    <ScopePath :objectType="service + '_' + model" :object="object.to ?? object.id" class="mb-6" />
+
     <div v-if="object">
       <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border mb-6">
 
@@ -36,7 +38,7 @@
 
       <div v-for="preparedRelation of visibleObjectRelations" class="mb-6">
         <ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
-                   :identifiers="preparedRelation.identifiers">
+                     :views="preparedRelation.views">
           <template #header>
             <div class="text-xl">
               <ObjectIdentification
@@ -54,7 +56,7 @@
 
       <div v-for="preparedRelation of visibleRangeRelations" class="mb-6">
         <ModelList :service="preparedRelation.service" :model="preparedRelation.model"
-                   :identifiers="preparedRelation.identifiers" :view="preparedRelation.view">
+                   :views="preparedRelation.views">
           <template #header>
             <div class="text-xl">
               <ObjectIdentification
@@ -91,7 +93,8 @@
 
     <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
 
-      <pre>{{ preparedRelations }}</pre>
+      <pre>visibleRangeRelations = {{ visibleRangeRelations }}</pre>
+      <pre>preparedRelations = {{ preparedRelations }}</pre>
 
       <div v-if="backwardRelations">
         <h4>Backward relations</h4>
@@ -102,9 +105,11 @@
         }}</pre>
       </div>
 
+
+      <pre>accessControlRoles = {{ accessControlRoles }}</pre>
+
     </div>
 
-    <pre>{{ accessControlRoles }}</pre>
 
   </div>
 </template>
@@ -122,6 +127,8 @@
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
   import { RangeViewer, injectComponent, InjectComponent } from "@live-change/vue3-components"
 
+  import ScopePath from './ObjectPath.vue'
+
   const props = defineProps({
     service: {
       type: String,
@@ -148,7 +155,7 @@
 
   const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
   const ObjectIdentification = computed(() =>
     injectComponent({
       name: 'ObjectIdentification',
@@ -166,7 +173,8 @@
     return api.services?.[service.value]?.models?.[model.value]
   })
 
-  import { getForwardRelations, getBackwardRelations, anyRelationsTypes, prepareObjectRelations } from '../../logic/relations.js'
+  import { getForwardRelations, getBackwardRelations, anyRelationsTypes, prepareObjectRelations } 
+    from '../../logic/relations.js'
   const forwardRelations = computed(() => getForwardRelations(modelDefinition.value, () => true, api))
   const backwardRelations = computed(() => getBackwardRelations(modelDefinition.value,  api))
 
@@ -192,11 +200,14 @@
     return prepareObjectRelations(objectType.value, object.value.to ?? object.value.id, api)
   })
 
-  const visibleRangeRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
-    if(preparedRelation.view && preparedRelation.access.value[preparedRelation.view]) return true
-    if(preparedRelation.access.value.range) return true
-    return false
-  }))
+  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 visibleObjectRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
     if(!preparedRelation.singular) return false

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

@@ -0,0 +1,106 @@
+<template>
+  <div>
+<!--     <h1>Scope Path</h1>
+    <pre>pathsPath = {{ pathsPath }}</pre>
+    <pre>paths = {{ paths }}</pre>
+    <pre>selectedPaths = {{ selectedPaths }}</pre>
+    <pre>selectedPathWithElements = {{ selectedPathWithElements }}</pre> -->
+    <div v-for="path in selectedPathsWithElements" :key="path">
+      <Breadcrumb :model="path">
+        <template #item="{ item }">          
+          <AutoObjectIdentification :objectType="item.objectType" :object="item.object" 
+            :link="item.object !== object && item.objectType !== objectType" />
+        </template>
+      </Breadcrumb>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Breadcrumb from 'primevue/breadcrumb'
+  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import { ref, computed, onMounted, defineProps, toRefs, inject } from 'vue'
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: { 
+      type: String,
+      required: true
+    }
+  })
+  const { objectType, object } = toRefs(props)
+
+  import { usePath, live } from '@live-change/vue3-ssr'
+  const path = usePath()
+
+  function longest(scopePaths) {
+    return scopePaths.sort((a, b) => b.intermediate.length - a.intermediate.length).at(0)
+  }
+
+  function longestByType(scopePaths) {
+    const scopePathsByType = new Map()
+    for(const scopePath of scopePaths) {
+      const type = scopePath.scopeType
+      if(!scopePathsByType.has(type)) scopePathsByType.set(type, [])
+      scopePathsByType.get(type).push(scopePath)
+    }
+    const result = []
+    for(const type of scopePathsByType.keys()) {
+      result.push(longest(scopePathsByType.get(type)))
+    }
+    return result
+  }
+
+  function scopePathElements(path) {    
+    const {objectType, object, scopeType, scope, intermediate} = path
+    const root = { objectType: scopeType, object: scope, }
+    const elements = [root]
+    for(let i = 0; i < intermediate.length; i+=2) {
+      const propertyName = intermediate[i]
+      elements[elements.length - 1].toProperty = propertyName
+      const objectInfo = intermediate[i+1]
+      if(objectInfo) {
+        const separatorPosition = objectInfo.indexOf(':')
+        const objectType = JSON.parse(objectInfo.substring(0, separatorPosition))
+        const object = JSON.parse(objectInfo.substring(separatorPosition + 1))
+        elements.push({ objectType, object, propertyFrom: propertyName })
+      } else {
+        elements.push({ objectType, object, propertyFrom: propertyName })
+      }
+    }   
+    return elements
+  }
+
+  const scopePathConfig = inject('scopePathConfig', {
+    scopeType: undefined,
+    scope: undefined,
+    scopeSelector: longestByType,
+    pathsPath: (objectType, object, config) => path.scope.objectScopePaths({
+      objectType, object,
+      scopeType: config.scopeType,
+      scope: config.scope
+    }),
+    pathElements: scopePathElements
+  })
+
+  const pathsPath = computed(() => scopePathConfig.pathsPath(objectType.value, object.value, scopePathConfig))
+
+  const [paths] = await Promise.all([
+    live(pathsPath)
+  ])
+
+  const selectedPaths = computed(() => {
+    return scopePathConfig.scopeSelector(paths.value)
+  })
+
+  const selectedPathsWithElements = computed(
+    () => selectedPaths.value.map(scopePath => scopePathConfig.pathElements(scopePath))
+  )
+
+
+
+</script>
+

package/front/src/components/form/AutoField.vue

@@ -103,7 +103,7 @@
 
   const definitionIf = computed(() => {
     if(definition.value?.if) {
-      if(definition.value?.if.function) {
+      if(definition.value?.if.function) {        
         return eval(`(${definition.value.if.function})`)
       } else {
         throw new Error('Unknown if type' + JSON.stringify(definition.value.if))
@@ -114,6 +114,9 @@
 
   const visible = computed(() => {
     if(!definition.value) return false
+    if(definition.value.type === 'type' && props.propName.endsWith('Type') && !definition.value.showType) {   
+      return false
+    }
     if(definitionIf.value) {
       return definitionIf.value({
         source: definition.value,
@@ -158,8 +161,8 @@
     && props.modelValue?.length < minLengthValidation.value.length
   )
 
-  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
-  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
+  import { injectInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => injectInputConfigByDefinition(definition.value))
 
   const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))