@live-change/frontend-auto-form 0.9.42 → 0.9.44

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

@@ -0,0 +1,123 @@
+<template>
+  <router-link v-if="link" :to="linkPath">
+    <ObjectIdentification
+        :objectType="type"
+        :object="object"
+        :data="objectData"
+        :inline="inline"
+    />
+  </router-link>
+  <ObjectIdentification
+    v-else
+    :objectType="type"
+    :object="object"
+    :data="objectData"
+    :inline="inline"
+  />
+</template>
+
+<script setup>
+
+  import { computed, defineProps, toRefs } from 'vue'
+  import { injectComponent } from '@live-change/vue3-components'
+
+  const props = defineProps({
+    type: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: () => null
+    },
+    link: {
+      type: String,
+      default: 'view'
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const { type, object, data, link, inline } = toRefs(props)
+
+  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const serviceAndModel = computed(() => {
+    const [service, model] = type.value.split('_')
+    return { service, model }
+  })
+  const service = computed(() => serviceAndModel.value.service)
+  const model = computed(() => serviceAndModel.value.model)
+
+  const ObjectIdentification = computed(() =>
+    injectComponent({
+      name: 'ObjectIdentification',
+      type: type.value,
+      service: service.value,
+      model: model.value
+    }, AutoObjectIdentification)
+  )
+
+  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)
+
+  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 linkPath = computed(() => {
+    return {
+      name: 'auto-form:view',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(objectData.value))
+      }
+    }
+  })
+
+</script>

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

@@ -16,11 +16,33 @@
     </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-if="identifiers[identifier]" class="flex flex-col mb-3">        
+            <div class="min-w-[8rem] font-medium">{{ identifier }}</div>
+            <div class="">
+              <InjectedObjectIndentification
+                :type="identifiers[identifier+'Type'] ?? modelDefinition.properties[identifier].type"
+                :object="identifiers[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"
+                  :i18n="i18n"
+                  class="col-span-12" />
+          </div>
+        </template>
+      </div>
       <auto-editor
-          :definition="modelDefinition"
-          v-model="editor.value.value"
-          :rootValue="editor.value.value"
-          :i18n="i18n" />
+        :definition="modelDefinition"
+        v-model="editor.value.value"
+        :rootValue="editor.value.value"
+        :i18n="i18n" />
       <EditorButtons :editor="editor" reset-button />
     </form>
   </div>
@@ -30,6 +52,7 @@
 
   import AutoEditor from '../form/AutoEditor.vue'
   import EditorButtons from './EditorButtons.vue'
+  import AutoField from "../form/AutoField.vue"
 
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
 
@@ -73,6 +96,7 @@
 
   import { editorData } from "@live-change/frontend-auto-form"
   import { computedAsync } from "@vueuse/core"
+import InjectedObjectIndentification from './InjectedObjectIndentification.vue'
 
   const editor = computedAsync(async () => {
     try {

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

@@ -66,7 +66,6 @@
   import Button from "primevue/button";
   import AutoInput from "./AutoInput.vue"
 
-  import { inputs, types } from '../../config.js'
   import { computed, getCurrentInstance, toRefs } from 'vue'
 
   const props = defineProps({

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

@@ -43,7 +43,6 @@
 
   import AutoInput from "./AutoInput.vue"
 
-  import { inputs, types } from '../../config.js'
   import { computed, getCurrentInstance, inject, toRefs, onMounted, ref, useId } from 'vue'
 
   const isMounted = ref(false)
@@ -159,18 +158,8 @@
     && props.modelValue?.length < minLengthValidation.value.length
   )
 
-  const config = inject('auto-form', {
-    inputs: {},
-    types: {}
-  })
-  const inputConfig = computed(() => {
-    if(definition.value.input) return config.inputs?.[definition.value.input] ?? inputs[definition.value.input]
-    if(definition.value.type) return config.types?.[definition.value.type] ?? types[definition.value.type]
-    return {
-      ...(config.inputs?.default ?? inputs.default),
-      ...definition?.autoForm?.config, // possible to modify config per input
-    }
-  })
+  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
 
   const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))
 

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

@@ -9,9 +9,7 @@
 </template>
 
 <script setup>
-  import { inputs, types } from '../../config.js'
   import { computed, inject, toRefs } from 'vue'
-  import deepmerge from 'deepmerge';
 
   const props = defineProps({
     modelValue: {
@@ -43,19 +41,8 @@
 
   const { definition, modelValue, propName } = toRefs(props)
 
-  const config = inject('auto-form', {
-    inputs: {},
-    types: {}
-  })
-  const inputConfig = computed(() => {
-    let baseConfig
-    if(definition.value.input && !baseConfig) baseConfig =
-      config.inputs?.[definition.value.input] ?? inputs[definition.value.input]
-    if(definition.value.type && !baseConfig) baseConfig =
-      config.types?.[definition.value.type] ?? types[definition.value.type]
-    if(!baseConfig) baseConfig = config.inputs?.default ?? inputs.default
-    return deepmerge(baseConfig, definition.value?.inputConfig ?? {}) // possible to modify config per input
-  })
+  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
 
   const definitionIf = computed(() => {
     if(definition.value?.if) {

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

@@ -15,8 +15,7 @@
 
 <script setup>
   import AutoInput from "./AutoInput.vue"
-  import { inputs, types } from '../../config.js'
-  import { computed, inject, toRefs, getCurrentInstance } from 'vue'
+  import { computed, toRefs, getCurrentInstance } from 'vue'
   import Message from 'primevue/message'
 
   import { useI18n } from 'vue-i18n'
@@ -87,11 +86,8 @@
     return true
   })
 
-  const inputConfig = computed(() => {
-    if(definition.value?.input) return inputs[definition.value.input]
-    if(definition.value?.type) return types[definition.value.type]
-    return inputs.default
-  })
+  import { provideInputConfigByDefinition } from './inputConfigInjection.js'
+  const inputConfig = computed(() => provideInputConfigByDefinition(definition.value))
 
   import { validateData } from "@live-change/vue3-components"
 

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

@@ -1,15 +1,41 @@
 <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>
+      <div class="p-select-dropdown" data-pc-section="dropdown">
+        <ChevronDownIcon />
+      </div>
+    </div>
 
+    <Popover ref="objectPickerPopover" :pt="{
+      root: {
+        class: 'object-picker-popover overflow-y-auto',
+        style: {
+          minWidth: `${width}px`,
+          maxHeight: `calc(50vh - 30px)`
+        }
+      }
+    }">
+      <ObjectPicker />
+    </Popover>
+
+    <!-- needed to autoload styles: -->
+    <Select class="hidden" />
   </div>
 </template>
 
 <script setup>
+  import ChevronDownIcon from '@primevue/icons/chevrondown'
+  import Select from 'primevue/select'
+  import Popover from 'primevue/popover'
+  import ObjectPicker from './ObjectPicker.vue'
 
+  import { defineProps, defineEmits, toRefs, ref, defineModel } from 'vue'
+  import { useElementSize } from '@vueuse/core'
 
   const props = defineProps({
-    modelValue: {
-    },
     definition: {
       type: Object
     },
@@ -19,12 +45,31 @@
     }
   })
 
-  const emit = defineEmits(['update:modelValue'])
+  const model = defineModel({
+    required: true
+  })
 
   const { value, definition, modelValue } = toRefs(props)
 
+  const objectPickerPopover = ref()
+  const selectElement = ref()
+  const { width } = useElementSize(selectElement)
+
+  const toggleObjectPicker = (event) => {
+    objectPickerPopover.value.toggle(event)
+  }
+
 </script>
 
-<style scoped>
+<style>
+  .object-picker-popover {
+    margin-top: 1px;
+  }
+  .object-picker-popover:before {
+    display: none;
+  }
 
+  .object-picker-popover:after {
+    display: none;
+  }
 </style>

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

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        Object picker!
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,68 @@
+import { provide, inject, h } from 'vue'
+
+export function provideInputConfig(description, inputConfig) {
+  if(!description) throw new Error("provideInputConfig: description is required")
+  if(!inputConfig) throw new Error("provideInputConfig: inputConfig is required")
+  if(typeof description === 'string') description = { name: description }
+
+  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)
+      provide(provideKey, {
+        inputConfig,
+        description
+      })
+    }
+  }
+}
+
+export function injectInputConfig(request, defaultInputConfig, factory) {
+  if(!request) throw new Error("injectInputConfig: request is required")
+  if(typeof request === 'string') request = { name: request }
+  //console.log("INJECT INPUT CONFIG", request)
+  const filter = request.filter || (() => true)
+  delete request.filter
+
+  for(let key in request) {
+    const provideKey = `input:${key}=${request[key]}`
+    console.log("INJECT INPUT CONFIG PROVIDE KEY", provideKey)
+    const entry = inject(provideKey, null)
+    console.log("RESOLVED INPUT CONFIG", entry)
+    if(!entry) continue
+    let isValid = true
+    for(let key in entry.description) {
+      const value = request[key]
+      if(Array.isArray(value)) {
+        if(!value.includes(entry.description[key])) isValid = false
+      } else if(value !== entry.description[key]) isValid = false
+    }
+    console.log("RESOLVED COMPONENT VALID", isValid, filter(entry))
+    if(isValid && filter(entry)) return entry.inputConfig
+  }
+  return factory ? defaultInputConfig() : defaultInputConfig
+}
+
+import { defineAsyncComponent } from 'vue'
+export function inputConfig(src, config) {
+  return {
+    component: src && defineAsyncComponent(src),
+    ...config,
+    with(config) {
+      return { component: this.component, ...config }
+    }
+  }
+}
+
+import deepmerge from 'deepmerge'
+export function provideInputConfigByDefinition(definition) {
+  let baseConfig
+  if(definition?.input && !baseConfig) baseConfig =
+    injectInputConfig({ name: definition.input }, null)
+  if(definition?.type && !baseConfig) baseConfig =
+    injectInputConfig({ type: definition.type }, null)
+  if(!baseConfig) baseConfig = injectInputConfig({ name: 'default' }, null)
+  const config = deepmerge(baseConfig, definition?.inputConfig ?? {}) // possible to modify config per input
+  if(Object.keys(config).length === 0) return null
+  return config
+}

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

@@ -0,0 +1,103 @@
+import { defineAsyncComponent } from 'vue'
+import { provideInputConfig, inputConfig } from './inputConfigInjection'
+
+export const inputs = {
+}
+export const types = {
+}
+
+types.String = inputs.text = inputConfig( () => import('primevue/inputtext'))
+inputs.textarea = inputConfig(() => import('primevue/textarea'), { attributes: { autoResize: true } })
+
+inputs.password = inputConfig(() => import('primevue/password'))
+
+const number = inputConfig(() => import('primevue/inputnumber'))
+inputs.integer = number
+types.Number = inputs.decimal = number.with({ attributes: { mode: 'decimal' } })
+
+types.Object = inputs.object = inputConfig(() => import('./AutoEditor.vue'), {
+  fieldComponent: defineAsyncComponent(() => import('./GroupField.vue'))
+})
+
+types.Array = inputs.list = inputConfig(() => import('./ArrayInput.vue'), {
+  fieldComponent: defineAsyncComponent(() => import('./GroupField.vue'))
+})
+
+types.Date = inputs.datetime = inputConfig(() => import('./Calendar.vue'), { attributes: { showTime: true } })
+
+inputs.select = inputConfig(() => import('primevue/dropdown'), {
+  attributes: (config) => {
+    const { definition, i18n, t, te } = config
+   // console.log("SELECT", config)
+    return {
+      options: definition.options ?? definition.enum,
+      optionLabel: option => {
+        const i18nId = (definition.i18n ?? i18n + ':options') + '.' + option
+        if(te(i18nId)) return t(i18nId)
+        return t(option)
+      }
+    }
+  }
+})
+
+inputs.multiselect = inputConfig(() => import('primevue/multiselect'), {
+  attributes: (config) => {
+    const { definition, i18n, t, te } = config
+    return {
+      options: definition.of.options ?? definition.of.enum ?? definition.options ?? definition.enum,
+      optionLabel: option => {
+        const i18nId = (definition.i18n ?? i18n + ':options') + '.' + option
+        if(te(i18nId)) return t(i18nId)
+        return t(option)
+      }
+    }
+  }
+})
+
+inputs.duration = inputConfig(() => import('primevue/inputmask'), {
+  attributes: { mask: '99:99:99' }
+})
+
+types.Image = inputs.image = inputConfig(
+  async () => (await import('@live-change/image-frontend')).ImageInput
+)
+
+types.Boolean = inputs.switch = inputConfig(
+  async () => (await import('primevue/inputswitch'))
+)
+
+/*
+types.Boolean = inputs.switch = {
+  fieldComponent: defineAsyncComponent(() => import('./SwitchField.vue')),
+}*/
+
+
+export function provideAutoInputConfiguration() {
+  for(let type in types) {
+    provideInputConfig({    
+      type: type
+    }, types[type])
+  }
+  for(let input in inputs) {
+    provideInputConfig({
+      name: input
+    }, inputs[input])
+  }
+}
+
+import { useApi } from '@live-change/vue3-ssr'
+
+export function provideMetadataBasedAutoInputConfiguration() {
+  const objectInputConfig = inputConfig(() => import('./ObjectInput.vue'))
+  provideInputConfig({
+    name: 'object'
+  }, objectInputConfig)
+  const api = useApi()
+  for(const service of api.metadata.api.value.services) {
+    for(const modelName in service.models) {
+      provideInputConfig({
+        type: service.name + '_' + modelName
+      }, objectInputConfig)
+    }
+  }
+}

package/front/src/logic/editorData.js

@@ -65,7 +65,7 @@ export default function editorData(options) {
       draftIdParts.push(identifier)
     }
   }
-  const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.some(key => identifiers[key])))
+  const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.every(key => identifiers[key])))
   const draftId = (idKey ? identifiers[idKey]
     : draftIdParts.map(key => JSON.stringify(identifiers[key])).join('_')) ?? 'new'
   const draftIdentifiers = {

package/index.js

@@ -4,8 +4,8 @@ import AutoEditor from './front/src/components/form/AutoEditor.vue'
 
 export { AutoInput, AutoField, AutoEditor }
 
-import * as inputConfig from './front/src/config.js'
-export { inputConfig }
+export * from './front/src/components/form/provideAutoInputConfiguration.js'
+export * from './front/src/components/form/inputConfigInjection.js'
 
 import editorData from './front/src/logic/editorData.js'
 export { editorData }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.42",
+  "version": "0.9.44",
   "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.42",
-    "@live-change/dao": "^0.9.42",
-    "@live-change/dao-vue3": "^0.9.42",
-    "@live-change/dao-websocket": "^0.9.42",
-    "@live-change/framework": "^0.9.42",
-    "@live-change/image-frontend": "^0.9.42",
-    "@live-change/image-service": "^0.9.42",
-    "@live-change/session-service": "^0.9.42",
-    "@live-change/vue3-components": "^0.9.42",
-    "@live-change/vue3-ssr": "^0.9.42",
+    "@live-change/cli": "^0.9.44",
+    "@live-change/dao": "^0.9.44",
+    "@live-change/dao-vue3": "^0.9.44",
+    "@live-change/dao-websocket": "^0.9.44",
+    "@live-change/framework": "^0.9.44",
+    "@live-change/image-frontend": "^0.9.44",
+    "@live-change/image-service": "^0.9.44",
+    "@live-change/session-service": "^0.9.44",
+    "@live-change/vue3-components": "^0.9.44",
+    "@live-change/vue3-ssr": "^0.9.44",
     "@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.42",
+    "@live-change/codeceptjs-helper": "^0.9.44",
     "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": "6571e1434eed33df905a7708aad783e9339968f1"
+  "gitHead": "6e9cf980b2ac6e4e7d78955cbf97ae1c2963bcab"
 }

package/front/src/config.js

@@ -1,82 +0,0 @@
-import { defineAsyncComponent } from 'vue'
-
-
-export const inputs = {
-}
-export const types = {
-}
-
-export function input(src, config) {
-  return {
-    component: src && defineAsyncComponent(src),
-    ...config,
-    with(config) {
-      return { component: this.component, ...config }
-    }
-  }
-}
-
-types.String = inputs.text = input( () => import('primevue/inputtext'))
-inputs.textarea = input(() => import('primevue/textarea'), { attributes: { autoResize: true } })
-
-inputs.password = input(() => import('primevue/password'))
-
-const number = input(() => import('primevue/inputnumber'))
-inputs.integer = number
-types.Number = inputs.decimal = number.with({ attributes: { mode: 'decimal' } })
-
-types.Object = inputs.object = input(() => import('./components/form/AutoEditor.vue'), {
-  fieldComponent: defineAsyncComponent(() => import('./components/form/GroupField.vue'))
-})
-
-types.Array = inputs.list = input(() => import('./components/form/ArrayInput.vue'), {
-  fieldComponent: defineAsyncComponent(() => import('./components/form/GroupField.vue'))
-})
-
-types.Date = inputs.datetime = input(() => import('./components/form/Calendar.vue'), { attributes: { showTime: true } })
-
-inputs.select = input(() => import('primevue/dropdown'), {
-  attributes: (config) => {
-    const { definition, i18n, t, te } = config
-   // console.log("SELECT", config)
-    return {
-      options: definition.options ?? definition.enum,
-      optionLabel: option => {
-        const i18nId = (definition.i18n ?? i18n + ':options') + '.' + option
-        if(te(i18nId)) return t(i18nId)
-        return t(option)
-      }
-    }
-  }
-})
-
-inputs.multiselect = input(() => import('primevue/multiselect'), {
-  attributes: (config) => {
-    const { definition, i18n, t, te } = config
-    return {
-      options: definition.of.options ?? definition.of.enum ?? definition.options ?? definition.enum,
-      optionLabel: option => {
-        const i18nId = (definition.i18n ?? i18n + ':options') + '.' + option
-        if(te(i18nId)) return t(i18nId)
-        return t(option)
-      }
-    }
-  }
-})
-
-inputs.duration = input(() => import('primevue/inputmask'), {
-  attributes: { mask: '99:99:99' }
-})
-
-types.Image = inputs.image = input(
-  async () => (await import('@live-change/image-frontend')).ImageInput
-)
-
-types.Boolean = inputs.switch = input(
-  async () => (await import('primevue/inputswitch'))
-)
-
-/*
-types.Boolean = inputs.switch = {
-  fieldComponent: defineAsyncComponent(() => import('./SwitchField.vue')),
-}*/