@live-change/frontend-auto-form 0.9.13 → 0.9.14

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

@@ -69,7 +69,10 @@
 
   import { validateData } from "@live-change/vue3-components"
   const validationResult = computed(() => {
-    const currentValue = editor.value.value.value
+    const currentValue = {
+      ...(editor.value.identifiers),
+      ...(editor.value.value.value),
+    }
     const validationResult = validateData(model.value, currentValue, 'validation', appContext,
       props.propName, props.rootValue, true)
     const softValidationResult = validateData(model.value, currentValue, 'softValidation', appContext,

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

@@ -1,16 +1,18 @@
 <template>
-  <div class="w-full lg:w-8 md:w-11">
+  <div>
 <!--    <h4>definition</h4>
     <pre>{{ modelDefinition }}</pre>-->
 
     <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
-      <div class="">
-        Service <strong>{{ service }}</strong>
-      </div>
-      <div class="text-2xl">
-        <strong>{{ pluralize(model) }}</strong>
-        <span class="ml-1">list</span>
-      </div>
+      <slot name="header">
+        <div class="">
+          Service <strong>{{ service }}</strong>
+        </div>
+        <div class="text-2xl">
+          <strong>{{ pluralize(model) }}</strong>
+          <span class="ml-1">list</span>
+        </div>
+      </slot>
     </div>
 
     <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPathRangeFunction">
@@ -58,7 +60,7 @@
       </div>
     </div>
 
-    <div class="mt-3 flex flex-row justify-content-end mr-2">
+    <div v-if="modelDefinition.value?.crud?.create" class="mt-3 flex flex-row justify-content-end mr-2">
       <router-link :to="createRoute" class="no-underline2">
         <Button icon="pi pi-plus" :label="'Create new '+model" />
       </router-link>
@@ -69,6 +71,8 @@
 
 <script setup>
 
+  import Button from "primevue/button"
+
   import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
   import { RangeViewer, injectComponent } from "@live-change/vue3-components"
   import pluralize from 'pluralize'
@@ -81,9 +85,13 @@
     model: {
       type: String,
       required: true,
-    }
+    },
+    identifiers: {
+      type: Object,
+      default: () => ({})
+    },
   })
-  const { service, model } = toRefs(props)
+  const { service, model, identifiers } = toRefs(props)
 
   import AutoObjectIdentification from './AutoObjectIdentification.vue'
 
@@ -118,6 +126,7 @@
     if(!path[config.service]) return null
     if(!path[config.service][rangeView]) return null
     return (range) =>  path[config.service][rangeView]({
+      ...identifiers.value,
       ...(config.reverse ? reverseRange(range) : range),
     })
   })
@@ -164,7 +173,8 @@
     name: 'auto-form:editor',
     params: {
       serviceName: service.value,
-      modelName: model.name
+      modelName: model.value,
+      identifiers: Object.values(identifiers.value)
     }
   }))
 

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

@@ -10,21 +10,56 @@
     <h4>object</h4>
     <pre>{{ object }}</pre>-->
 
-    <div class="">
-      Service <strong>{{ service }}</strong>
+    <div class="surface-card p-3 shadow-1 border-round mb-4">
+
+      <div class="">
+        Service <strong>{{ service }}</strong>
+      </div>
+      <div class="text-2xl mb-4">
+        <strong>{{ model }}</strong>
+        <ObjectIdentification
+          :objectType="service + '_' + model"
+          :object="object.to ?? object.id"
+          :data="object"
+          class="ml-2"
+        />
+      </div>
+
+      <AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
+                :definition="modelDefinition" />
+
     </div>
-    <div class="text-2xl mb-4">
-      <strong>{{ model }}</strong>
-      <ObjectIdentification
-        :objectType="service + '_' + model"
-        :object="object.to ?? object.id"
-        :data="object"
-        class="ml-2"
-      />
+
+    <div v-for="itemRelation of itemRelations">
+      <ModelList :service="itemRelation.from.serviceName" :model="itemRelation.from.name"
+                 :identifiers="relatedIdentifiers">
+        <template #header>
+          <div class="text-xl">
+            <ObjectIdentification
+              :objectType="service + '_' + model"
+              :object="object.to ?? object.id"
+              :data="object"
+              class="mr-2"
+            />
+            <span class="mr-2 font-medium">{{ model }}'s</span>
+            <span class="font-bold">{{ pluralize(itemRelation.from.name) }}</span>:
+          </div>
+        </template>
+
+      </ModelList>
+
+      <pre>{{ relatedIdentifiers }}</pre>
+
+      <pre>{{ itemRelation }}</pre>
+
     </div>
 
-    <AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
-              :definition="modelDefinition" />
+<!--    <div class="surface-card p-3 shadow-1 border-round">
+
+      <h4>Backward relations</h4>
+      <pre>{{ backwardRelations }}</pre>
+
+    </div>-->
 
   </div>
 </template>
@@ -32,7 +67,9 @@
 <script setup>
 
   import AutoView from '../view/AutoView.vue'
+  import ModelList from './ModelList.vue'
 
+  import pluralize from 'pluralize'
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
   import { RangeViewer, injectComponent } from "@live-change/vue3-components"
 
@@ -47,11 +84,7 @@
     },
     identifiers: {
       type: Object,
-      default: []
-    },
-    draft: {
-      type: Boolean,
-      default: false
+      default: () => ({})
     },
     attributes: {
       type: Object,
@@ -62,7 +95,7 @@
       default: ''
     }
   })
-  const { service, model, identifiers, draft, attributes, i18n } = toRefs(props)
+  const { service, model, identifiers, attributes, i18n } = toRefs(props)
 
   const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
 
@@ -85,6 +118,14 @@
     return api.services?.[service.value]?.models?.[model.value]
   })
 
+  import { getForwardRelations, getBackwardRelations } from '../../logic/relations.js'
+  const forwardRelations = computed(() => getForwardRelations(modelDefinition.value, () => true, api))
+  const backwardRelations = computed(() => getBackwardRelations(modelDefinition.value, api))
+
+  const itemRelations = computed(
+    () => backwardRelations.value.filter(relation => relation.relation === 'itemOf')
+  )
+
   import viewData from '../../logic/viewData.js'
 
   const viewDataPromise = viewData({
@@ -98,6 +139,10 @@
     viewDataPromise
   ])
 
+  const relatedIdentifiers = computed(() => ({
+    [model.value[0].toLowerCase() + model.value.slice(1)]: object.value.to ?? object.value.id
+  }))
+
 </script>
 
 <style scoped>

package/front/src/components/view/AutoView.vue

@@ -1,4 +1,5 @@
 <template>
+<!--  <pre>{{ viewComponentRequest }}</pre>-->
   <component v-if="viewComponent && visible" :is="viewComponent" v-bind="attributes" :i18n="i18n" />
 </template>
 
@@ -76,18 +77,20 @@
     return undefined
   })
 
+  const viewComponentRequest = computed(() => (definition.value?.view?.componentRequest ?? {
+    ...(definition.value?.view?.componentRequestProperties),
+    name: 'AutoView',
+    type: definition.value.type ?? 'Object',
+    view: definition?.view?.name ?? definition?.view,
+    filter: viewFilter.value
+  }))
+
   const viewComponent = computed(() => {
     const type = definition.value.type ?? 'Object'
     const defaultComponent = (type === 'Object')
       ? defineAsyncComponent(() => import('./ObjectView.vue'))
       : defineAsyncComponent(() => import('./JsonView.vue'))
-    return injectComponent(definition.value?.view?.componentRequest ?? {
-      ...(definition.value?.view?.componentRequestProperties),
-      name: 'AutoView',
-      type,
-      view: definition?.view?.name ?? definition?.view,
-      filter: viewFilter.value
-    }, defaultComponent)
+    return injectComponent(viewComponentRequest.value, defineAsyncComponent(() => import('./JsonView.vue')))
   })
 
   const viewClass = computed(() => [definition.value?.view?.class, props.class])

package/front/src/components/view/DefaultFieldView.vue

@@ -2,7 +2,7 @@
   <div class="field" :class="fieldClass" :style="fieldStyle">
     <slot name="label"
           v-bind="{ uid, value, definition, viewClass, viewStyle, attributes, propName, rootValue, i18n }">
-      <label :for="uid">{{ t( label ) }}</label>
+      <label :for="uid" class="font-medium text-lg">{{ t( label ) }}</label>
     </slot>
     <slot v-bind="{ uid, value, definition, viewClass, viewStyle, attributes, propName, rootValue, i18n }">
       <AutoView :value="value" :definition="definition"
@@ -70,7 +70,7 @@
 
   const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))
 
-  const viewClass = computed(() => [definition.value?.view?.class, props.viewClass])
+  const viewClass = computed(() => [definition.value?.view?.class, props.viewClass, 'ml-1'])
   const viewStyle = computed(() => [definition.value?.view?.style, props.viewStyle])
   const fieldClass = computed(() => [definition.value?.view?.class, props.class])
   const fieldStyle = computed(() => [definition.value?.view?.style, props.style])

package/front/src/components/view/ObjectView.vue

@@ -29,8 +29,6 @@
       type: String,
       default: ''
     },
-    class: {},
-    style: {},
     i18n: {
       type: String,
       default: ''

package/front/src/components/view/StringView.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+
+  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
+
+  const props = defineProps({
+    value: {},
+    definition: {
+      type: Object
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    },
+  })
+
+  const { value, definition, propName } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/view/provideAutoViewComponents.js

@@ -0,0 +1,14 @@
+import { provideComponent } from '@live-change/vue3-components'
+import { defineAsyncComponent } from 'vue'
+
+export default function provideAutoViewComponents() {
+  provideComponent({
+    name: 'AutoView',
+    type: 'Object'
+  }, defineAsyncComponent(() => import('./ObjectView.vue')))
+
+  provideComponent({
+    name: 'AutoView',
+    type: 'String'
+  }, defineAsyncComponent(() => import('./StringView.vue')))
+}

package/front/src/logic/editorData.js

@@ -77,7 +77,11 @@ export default function editorData(options) {
 
   const updateAction = api.actions[serviceName][crudMethods.update]
   const createOrUpdateAction = api.actions[serviceName][crudMethods.createOrUpdate]
+  if(!updateAction && !createOrUpdateAction)
+    throw new Error('update or createOrUpdate action must be defined in model or options')
   const createAction = api.actions[serviceName][crudMethods.create]
+  if(isNew && !createAction && !createOrUpdateAction)
+    throw new Error('create action must be defined in model or options')
   const createOrUpdateDraftAction = draft && api.actions.draft.setOrUpdateMyDraft
   const removeDraftAction = draft && api.actions.draft.resetMyDraft
 
@@ -184,6 +188,7 @@ export default function editorData(options) {
       }
 
       return {
+        identifiers,
         value: synchronizedData.value,
         changed,
         save,
@@ -228,6 +233,7 @@ export default function editorData(options) {
       }
 
       return {
+        identifiers,
         value: synchronizedData.value,
         changed: synchronizedData.changed,
         save: synchronizedData.save,

package/front/src/pages/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <ModelList :service="serviceName" :model="modelName" />
+  <ModelList :service="serviceName" :model="modelName" class="w-full lg:w-8 md:w-11" />
 </template>
 
 <script setup>

package/front/src/pages/View.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="w-full lg:w-8 md:w-11">
-    <div class="surface-card p-3 shadow-1 border-round">
 
-      <ModelView :service="serviceName" :model="modelName" :identifiers="identifiersObject" />
+    <ModelView :service="serviceName" :model="modelName" :identifiers="identifiersObject" />
 
-    </div>
   </div>
 </template>
 

package/index.js

@@ -9,7 +9,20 @@ export { inputConfig }
 
 import editorData from './front/src/logic/editorData.js'
 export { editorData }
+
+
+import AutoView from './front/src/components/view/AutoView.vue'
+import AutoViewField from './front/src/components/view/AutoViewField.vue'
+import DefaultFieldView from './front/src/components/view/DefaultFieldView.vue'
+import JsonView from './front/src/components/view/JsonView.vue'
+import ObjectView from './front/src/components/view/ObjectView.vue'
+export { AutoView, AutoViewField, DefaultFieldView, JsonView, ObjectView }
+
+import provideAutoViewComponents from './front/src/components/view/provideAutoViewComponents.js'
+export { provideAutoViewComponents }
+
 import viewData from './front/src/logic/viewData.js'
+export { viewData }
 
 export * from './front/src/logic/relations.js'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "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.5.2",
-    "@live-change/cli": "^0.9.13",
-    "@live-change/dao": "^0.9.13",
-    "@live-change/dao-vue3": "^0.9.13",
-    "@live-change/dao-websocket": "^0.9.13",
-    "@live-change/framework": "^0.9.13",
-    "@live-change/image-frontend": "^0.9.13",
-    "@live-change/image-service": "^0.9.13",
-    "@live-change/session-service": "^0.9.13",
-    "@live-change/vue3-components": "^0.9.13",
-    "@live-change/vue3-ssr": "^0.9.13",
+    "@live-change/cli": "^0.9.14",
+    "@live-change/dao": "^0.9.14",
+    "@live-change/dao-vue3": "^0.9.14",
+    "@live-change/dao-websocket": "^0.9.14",
+    "@live-change/framework": "^0.9.14",
+    "@live-change/image-frontend": "^0.9.14",
+    "@live-change/image-service": "^0.9.14",
+    "@live-change/session-service": "^0.9.14",
+    "@live-change/vue3-components": "^0.9.14",
+    "@live-change/vue3-ssr": "^0.9.14",
     "@vueuse/core": "^10.11.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -52,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.13",
+    "@live-change/codeceptjs-helper": "^0.9.14",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "1.48.1",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "b0b18e7a8e253195c6df4b25c6bb5c407b1a2450"
+  "gitHead": "5d0f137a1a16f892868719d919f4a76584fa879f"
 }