Adds modal dialog for editing work order info.

app/Http/Controllers/Api/WorkOrdersController.php

@@ -70,7 +70,11 @@ class WorkOrdersController extends Controller
      */
     public function update(Request $request, WorkOrder $workOrder)
     {
-        //
+        $workOrder->probdesc = $request->input('probdesc');
+        $workOrder->suggested = $request->input('suggested');
+        $workOrder->save();
+        event(new \App\Events\WorkOrderUpdated($workOrder));
+        return response()->json($workOrder, 200);
     }
 
     /**

public/css/app.css

@@ -16878,3 +16878,7 @@ a.text-dark:focus {
   }
 }
 
+.modal-header {
+  display: block;
+}
+

public/js/app.js

@@ -2100,13 +2100,35 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
   props: ['workOrder'],
   data: function data() {
     return {
-      data: JSON.parse(this.workOrder)
+      data: JSON.parse(this.workOrder),
+      showModal: false
     };
   },
   mounted: function mounted() {
@@ -2115,6 +2137,12 @@ __webpack_require__.r(__webpack_exports__);
     Echo.channel('work-orders').listen('WorkOrderUpdated', function (e) {
       _this.data = JSON.parse(e.data);
     });
+  },
+  methods: {
+    updateWorkOrder: function updateWorkOrder() {
+      axios.put('/api/workorder/' + this.data.woid, this.data).then(function (response) {})["catch"](function (error) {});
+      $('#workordereditModal').modal('hide');
+    }
   }
 });
 
@@ -48548,6 +48576,67 @@ 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=478d961c&":
+/*!********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/modal.vue?vue&type=template&id=478d961c& ***!
+  \********************************************************************************************************************************************************************************************************/
+/*! 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: "modal fade" }, [
+    _c(
+      "div",
+      { staticClass: "modal-dialog modal-lg", attrs: { role: "document" } },
+      [
+        _c("div", { staticClass: "modal-content" }, [
+          _c(
+            "div",
+            { staticClass: "modal-header" },
+            [_vm._m(0), _vm._v(" "), _vm._t("header")],
+            2
+          ),
+          _vm._v(" "),
+          _c("div", { staticClass: "modal-body" }, [_vm._t("body")], 2),
+          _vm._v(" "),
+          _c("div", { staticClass: "modal-footer" }, [_vm._t("footer")], 2)
+        ])
+      ]
+    )
+  ])
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c(
+      "button",
+      {
+        staticClass: "close",
+        attrs: {
+          type: "button",
+          "data-dismiss": "modal",
+          "aria-label": "Close"
+        }
+      },
+      [_c("span", { attrs: { "aria-hidden": "true" } }, [_vm._v("×")])]
+    )
+  }
+]
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/notes.vue?vue&type=template&id=73d141f4&":
@@ -48667,81 +48756,204 @@ var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", [
-    _c("p", [
-      _c("i", { staticClass: "fas fa-fw fa-info-circle" }),
+  return _c(
+    "div",
+    [
+      _c(
+        "modal",
+        {
+          attrs: {
+            id: "workordereditModal",
+            tabindex: "-1",
+            role: "dialog",
+            "aria-labelledby": "workordereditModalLabel"
+          }
+        },
+        [
+          _c(
+            "h5",
+            {
+              staticClass: "modal-title",
+              attrs: { slot: "header", id: "workordereditModalLabel" },
+              slot: "header"
+            },
+            [_vm._v("\n            Edit Work Order Information\n        ")]
+          ),
+          _vm._v(" "),
+          _c("div", { attrs: { slot: "body" }, slot: "body" }, [
+            _c("div", { staticClass: "form-group" }, [
+              _c("label", { attrs: { for: "probdesc" } }, [
+                _vm._v("Problem Description")
+              ]),
+              _vm._v(" "),
+              _c("textarea", {
+                directives: [
+                  {
+                    name: "model",
+                    rawName: "v-model",
+                    value: _vm.data.probdesc,
+                    expression: "data.probdesc"
+                  }
+                ],
+                staticClass: "form-control",
+                attrs: { id: "probdesc", name: "probdesc" },
+                domProps: { value: _vm.data.probdesc },
+                on: {
+                  input: function($event) {
+                    if ($event.target.composing) {
+                      return
+                    }
+                    _vm.$set(_vm.data, "probdesc", $event.target.value)
+                  }
+                }
+              })
+            ]),
+            _vm._v(" "),
+            _c("div", { staticClass: "form-group" }, [
+              _c("label", { attrs: { for: "suggested" } }, [
+                _vm._v("Suggested Solution")
+              ]),
+              _vm._v(" "),
+              _c("textarea", {
+                directives: [
+                  {
+                    name: "model",
+                    rawName: "v-model",
+                    value: _vm.data.suggested,
+                    expression: "data.suggested"
+                  }
+                ],
+                staticClass: "form-control",
+                attrs: { id: "suggested", name: "suggested" },
+                domProps: { value: _vm.data.suggested },
+                on: {
+                  input: function($event) {
+                    if ($event.target.composing) {
+                      return
+                    }
+                    _vm.$set(_vm.data, "suggested", $event.target.value)
+                  }
+                }
+              })
+            ])
+          ]),
+          _vm._v(" "),
+          _c("div", { attrs: { slot: "footer" }, slot: "footer" }, [
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-secondary",
+                attrs: { type: "button", "data-dismiss": "modal" }
+              },
+              [_vm._v("Close")]
+            ),
+            _vm._v(" "),
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-primary",
+                attrs: { type: "button" },
+                on: {
+                  click: function($event) {
+                    return _vm.updateWorkOrder()
+                  }
+                }
+              },
+              [_vm._v("Save")]
+            )
+          ])
+        ]
+      ),
       _vm._v(" "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.probdesc) } })
-    ]),
-    _vm._v(" "),
-    _c("p", [
-      _c("i", { staticClass: "far fa-fw fa-lightbulb" }),
+      _c("p", [
+        _c("i", { staticClass: "fas fa-fw fa-info-circle" }),
+        _vm._v(" "),
+        _c("span", { domProps: { textContent: _vm._s(this.data.probdesc) } })
+      ]),
       _vm._v(" "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.suggested) } })
-    ]),
-    _vm._v(" "),
-    _c("p", [
-      _c("i", { staticClass: "fas fa-fw fa-paste" }),
+      _c("p", [
+        _c("i", { staticClass: "far fa-fw fa-lightbulb" }),
+        _vm._v(" "),
+        _c("span", { domProps: { textContent: _vm._s(this.data.suggested) } })
+      ]),
       _vm._v(" "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.woid) } })
-    ]),
-    _vm._v(" "),
-    _c("p", [
-      _c("i", { staticClass: "fas fa-fw fa-building" }),
+      _c("p", [
+        _c("i", { staticClass: "fas fa-fw fa-paste" }),
+        _vm._v(" "),
+        _c("span", { domProps: { textContent: _vm._s(this.data.woid) } })
+      ]),
       _vm._v(" "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.storeid) } })
-    ]),
-    _vm._v(" "),
-    _c("p", [
-      _c("i", { staticClass: "fas fa-fw fa-sign-in-alt" }),
+      _c("p", [
+        _c("i", { staticClass: "fas fa-fw fa-building" }),
+        _vm._v(" "),
+        _c("span", { domProps: { textContent: _vm._s(this.data.storeid) } })
+      ]),
+      _vm._v(" "),
+      _c("p", [
+        _c("i", { staticClass: "fas fa-fw fa-sign-in-alt" }),
+        _vm._v(" "),
+        _c(
+          "span",
+          {
+            staticClass: "dashed-underline",
+            attrs: {
+              "data-toggle": "tooltip",
+              "data-placement": "bottom",
+              title: this.getHRDate(this.data.dropdate)
+            }
+          },
+          [
+            _vm._v(
+              "\n            " +
+                _vm._s(Math.floor(this.daysSinceToday(this.data.dropdate))) +
+                " days ago\n        "
+            )
+          ]
+        )
+      ]),
+      _vm._v(" "),
+      _c("p", [
+        _c("i", { staticClass: "fas fa-sign-out-alt" }),
+        _vm._v(" "),
+        !this.isZero(this.data.pickupdate)
+          ? _c(
+              "span",
+              {
+                staticClass: "dashed-underline",
+                attrs: {
+                  "data-toggle": "tooltip",
+                  "data-placement": "bottom",
+                  tittle: this.getHRDate(this.data.pickupdate)
+                }
+              },
+              [
+                _vm._v(
+                  "\n            " +
+                    _vm._s(
+                      Math.floor(this.daysSinceToday(this.data.pickupdate))
+                    ) +
+                    " days ago\n        "
+                )
+              ]
+            )
+          : _vm._e()
+      ]),
       _vm._v(" "),
       _c(
-        "span",
+        "button",
         {
-          staticClass: "dashed-underline",
+          staticClass: "btn btn-primary",
           attrs: {
-            "data-toggle": "tooltip",
-            "data-placement": "bottom",
-            title: this.getHRDate(this.data.dropdate)
+            type: "button",
+            "data-toggle": "modal",
+            "data-target": "#workordereditModal"
           }
         },
-        [
-          _vm._v(
-            "\n            " +
-              _vm._s(Math.floor(this.daysSinceToday(this.data.dropdate))) +
-              " days ago\n        "
-          )
-        ]
+        [_vm._v("Edit")]
       )
-    ]),
-    _vm._v(" "),
-    _c("p", [
-      _c("i", { staticClass: "fas fa-sign-out-alt" }),
-      _vm._v(" "),
-      !this.isZero(this.data.pickupdate)
-        ? _c(
-            "span",
-            {
-              staticClass: "dashed-underline",
-              attrs: {
-                "data-toggle": "tooltip",
-                "data-placement": "bottom",
-                tittle: this.getHRDate(this.data.pickupdate)
-              }
-            },
-            [
-              _vm._v(
-                "\n            " +
-                  _vm._s(
-                    Math.floor(this.daysSinceToday(this.data.pickupdate))
-                  ) +
-                  " days ago\n        "
-              )
-            ]
-          )
-        : _vm._e()
-    ])
-  ])
+    ],
+    1
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -60941,6 +61153,7 @@ Vue.component('woinfo', __webpack_require__(/*! ./components/woinfo.vue */ "./re
 Vue.component('assetinfo', __webpack_require__(/*! ./components/assetinfo.vue */ "./resources/js/components/assetinfo.vue")["default"]);
 Vue.component('credential', __webpack_require__(/*! ./components/credential.vue */ "./resources/js/components/credential.vue")["default"]);
 Vue.component('notes', __webpack_require__(/*! ./components/notes.vue */ "./resources/js/components/notes.vue")["default"]);
+Vue.component('modal', __webpack_require__(/*! ./components/modal.vue */ "./resources/js/components/modal.vue")["default"]);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -61219,6 +61432,59 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/modal.vue":
+/*!*******************************************!*\
+  !*** ./resources/js/components/modal.vue ***!
+  \*******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _modal_vue_vue_type_template_id_478d961c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modal.vue?vue&type=template&id=478d961c& */ "./resources/js/components/modal.vue?vue&type=template&id=478d961c&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+var script = {}
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_1__["default"])(
+  script,
+  _modal_vue_vue_type_template_id_478d961c___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _modal_vue_vue_type_template_id_478d961c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/modal.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/modal.vue?vue&type=template&id=478d961c&":
+/*!**************************************************************************!*\
+  !*** ./resources/js/components/modal.vue?vue&type=template&id=478d961c& ***!
+  \**************************************************************************/
+/*! 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_modal_vue_vue_type_template_id_478d961c___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!./modal.vue?vue&type=template&id=478d961c& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/modal.vue?vue&type=template&id=478d961c&");
+/* 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_modal_vue_vue_type_template_id_478d961c___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_modal_vue_vue_type_template_id_478d961c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/notes.vue":

resources/js/app.js

@@ -27,6 +27,7 @@ Vue.component('woinfo', require('./components/woinfo.vue').default);
 Vue.component('assetinfo', require('./components/assetinfo.vue').default);
 Vue.component('credential', require('./components/credential.vue').default);
 Vue.component('notes', require('./components/notes.vue').default);
+Vue.component('modal', require('./components/modal.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/modal.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="modal fade">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <slot name="header"></slot>
+                </div>
+                <div class="modal-body">
+                    <slot name="body"></slot>
+                </div>
+                <div class="modal-footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/components/woinfo.vue

@@ -1,5 +1,25 @@
 <template>
     <div>
+        <modal id="workordereditModal" tabindex="-1" role="dialog" aria-labelledby="workordereditModalLabel">
+            <h5 slot="header" class="modal-title" id="workordereditModalLabel">
+                Edit Work Order Information
+            </h5>
+            <div slot="body">
+                <div class="form-group">
+                    <label for="probdesc">Problem Description</label>
+                    <textarea id="probdesc" name="probdesc" class="form-control" v-model="data.probdesc"></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="suggested">Suggested Solution</label>
+                    <textarea id="suggested" name="suggested" class="form-control" v-model="data.suggested"></textarea>
+                </div>
+            </div>
+
+            <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>
+            </div>
+        </modal>
         <p><i class="fas fa-fw fa-info-circle"></i> <span v-text="this.data.probdesc"></span></p>
         <p><i class="far fa-fw fa-lightbulb"></i> <span v-text="this.data.suggested"></span></p>
         <p><i class="fas fa-fw fa-paste"></i> <span v-text="this.data.woid"></span></p>
@@ -14,6 +34,7 @@
                 {{ Math.floor(this.daysSinceToday(this.data.pickupdate)) }} days ago
             </span>
         </p>
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#workordereditModal">Edit</button>
     </div>
 </template>
 <script>
@@ -24,6 +45,7 @@
         data() {
             return {
                 data: JSON.parse(this.workOrder),
+                showModal:false
             }
         },
         mounted() {
@@ -31,6 +53,14 @@
                 .listen('WorkOrderUpdated', (e) => {
                     this.data = JSON.parse(e.data);
                 });
+        },
+        methods: {
+            updateWorkOrder() {
+                axios.put('/api/workorder/' + this.data.woid, this.data)
+                    .then((response) => {})
+                    .catch((error) => {});
+                $('#workordereditModal').modal('hide');
+            }
         }
     }
 </script>

resources/sass/app.scss

@@ -65,3 +65,7 @@
         visibility: visible;
     }
 }
+
+.modal-header {
+    display: block;
+}

resources/views/workorders/show.blade.php

@@ -70,7 +70,6 @@
                     <div class='tab-content'>
                         <div class="tab-pane active" id="workorderinfo" role="tabpanel" aria-labelledby="workorderinfo-tab">
                             <woinfo work-order="{{$workOrder}}"></woinfo>
-                            <a href="{{ route('editwo', ['workOrder' => $workOrder]) }}" class="btn btn-primary">Edit</a>
                         </div>
                         <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
                             TODO 2

routes/api.php

@@ -18,3 +18,4 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
 });
 
 Route::get('/workorder/{workOrder}', 'Api\WorkOrdersController@show');
+Route::put('/workorder/{workOrder}', 'Api\WorkOrdersController@update');