@live-change/frontend-auto-form 0.9.10 → 0.9.12

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

@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <div class="surface-card p-3 shadow-1 border-round">
+    <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPathRangeFunction">
       <range-viewer :key="JSON.stringify(modelsPathRangeConfig)"
                     :pathFunction="modelsPathRangeFunction"
                     :canLoadTop="false" canDropBottom
@@ -24,13 +24,20 @@
           </div>
         </template>
         <template #default="{ item: object }">
-          <div class="flex flex-row align-items-center justify-content-between">
-            <ObjectIdentification
-              :objectType="service + '_' + model"
-              :object="object.to ?? object.id"
-              :data="object"
-            />
+          <div class="flex flex-row align-items-center justify-content-between my-3">
+            <router-link :to="viewRoute(object)" class="no-underline text-color">
+              <ObjectIdentification
+                :objectType="service + '_' + model"
+                :object="object.to ?? object.id"
+                :data="object"
+                class="text-xl"
+              />
+            </router-link>
             <div class="flex flex-row">
+              <router-link :to="viewRoute(object)" class="no-underline">
+                <Button icon="pi pi-eye" severity="primary" label="View" class="mr-2" />
+              </router-link>
+
               <router-link :to="editRoute(object)" class="no-underline">
                 <Button icon="pi pi-pencil" severity="primary" label="Edit" class="mr-2" />
               </router-link>
@@ -41,6 +48,15 @@
         </template>
       </range-viewer>
     </div>
+    <div v-else class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
+      <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
+      <div class="mr-3">
+        <div class="text-pink-900 font-medium text-xl mb-3 line-height-1">Not authorized</div>
+        <p class="m-0 p-0 text-pink-700">
+          You do not have sufficient privileges to use this feature of this object.
+        </p>
+      </div>
+    </div>
 
     <div class="mt-3 flex flex-row justify-content-end mr-2">
       <router-link :to="createRoute" class="no-underline2">
@@ -48,7 +64,6 @@
       </router-link>
     </div>
 
-
   </div>
 </template>
 
@@ -100,7 +115,9 @@
   const modelsPathRangeFunction = computed(() => {
     const config = modelsPathRangeConfig.value
     const rangeView = config.definition?.crud?.range
-    return (range) => path[config.service][rangeView]({
+    if(!path[config.service]) return null
+    if(!path[config.service][rangeView]) return null
+    return (range) =>  path[config.service][rangeView]({
       ...(config.reverse ? reverseRange(range) : range),
     })
   })
@@ -132,6 +149,17 @@
     }
   }
 
+  function viewRoute(object) {
+    return {
+      name: 'auto-form:view',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(object))
+      }
+    }
+  }
+
   const createRoute = computed(() => ({
     name: 'auto-form:editor',
     params: {

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

@@ -0,0 +1,98 @@
+<template>
+  <div>
+      <h4>identifiers</h4>
+      <pre>{{ identifiers }}</pre>
+
+      <h4>definition</h4>
+      <pre>{{ modelDefinition }}</pre>
+
+    <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>
+
+  </div>
+</template>
+
+<script setup>
+
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+
+  const props = defineProps({
+    service: {
+      type: String,
+      required: true,
+    },
+    model: {
+      type: String,
+      required: true,
+    },
+    identifiers: {
+      type: Object,
+      default: []
+    },
+    draft: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+  const { service, model, identifiers, draft, options, i18n } = toRefs(props)
+
+  const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
+
+
+  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+  const ObjectIdentification = computed(() =>
+    injectComponent({
+      name: 'ObjectIdentification',
+      type: service.value + '_' + model.value,
+      service: service.value,
+      model: model.value
+    }, AutoObjectIdentification)
+  )
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const modelDefinition = computed(() => {
+    return api.services?.[service.value]?.models?.[model.value]
+  })
+
+  import viewData from '../../logic/viewData.js'
+
+  const viewDataPromise = viewData({
+    service: service.value,
+    model: model.value,
+    identifiers: identifiers.value,
+    path, api
+  })
+
+  const [object] = await Promise.all([
+    viewDataPromise
+  ])
+
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
+    <auto-field-view v-for="property in propertiesList" :key="property"
+                :value="value?.[property]"
+                :definition="definition.properties[property]"
+                :label="property"
+                :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
+                :i18n="i18n"
+                class="col-12" />
+  </div>
+</template>
+
+<script setup>
+  //import AutoFieldView from "./AutoFieldView.vue"
+
+  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: ''
+    },
+    visibleProperties: {
+      type: Array,
+      items: {
+        type: String
+      }
+    }
+  })
+
+  const { value, definition, propName, visibleProperties } = toRefs(props)
+
+  const propertiesList = computed(() =>
+    visibleProperties.value ??
+    props.definition.visibleProperties ??
+    Object.keys(props.definition.properties).filter(key => props.definition.properties[key])
+  )
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/logic/viewData.js

@@ -0,0 +1,34 @@
+import { usePath, live, useApi } from '@live-change/vue3-ssr'
+
+export default function viewData(options) {
+  if(!options) throw new Error('options must be provided')
+
+  const {
+    identifiers,
+    service: serviceName,
+    model: modelName,
+
+    path = usePath(),
+    api = useApi(),
+  } = options
+
+  if(!identifiers) throw new Error('identifiers must be defined')
+  if(!serviceName || !modelName) throw new Error('service and model must be defined')
+
+  const service = api.services[serviceName]
+  const model = service.models[modelName]
+  const {
+    crudMethods = model.crud,
+    identifiersNames = model.identifiers,
+    //editableProperties = model.editableProperties ?? Object.keys(model.properties)
+  } = options
+
+  if(!crudMethods) throw new Error('crud methods must be defined in model or options')
+  if(!identifiersNames) throw new Error('identifiers names must be defined in model or options')
+//  if(!editableProperties) throw new Error('editableProperties must be defined in model or options')
+
+  const savedDataPath = path[serviceName][crudMethods.read](identifiers)
+
+  return live(savedDataPath)
+
+}

package/front/src/pages/Editor.vue

@@ -13,8 +13,6 @@
 
   import ModelEditor from "../components/crud/ModelEditor.vue"
 
-
-
   import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
 
   const props = defineProps({

package/front/src/pages/View.vue

@@ -0,0 +1,62 @@
+<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" />
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import ModelView from "../components/crud/ModelView.vue"
+
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+
+  const props = defineProps({
+    serviceName: {
+      type: String,
+      required: true,
+    },
+    modelName: {
+      type: String,
+      required: true,
+    },
+    identifiers: {
+      type: Array,
+      default: []
+    }
+  })
+  const { serviceName, modelName, identifiers } = toRefs(props)
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const modelDefinition = computed(() => {
+    const service = api.services[serviceName.value]
+    if(!service) return null
+    const model = service.models[modelName.value]
+    if(!model) return null
+    return model
+  })
+
+  const identifiersObject = computed(() => {
+    const result = {}
+    for(const [i, identifier] of Object.entries(identifiers.value)) {
+      const identifierDefinition = modelDefinition.value.identifiers[i]
+      if(typeof identifierDefinition === 'string') {
+        result[identifierDefinition] = identifier
+      } else {
+        result[identifierDefinition.name] = identifier
+      }
+    }
+    return result
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/router.js

@@ -14,13 +14,18 @@ export function autoFormRoutes(config = {}) {
       props: true
     }),
 
+    route({
+      name: 'auto-form:view', path: prefix + '/view/:serviceName/:modelName/:identifiers*', meta: { },
+      component: () => import("./pages/View.vue"),
+      props: true
+    }),
+
     route({
       name: 'auto-form:list', path: prefix + '/models/:serviceName/:modelName', meta: { },
       component: () => import("./pages/List.vue"),
       props: true
     }),
 
-
   ]
 }
 

package/index.js

@@ -9,11 +9,20 @@ export { inputConfig }
 
 import editorData from './front/src/logic/editorData.js'
 export { editorData }
+import viewData from './front/src/logic/viewData.js'
 
 export * from './front/src/logic/relations.js'
 
 import ModelEditor from './front/src/components/crud/ModelEditor.vue'
 export { ModelEditor }
+import ModelView from './front/src/components/crud/ModelView.vue'
+export { ModelView }
+import ModelList from './front/src/components/crud/ModelList.vue'
+export { ModelList }
+import EditorButtons from './front/src/components/crud/EditorButtons.vue'
+export { EditorButtons }
+import AutoObjectIdentification from './front/src/components/crud/AutoObjectIdentification.vue'
+export { AutoObjectIdentification }
 
 export * from './front/src/router.js'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "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.10",
-    "@live-change/dao": "^0.9.10",
-    "@live-change/dao-vue3": "^0.9.10",
-    "@live-change/dao-websocket": "^0.9.10",
-    "@live-change/framework": "^0.9.10",
-    "@live-change/image-frontend": "^0.9.10",
-    "@live-change/image-service": "^0.9.10",
-    "@live-change/session-service": "^0.9.10",
-    "@live-change/vue3-components": "^0.9.10",
-    "@live-change/vue3-ssr": "^0.9.10",
+    "@live-change/cli": "^0.9.12",
+    "@live-change/dao": "^0.9.12",
+    "@live-change/dao-vue3": "^0.9.12",
+    "@live-change/dao-websocket": "^0.9.12",
+    "@live-change/framework": "^0.9.12",
+    "@live-change/image-frontend": "^0.9.12",
+    "@live-change/image-service": "^0.9.12",
+    "@live-change/session-service": "^0.9.12",
+    "@live-change/vue3-components": "^0.9.12",
+    "@live-change/vue3-ssr": "^0.9.12",
     "@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.10",
+    "@live-change/codeceptjs-helper": "^0.9.12",
     "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": "d41e404c1933e9ed6e3927d85a5dadf66da0f951"
+  "gitHead": "1dba75a1fc90c5b796f7a8dab2895e6085ddce22"
 }