Add model.js support in Resource.vue

Author: Deluze

generator/templates/Crud/src/components/Resource.vue

@@ -36,15 +36,14 @@
         </vuetify-resource>
     </v-container>
 </template>
+
 <script>
-import FormDataValues from './../mixins/formDataValues';
 import axios from '../api/implementation/app';
 import VuetifyResource from '@kingscode/vuetify-resource';
 
 export default {
     name: 'Resource',
     components: {VuetifyResource},
-    mixins: [FormDataValues],
     data() {
         return {
             createForm: {values: {}},
@@ -54,6 +53,10 @@ export default {
         };
     },
     props: {
+        modelType: {
+            type: Function,
+            required: false,
+        },
         tableContent: {
             type: Array,
             required: true,
@@ -151,7 +154,15 @@ export default {
             return new Promise((resolve) => {
                 axios.get((this.showResourceUri || this.resourceUri) + '/' + id)
                     .then((response) => {
-                        let item = response.data.data;
+                        let item;
+
+                        if (this.modelType) {
+                            item = new this.modelType();
+                            item.mapResponse(response.data.data);
+                        } else {
+                            item = response.data.data;
+                        }
+
                         resolve({
                             item,
                         });
@@ -168,7 +179,12 @@ export default {
                     if (this.createForm.valid) {
                         this.createHandler(this.createForm.values)
                             .then((response) => {
-                                this.createForm.values = {};
+                                if (this.modelType) {
+                                    this.createForm.values = new this.modelType();
+                                } else {
+                                    this.createForm.values = {};
+                                }
+
                                 if (typeof this.afterCreate === 'function') {
                                     this.afterCreate(response.data).then(() => {
                                         resolve();
@@ -196,6 +212,7 @@ export default {
                 process.nextTick(() => {
                     if (this.updateForm.valid) {
                         this.updateForm.values.id = selected[0].id;
+
                         this.updateHandler(this.updateForm.values)
                             .then((response) => {
                                 if (typeof this.afterUpdate === 'function') {
@@ -243,7 +260,13 @@ export default {
                 this.beforeOpenUpdate(selected);
                 return;
             }
-            this.updateForm.values = selected[0];
+
+            if (this.modelType) {
+                this.updateForm.values = new this.modelType();
+                this.updateForm.values.mapResponse(selected[0]);
+            } else {
+                this.updateForm.values = {};
+            }
         },
     },
 };

generator/templates/Crud/src/views/UserResource.vue

@@ -7,15 +7,16 @@
             :update-handler="updateHandler"
             :delete-handler="deleteHandler"
             :create-handler="createHandler"
+            :model-type="modelType"
             resource-uri="user"
         />
     </v-container>
 </template>
 
 <script lang="js">
 import Resource from '@/components/Resource.vue';
-
 import {create, destroy, update} from '../api/endpoints/user.js';
+import User from '../application/models/user.js';
 
 export default {
     name: 'UserResource',
@@ -26,6 +27,7 @@ export default {
         updateHandler: () => update,
         deleteHandler: () => destroy,
         createHandler: () => create,
+        modelType: () => User,
         tableContent: () => [
             {
                 text: 'Naam',

generator/templates/Default/src/api/implementation/app/transformer.js

@@ -26,7 +26,13 @@ function transformResponse(response) {
  */
 function transformRequest(data) {
     if (data instanceof Model) {
+        const isPutRequest = data._method === 'put';
+
         data = data.mapForRequest();
+
+        if (isPutRequest) {
+            data._method = 'put';
+        }
     }
 
     if (data) {

generator/templates/Default/src/application/models/model.js

@@ -8,6 +8,13 @@ class Model {
     mapForRequest() {
         throw new Error(`${this.constructor.name}::mapForRequest unset`);
     }
+
+    /**
+     * @param data {{}}
+     */
+    mapResponse(data) {
+        throw new Error(`${this.constructor.name}::mapResponse unset, keys: ${Object.keys(data).join(', ')}`);
+    }
 }
 
 export default Model;

generator/templates/Default/src/application/models/user.js

@@ -1,6 +1,7 @@
 import Model from './model.js';
 
 class User extends Model {
+    id = 0;
     name = '';
     email = '';
 
@@ -10,6 +11,12 @@ class User extends Model {
             email: this.email,
         };
     }
+
+    mapResponse(data) {
+        this.id = data.id;
+        this.name = data.name;
+        this.email = data.email;
+    }
 }
 
 export default User;