@live-change/frontend-auto-form 0.9.5 → 0.9.7

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

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex flex-row justify-content-between align-items-center mt-3">
+    <div class="flex flex-column">
+      <div v-if="draftChanged" class="text-sm text-500 mr-2">
+        Draft changed
+      </div>
+      <div v-if="savingDraft" class="text-500 mr-2">
+        <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+        <span>Saving draft...</span>
+      </div>
+      <div v-if="validationResult" class="font-semibold p-error mr-2">
+        Before saving, please correct the errors above.
+      </div>
+    </div>
+    <div class="flex flex-row">
+      <slot name="submit" v-if="!validationResult">
+        <div v-if="changed" class="ml-2">
+          <Button type="submit" label="Save" class="" icon="pi pi-save" />
+        </div>
+        <div v-else class="flex flex-row align-items-center ml-2">
+          <div class="mr-2">
+            No changes to save.
+          </div>
+          <Button type="submit" label="Save" class="" icon="pi pi-save" disabled />
+        </div>
+      </slot>
+      <slot name="reset" v-if="resetButton">
+        <div v-if="changed">
+          <Button label="Reset" class="ml-2" icon="pi pi-eraser" @click="editor.reset" />
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance } from 'vue'
+
+  const props = defineProps({
+    editor: {
+      type: Object,
+      required: true,
+    },
+    resetButton: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+  const { editor, resetButton, options, i18n } = toRefs(props)
+
+  const draftEnabled = computed(() => !!editor.value.discardDraft)
+  const model = computed(() => editor.value.model)
+
+  const changed = computed(() => editor.value.changed.value)
+
+  const draftChanged = computed(() => editor.value.draftChanged?.value)
+  const savingDraft = computed(() => editor.value.savingDraft?.value)
+  const sourceChanged = computed(() => editor.value.sourceChanged?.value)
+  const saving = computed(() => editor.value.saving?.value)
+
+  const appContext = getCurrentInstance().appContext
+
+  import { validateData } from "@live-change/vue3-components"
+  const validationResult = computed(() => {
+    const currentValue = 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,
+      props.propName, props.rootValue, true)
+    return validationResult || softValidationResult
+  })
+
+</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" reset-button />
     </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

@@ -24,10 +24,12 @@ export default function editorData(options) {
     discardedDraftToast = "Draft discarded",
     saveDraftErrorToast = "Error saving draft",
     saveErrorToast = "Error saving",
+    resetToast = "Reset done",
 
     onSaved = () => {},
     onDraftSaved = () => {},
     onDraftDiscarded = () => {},
+    onReset = () => {},
     onSaveError = () => {},
     onCreated = (createResult) => {},
 
@@ -37,6 +39,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 +48,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 +69,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 +88,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]]])
@@ -148,7 +153,7 @@ export default function editorData(options) {
       })
 
       const changed = computed(() =>
-        JSON.stringify(editableSavedData.value) !== JSON.stringify(synchronizedData.value.value))
+        JSON.stringify(editableSavedData.value ?? {}) !== JSON.stringify(synchronizedData.value.value))
       const sourceChanged = computed(() =>
         JSON.stringify(draftData.value.from) !== JSON.stringify(editableSavedData.value))
 
@@ -168,17 +173,30 @@ export default function editorData(options) {
         if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: discardedDraftToast, life: 1500 })
       }
 
+      async function reset() {
+        const discardPromise = removeDraftAction(draftIdentifiers)
+        if(workingZone)
+          workingZone.addPromise('discardDraft:'+serviceName+':'+modelName, discardPromise)
+        await discardPromise
+        synchronizedData.value.value = editableSavedData.value || defaultData(model)
+        if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
+        onReset()
+      }
+
       return {
         value: synchronizedData.value,
         changed,
         save,
         saving,
+        reset,
         discardDraft,
         model,
         resetOnError: false,
         draftChanged: synchronizedData.changed,
         saveDraft: synchronizedData.save,
         savingDraft: synchronizedData.saving,
+        saved: savedData,
+        draft: draftData,
         sourceChanged /// needed for draft discard on concurrent save
       }
     } else {
@@ -202,11 +220,19 @@ export default function editorData(options) {
         }
       })
 
+      async function reset() {
+        synchronizedData.value.value = editableSavedData.value || defaultData(model)
+        if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
+        onReset()
+      }
+
       return {
         value: synchronizedData.value,
         changed: synchronizedData.changed,
         save: synchronizedData.save,
         saving: synchronizedData.saving,
+        saved: savedData,
+        reset,
         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.5",
+  "version": "0.9.7",
   "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.5",
-    "@live-change/dao": "^0.9.5",
-    "@live-change/dao-vue3": "^0.9.5",
-    "@live-change/dao-websocket": "^0.9.5",
-    "@live-change/framework": "^0.9.5",
-    "@live-change/image-frontend": "^0.9.5",
-    "@live-change/image-service": "^0.9.5",
-    "@live-change/session-service": "^0.9.5",
-    "@live-change/vue3-components": "^0.9.5",
-    "@live-change/vue3-ssr": "^0.9.5",
+    "@live-change/cli": "^0.9.7",
+    "@live-change/dao": "^0.9.7",
+    "@live-change/dao-vue3": "^0.9.7",
+    "@live-change/dao-websocket": "^0.9.7",
+    "@live-change/framework": "^0.9.7",
+    "@live-change/image-frontend": "^0.9.7",
+    "@live-change/image-service": "^0.9.7",
+    "@live-change/session-service": "^0.9.7",
+    "@live-change/vue3-components": "^0.9.7",
+    "@live-change/vue3-ssr": "^0.9.7",
     "@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.5",
+    "@live-change/codeceptjs-helper": "^0.9.7",
     "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": "59f1d66de3a64b751308593e282e8635c0ecab7e"
+  "gitHead": "f936468bf39ea3c5b07ce14666f4b3a4a4a9287d"
 }