@live-change/frontend-auto-form 0.9.4 → 0.9.6

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

@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+
+  const props = defineProps({
+    editor: {
+      type: Object,
+      required: true,
+    },
+    discardDraft: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+  const { editor, discardDraft, options, i18n } = toRefs(props)
+
+
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -6,9 +6,7 @@
           v-model="editor.value.value"
           :rootValue="editor.value.value"
           :i18n="i18n" />
-      <div v-if="draft">
-        save buttons
-      </div>
+      <EditorButtons :editor="editor" discard-draft />
     </div>
   </div>
 </template>
@@ -16,6 +14,7 @@
 <script setup>
 
   import AutoEditor from '../form/AutoEditor.vue'
+  import EditorButtons from './EditorButtons.vue'
 
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
 
@@ -61,23 +60,33 @@
   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
+    try {
+      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
+    } catch(e) {
+      console.error("EDITOR ERROR", e)
+      return null
+    }
   })
 
+  const isNew = computed(() => editor.value.saved.value)
+
+  /// TODO: detect when we should change identifiers
+  // const savedIdentifiers
+
 </script>
 
 <style scoped>

package/front/src/logic/editorData.js

@@ -37,6 +37,7 @@ export default function editorData(options) {
     workingZone = inject('workingZone')
 
   } = options
+
   if(!identifiers) throw new Error('identifiers must be defined')
   if(!serviceName || !modelName) throw new Error('service and model must be defined')
 
@@ -45,10 +46,11 @@ export default function editorData(options) {
   const {
     crudMethods = model.crud,
     identifiersNames = model.identifiers,
-    editableProperties = model.editableProperties
+    editableProperties = model.editableProperties ?? Object.keys(model.properties)
   } = options
+
   if(!crudMethods) throw new Error('crud methods must be defined in model or options')
-  if(!identifiers) throw new Error('identifiers names 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')
 
   let idKey = null
@@ -65,14 +67,14 @@ export default function editorData(options) {
       draftIdParts.push(identifier)
     }
   }
-  const draftId = idKey ? identifiers[idKey]
-    : draftIdParts.map(key => JSON.stringify(identifiers[key])).join('_')
-
+  const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.some(key => !identifiers[key])))
+  const draftId = (idKey ? identifiers[idKey]
+    : draftIdParts.map(key => JSON.stringify(identifiers[key])).join('_')) ?? 'new'
   const draftIdentifiers = {
     actionType: serviceName, action: crudMethods.read, targetType: modelName, target: draftId
   }
 
-  const savedDataPath = path[serviceName][crudMethods.read](identifiers)
+  const savedDataPath = isNew ? null : path[serviceName][crudMethods.read](identifiers)
   const draftDataPath = (draft && path.draft.myDraft(draftIdentifiers)) || null
 
   const updateAction = api.actions[serviceName][crudMethods.update]
@@ -84,6 +86,7 @@ export default function editorData(options) {
   return Promise.all([
     live(savedDataPath), live(draftDataPath)
   ]).then(([savedData, draftData]) => {
+
     const editableSavedData = computed(() => savedData.value && Object.fromEntries(
       editableProperties.map(prop => [prop, savedData.value[prop]])
         .concat([[timeField, savedData.value[timeField]]])
@@ -179,6 +182,8 @@ export default function editorData(options) {
         draftChanged: synchronizedData.changed,
         saveDraft: synchronizedData.save,
         savingDraft: synchronizedData.saving,
+        saved: savedData,
+        draft: draftData,
         sourceChanged /// needed for draft discard on concurrent save
       }
     } else {
@@ -207,6 +212,7 @@ export default function editorData(options) {
         changed: synchronizedData.changed,
         save: synchronizedData.save,
         saving: synchronizedData.saving,
+        saved: savedData,
         model,
       }
 

package/front/src/pages/Editor.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="w-full lg:w-8 md:w-11">
     <div class="surface-card p-3 shadow-1 border-round">
+
       <div class="text-xl mb-2">
         Service <strong>{{ serviceName }} model {{ modelName }}</strong>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "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.4",
-    "@live-change/dao": "^0.9.4",
-    "@live-change/dao-vue3": "^0.9.4",
-    "@live-change/dao-websocket": "^0.9.4",
-    "@live-change/framework": "^0.9.4",
-    "@live-change/image-frontend": "^0.9.4",
-    "@live-change/image-service": "^0.9.4",
-    "@live-change/session-service": "^0.9.4",
-    "@live-change/vue3-components": "^0.9.4",
-    "@live-change/vue3-ssr": "^0.9.4",
+    "@live-change/cli": "^0.9.6",
+    "@live-change/dao": "^0.9.6",
+    "@live-change/dao-vue3": "^0.9.6",
+    "@live-change/dao-websocket": "^0.9.6",
+    "@live-change/framework": "^0.9.6",
+    "@live-change/image-frontend": "^0.9.6",
+    "@live-change/image-service": "^0.9.6",
+    "@live-change/session-service": "^0.9.6",
+    "@live-change/vue3-components": "^0.9.6",
+    "@live-change/vue3-ssr": "^0.9.6",
     "@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.4",
+    "@live-change/codeceptjs-helper": "^0.9.6",
     "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": "98fd51a1a5fea3ff8adff3662ef1e4a00774eed6"
+  "gitHead": "96dafb43cced09c59326ee3318d6f45b1b614d6f"
 }