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

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

@@ -1,19 +1,14 @@
 <template>
-  <template v-if="typeof identificationConfig === 'string'">
-    <span>
-      <i class="pi pi-box 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>
+  <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: {
@@ -25,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()
@@ -46,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]
   })
@@ -72,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/ModelList.vue

@@ -130,7 +130,7 @@
     }
   }])
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
 
   const ObjectIdentification = computed(() =>
     injectComponent({

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

@@ -114,7 +114,7 @@
   })
   const { service, model, views } = toRefs(props)
 
-  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
 
   const ObjectIdentification = computed(() =>
     injectComponent({

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

@@ -10,7 +10,7 @@
     <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">
@@ -127,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,
@@ -153,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',

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

@@ -161,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))
 

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

@@ -47,7 +47,7 @@
   import Select from 'primevue/select'
   import Popover from 'primevue/popover'
   import ObjectPicker from './ObjectPicker.vue'
-  import AutoObjectIdentification from '../crud/AutoObjectIdentification.vue'
+  import AutoObjectIdentification from '../crud/DefaultObjectIdentification.vue'
   import { injectComponent } from "@live-change/vue3-components"
 
   import { defineProps, defineEmits, toRefs, ref, defineModel, computed } from 'vue'

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

@@ -76,7 +76,7 @@
 
 <script setup>
   import Select from 'primevue/select'
-  import AutoObjectIdentification from '../crud/AutoObjectIdentification.vue'
+  import AutoObjectIdentification from '../crud/DefaultObjectIdentification.vue'
   import { RangeViewer, injectComponent } from "@live-change/vue3-components"
 
   import { defineProps, defineEmits, toRefs, ref, defineModel, computed, useId } from 'vue'

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

@@ -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/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 }
 

package/package.json

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