[xprototype#4/feature] Improve event handler in template forms

src/app/Components/Form/AppFormComponent.js

@@ -47,6 +47,9 @@ export default {
           if (schema[key].validate) {
             this.$v.record[key].$touch()
           }
+          if (this.$v.record[key] && this.$v.record[key].$dirty) {
+            this.updateStatusAppForm()
+          }
         })
       })
 
@@ -76,6 +79,15 @@ export default {
         return true
       }
       return !!this.checkValidationsCustom(errors)
+    },
+    /**
+     * @param {Object} payload
+     */
+    resetAppForm (payload = undefined) {
+      if (payload) {
+        this.$payload = this.$util.clone(payload)
+      }
+      this.$emit('input', this.$util.clone(this.$payload))
     }
   },
   /**
@@ -95,10 +107,14 @@ export default {
    */
   created () {
     this.$hasError = this.hasErrorAppForm
+    this.$reset = this.resetAppForm
 
     this.schema = this.$parent.$options.schema
 
     const record = this.parseRecordAppForm(this.schema)
+
+    this.$payload = { ...record, ...this.value }
+
     this.$emit('input', { ...record, ...this.value })
   }
 }

src/app/Components/Form/AppFormValidation.js

@@ -8,7 +8,6 @@ export default {
    */
   validations () {
     const record = Object.keys(this.schema).reduce(this.reduceValidations, {})
-    console.log('~> validations', record)
     return { record }
   },
   /**

src/app/Prototype/Contracts/Form/FormFetch.js

@@ -11,7 +11,7 @@ export default {
      */
     fetchRecord (id) {
       this.$q.loading.show({ delay: 100 })
-      return this.service
+      return this.$service
         .read(id)
         .then(this.successFetchRecord)
         .catch(this.errorFetchRecord)
@@ -23,8 +23,9 @@ export default {
     successFetchRecord (record) {
       this.fetching = true
       this.$payload = this.$util.clone(record)
-      Object.keys(this.record).forEach((key) => {
-        this.record[key] = this.$util.prop(record, key)
+      const recordName = this.$options.recordName || 'record'
+      Object.keys(this[recordName]).forEach((key) => {
+        this[recordName][key] = this.$util.prop(record, key)
       })
       this.fetching = false
 

src/app/Prototype/View/Form.js

@@ -43,7 +43,8 @@ export default {
    */
   data: () => ({
     record: {},
-    errors: {}
+    errors: {},
+    hooks: {}
   }),
   /**
    */
@@ -96,7 +97,7 @@ export default {
      * @param {Object} $event
      */
     actionReset ($event) {
-      this.form().$reset()
+      this.form().$reset(this.$payload)
     },
     /**
      * @return {Vue}
@@ -111,6 +112,26 @@ export default {
         }
       }
       throw new Error('This mixin need an "AppForm" to works')
+    },
+    /**
+     * @param {string} name
+     * @param {Function} hook
+     */
+    hook (name, hook) {
+      this.hooks[name] = hook
+    },
+    /**
+     * @param {string} hook
+     */
+    triggerHook (hook) {
+      if (!this.hooks[hook]) {
+        return
+      }
+      const action = this.hooks[hook]
+      if (typeof action !== 'function') {
+        return
+      }
+      action.call(this)
     }
   }
 }

src/boot/service.js

@@ -10,8 +10,8 @@ export default ({ Vue }) => {
       if (this.$options && this.$options.service) {
         return this.$options.service
       }
-      if (this.$props && this.$props.service) {
-        return this.$props.service
+      if (this.service) {
+        return this.service
       }
       throw new Error(`The component doesn't have a service`)
     }

src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue

@@ -110,6 +110,7 @@
 
 <script type="text/javascript">
 import Form from 'src/app/Prototype/View/Form'
+import FormFetch from 'src/app/Prototype/Contracts/Form/FormFetch'
 
 import { gender } from 'src/domains/Common/options'
 
@@ -120,6 +121,11 @@ export default {
   /**
    */
   extends: Form,
+  /**
+   */
+  mixins: [
+    FormFetch
+  ],
   /**
    */
   name: 'TestWithTemplateForm',
@@ -219,6 +225,11 @@ export default {
    */
   created () {
     this.descriptionLabel = this.$t('example.textWithTemplateForm.fields.description')
+  },
+  /**
+   */
+  mounted () {
+    this.fetchRecord(1)
   }
 }
 </script>