@live-change/frontend-auto-form 0.8.124 → 0.8.126

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

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <auto-editor
+          :definition="modelDefinition"
+          v-model="editor.value.value"
+          :rootValue="editor.value.value"
+          :i18n="i18n" />
+      <div v-if="draft">
+        save buttons
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import AutoEditor from '../form/AutoEditor.vue'
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+
+  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 { 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 { editorData } from "@live-change/frontend-auto-form"
+  import { computedAsync } from "@vueuse/core"
+
+  const editor = computedAsync(async () => {
+    const ed = await editorData({
+      service: service.value,
+      model: model.value,
+      identifiers: identifiers.value,
+      draft: draft.value,
+      autoSave: true,
+      ...options.value,
+      onSaved: (...args) => emit('saved', ...args),
+      onDraftSaved: (...args) => emit('draftSaved', ...args),
+      onDraftDiscarded: (...args) => emit('draftDiscarded', ...args),
+      onSaveError: (...args) => emit('saveError', ...args),
+      onCreated: (...args) => emit('created', ...args),
+    })
+    //console.log("ED", ed)
+    return ed
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/pages/Editor.vue

@@ -11,12 +11,16 @@
       <h4>definition</h4>
       <pre>{{ modelDefinition }}</pre>
 
+      <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft />
+
     </div>
   </div>
 </template>
 
 <script setup>
 
+  import ModelEditor from "../components/crud/ModelEditor.vue"
+
   import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
 
   const props = defineProps({
@@ -60,23 +64,10 @@
     return result
   })
 
-
-  import { editorData } from "@live-change/frontend-auto-form"
-
-  /*const treeSettings = computedAsync(async () => {
-    const ed = await editorData({
-      service: serviceName,
-      model: modelName,
-      identifiers: { file: tree.value },
-      draft: true,
-      onCreated() {
-        console.log("CREATED")
-        // TODO: change route - add identifiers
-      },
-    })
-    console.log("ED", ed)
-    return ed
-  })*/
+  function handleCreated() {
+    console.log("CREATED")
+    // TODO: change route - add identifiers
+  }
 
 </script>
 

package/index.js

@@ -12,6 +12,9 @@ export { editorData }
 
 export * from './front/src/logic/relations.js'
 
+import ModelEditor from './front/src/components/crud/ModelEditor.vue'
+export { ModelEditor }
+
 export * from './front/src/router.js'
 
 import en from "./front/locales/en.json"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.8.124",
+  "version": "0.8.126",
   "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.8.124",
-    "@live-change/dao": "^0.8.124",
-    "@live-change/dao-vue3": "^0.8.124",
-    "@live-change/dao-websocket": "^0.8.124",
-    "@live-change/framework": "^0.8.124",
-    "@live-change/image-frontend": "^0.8.124",
-    "@live-change/image-service": "^0.8.124",
-    "@live-change/session-service": "^0.8.124",
-    "@live-change/vue3-components": "^0.8.124",
-    "@live-change/vue3-ssr": "^0.8.124",
+    "@live-change/cli": "^0.8.126",
+    "@live-change/dao": "^0.8.126",
+    "@live-change/dao-vue3": "^0.8.126",
+    "@live-change/dao-websocket": "^0.8.126",
+    "@live-change/framework": "^0.8.126",
+    "@live-change/image-frontend": "^0.8.126",
+    "@live-change/image-service": "^0.8.126",
+    "@live-change/session-service": "^0.8.126",
+    "@live-change/vue3-components": "^0.8.126",
+    "@live-change/vue3-ssr": "^0.8.126",
     "@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.8.124",
+    "@live-change/codeceptjs-helper": "^0.8.126",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "837e7729f4cbd909d6c7ae32189c562b39cc3122"
+  "gitHead": "2aa34c0589d115aeaa573bd2cae09bb43a66d162"
 }