Merge branch '23-make-a-use-case-with-a-backend-in-feathers' into 'de…

…velop'

Resolve "Make a use case with a backend in feathers"

Closes #23

See merge request camba/vue-admin!19

src/App.vue

@@ -50,6 +50,24 @@ const fieldsArticleEdit = fieldsArticleCreate
 
 const resourceId = "id"
 
+// Use case of a parsed response using feathers
+// This has to be done because every server client returns different responses. - sgobotta
+//
+// const parseFeathersResponses = {
+//   parseList: (response) => {
+//     const { data } = response;
+//     return Object.assign({}, response, {
+//       data: data.data // expecting array of objects with IDs
+//     });
+//   },
+//   parseSingle: (response) => {
+//     const { data } = response;
+//     return Object.assign({}, response, {
+//       data // expecting object with ID
+//     });
+//   }
+// }
+
 export default {
   name: "App",
   components: {
@@ -62,7 +80,11 @@ export default {
       articlesShow,
       fieldsArticleCreate,
       fieldsArticleEdit,
-      resourceId
+      resourceId,
+      // #23 - To use the feathers server just add the parseResponses attribute
+      // below, pass ':parseResponses='parseResponses' to Resource in the
+      // template and update the resourceId to '_id'. - sgobotta
+      // parseResponses: parseFeathersResponses
     };
   }
 };

src/components/Actions/Create/Create.vue

@@ -74,7 +74,8 @@ export default {
       // TODO: The then, catch could possibly be moved to the store using vuex-crud callbacks. Read #34 for docs - sgobotta
       this.$store.dispatch(resourceName, { data: this.resource })
         .then((res) => {
-          if (this.redirect && res.status === 200) {
+          const { status } = res
+          if ([200, 201].indexOf(status) !== -1) {
             Router.redirect({ router: this.$router, resource: this.name, view: this.redirect.view, id: res.data[this.redirect.idField] })
             return res
           }
@@ -98,7 +99,7 @@ export default {
     },
 
     args(field) {
-      const args = typeof(field) === 'string' ? { 'label': field, 'placeHolder': field } : field
+      const args = typeof(field) === 'string' ? { label: field, placeHolder: field } : field
       return args
     }
   }

src/components/Resource/src/resource.vue

@@ -26,9 +26,17 @@ export default {
       type: Object,
       default: () => ({
         views: {
-          create: 'list'
+          create: 'list',
+          edit: 'show'
         }
       })
+    },
+    parseResponses: {
+      type: Object,
+      default: () => ({
+        single: null,
+        list: null
+      })
     }
   },
   data() {
@@ -43,7 +51,9 @@ export default {
     }
     let module = createCrudModule({
       resource: this.name,
-      customUrlFn
+      customUrlFn,
+      idAttribute: this.resourceId,
+      ...this.parseResponses
     });
     this.$store.registerModule(this.name, module);
   },
@@ -84,7 +94,8 @@ export default {
     },
 
     bindEdit(path) {
-      return this.edit ? { path: `${path}/edit/:id`, name: `${this.name}/edit`, component: Edit, props: { name: this.name, fields: this.edit }} : []
+      const redirect = { idField: this.resourceId, view: this.redirect.views.edit }
+      return this.edit ? { path: `${path}/edit/:id`, name: `${this.name}/edit`, component: Edit, props: { name: this.name, fields: this.edit, redirect }} : []
     }
 
   },

utils/server-test/server.js

@@ -95,7 +95,7 @@ app.post("/api/articles", (req, res) => {
 
   articles.push(article);
 
-  res.json(article);
+  res.status(201).send(article);
 });
 
 const port = process.env.PORT || 8080;