Added Loading and Error States to each model and model field

Author: KaniRobinson

dist/index.js

@@ -20,6 +20,24 @@ export default class Action {
     ModelConfig.http = _.merge({}, ModelConfig.http, context.options.http);
     model.methodConf = _.merge({}, ModelConfig, model.methodConf);
     model.methodConf.http.url = (model.methodConf.http.url === '/') ? `/${model.entity}` : model.methodConf.http.url;
+
+    /**
+     * Add Model Interface to each model
+     */
+    model.getFields = () => {
+      if (!model.cachedFields) {
+        model.cachedFields = _.merge({}, {
+          $id: model.attr(undefined),
+          $isUpdating: model.boolean(false),
+          $updateErrors: model.attr([]),
+          $isDeleting: model.boolean(false),
+          $deleteErrors: model.attr([]),
+        }, model.fields())
+      }
+
+      return model.cachedFields;
+    };
+
     return model;
   }
 

src/actions/Action.js

@@ -19,16 +19,41 @@ export default class Create extends Action {
     const axios =  new Axios(model.methodConf.http);
     const request = axios.post(endpoint, params.data);
 
-    commit('onRequest');
+    this.onRequest(commit);
     request
-      .then(data => {
-        commit('onSuccess')
-        model.insertOrUpdate({
-          data,
-        });
-      })
-      .catch(error => commit('onError', error))
+      .then(data => this.onSuccess(commit, model, data))
+      .catch(error => this.onError(commit, error))
 
     return request;
   }
+
+  /**
+   * On Request Method
+   * @param {object} commit
+   */
+  static onRequest(commit) {
+    commit('onRequest');
+  }
+
+  /**
+   * On Successful Request Method
+   * @param {object} commit
+   * @param {object} model
+   * @param {object} data
+   */
+  static onSuccess(commit, model, data) {
+    commit('onSuccess')
+    model.insertOrUpdate({
+      data,
+    });
+  }
+
+  /**
+   * On Failed Request Method
+   * @param {object} commit
+   * @param {object} error
+   */
+  static onError(commit, error) {
+    commit('onError', error)
+  }
 }

src/actions/Create.js

@@ -15,13 +15,54 @@ export default class Delete extends Action {
     const axios =  new Axios(model.methodConf.http);
     const request = axios.delete(endpoint);
 
+    this.onRequest(model, params);
     request
-      .then(data => {
-        model.delete({
-          where: (params.params.id) ? params.params.id : data.id,
-        })
-      })
+      .then(data => this.onSuccess(model, params, data))
+      .catch(error => this.onError(model, params, error))
 
     return request;
   }
+
+  /**
+   * On Request Method
+   * @param {object} model
+   * @param {object} params
+   */
+  static onRequest(model, params) {
+    model.update({
+      where: params.params.id,
+      data: {
+        $isDeleting: true,
+        $deleteErrors: []
+      }
+    })
+  }
+
+  /**
+   * On Successful Request Method
+   * @param {object} model
+   * @param {object} params
+   * @param {object} data
+   */
+  static onSuccess(model, params, data) {
+    model.delete({
+      where: params.params.id || data.id,
+    })
+  }
+
+  /**
+   * On Failed Request Method
+   * @param {object} model
+   * @param {object} params
+   * @param {object} error
+   */
+  static onError(model, params, error) {
+    model.update({
+      where: params.params.id,
+      data: {
+        $isDeleting: false,
+        $deleteErrors: error
+      }
+    })
+  }
 }

src/actions/Delete.js

@@ -15,16 +15,41 @@ export default class Fetch extends Action {
     const axios =  new Axios(model.methodConf.http);
     const request = axios.get(endpoint);
 
-    commit('onRequest');
+    this.onRequest(commit);
     request
-      .then(data => {
-        commit('onSuccess')
-        model.insertOrUpdate({
-          data,
-        });
-      })
-      .catch(error => commit('onError', error))
+      .then(data => this.onSuccess(commit, model, data))
+      .catch(error => this.onError(commit, error))
 
     return request;
   }
+
+  /**
+   * On Request Method
+   * @param {object} commit
+   */
+  static onRequest(commit) {
+    commit('onRequest');
+  }
+
+  /**
+   * On Successful Request Method
+   * @param {object} commit
+   * @param {object} model
+   * @param {object} data
+   */
+  static onSuccess(commit, model, data) {
+    commit('onSuccess')
+    model.insertOrUpdate({
+      data,
+    });
+  }
+
+  /**
+   * On Failed Request Method
+   * @param {object} commit
+   * @param {object} error
+   */
+  static onError(commit, error) {
+    commit('onError', error)
+  }
 }

src/actions/Fetch.js

@@ -15,16 +15,41 @@ export default class Get extends Action {
     const axios =  new Axios(model.methodConf.http);
     const request = axios.get(endpoint);
 
-    commit('onRequest');
+    this.onRequest(commit);
     request
-      .then(data => {
-        commit('onSuccess')
-        model.insertOrUpdate({
-          data,
-        });
-      })
-      .catch(error => commit('onError', error))
+      .then(data => this.onSuccess(commit, model, data))
+      .catch(error => this.onError(commit, error))
 
     return request;
   }
+
+  /**
+   * On Request Method
+   * @param {object} commit
+   */
+  static onRequest(commit) {
+    commit('onRequest');
+  }
+
+  /**
+   * On Successful Request Method
+   * @param {object} commit
+   * @param {object} model
+   * @param {object} data
+   */
+  static onSuccess(commit, model, data) {
+    commit('onSuccess')
+    model.insertOrUpdate({
+      data,
+    });
+  }
+
+  /**
+   * On Failed Request Method
+   * @param {object} commit
+   * @param {object} error
+   */
+  static onError(commit, error) {
+    commit('onError', error)
+  }
 }

src/actions/Get.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import Axios from '../orm/axios';
 import Action from './Action'
 import Context from '../common/context'
@@ -19,14 +20,58 @@ export default class Update extends Action {
     const axios =  new Axios(model.methodConf.http);
     const request = axios.put(endpoint, params.data);
 
+    this.onRequest(model, params);
     request
-      .then(data => {
-        model.update({
-          where: data.id,
-          data
-        })
-      })
+      .then(data => this.onSuccess(model, params, data))
+      .catch(error => this.onError(model, params, error))
 
     return request;
   }
+
+  /**
+   * On Request Method
+   * @param {object} model
+   * @param {object} params
+   */
+  static onRequest(model, params) {
+    model.update({
+      where: params.params.id,
+      data: {
+        $isUpdating: true,
+        $updateErrors: []
+      }
+    })
+  }
+
+  /**
+   * On Successful Request Method
+   * @param {object} model
+   * @param {object} params
+   * @param {object} data
+   */
+  static onSuccess(model, params, data) {
+    model.update({
+      where: params.params.id || data.id,
+      data: _.merge({}, data, {
+        $isUpdating: false,
+        $updateErrors: []
+      })
+    })
+  }
+
+  /**
+   * On Failed Request Method
+   * @param {object} model
+   * @param {object} params
+   * @param {object} error
+   */
+  static onError(model, params, error) {
+    model.update({
+      where: params.params.id,
+      data: {
+        $isUpdating: false,
+        $updateErrors: error
+      }
+    })
+  }
 }