Add InlineEdit autoSave test (#2036)

demos/javascript/vue-component.php

@@ -27,11 +27,16 @@
 $subHeader = 'Try me. I will restore value on "Escape" or save it on "Enter" or when field get blur after it has been changed.';
 Header::addTo($app, ['Inline editing.', 'size' => 3, 'subHeader' => $subHeader]);
 
-$inline_edit = VueComponent\InlineEdit::addTo($app);
-$inline_edit->fieldName = $model->fieldName()->name;
-$inline_edit->setModel($model);
-
-$inline_edit->onChange(function (string $value) use ($app) {
+View::addTo($app)->set('with autoSave');
+$inlineEditWithAutoSave = VueComponent\InlineEdit::addTo($app, ['autoSave' => true]);
+$inlineEditWithAutoSave->fieldName = $model->fieldName()->name;
+$inlineEditWithAutoSave->setModel($model);
+
+View::addTo($app)->set('with onChange callback');
+$inlineEditWithCallback = VueComponent\InlineEdit::addTo($app);
+$inlineEditWithCallback->fieldName = $model->fieldName()->name;
+$inlineEditWithCallback->setModel($model);
+$inlineEditWithCallback->onChange(function (string $value) use ($app) {
     $view = new Message();
     $view->setApp($app);
     $view->invokeInit();

js/src/vue-components/inline-edit.component.js

@@ -16,7 +16,6 @@ export default {
             <input
                 :class="options.inlineCss"
                 :name="options.fieldName"
-                :type="options.fieldType"
                 v-model="value"
                 @keyup="onKeyup"
                 @focus="onFocus"
@@ -33,41 +32,42 @@ export default {
     data: function () {
         return {
             value: this.initValue,
-            temp: this.initValue,
+            lastValueValid: this.initValue,
             hasError: false,
         };
     },
     computed: {
         isDirty: function () {
-            return this.temp !== this.value;
+            return this.lastValueValid !== this.value;
         },
     },
     methods: {
         onFocus: function () {
             if (this.hasError) {
                 this.clearError();
             } else {
-                this.temp = this.value;
+                this.lastValueValid = this.value;
             }
         },
         onKeyup: function (e) {
             const key = e.keyCode;
-            this.clearError();
             if (key === 13) {
                 this.onEnter();
             } else if (key === 27) {
                 this.onEscape();
             }
         },
         onBlur: function () {
-            if (this.isDirty && this.saveOnBlur) {
-                this.update();
-            } else {
-                this.value = this.temp; // TODO will not save the value on 2nd edit and submit via enter
+            if (this.isDirty) {
+                if (this.saveOnBlur) {
+                    this.update();
+                } else {
+                    this.value = this.lastValueValid;
+                }
             }
         },
         onEscape: function () {
-            this.value = this.temp;
+            this.value = this.lastValueValid;
             this.$el.querySelector('input').blur();
         },
         onEnter: function () {
@@ -78,17 +78,6 @@ export default {
         clearError: function () {
             this.hasError = false;
         },
-        flashError: function (count = 4) {
-            if (count === 0) {
-                this.hasError = false;
-
-                return;
-            }
-            this.hasError = !this.hasError;
-            setTimeout(() => {
-                this.flashError(count - 1);
-            }, 300);
-        },
         update: function () {
             const that = this;
             $(this.$el).api({
@@ -98,9 +87,9 @@ export default {
                 method: 'POST',
                 onComplete: function (r, e) {
                     if (r.hasValidationError) {
-                        that.hasError = true;
+                        that.clearError();
                     } else {
-                        that.temp = that.value;
+                        that.lastValueValid = that.value;
                     }
                 },
             });