Readded Error handling to SPA.

public/js/app.js

@@ -2549,6 +2549,36 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ErrorList.vue?vue&type=script&lang=js&":
+/*!********************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ErrorList.vue?vue&type=script&lang=js& ***!
+  \********************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
+//
+//
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['errors'],
+  data: function data() {
+    return {
+      errorList: this.errors
+    };
+  },
+  watch: {
+    errors: function errors(newErrors) {
+      this.errorList = newErrors;
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/NoteFormModal.vue?vue&type=script&lang=js&":
 /*!************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/NoteFormModal.vue?vue&type=script&lang=js& ***!
@@ -2750,8 +2780,10 @@ __webpack_require__.r(__webpack_exports__);
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_Modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Modal */ "./resources/js/components/Modal.vue");
-/* harmony import */ var _components_AutocompleteCustomDropdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/AutocompleteCustomDropdown */ "./resources/js/components/AutocompleteCustomDropdown.vue");
+/* harmony import */ var _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Modal.vue */ "./resources/js/components/Modal.vue");
+/* harmony import */ var _components_AutocompleteCustomDropdown_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/AutocompleteCustomDropdown.vue */ "./resources/js/components/AutocompleteCustomDropdown.vue");
+/* harmony import */ var _components_ErrorList_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/ErrorList.vue */ "./resources/js/components/ErrorList.vue");
+//
 //
 //
 //
@@ -2785,12 +2817,16 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    Modal: _components_Modal__WEBPACK_IMPORTED_MODULE_0__["default"],
-    AutocompleteCustomDropdown: _components_AutocompleteCustomDropdown__WEBPACK_IMPORTED_MODULE_1__["default"]
+    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
+    AutocompleteCustomDropdown: _components_AutocompleteCustomDropdown_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+    ErrorList: _components_ErrorList_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
   },
   props: {
     populateWith: {
@@ -2814,17 +2850,22 @@ __webpack_require__.r(__webpack_exports__);
       data: JSON.parse(JSON.stringify(this.populateWith)),
       id: this.modalId,
       store: {},
-      errors: []
+      errors: [],
+      woInfoSaving: false
     };
   },
   methods: {
     updateWorkOrder: function updateWorkOrder() {
       var _this = this;
 
+      woInfoSaving: true;
+
       this.data.storeid = this.store.id;
       axios.put('/api/workorders/' + this.data.woid, this.data).then(function (response) {
+        _this.woInfoSaving = false;
         $('#workordereditModal').modal('hide');
       })["catch"](function (error) {
+        _this.woInfoSaving = false;
         _this.errors = JSON.parse(error.response.request.response).errors;
       });
     }
@@ -51297,6 +51338,39 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb&":
+/*!************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb& ***!
+  \************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "ul",
+    { staticClass: "list-unstyled" },
+    _vm._l(_vm.errorList, function(error) {
+      return _c("li", { key: error, staticClass: "text-danger" }, [
+        _vm._v(" " + _vm._s(error) + " ")
+      ])
+    }),
+    0
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2&":
@@ -51739,7 +51813,7 @@ var render = function() {
               }
             }),
             _vm._v(" "),
-            _c("errorlist", { attrs: { errors: _vm.errors.probdesc } })
+            _c("error-list", { attrs: { errors: _vm.errors.probdesc } })
           ],
           1
         ),
@@ -51777,7 +51851,7 @@ var render = function() {
               }
             }),
             _vm._v(" "),
-            _c("errorlist", { attrs: { errors: _vm.errors.suggested } })
+            _c("error-list", { attrs: { errors: _vm.errors.suggested } })
           ],
           1
         ),
@@ -51824,7 +51898,12 @@ var render = function() {
               }
             }
           },
-          [_vm._v("Save")]
+          [
+            !_vm.woInfoSaving
+              ? _c("div", [_vm._v("Save")])
+              : _c("circle-spinner", { attrs: { size: 2 } })
+          ],
+          1
         )
       ])
     ]
@@ -68463,6 +68542,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/ErrorList.vue":
+/*!***********************************************!*\
+  !*** ./resources/js/components/ErrorList.vue ***!
+  \***********************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ErrorList.vue?vue&type=template&id=48c089eb& */ "./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb&");
+/* harmony import */ var _ErrorList_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ErrorList.vue?vue&type=script&lang=js& */ "./resources/js/components/ErrorList.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _ErrorList_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/ErrorList.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/ErrorList.vue?vue&type=script&lang=js&":
+/*!************************************************************************!*\
+  !*** ./resources/js/components/ErrorList.vue?vue&type=script&lang=js& ***!
+  \************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ErrorList_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./ErrorList.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ErrorList.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ErrorList_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb&":
+/*!******************************************************************************!*\
+  !*** ./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb& ***!
+  \******************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./ErrorList.vue?vue&type=template&id=48c089eb& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ErrorList.vue?vue&type=template&id=48c089eb&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ErrorList_vue_vue_type_template_id_48c089eb___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Modal.vue":

resources/js/components/WoInfoEditModal.vue

@@ -7,12 +7,12 @@
         <div class="form-group">
             <label for="probdesc">Problem Description</label>
             <textarea id="probdesc" name="probdesc" :class="{'form-control': true, 'is-invalid': errors.probdesc}" v-model="data.probdesc"></textarea>
-            <errorlist :errors="errors.probdesc"></errorlist>
+            <error-list :errors="errors.probdesc"></error-list>
         </div>
         <div class="form-group">
             <label for="suggested">Suggested Solution</label>
             <textarea id="suggested" name="suggested" :class="{'form-control': true, 'is-invalid': errors.suggested}" v-model="data.suggested"></textarea>
-            <errorlist :errors="errors.suggested"></errorlist>
+            <error-list :errors="errors.suggested"></error-list>
         </div>
         <div class="form-group">
             <label for="storelist">Store</label>
@@ -27,17 +27,22 @@
 
     <div slot="footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" @click="updateWorkOrder()">Save</button>
+        <button type="button" class="btn btn-primary" @click="updateWorkOrder()">
+            <div v-if="!woInfoSaving">Save</div>
+            <circle-spinner v-else :size="2"></circle-spinner>
+        </button>
     </div>
 </modal>
 </template>
 <script>
-import Modal from '../components/Modal'
-import AutocompleteCustomDropdown from '../components/AutocompleteCustomDropdown'
+import Modal from '../components/Modal.vue'
+import AutocompleteCustomDropdown from '../components/AutocompleteCustomDropdown.vue'
+import ErrorList from '../components/ErrorList.vue'
 export default {
     components: {
         Modal,
-        AutocompleteCustomDropdown
+        AutocompleteCustomDropdown,
+        ErrorList
     },
     props: {
         populateWith: {
@@ -61,15 +66,23 @@ export default {
             data: JSON.parse(JSON.stringify(this.populateWith)),
             id: this.modalId,
             store: {},
-            errors: []
+            errors: [],
+            woInfoSaving: false
         }
     },
     methods: {
         updateWorkOrder() {
+            woInfoSaving: true
             this.data.storeid = this.store.id
             axios.put('/api/workorders/' + this.data.woid, this.data)
-                .then((response) => { $('#workordereditModal').modal('hide'); })
-                .catch((error) => { this.errors = JSON.parse(error.response.request.response).errors; });
+                .then((response) => {
+                    this.woInfoSaving = false
+                    $('#workordereditModal').modal('hide') 
+                })
+                .catch((error) => {
+                    this.woInfoSaving = false
+                    this.errors = JSON.parse(error.response.request.response).errors
+                });
         }
     },
     mounted () {