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

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

@@ -41,8 +41,8 @@
 
   const { definition, modelValue, propName } = toRefs(props)
 
-  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
-  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
+  import { injectInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => injectInputConfigByDefinition(definition.value))
 
   const definitionIf = computed(() => {
     if(definition.value?.if) {

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

@@ -86,8 +86,8 @@
     return true
   })
 
-  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
-  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
+  import { injectInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => injectInputConfigByDefinition(definition.value))
 
   import { validateData } from "@live-change/vue3-components"
 

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/DefaultObjectIdentification.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/DefaultObjectIdentification.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
@@ -55,7 +55,7 @@ export function inputConfig(src, config) {
 }
 
 import deepmerge from 'deepmerge'
-export function provideInputConfigByDefinition(definition) {
+export function injectInputConfigByDefinition(definition) {
   let baseConfig
   if(definition?.input && !baseConfig) baseConfig =
     injectInputConfig({ name: definition.input }, null)

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

@@ -34,6 +34,10 @@ import ModelList from './front/src/components/crud/ModelList.vue'
 export { ModelList }
 import EditorButtons from './front/src/components/crud/EditorButtons.vue'
 export { EditorButtons }
+import DefaultObjectIdentification from './front/src/components/crud/DefaultObjectIdentification.vue'
+export { DefaultObjectIdentification }
+import ObjectPath from './front/src/components/crud/ObjectPath.vue'
+export { ObjectPath }
 import AutoObjectIdentification from './front/src/components/crud/AutoObjectIdentification.vue'
 export { AutoObjectIdentification }