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

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,10 +1,11 @@
 <template>
   <template v-if="typeof identificationConfig === 'string'">
-    <span><i class="pi pi-box mr-1"></i>{{ objectData[identificationConfig] }}</span>
+    <span>
+      <i class="pi pi-box mr-2" style="font-size: 0.9em;"></i>{{ objectData[identificationConfig] }}
+    </span>    
   </template>
   <template v-else>
-    <span>
-      <i class="pi pi-box mr-1"></i>
+    <span>      
       <strong>{{ objectType }}</strong>: {{ object ?? objectData.to ?? objectData.id }}
     </span>
   </template>

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,16 +117,18 @@
       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)
+
+  const viewsArray = computed(() => views.value?.length ? views.value : [{
+    name: 'range',
+    identifiers: {
+    }
+  }])
 
   import AutoObjectIdentification from './AutoObjectIdentification.vue'
 
@@ -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,12 +107,12 @@
       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'
 
@@ -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>-->
 
+ 
+
     <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>
@@ -166,7 +171,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 +198,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/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,

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

@@ -1,14 +1,28 @@
 <template>
   <div>
     <div ref="selectElement" class="p-select p-component p-inputwrapper w-full" @click="toggleObjectPicker">
-      <span class="p-select-label p-placeholder" tabindex="0" role="combobox">
-        Select object
+      <span v-if="!model" class="p-select-label p-placeholder" tabindex="0" role="combobox">
+        <span v-if="isTypeSelectable">
+          Select object 
+        </span>
+        <span v-else>
+          Select {{ objectModel }}
+        </span>
+      </span>
+      <span v-else class="p-select-label">
+        <ObjectIdentification
+          :objectType="objectType"
+          :object="model"
+          class=""
+        />
       </span>
       <div class="p-select-dropdown" data-pc-section="dropdown">
         <ChevronDownIcon />
       </div>
     </div>
 
+    <!-- <pre>objt = {{ objectType }}</pre> -->
+
     <Popover ref="objectPickerPopover" :pt="{
       root: {
         class: 'object-picker-popover overflow-y-auto',
@@ -18,11 +32,13 @@
         }
       }
     }">
-      <ObjectPicker />
+      <ObjectPicker v-model="model" :definition="definition" :properties="properties"
+                    :rootValue="rootValue" :propName="propName" :i18n="i18n" @selected="handleSelected" />
     </Popover>
 
     <!-- needed to autoload styles: -->
-    <Select class="hidden" />
+    <Select class="hidden" :options="[1,2,3]" />
+
   </div>
 </template>
 
@@ -31,8 +47,10 @@
   import Select from 'primevue/select'
   import Popover from 'primevue/popover'
   import ObjectPicker from './ObjectPicker.vue'
+  import AutoObjectIdentification from '../crud/AutoObjectIdentification.vue'
+  import { injectComponent } from "@live-change/vue3-components"
 
-  import { defineProps, defineEmits, toRefs, ref, defineModel } from 'vue'
+  import { defineProps, defineEmits, toRefs, ref, defineModel, computed } from 'vue'
   import { useElementSize } from '@vueuse/core'
 
   const props = defineProps({
@@ -42,14 +60,58 @@
     properties: {
       type: Object,
       default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
     }
   })
 
+  const { definition, properties, rootValue, propName, i18n: i18nPrefix } = toRefs(props)
+
   const model = defineModel({
     required: true
   })
+  
+  const isTypeSelectable = computed(() => {
+    return definition.value.type === 'any'
+  })
 
-  const { value, definition, modelValue } = toRefs(props)
+  const objectType = computed(() => {    
+      if(definition.value.type !== 'any') {
+        return definition.value.type
+      }
+    const typePropertyName = props.propName + 'Type'    
+    const typePropertyPath = typePropertyName.split('.')  
+    return typePropertyPath.reduce((acc, prop) => acc?.[prop], rootValue.value)
+  })
+
+  const objectModel = computed(() => {
+    const type = objectType.value
+    if(!type) return null
+    const [service, model] = type.split('_')
+    return model
+  })
+
+  const ObjectIdentification = computed(() => {
+    const type = objectType.value
+    if(!type) return AutoObjectIdentification
+    const [service, model] = type.split('_')
+    return injectComponent({
+      name: 'ObjectIdentification',
+      type,
+      service: service,
+      model: model
+    }, AutoObjectIdentification)
+  })
 
   const objectPickerPopover = ref()
   const selectElement = ref()
@@ -59,6 +121,10 @@
     objectPickerPopover.value.toggle(event)
   }
 
+  const handleSelected = (object) => {
+    objectPickerPopover.value.hide()
+  }
+
 </script>
 
 <style>

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

@@ -1,10 +1,248 @@
 <template>
-    <div>
-        Object picker!
+  <div>
+    <div v-if="!model && !selectedType && typeOptions.length < 8">
+      <div class="p-2">
+        <div class="text-sm text-surface-600 dark:text-surface-400 mb-2">
+          {{ t('objectPicker.selectObjectType') }}
+        </div>
+        <div class="flex flex-col">
+          <div v-for="type in typeOptions" :key="type"
+               class="p-2 hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer"
+               @click="selectedType = type">
+            {{ typeLabel(type) }}
+          </div>
+        </div>
+      </div>
     </div>
+    <div v-else>
+      <div v-if="isTypeNeeded" class="bg-surface-100 dark:bg-surface-900 p-1 py-2 sticky top-0 z-10">
+        <div v-if="typeOptions.length > 1"
+          class="flex flex-col gap-2">
+    <!--       <label :for="`type-select-${uid}`">{{ t('objectPicker.selectObjectType') }}</label> -->
+          <Select v-model="selectedType" :options="typeOptions" :id="`type-select-${uid}`"
+                  :placeholder="t('objectPicker.selectObjectType')"
+                  :optionLabel="typeLabel" />
+        </div>
+        <div v-else>
+          <span>{{ t('objectPicker.currentType') }} {{ selectedTypeModel }}</span>
+          <span v-if="showServiceName">{{ t('objectPicker.fromService') }} {{ selectedTypeService }}</span>
+        </div>
+      </div>
+
+      <div v-if="objectsPathRangeFunction">
+        <range-viewer :key="JSON.stringify(objectsPathRangeConfig)"
+                      :pathFunction="objectsPathRangeFunction"
+                      :canLoadTop="false" canDropBottom
+                      loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
+          <template #empty>
+            <div class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
+              No <strong>
+                {{ pluralize(selectedTypeModel[0].toLowerCase() +  selectedTypeModel.slice(1)) }}
+              </strong> found.
+            </div>
+          </template>
+          <template #default="{ item: object }">
+            <div @click="selectObject(object)"
+                class="flex flex-row items-center justify-between my-1 py-2 px-4
+                  bg-surface-100 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-800">
+              <ObjectIdentification
+                :objectType="selectedTypeService + '_' + selectedTypeModel"
+                :object="object.to ?? object.id"
+                :data="object"
+                class=""
+              />
+            </div>
+          </template>
+        </range-viewer>
+      </div>
+    </div>
+
+
+    <!-- <pre>isTypeNeeded = {{ isTypeNeeded }}</pre>
+    <pre>typePropertyName = {{ typePropertyName }}</pre>
+    <pre>typePropertyPath = {{ typePropertyPath }}</pre>
+    <pre>typeModel = {{ typeModel }}</pre> -->
+    <!-- <div>
+      <pre>objectsPathRangeConfig = {{ objectsPathRangeConfig }}</pre>
+      <pre>objectsPathRangeFunction = {{ objectsPathRangeFunction }}</pre>
+      <pre>selectedType = {{ selectedType }}</pre>
+      <pre>definition = {{ definition }}</pre>
+      <pre>properties = {{ properties }}</pre>
+      <pre>typeOptions = {{ typeOptions }}</pre>
+      <pre>model = {{ model }}</pre>
+    </div> -->
+  </div>
 </template>
 
 <script setup>
+  import Select from 'primevue/select'
+  import AutoObjectIdentification from '../crud/AutoObjectIdentification.vue'
+  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+
+  import { defineProps, defineEmits, toRefs, ref, defineModel, computed, useId } from 'vue'
+  import pluralize from 'pluralize'
+
+  const uid = useId()
+
+  const props = defineProps({
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    },
+    showServiceName: {
+      type: Boolean,
+      default: false
+    },
+    view: {
+      type: String,
+      default: 'range'
+    } 
+  })
+
+  const { definition, properties, rootValue, propName, i18n, view } = toRefs(props)
+
+  const model = defineModel({
+    required: true
+  })
+
+  const emit = defineEmits(['selected'])
+
+  import { useI18n } from 'vue-i18n'
+  const { t: tI18n, te } = useI18n()
+  const t = (key, ...params) => tI18n(
+    te(i18n.value + propName.value + key) 
+    ? i18n.value + propName.value + key 
+    : key, ...params
+  )
+
+  const isTypeNeeded = computed(() => {
+    return definition.value.type === 'any'
+  })
+  const typePropertyName = computed(() => props.propName + 'Type')
+  const typePropertyPath = computed(() => typePropertyName.value.split('.'))
+  const typeModel = computed({
+    get() {
+      return typePropertyPath.value.reduce((acc, prop) => acc?.[prop], rootValue.value)  
+    },
+    set(value) {
+      const path = typePropertyPath.value
+      let data = rootValue.value
+      for(let i = 0; i < path.length - 1; i++) {
+        const prop = path[i]
+        if(data[prop] === undefined || data[prop] === null) {
+          data[prop] = {}
+        }
+        data = data[prop]
+      }
+      data[path.at(-1)] = value
+    }
+  })
+
+  import { getAllTypesWithCrud } from '../../logic/relations'
+
+  const typeOptions = computed(() => {
+    if(definition.value.type === 'any') {
+      return definition.value.types ?? getAllTypesWithCrud('read')
+    }
+    return [definition.value.type]
+  })
+
+  const typeOptionsServices = computed(() => {
+    return Array.from(new Set(typeOptions.value.map(option => option.split('_')[0])))
+  })
+
+  const selectedType = ref(null)
+
+  console.log("Type options", typeOptions.value)
+  if(typeModel.value) {
+    selectedType.value = typeModel.value
+  } else if(typeOptions.value.length === 1) {
+    selectedType.value = typeOptions.value[0]
+  }
+
+  const selectedTypeParsed = computed(() => {
+    if(selectedType.value) return selectedType.value.split('_')    
+    return null
+  })
+
+  const selectedTypeService = computed(() => {
+    if(selectedTypeParsed.value) return selectedTypeParsed.value[0]
+    return null
+  })  
+
+  const selectedTypeModel = computed(() => {
+    if(selectedTypeParsed.value) return selectedTypeParsed.value[1]
+    return null
+  })
+
+  const ObjectIdentification = computed(() => {
+    const [service, model] = selectedTypeParsed.value
+    return injectComponent({
+      name: 'ObjectIdentification',
+      type: service + '_' + model,
+      service: service,
+      model: model
+    }, AutoObjectIdentification)
+  })
+  
+  function typeLabel(option) {
+    const [service, model] = option.split('_')
+    if(typeOptionsServices.value.length === 1) {
+      return t('objectPicker.modelOption', { model })
+    }
+    return t('objectPicker.modelOptionWithService', { service, model })
+  }
+
+  import { useApi, usePath, live, reverseRange } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()  
+
+  const objectsPathRangeConfig = computed(() => {
+    if(!selectedTypeParsed.value) return null
+    const [service, model] = selectedTypeParsed.value
+    const serviceDefinition = api.metadata.api.value.services.find(s => s.name === service)
+    const modelDefinition = serviceDefinition.models[model]
+    return {
+      service,
+      model,
+      reverse: true,
+      view: modelDefinition?.crud?.[view.value ?? 'range']
+    }
+  })
+  const objectsPathRangeFunction = computed(() => {
+    const config = objectsPathRangeConfig.value
+    if(!config) return null
+    const rangeView = config.view
+    if(!path[config.service]) return null
+    if(!path[config.service][rangeView]) return null    
+    return (range) =>  path[config.service][rangeView]({
+      //...ident,
+      ...(config.reverse ? reverseRange(range) : range),
+    })
+  })
+
+  function selectObject(object) {
+    if(isTypeNeeded.value) {
+      typeModel.value = selectedType.value
+    }
+    model.value = object.to ?? object.id
+    emit('selected', object)
+  }
 
 </script>
 

package/front/src/components/form/inputConfigInjection.js

@@ -8,7 +8,7 @@ export function provideInputConfig(description, inputConfig) {
   for(let key in description) {
     for(let value of (description[key] instanceof Array ? description[key] : [description[key]])) {
       const provideKey = `input:${key}=${value}`
-      console.log("PROVIDE COMPONENT", provideKey)
+      //console.log("PROVIDE INPUT CONFIG", provideKey)
       provide(provideKey, {
         inputConfig,
         description
@@ -26,9 +26,9 @@ export function injectInputConfig(request, defaultInputConfig, factory) {
 
   for(let key in request) {
     const provideKey = `input:${key}=${request[key]}`
-    console.log("INJECT INPUT CONFIG PROVIDE KEY", provideKey)
+    //console.log("INJECT INPUT CONFIG PROVIDE KEY", provideKey)
     const entry = inject(provideKey, null)
-    console.log("RESOLVED INPUT CONFIG", entry)
+    //console.log("RESOLVED INPUT CONFIG", entry)
     if(!entry) continue
     let isValid = true
     for(let key in entry.description) {
@@ -37,7 +37,7 @@ export function injectInputConfig(request, defaultInputConfig, factory) {
         if(!value.includes(entry.description[key])) isValid = false
       } else if(value !== entry.description[key]) isValid = false
     }
-    console.log("RESOLVED COMPONENT VALID", isValid, filter(entry))
+    //console.log("RESOLVED COMPONENT VALID", isValid, filter(entry))
     if(isValid && filter(entry)) return entry.inputConfig
   }
   return factory ? defaultInputConfig() : defaultInputConfig

package/front/src/components/form/provideAutoInputConfiguration.js

@@ -71,6 +71,8 @@ types.Boolean = inputs.switch = {
   fieldComponent: defineAsyncComponent(() => import('./SwitchField.vue')),
 }*/
 
+types.any = inputs.object = inputConfig(() => import('./ObjectInput.vue'))
+
 
 export function provideAutoInputConfiguration() {
   for(let type in types) {

package/front/src/logic/editorData.js

@@ -3,6 +3,27 @@ import { usePath, live, useApi } from '@live-change/vue3-ssr'
 import { ref, computed, inject, watch } from 'vue'
 import { synchronized, defaultData } from '@live-change/vue3-components'
 
+function cyrb128(str) {
+  let h1 = 1779033703, h2 = 3144134277,
+      h3 = 1013904242, h4 = 2773480762;
+  for (let i = 0, k; i < str.length; i++) {
+      k = str.charCodeAt(i);
+      h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
+      h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
+      h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
+      h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
+  }
+  h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
+  h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
+  h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
+  h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
+  h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
+  const data = new Uint32Array([h4>>>0, h3>>>0, h2>>>0, h1>>>0])
+  // convert to base64
+  const data8 = new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+  return btoa(String.fromCharCode(...data8))
+}
+
 export default function editorData(options) {
   if(!options) throw new Error('options must be provided')
 
@@ -66,8 +87,11 @@ export default function editorData(options) {
     }
   }
   const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.every(key => identifiers[key])))
-  const draftId = (idKey ? identifiers[idKey]
+  let draftId = (idKey ? identifiers[idKey]
     : draftIdParts.map(key => JSON.stringify(identifiers[key])).join('_')) ?? 'new'
+  if(draftId.length > 16) {
+    draftId = cyrb128(draftId).slice(0, 16)
+  }
   const draftIdentifiers = {
     actionType: serviceName, action: crudMethods.read, targetType: modelName, target: draftId
   }

package/front/src/logic/relations.js

@@ -15,6 +15,12 @@ function getWhats(relations) {
   return relations.map(x => ensureArray(getWhat(x)))
 }
 
+function getPropertyNames(relation) {
+  if(typeof relation === 'string') return relation[0].toLowerCase() + relation.slice(1)
+  if(relation.propertyNames) return relation.propertyNames
+  return ensureArray(relation.what).map(x => x[0].toLowerCase() + x.slice(1))
+}
+
 export const relationTypes = {
   propertyOf: { singular: true, typed: true, owned: true },
   boundTo: { singular: true, typed: true, owned: false },
@@ -58,10 +64,12 @@ export function getForwardRelations(model, api = useApi()) {
     if(!Array.isArray(relations)) relations = [relations]
     for(const relation of relations) {
       const what = ensureArray(getWhat(relation))
+      const fields = ensureArray(getPropertyNames(relation))
       const result = {
         from: model,
         relation: type,
-        what
+        what,
+        fields
       }
       results.push(result)
     }
@@ -143,61 +151,83 @@ export function prepareObjectRelations(objectType, object, api = useApi()) {
     })
 
     if(anyRelationsTypes.includes(relation)) {
-      const identifiers = []
-      for(const field of fields) {
-        const possibleFieldTypes = (relationConfig[field+'Types'] ?? [])
-          .concat(relationConfig.parentsTypes ?? [])
-        if(possibleFieldTypes.length === 0 || possibleFieldTypes.includes(objectType)) {
-          identifiers.push({
-            [field+'Type']: objectType,
-            [field]: object
-          })
+      const views = []
+      const singular = relationTypes[relation].singular && fields.length < 2
+
+      if(singular) {
+        views.push({
+          name: 'read',
+          identifiers: {
+            [fields[0]+'Type']: objectType,
+            [fields[0]]: object
+          }
+        })
+      } else {
+        for(const field of fields) {      
+          const possibleFieldTypes = (relationConfig[field+'Types'] ?? [])
+            .concat(relationConfig.parentsTypes ?? [])
+          if(possibleFieldTypes.length === 0 || possibleFieldTypes.includes(objectType)) {
+            const name = 'rangeBy' + field[0].toUpperCase() + field.slice(1)
+            if(from.crud?.[name]) views.push({
+              name,
+              identifiers: {
+                [field+'Type']: objectType,
+                [field]: object
+              }
+            })
+          }
         }
       }
+      /* console.error("relation", relation, 'from', from, "type", relationTypes[relation],
+         "what", what, "fields", fields) */
       return {
         model: from.name,
         service: from.serviceName,
         fields,
         relation,
         what,
-        identifiers,
+        views,
         access,
-        singular: relationTypes[relation].singular && what.length < 2
+        singular
       }
     } else {
+      const views = []
       const singular = relationTypes[relation].singular && what.length < 2
-      const typeView = from.crud?.['rangeBy_'+objectType]
-        ? 'rangeBy_'+objectType
-        : undefined
-      const view = relationConfig?.view ?? (singular
-          ? undefined
-          : typeView
-      ) ?? undefined
-      const identifiers = []
+      const name = 'rangeBy_' + objectType
+      const typeView = from.crud?.[name]
+        ? name
+        : undefined        
       if(typeView) {
-        identifiers.push({
-          [model[0].toLowerCase() + model.slice(1)]: object
+        views.push({
+          name: typeView,
+          identifiers: {
+            [model[0].toLowerCase() + model.slice(1)]: object
+          }
         })
       } else {
         for(let i = 0; i < what.length; i++) {
           if(what[i] !== objectType) continue
           const propertyName = relationConfig.propertyNames?.[i]
             ?? model[0].toLowerCase() + model.slice(1)
-          identifiers.push({
-            [propertyName]: object
+          const name = 'rangeBy' + propertyName[0].toUpperCase() + propertyName.slice(1)          
+          if(!from.crud?.[name]) continue
+          views.push({
+            name,            
+            identifiers: {
+              [propertyName]: object
+            }
           })
         }
       }
-      console.log(objectType, "VIEW", view, from, singular)
+      console.log(objectType, "VIEWS", views, "FROM", from, "SINGULAR", singular)
       return {
         model: from.name,
         service: from.serviceName,
         fields,
         relation,
         what,
-        identifiers,
         access,
-        view,
+        views,
         singular
       }
     }
@@ -205,3 +235,17 @@ export function prepareObjectRelations(objectType, object, api = useApi()) {
 
   return preparedBackwardRelations
 }
+
+export function getAllPossibleTypes(api = useApi(), filter = () => true,) {  
+  return Object.entries(api.services).map(
+    ([serviceName, service]) => Object.values(service.models).filter(o => filter(o, service, serviceName)).map(
+      model => `${serviceName}_${model.name}`
+    ).flat()
+  ).flat()
+}
+
+export function getAllTypesWithCrud(crud, api = useApi()) {  
+  return getAllPossibleTypes(api, (model, service, serviceName) => {
+    if(model.crud?.[crud]) return true
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.61",
+  "version": "0.9.62",
   "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.61",
-    "@live-change/dao": "^0.9.61",
-    "@live-change/dao-vue3": "^0.9.61",
-    "@live-change/dao-websocket": "^0.9.61",
-    "@live-change/framework": "^0.9.61",
-    "@live-change/image-frontend": "^0.9.61",
-    "@live-change/image-service": "^0.9.61",
-    "@live-change/session-service": "^0.9.61",
-    "@live-change/vue3-components": "^0.9.61",
-    "@live-change/vue3-ssr": "^0.9.61",
+    "@live-change/cli": "^0.9.62",
+    "@live-change/dao": "^0.9.62",
+    "@live-change/dao-vue3": "^0.9.62",
+    "@live-change/dao-websocket": "^0.9.62",
+    "@live-change/framework": "^0.9.62",
+    "@live-change/image-frontend": "^0.9.62",
+    "@live-change/image-service": "^0.9.62",
+    "@live-change/session-service": "^0.9.62",
+    "@live-change/vue3-components": "^0.9.62",
+    "@live-change/vue3-ssr": "^0.9.62",
     "@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.61",
+    "@live-change/codeceptjs-helper": "^0.9.62",
     "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": "f750f29f912b9a76b5ffa2bdf5c46954cc7e7a67"
+  "gitHead": "b1b605b7f1fa4fc3de4720afbb401e2cfff080cf"
 }