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

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

@@ -1,17 +1,48 @@
 <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 } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance } from 'vue'
 
   const props = defineProps({
     editor: {
       type: Object,
       required: true,
     },
-    discardDraft: {
+    resetButton: {
       type: Boolean,
       required: true,
     },
@@ -24,9 +55,29 @@
       default: ''
     }
   })
-  const { editor, discardDraft, options, i18n } = toRefs(props)
+  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>
 

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

@@ -6,7 +6,7 @@
           v-model="editor.value.value"
           :rootValue="editor.value.value"
           :i18n="i18n" />
-      <EditorButtons :editor="editor" discard-draft />
+      <EditorButtons :editor="editor" reset-button />
     </div>
   </div>
 </template>

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) => {},
 
@@ -151,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))
 
@@ -171,11 +173,22 @@ 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,
@@ -207,12 +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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.6",
+  "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.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",
+    "@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.6",
+    "@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": "96dafb43cced09c59326ee3318d6f45b1b614d6f"
+  "gitHead": "f936468bf39ea3c5b07ce14666f4b3a4a4a9287d"
 }