Merge pull request #4761 from manuelmeister/bugfix/api-wrapper-dirty

Bugfix: Prevent wrong dirty reset
ecamp · Mar 17, 2024 · e08a8f1 · e08a8f1
2 parents a15b036 + 1c01512
commit e08a8f1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/frontend/src/components/form/api/ApiRichtext.vue b/frontend/src/components/form/api/ApiRichtext.vue
@@ -14,6 +14,7 @@ Displays a field as a e-textarea + write access via API wrapper
       :outlined="outlined"
       :filled="filled"
       @input="wrapper.on.input"
+      @blur="wrapper.on.blur"
     >
       <template #append>
         <api-wrapper-append :wrapper="wrapper" />

diff --git a/frontend/src/components/form/api/ApiTextField.vue b/frontend/src/components/form/api/ApiTextField.vue
@@ -16,6 +16,7 @@ Displays a field as a e-text-field + write access via API wrapper
       :filled="filled"
       :dense="dense"
       @input="wrapper.on.input"
+      @blur="wrapper.on.blur"
     >
       <template #append>
         <api-wrapper-append :wrapper="wrapper" />

diff --git a/frontend/src/components/form/api/ApiTextarea.vue b/frontend/src/components/form/api/ApiTextarea.vue
@@ -15,6 +15,7 @@ Displays a field as a e-textarea + write access via API wrapper
       :filled="filled"
       :dense="dense"
       @input="wrapper.on.input"
+      @blur="wrapper.on.blur"
     >
       <template #append>
         <api-wrapper-append :wrapper="wrapper" />

diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
@@ -53,6 +53,7 @@ export default {
       localValue: null,
       parsedLocalValue: null,
       isSaving: false,
+      isPreSaving: false,
       isLoading: false,
       isMounted: false,
       showIconSuccess: false,
@@ -67,6 +68,7 @@ export default {
         reset: this.reset,
         reload: this.reload,
         input: this.onInput,
+        blur: this.onBlur,
       },
     }
   },
@@ -172,11 +174,18 @@ export default {
       this.localValue = newValue
       this.parsedLocalValue = this.parse ? this.parse(newValue) : newValue
       this.dirty = this.parsedLocalValue !== this.apiValue
+      this.isPreSaving = true
 
       if (this.autoSave) {
         this.debouncedSave()
       }
     },
+    async onBlur() {
+      if (!(this.isSaving || this.isPreSaving) && this.autoSave) {
+        this.localValue = this.apiValue
+        this.parsedLocalValue = this.parse ? this.parse(this.apiValue) : this.apiValue
+      }
+    },
     // reload data from API (doesn't force loading from server if available locally)
     reload() {
       this.resetErrors()
@@ -196,12 +205,12 @@ export default {
     },
     reset() {
       this.localValue = this.apiValue
+      this.dirty = false
       this.resetErrors()
       this.$emit('reseted')
       this.$emit('finished')
     },
     resetErrors() {
-      this.dirty = false
       this.hasLoadingError = false
       this.hasServerError = false
       this.serverErrorMessage = null
@@ -229,6 +238,7 @@ export default {
 
       // reset all dirty flags and start saving
       this.resetErrors()
+      this.isPreSaving = false
       this.isSaving = true
 
       // construct payload (nested path allowed)

diff --git a/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js b/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js
@@ -130,7 +130,7 @@ describe('Testing ApiWrapper [autoSave=true;  manual external value]', () => {
 
   test('calls api.patch after onInput was triggered', async () => {
     const newValue = 'new value'
-    const newValueFromApi = 'NEW VALUE'
+    const newValueFromApi = 'new value'
 
     await vm.onInput(newValue)
 
@@ -148,7 +148,7 @@ describe('Testing ApiWrapper [autoSave=true;  manual external value]', () => {
 
     // saving started
     expect(vm.isSaving).toBe(true)
-    expect(vm.dirty).toBe(false)
+    expect(vm.dirty).toBe(true)
     expect(vm.status).toBe('saving')
 
     // API patch method called
@@ -163,6 +163,7 @@ describe('Testing ApiWrapper [autoSave=true;  manual external value]', () => {
     await wrapper.setProps({ value: newValueFromApi })
     await wrapper.vm.$nextTick()
     expect(vm.localValue).toBe(newValueFromApi)
+    expect(vm.dirty).toBe(false)
 
     // success state
     expect(vm.status).toBe('success')