Makes improvements to render of WOInfo component.

public/js/app.js

@@ -2037,6 +2037,31 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.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/CircleSpinner.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"] = ({
+  name: 'IntersectingCirclesSpinner',
+  props: {
+    color: {
+      type: String,
+      "default": '#fff'
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/WoInfoEditModal.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/WoInfoEditModal.vue?vue&type=script&lang=js& ***!
@@ -2094,7 +2119,7 @@ __webpack_require__.r(__webpack_exports__);
       // Copies object from prop, so it doesn't mutate the object
       // from the parent component. Parent component will be updated via
       // Websocket if updateWorkOrder is successful.
-      data: {},
+      data: JSON.parse(JSON.stringify(this.populateWith)),
       id: this.modalId,
       store: {},
       errors: []
@@ -2112,14 +2137,19 @@ __webpack_require__.r(__webpack_exports__);
       });
     }
   },
-  // The props are obtained in parent components via axios,
-  // so the values may change after the initial render, these
-  // Watchers fill in our initial values when the values of the
-  // props change. As a side effect if they are updated while we
-  // are editing they will change right underneath us, not sure
-  // probably will implement a notice when they change during edit
-  // with the option to view changes or override them or something
-  // that.
+  mounted: function mounted() {
+    this.store = {
+      'id': this.data.storeid,
+      'name': this.storeList[this.data.storeid]
+    };
+  },
+  // This was originally here because the populateWith info would originally
+  // not necessarily be loaded when this component was mounted. That is no
+  // longer the case as I now don't render the parent component until the
+  // ajax request is finised. The watch statements are still here to cover
+  // the case where someone else updates the populateWith values while
+  // someone is editing, although it probably should be edited so it doesn't
+  // immediately overwrite the unsaved edits of the current user.
   watch: {
     populateWith: function populateWith(value) {
       this.data = JSON.parse(JSON.stringify(this.populateWith));
@@ -2428,7 +2458,7 @@ __webpack_require__.r(__webpack_exports__);
   },
   beforeRouteEnter: function beforeRouteEnter(to, from, next) {
     if (localStorage.getItem('jwt')) {
-      return next('board');
+      return next('dashboard');
     }
 
     next();
@@ -2511,6 +2541,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_WorkOrderInfo_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/WorkOrderInfo.vue */ "./resources/js/components/WorkOrderInfo.vue");
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
 //
 //
 //
@@ -2607,16 +2638,21 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    WorkOrderInfo: _components_WorkOrderInfo_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+    WorkOrderInfo: _components_WorkOrderInfo_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
   },
   props: ['id'],
   data: function data() {
     return {
       workOrder: {},
-      stores: {}
+      stores: {},
+      woLoading: true,
+      storesLoading: true
     };
   },
   mounted: function mounted() {
@@ -2628,11 +2664,13 @@ __webpack_require__.r(__webpack_exports__);
     axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
     axios.get('/api/workorders/' + this.id).then(function (response) {
       _this.workOrder = response.data;
+      _this.woLoading = false;
     })["catch"](function (error) {
       console.log(error);
     });
     axios.get('/api/stores/').then(function (response) {
       _this.stores = response.data;
+      _this.storesLoading = false;
     })["catch"](function (error) {
       console.log(error);
     });
@@ -10122,6 +10160,25 @@ module.exports = closest;
 /******/ ]);
 });
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader??ref--6-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n.loader[data-v-9a543b64],\n.loader[data-v-9a543b64]:after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n.loader[data-v-9a543b64] {\n  margin: 60px auto;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-right: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-left: 1.1em solid #663399;\n  transform: translateZ(0);\n  -webkit-animation: load8-data-v-9a543b64 1.1s infinite linear;\n  animation: load8-data-v-9a543b64 1.1s infinite linear;\n}\n@-webkit-keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n@keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n", ""]);
+
+// exports
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Welcome.vue?vue&type=style&index=0&id=1ae8ae93&scoped=true&lang=css&":
@@ -48875,6 +48932,36 @@ runtime.setup(pusher_Pusher);
 
 /***/ }),
 
+/***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&":
+/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/style-loader!./node_modules/css-loader??ref--6-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& ***!
+  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+var content = __webpack_require__(/*! !../../../node_modules/css-loader??ref--6-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src??ref--6-2!../../../node_modules/vue-loader/lib??vue-loader-options!./CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& */ "./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&");
+
+if(typeof content === 'string') content = [[module.i, content, '']];
+
+var transform;
+var insertInto;
+
+
+
+var options = {"hmr":true}
+
+options.transform = transform
+options.insertInto = undefined;
+
+var update = __webpack_require__(/*! ../../../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options);
+
+if(content.locals) module.exports = content.locals;
+
+if(false) {}
+
+/***/ }),
+
 /***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Welcome.vue?vue&type=style&index=0&id=1ae8ae93&scoped=true&lang=css&":
 /*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/style-loader!./node_modules/css-loader??ref--6-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/Welcome.vue?vue&type=style&index=0&id=1ae8ae93&scoped=true&lang=css& ***!
@@ -49583,6 +49670,30 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true&":
+/*!****************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true& ***!
+  \****************************************************************************************************************************************************************************************************************************/
+/*! 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("div", { staticClass: "loader" }, [_vm._v("Loading...")])
+}
+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&":
@@ -49679,7 +49790,7 @@ var render = function() {
           attrs: { slot: "header", id: _vm.id + "Label" },
           slot: "header"
         },
-        [_vm._v("\n        Edit Work Order Information\n    ")]
+        [_vm._v("\r\n        Edit Work Order Information\r\n    ")]
       ),
       _vm._v(" "),
       _c("div", { attrs: { slot: "body" }, slot: "body" }, [
@@ -50154,11 +50265,26 @@ var render = function() {
         _vm._l(_vm.workOrders, function(workOrder, index) {
           return _c("div", { key: workOrder.woid, staticClass: "col-md-4" }, [
             _c("div", { staticClass: "card" }, [
-              _c("div", { staticClass: "card-header" }, [
-                _c("h4", { staticClass: "card-title" }, [
-                  _vm._v(_vm._s(workOrder.woid))
-                ])
-              ]),
+              _c(
+                "div",
+                { staticClass: "card-header" },
+                [
+                  _c(
+                    "router-link",
+                    {
+                      staticClass: "h4 card-title",
+                      attrs: {
+                        to: {
+                          name: "workorders",
+                          params: { id: workOrder.woid }
+                        }
+                      }
+                    },
+                    [_vm._v(_vm._s(workOrder.woid))]
+                  )
+                ],
+                1
+              ),
               _vm._v(" "),
               _c("div", { staticClass: "card-body card-body-dark" }, [
                 _c("div", [
@@ -50402,9 +50528,14 @@ var render = function() {
                   }
                 },
                 [
-                  _c("work-order-info", {
-                    attrs: { "work-order": _vm.workOrder, stores: _vm.stores }
-                  })
+                  !_vm.woLoading && !_vm.storesLoading
+                    ? _c("work-order-info", {
+                        attrs: {
+                          "work-order": _vm.workOrder,
+                          stores: _vm.stores
+                        }
+                      })
+                    : _c("circle-spinner", { attrs: { color: "#663399" } })
                 ],
                 1
               ),
@@ -65889,6 +66020,94 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/CircleSpinner.vue":
+/*!***************************************************!*\
+  !*** ./resources/js/components/CircleSpinner.vue ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true& */ "./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true&");
+/* harmony import */ var _CircleSpinner_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleSpinner.vue?vue&type=script&lang=js& */ "./resources/js/components/CircleSpinner.vue?vue&type=script&lang=js&");
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _CircleSpinner_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _CircleSpinner_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+/* harmony import */ var _CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& */ "./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __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_3__["default"])(
+  _CircleSpinner_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  "9a543b64",
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/CircleSpinner.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/CircleSpinner.vue?vue&type=script&lang=js&":
+/*!****************************************************************************!*\
+  !*** ./resources/js/components/CircleSpinner.vue?vue&type=script&lang=js& ***!
+  \****************************************************************************/
+/*! no static exports found */
+/***/ (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_CircleSpinner_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!./CircleSpinner.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.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_CircleSpinner_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&":
+/*!************************************************************************************************************!*\
+  !*** ./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& ***!
+  \************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/style-loader!../../../node_modules/css-loader??ref--6-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src??ref--6-2!../../../node_modules/vue-loader/lib??vue-loader-options!./CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css& */ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=style&index=0&id=9a543b64&scoped=true&lang=css&");
+/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_style_loader_index_js_node_modules_css_loader_index_js_ref_6_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_vue_loader_lib_index_js_vue_loader_options_CircleSpinner_vue_vue_type_style_index_0_id_9a543b64_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
+
+/***/ }),
+
+/***/ "./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true&":
+/*!**********************************************************************************************!*\
+  !*** ./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true& ***!
+  \**********************************************************************************************/
+/*! 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_CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___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!./CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/CircleSpinner.vue?vue&type=template&id=9a543b64&scoped=true&");
+/* 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_CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___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_CircleSpinner_vue_vue_type_template_id_9a543b64_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Modal.vue":

resources/js/components/CircleSpinner.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="loader">Loading...</div>
+</template>
+
+<script>
+  export default {
+    name: 'IntersectingCirclesSpinner',
+
+    props: {
+      color: {
+        type: String,
+        default: '#fff'
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #663399;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>

resources/js/components/WoInfoEditModal.vue

@@ -45,7 +45,7 @@ export default {
             // Copies object from prop, so it doesn't mutate the object
             // from the parent component. Parent component will be updated via
             // Websocket if updateWorkOrder is successful.
-            data: {},
+            data: JSON.parse(JSON.stringify(this.populateWith)),
             id: this.modalId,
             store: {},
             errors: []
@@ -59,14 +59,19 @@ export default {
                 .catch((error) => { this.errors = JSON.parse(error.response.request.response).errors; });
         }
     },
-    // The props are obtained in parent components via axios,
-    // so the values may change after the initial render, these
-    // Watchers fill in our initial values when the values of the
-    // props change. As a side effect if they are updated while we
-    // are editing they will change right underneath us, not sure
-    // probably will implement a notice when they change during edit
-    // with the option to view changes or override them or something
-    // that.
+    mounted () {
+        this.store = {
+            'id': this.data.storeid,
+            'name': this.storeList[this.data.storeid]
+        }
+    },
+    // This was originally here because the populateWith info would originally
+    // not necessarily be loaded when this component was mounted. That is no
+    // longer the case as I now don't render the parent component until the
+    // ajax request is finised. The watch statements are still here to cover
+    // the case where someone else updates the populateWith values while
+    // someone is editing, although it probably should be edited so it doesn't
+    // immediately overwrite the unsaved edits of the current user.
     watch: {
         populateWith: function (value) {
             this.data = JSON.parse(JSON.stringify(this.populateWith))

resources/js/views/Dashboard.vue

@@ -5,7 +5,7 @@
                 <div class="col-md-4" v-for="(workOrder, index) in workOrders" :key="workOrder.woid">
                     <div class="card">
                         <div class="card-header">
-                            <h4 class="card-title">{{workOrder.woid}}</h4>
+                            <router-link :to="{ name: 'workorders', params: { id: workOrder.woid } }" class="h4 card-title">{{workOrder.woid}}</router-link>
                         </div>
                         <div class="card-body card-body-dark">
                             <div>

resources/js/views/WorkOrder.vue

@@ -62,7 +62,8 @@
                     <div class='card-body'>
                         <div class='tab-content'>
                             <div class="tab-pane active" id="workordersumm" role="tabpanel" aria-labelledby="workordersumm-tab">
-                                <work-order-info :work-order="workOrder" :stores="stores"></work-order-info>
+                                <work-order-info v-if="!woLoading && !storesLoading" :work-order="workOrder" :stores="stores"></work-order-info>
+                                <circle-spinner v-else :color="'#663399'"></circle-spinner>
                             </div>
                             <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
                                 TODO 2
@@ -96,15 +97,19 @@
 </template>
 <script>
 import WorkOrderInfo from '../components/WorkOrderInfo.vue'
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
     components: {
         WorkOrderInfo,
+        CircleSpinner,
     },
     props: ['id'],
     data () {
         return {
             workOrder: {},
             stores: {},
+            woLoading: true,
+            storesLoading: true,
         }
     },
     mounted () {
@@ -116,12 +121,14 @@ export default {
 
         axios.get('/api/workorders/'+this.id).then(response => {
             this.workOrder = response.data
+            this.woLoading = false
         }).catch(error => {
             console.log(error)
         })
 
         axios.get('/api/stores/').then(response => {
             this.stores = response.data
+            this.storesLoading = false
         }).catch(error => {
             console.log(error)
         })