@live-change/frontend-auto-form 0.9.64 → 0.9.66

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

@@ -6,7 +6,7 @@
   </template>
   <template v-else>
     <span>      
-      <strong>{{ objectType }}</strong>: {{ object ?? objectData.to ?? objectData.id }}
+      <strong>{{ objectType }}</strong>: {{ object ?? objectData?.to ?? objectData?.id }}
     </span>
   </template>
 </template>
@@ -40,11 +40,12 @@
   const path = usePath()
 
   const serviceAndModel = computed(() => {
+    if(!objectType.value) return null
     const [service, model] = objectType.value.split('_')
     return { service, model }
   })
-  const service = computed(() => serviceAndModel.value.service)
-  const model = computed(() => serviceAndModel.value.model)
+  const service = computed(() => serviceAndModel.value?.service)
+  const model = computed(() => serviceAndModel.value?.model)
 
   const modelDefinition = computed(() => {
     return api.services?.[service.value]?.models?.[model.value]

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

@@ -5,6 +5,23 @@
       <h4>definition</h4>
       <pre>{{ modelDefinition }}</pre>
 -->
+    <div v-if="editor && editor.saved?.value?.id" >
+      <ObjectPath :objectType="service + '_' + model" :object="editor?.saved?.value?.id" class="mb-6" />
+    </div>
+    <div v-else-if="editor && !editor.saved?.value">      
+      <div v-for="parentObject in parentObjects">
+        <ObjectPath :objectType="parentObject.objectType" :object="parentObject.object" 
+                    class="mb-6" more>
+          <template #more="slotProps">
+            New {{ model }}
+          </template>
+        </ObjectPath>
+      </div>
+    </div>
+
+    <pre>parentObjects = {{ parentObjects }}</pre>
+    <pre>scopesPath = {{ scopesPath }}</pre>
+    <pre>scopes = {{ scopes }}</pre>
 
     <div class="">
       Service <strong>{{ service }}</strong>
@@ -55,7 +72,9 @@
   import EditorButtons from './EditorButtons.vue'
   import AutoField from "../form/AutoField.vue"
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import ObjectPath from './ObjectPath.vue'
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, inject, provide } from 'vue'
 
   const props = defineProps({
     service: {
@@ -95,6 +114,9 @@
     return api.services?.[service.value]?.models?.[model.value]
   })
 
+  import { parentObjectsFromIdentifiers } from '../../logic/relations.js'
+  const parentObjects = computed(() => parentObjectsFromIdentifiers(identifiers.value, modelDefinition.value))
+
   import { editorData } from "@live-change/frontend-auto-form"
   import { computedAsync } from "@vueuse/core"
   import InjectedObjectIndentification from './InjectedObjectIndentification.vue'
@@ -142,6 +164,35 @@
     emit('saved', saveResult)
   }
 
+  const scopesPath = computed(() => path.scope.objectScopes({
+    objectType: parentObjects.value[0].objectType, /// TODO: support multiple parent objects!
+    object: parentObjects.value[0].object
+  }))
+
+  const [scopes] = await Promise.all([
+    live(scopesPath)
+  ])
+
+  console.log("SCOPES", scopes)
+  provide('scopePickerConfig', {
+    objectsPathRangeConfig: (service, model, definition, modelDefinition) => computed(() => {      
+      const scopeType = scopes.value[0].scopeType // TODO: support multiple scopes!
+      const scope = scopes.value[0].scope
+      return {
+        service,
+        model,
+        reverse: true,
+        viewPath: (range) => path.scope.scopeObjects({
+          scopeType,
+          scope,
+          objectType: `${service}_${model}`,
+          ...range  
+        }),
+        parameters: {}
+      }      
+    })
+  }) 
+
 </script>
 
 <style scoped>

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

@@ -19,7 +19,8 @@
     </div>
 
     <!-- <pre>modelsPathRangeConfig = {{ modelsPathRangeConfig }}</pre>
-    <pre>modelsPathRangeFunctions = {{ modelsPathRangeFunctions }}</pre> -->
+    <pre>modelsPathRangeFunctions = {{ modelsPathRangeFunctions }}</pre>
+    <pre>modelsPathRangeFunctionsResults = {{ modelsPathRangeFunctions.map(x => x({})) }}</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"
@@ -177,6 +178,8 @@
     }))
   })
 
+  console.log("modelsPathRangeFunctions", modelsPathRangeFunctions.value)
+
   function objectIdentifiers(object) {
     const identifiers = {}
     for(const identifierDefinition of modelDefinition.value.identifiers) {

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

@@ -3,7 +3,6 @@
 <!--    <h4>definition</h4>
     <pre>{{ modelDefinition }}</pre>-->
 
-
     <div class="bg-surface-0 dark:bg-surface-900 w-full p-4 shadow-sm rounded-border mb-2">
       <slot name="header">
         <div class="">
@@ -215,7 +214,7 @@
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(objectIdentifiers(identifiers.value[0]))
+      identifiers: Object.values(objectIdentifiers(views.value[0].identifiers))
     }
   }))
 
@@ -226,7 +225,12 @@
       object,
       acceptClass: "p-button-danger",
       accept: async () => {
-        await api.actions[service.value][modelDefinition.value.crud.delete]({
+        console.log("deleteObject", object)
+        console.log("objectIdentifiers", objectIdentifiers(object))
+        console.log("modelDefinition", modelDefinition.value)      
+        const method = api.actions[service.value][modelDefinition.value.crud.reset]
+           || api.actions[service.value][modelDefinition.value.crud.delete]
+        await method({
           ...objectIdentifiers(object)
         });
         toast.add({ severity: "info", summary: model.value + " deleted", life: 1500 });

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

@@ -10,9 +10,9 @@
     <h4>object</h4>
     <pre>{{ object }}</pre>-->
 
-    <ScopePath :objectType="service + '_' + model" :object="object.to ?? object.id" class="mb-6" />
-
     <div v-if="object">
+      <ObjectPath :objectType="service + '_' + model" :object="object.to ?? object.id" class="mb-6" />
+
       <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border mb-6">
 
         <div class="">
@@ -127,7 +127,7 @@
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
   import { RangeViewer, injectComponent, InjectComponent } from "@live-change/vue3-components"
 
-  import ScopePath from './ObjectPath.vue'
+  import ObjectPath from './ObjectPath.vue'
 
   const props = defineProps({
     service: {

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

@@ -6,10 +6,15 @@
     <pre>selectedPaths = {{ selectedPaths }}</pre>
     <pre>selectedPathWithElements = {{ selectedPathWithElements }}</pre> -->
     <div v-for="path in selectedPathsWithElements" :key="path">
-      <Breadcrumb :model="path">
+      <Breadcrumb :model="more ? [...path, 'dupa'] : path">
         <template #item="{ item }">          
-          <AutoObjectIdentification :objectType="item.objectType" :object="item.object" 
-            :link="item.object !== object && item.objectType !== objectType" />
+          <div>
+            <slot v-if="typeof item === 'string'" name="more">
+              more...            
+            </slot>
+            <AutoObjectIdentification v-else :objectType="item.objectType" :object="item.object" 
+              :link="more || (item.object !== object && item.objectType !== objectType)" />
+          </div>
         </template>
       </Breadcrumb>
     </div>
@@ -29,9 +34,13 @@
     object: { 
       type: String,
       required: true
+    },
+    more: {
+      type: Boolean,
+      default: false
     }
   })
-  const { objectType, object } = toRefs(props)
+  const { objectType, object, more } = toRefs(props)
 
   import { usePath, live } from '@live-change/vue3-ssr'
   const path = usePath()
@@ -74,30 +83,35 @@
     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 objectPathConfig = inject(`objectPathConfig:${objectType.value}`,
+    inject('objectPathConfig', {
+      scopeType: undefined,
+      scope: undefined,
+      scopeSelector: longestByType,
+      pathsPath: (objectType, object, config) => path.scope.objectScopePaths({
+        objectType, object,
+        scopeType: config.scopeType,
+        scope: config.scope
+      }),
+      pathElements: scopePathElements
+    })
+  )
+
+  console.log('objectPathConfig', objectPathConfig.value)
+
 
-  const pathsPath = computed(() => scopePathConfig.pathsPath(objectType.value, object.value, scopePathConfig))
+  const pathsPath = computed(() => objectPathConfig.pathsPath(objectType.value, object.value, objectPathConfig))
 
   const [paths] = await Promise.all([
     live(pathsPath)
   ])
 
   const selectedPaths = computed(() => {
-    return scopePathConfig.scopeSelector(paths.value)
+    return objectPathConfig.scopeSelector(paths.value)
   })
 
   const selectedPathsWithElements = computed(
-    () => selectedPaths.value.map(scopePath => scopePathConfig.pathElements(scopePath))
+    () => selectedPaths.value.map(scopePath => objectPathConfig.pathElements(scopePath))
   )
 
 

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

@@ -45,6 +45,7 @@
             <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">
+              <!-- <pre>{{ object }}</pre> -->
               <ObjectIdentification
                 :objectType="selectedTypeService + '_' + selectedTypeModel"
                 :object="object.to ?? object.id"
@@ -79,7 +80,7 @@
   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 { defineProps, defineEmits, toRefs, ref, defineModel, computed, useId, inject, unref } from 'vue'
   import pluralize from 'pluralize'
 
   const uid = useId()
@@ -210,28 +211,38 @@
 
   import { useApi, usePath, live, reverseRange } from '@live-change/vue3-ssr'
   const api = useApi()
-  const path = usePath()  
+  const path = usePath()
+
+  const scopePickerConfig = inject(`scopePickerConfig:${definition.value.source}`,
+    inject('scopePickerConfig', {
+      objectsPathRangeConfig: (service, model, definition, modelDefinition) => {
+        const rangeView = modelDefinition?.crud?.[view.value ?? 'range']
+        if(!rangeView) return null
+        if(!path[service]) return null
+        if(!path[service][rangeView]) return null
+        return {
+          service,
+          model,
+          reverse: true,
+          viewPath: (parameters) => path[service][rangeView](parameters),
+          parameters: {}
+        }
+      }
+    })
+  )
 
   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']
-    }
+    return unref(scopePickerConfig.objectsPathRangeConfig(service, model, definition.value, modelDefinition))
   })
   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,
+    if(!config) return null 
+    return (range) => config.viewPath({
+      ...config.parameters,
       ...(config.reverse ? reverseRange(range) : range),
     })
   })

package/front/src/logic/relations.js

@@ -249,3 +249,25 @@ export function getAllTypesWithCrud(crud, api = useApi()) {
     if(model.crud?.[crud]) return true
   })
 }
+
+export function parentObjectsFromIdentifiers(identifiers, modelDefinition) {
+  console.log("identifiers", identifiers, "modelDefinition", modelDefinition)
+  const results = []
+  for(const [key, value] of Object.entries(identifiers)) {
+    if(key.endsWith('Type')) continue
+    const propertyDefinition = modelDefinition.properties[key]
+    const propertyType = propertyDefinition.type
+    if(propertyType === 'any') {
+      results.push({
+        objectType: identifiers[key + 'Type'],
+        object: value
+      })
+    } else {
+      results.push({
+        objectType: propertyType,
+        object: value
+      })
+    }
+  }
+  return results
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.64",
+  "version": "0.9.66",
   "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.64",
-    "@live-change/dao": "^0.9.64",
-    "@live-change/dao-vue3": "^0.9.64",
-    "@live-change/dao-websocket": "^0.9.64",
-    "@live-change/framework": "^0.9.64",
-    "@live-change/image-frontend": "^0.9.64",
-    "@live-change/image-service": "^0.9.64",
-    "@live-change/session-service": "^0.9.64",
-    "@live-change/vue3-components": "^0.9.64",
-    "@live-change/vue3-ssr": "^0.9.64",
+    "@live-change/cli": "^0.9.66",
+    "@live-change/dao": "^0.9.66",
+    "@live-change/dao-vue3": "^0.9.66",
+    "@live-change/dao-websocket": "^0.9.66",
+    "@live-change/framework": "^0.9.66",
+    "@live-change/image-frontend": "^0.9.66",
+    "@live-change/image-service": "^0.9.66",
+    "@live-change/session-service": "^0.9.66",
+    "@live-change/vue3-components": "^0.9.66",
+    "@live-change/vue3-ssr": "^0.9.66",
     "@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.64",
+    "@live-change/codeceptjs-helper": "^0.9.66",
     "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": "902581d1d78ac5ee8c2c2ed7ccd9f8a8df6df2b0"
+  "gitHead": "8c76cb48a8cb459f3cfe08983f5b288c10e5f688"
 }