Adapts Work Order Notes for SPA.

app/Http/Controllers/Api/WorkOrdersController.php

@@ -55,6 +55,10 @@ class WorkOrdersController extends Controller
         return response()->json($workOrder->asset);
     }
 
+    public function notes(WorkOrder $workOrder) {
+        return response()->json($workOrder->notes->values(), 200);
+    }
+
     /**
      * Update the specified resource in storage.
      *

public/js/app.js

@@ -2281,7 +2281,7 @@ __webpack_require__.r(__webpack_exports__);
       required: true
     },
     descriptions: {
-      type: Array,
+      type: Object,
       required: true
     }
   },
@@ -2549,6 +2549,216 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./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& ***!
+  \************************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Modal.vue */ "./resources/js/components/Modal.vue");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+  components: {
+    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+  },
+  props: {
+    populateWith: {
+      type: Object,
+      require: true
+    },
+    modalId: {
+      type: String,
+      require: true
+    },
+    noteType: {
+      type: Number
+    },
+    noteUser: {
+      type: String
+    },
+    woid: {
+      type: Number
+    }
+  },
+  data: function data() {
+    return {
+      note: JSON.parse(JSON.stringify(this.populateWith))
+    };
+  },
+  methods: {
+    updateNote: function updateNote(note) {
+      axios.put('/api/workorders/notes/' + note.noteid, note).then(function (response) {
+        hideModal();
+      });
+    },
+    hideModal: function hideModal() {
+      $('#' + this.modalId).modal('hide');
+    }
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Notes.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/Notes.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 _mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mixins/dateMixin */ "./resources/js/mixins/dateMixin.js");
+/* harmony import */ var _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/NoteFormModal.vue */ "./resources/js/components/NoteFormModal.vue");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+  components: {
+    NoteFormModal: _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
+  },
+  mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
+  props: {
+    initialnotes: {
+      type: Array,
+      "default": []
+    },
+    authusername: {
+      type: String,
+      required: true
+    },
+    noteType: {
+      type: Number,
+      required: true
+    },
+    woid: {
+      type: String,
+      required: true
+    }
+  },
+  data: function data() {
+    return {
+      notes: this.initialnotes,
+      newNote: {
+        notetype: this.noteType,
+        thenote: '',
+        noteuser: this.authusername,
+        woid: this.woid
+      }
+    };
+  },
+  computed: {
+    noteOrders: function noteOrders() {
+      return this.getNoteOrders(this.notes);
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    Echo.channel('wonotes.' + this.noteType + '.' + this.woid).listen('WorkOrderNoteAdded', function (e) {
+      _this.notes.push(e.note);
+    }).listen('WorkOrderNoteEdited', function (e) {
+      var index = _this.notes.findIndex(function (note) {
+        return note.noteid === e.note.noteid;
+      });
+
+      _this.notes[index] = e.note;
+    }).listen('WorkOrderNoteDeleted', function (e) {
+      var index = _this.notes.findIndex(function (note) {
+        return note.noteid === e.noteid;
+      });
+
+      _this.notes.splice(index, 1);
+    });
+  },
+  methods: {
+    createNote: function createNote() {
+      var _this2 = this;
+
+      axios.post('/api/workorders/notes', this.newNote).then(function (response) {
+        $('#note' + _this2.noteType + 'add').collapse('hide');
+        _this2.newNote.thenote = '';
+      });
+    },
+    getNoteOrders: function getNoteOrders(notes) {
+      var noteOrders = [];
+      notes.forEach(function (note, index) {
+        if (index === 0) {
+          noteOrders[index] = 'order-first';
+        } else if (note.noteuser !== notes[index - 1].noteuser) {
+          if (noteOrders[index - 1] === 'order-first') {
+            noteOrders[index] = 'order-last';
+          } else {
+            noteOrders[index] = 'order-first';
+          }
+        } else {
+          noteOrders[index] = noteOrders[index - 1];
+        }
+      });
+      return noteOrders;
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./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& ***!
@@ -2606,7 +2816,7 @@ __webpack_require__.r(__webpack_exports__);
       required: true
     },
     storeList: {
-      type: Array,
+      type: Object,
       required: true
     },
     modalId: {
@@ -3054,6 +3264,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_AssetInfo_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/AssetInfo.vue */ "./resources/js/components/AssetInfo.vue");
 /* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
 /* harmony import */ var _components_CredentialList_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/CredentialList.vue */ "./resources/js/components/CredentialList.vue");
+/* harmony import */ var _components_Notes_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Notes.vue */ "./resources/js/components/Notes.vue");
+//
 //
 //
 //
@@ -3153,6 +3365,8 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+
 
 
 
@@ -3162,11 +3376,12 @@ __webpack_require__.r(__webpack_exports__);
     WorkOrderInfo: _components_WorkOrderInfo_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
     AssetInfo: _components_AssetInfo_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
     CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
-    CredentialList: _components_CredentialList_vue__WEBPACK_IMPORTED_MODULE_3__["default"]
+    CredentialList: _components_CredentialList_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
+    Notes: _components_Notes_vue__WEBPACK_IMPORTED_MODULE_4__["default"]
   },
   props: {
     id: {
-      type: Number,
+      type: String,
       required: true
     }
   },
@@ -3177,13 +3392,32 @@ __webpack_require__.r(__webpack_exports__);
       stores: {},
       credentials: {},
       credentialDescriptions: {},
+      workOrderNotes: [],
       woLoading: true,
       assetLoading: true,
       storesLoading: true,
       credentialsLoading: true,
-      credentialDescriptionsLoading: true
+      credentialDescriptionsLoading: true,
+      workOrderNotesLoading: true,
+      authUser: localStorage.getItem('user')
     };
   },
+  computed: {
+    publicNotes: function publicNotes() {
+      var notes = [];
+      notes = this.workOrderNotes.filter(function (note) {
+        return note.notetype === 0;
+      });
+      return notes;
+    },
+    privateNotes: function privateNotes() {
+      var notes = [];
+      notes = this.workOrderNotes.filter(function (note) {
+        return note.notetype === 1;
+      });
+      return notes;
+    }
+  },
   mounted: function mounted() {
     var _this = this;
 
@@ -3232,6 +3466,12 @@ __webpack_require__.r(__webpack_exports__);
     })["catch"](function (error) {
       console.log(error);
     });
+    axios.get("/api/workorders/".concat(this.id, "/notes")).then(function (response) {
+      _this.workOrderNotes = response.data;
+      _this.workOrderNotesLoading = false;
+    })["catch"](function (error) {
+      console.log(error);
+    });
     Echo.channel('work-order.' + this.id).listen('WorkOrderUpdated', function (e) {
       _this.workOrder = e.data;
     });
@@ -51119,6 +51359,315 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c&":
+/*!****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c& ***!
+  \****************************************************************************************************************************************************************************************************************/
+/*! 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(
+    "modal",
+    {
+      attrs: {
+        id: _vm.modalId,
+        tabindex: "-1",
+        role: "dialog",
+        "aria-labelledby": _vm.modalId + "Label"
+      }
+    },
+    [
+      _c(
+        "h5",
+        {
+          staticClass: "modal-title",
+          attrs: { slot: "header", id: _vm.modalId + "Label" },
+          slot: "header"
+        },
+        [_vm._v("\n                Edit Note\n            ")]
+      ),
+      _vm._v(" "),
+      _c("div", { attrs: { slot: "body" }, slot: "body" }, [
+        _c("div", { staticClass: "form-group" }, [
+          _c("label", { attrs: { for: "content" } }, [_vm._v("Content")]),
+          _vm._v(" "),
+          _c("textarea", {
+            directives: [
+              {
+                name: "model",
+                rawName: "v-model",
+                value: _vm.note.thenote,
+                expression: "note.thenote"
+              }
+            ],
+            staticClass: "form-control",
+            attrs: {
+              name: "content" + _vm.note.noteid,
+              id: "content" + _vm.note.noteid
+            },
+            domProps: { value: _vm.note.thenote },
+            on: {
+              input: function($event) {
+                if ($event.target.composing) {
+                  return
+                }
+                _vm.$set(_vm.note, "thenote", $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.updateNote(_vm.note)
+              }
+            }
+          },
+          [_vm._v("Save")]
+        )
+      ])
+    ]
+  )
+}
+var staticRenderFns = []
+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=3d897ee6&":
+/*!********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Notes.vue?vue&type=template&id=3d897ee6& ***!
+  \********************************************************************************************************************************************************************************************************/
+/*! 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" },
+    [
+      _c("div", { staticClass: "row" }, [
+        _c(
+          "div",
+          {
+            staticClass:
+              "col-md-2 d-flex justify-content-center justify-content-md-start"
+          },
+          [
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-primary m-2",
+                attrs: {
+                  type: "button",
+                  "data-toggle": "collapse",
+                  "data-target": "#note" + _vm.noteType + "add"
+                }
+              },
+              [
+                _c("i", { staticClass: "fas fa-fw fa-plus" }),
+                _vm._v(" Add New Note")
+              ]
+            )
+          ]
+        ),
+        _vm._v(" "),
+        _c("div", { staticClass: "col-md-10" }, [
+          _c(
+            "div",
+            {
+              staticClass: "collapse",
+              attrs: { id: "note" + _vm.noteType + "add" }
+            },
+            [
+              _c(
+                "div",
+                {
+                  staticClass:
+                    "d-flex flex-wrap flex-md-nowrap justify-content-center"
+                },
+                [
+                  _c("textarea", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model",
+                        value: _vm.newNote.thenote,
+                        expression: "newNote.thenote"
+                      }
+                    ],
+                    staticClass: "form-control",
+                    attrs: {
+                      name: "newnote" + _vm.noteType,
+                      id: "newnote" + _vm.noteType
+                    },
+                    domProps: { value: _vm.newNote.thenote },
+                    on: {
+                      input: function($event) {
+                        if ($event.target.composing) {
+                          return
+                        }
+                        _vm.$set(_vm.newNote, "thenote", $event.target.value)
+                      }
+                    }
+                  }),
+                  _vm._v(" "),
+                  _c(
+                    "button",
+                    {
+                      staticClass: "btn btn-secondary m-2",
+                      attrs: { type: "button" },
+                      on: {
+                        click: function($event) {
+                          return _vm.createNote()
+                        }
+                      }
+                    },
+                    [_vm._v("Save")]
+                  )
+                ]
+              )
+            ]
+          )
+        ])
+      ]),
+      _vm._v(" "),
+      _vm._l(this.notes, function(note, index) {
+        return _c(
+          "li",
+          { key: index, staticClass: "row no-gutters mb-2" },
+          [
+            _c("note-form-modal", {
+              attrs: {
+                "modal-id": "note" + note.noteid + "editModal",
+                "populate-with": note
+              }
+            }),
+            _vm._v(" "),
+            _c(
+              "div",
+              {
+                staticClass: "col-md-1 d-flex flex-column mx-md-3",
+                class: _vm.noteOrders[index]
+              },
+              [
+                _c("div", { staticClass: "text-center p-0 m-0" }, [
+                  _vm._v(_vm._s(note.noteuser))
+                ]),
+                _vm._v(" "),
+                _c(
+                  "div",
+                  { staticClass: "text-muted text-small text-center p-0 m-0" },
+                  [_vm._v(_vm._s(_vm.getHRDate(note.notetime)))]
+                ),
+                _vm._v(" "),
+                _c(
+                  "div",
+                  { staticClass: "btn-group justify-content-center p-0 m-0" },
+                  [
+                    _vm.authusername === note.noteuser ||
+                    _vm.authusername === "admin"
+                      ? [
+                          _c(
+                            "button",
+                            {
+                              staticClass: "btn btn-sm btn-primary m-1",
+                              attrs: {
+                                "data-toggle": "modal",
+                                "data-target":
+                                  "#note" + note.noteid + "editModal"
+                              }
+                            },
+                            [_c("i", { staticClass: "fas fa-fw fa-edit" })]
+                          ),
+                          _vm._v(" "),
+                          _vm._m(0, true),
+                          _vm._v(" "),
+                          _vm._m(1, true)
+                        ]
+                      : _vm._e()
+                  ],
+                  2
+                )
+              ]
+            ),
+            _vm._v(" "),
+            _c("div", { staticClass: "col-md-10" }, [
+              _c("div", { staticClass: "card m-2" }, [
+                _c("div", { staticClass: "card-body p-2" }, [
+                  _vm._v(
+                    "\n                    " +
+                      _vm._s(note.thenote) +
+                      "\n                "
+                  )
+                ])
+              ])
+            ])
+          ],
+          1
+        )
+      })
+    ],
+    2
+  )
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("button", { staticClass: "btn btn-sm btn-danger m-1" }, [
+      _c("i", { staticClass: "fas fa-fw fa-trash-alt" })
+    ])
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("button", { staticClass: "btn btn-sm btn-primary m-1" }, [
+      _c("i", { staticClass: "fa fa-fw fa-random" })
+    ])
+  }
+]
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/WoInfoEditModal.vue?vue&type=template&id=352dd7a2&":
@@ -51985,6 +52534,62 @@ var render = function() {
           ])
         ])
       ])
+    ]),
+    _vm._v(" "),
+    _c("div", { staticClass: "row my-3 no-gutters" }, [
+      _c("div", { staticClass: "col-12" }, [
+        _c("div", { staticClass: "card" }, [
+          _c(
+            "div",
+            { staticClass: "card-body" },
+            [
+              _c("h5", { staticClass: "card-title" }, [
+                _vm._v("Customer Notes")
+              ]),
+              _vm._v(" "),
+              !_vm.workOrderNotesLoading
+                ? _c("notes", {
+                    attrs: {
+                      initialnotes: _vm.publicNotes,
+                      authusername: _vm.authUser,
+                      "note-type": 0,
+                      woid: _vm.id
+                    }
+                  })
+                : _c("circle-spinner", { attrs: { color: "#663399" } })
+            ],
+            1
+          )
+        ])
+      ])
+    ]),
+    _vm._v(" "),
+    _c("div", { staticClass: "row my-3 no-gutters" }, [
+      _c("div", { staticClass: "col-12" }, [
+        _c("div", { staticClass: "card" }, [
+          _c(
+            "div",
+            { staticClass: "card-body" },
+            [
+              _c("h5", { staticClass: "card-title" }, [
+                _vm._v("Private/Billing Notes")
+              ]),
+              _vm._v(" "),
+              !_vm.workOrderNotesLoading
+                ? _c("notes", {
+                    attrs: {
+                      initialnotes: _vm.privateNotes,
+                      authusername: _vm.authUser,
+                      "note-type": 1,
+                      woid: _vm.id
+                    }
+                  })
+                : _c("circle-spinner", { attrs: { color: "#663399" } })
+            ],
+            1
+          )
+        ])
+      ])
     ])
   ])
 }
@@ -67912,6 +68517,144 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/NoteFormModal.vue":
+/*!***************************************************!*\
+  !*** ./resources/js/components/NoteFormModal.vue ***!
+  \***************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _NoteFormModal_vue_vue_type_template_id_1391a09c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./NoteFormModal.vue?vue&type=template&id=1391a09c& */ "./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c&");
+/* harmony import */ var _NoteFormModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./NoteFormModal.vue?vue&type=script&lang=js& */ "./resources/js/components/NoteFormModal.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"])(
+  _NoteFormModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _NoteFormModal_vue_vue_type_template_id_1391a09c___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _NoteFormModal_vue_vue_type_template_id_1391a09c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/NoteFormModal.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/NoteFormModal.vue?vue&type=script&lang=js&":
+/*!****************************************************************************!*\
+  !*** ./resources/js/components/NoteFormModal.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_NoteFormModal_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!./NoteFormModal.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/NoteFormModal.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_NoteFormModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c&":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c& ***!
+  \**********************************************************************************/
+/*! 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_NoteFormModal_vue_vue_type_template_id_1391a09c___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!./NoteFormModal.vue?vue&type=template&id=1391a09c& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/NoteFormModal.vue?vue&type=template&id=1391a09c&");
+/* 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_NoteFormModal_vue_vue_type_template_id_1391a09c___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_NoteFormModal_vue_vue_type_template_id_1391a09c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
+/***/ }),
+
+/***/ "./resources/js/components/Notes.vue":
+/*!*******************************************!*\
+  !*** ./resources/js/components/Notes.vue ***!
+  \*******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _Notes_vue_vue_type_template_id_3d897ee6___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Notes.vue?vue&type=template&id=3d897ee6& */ "./resources/js/components/Notes.vue?vue&type=template&id=3d897ee6&");
+/* harmony import */ var _Notes_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Notes.vue?vue&type=script&lang=js& */ "./resources/js/components/Notes.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"])(
+  _Notes_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _Notes_vue_vue_type_template_id_3d897ee6___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _Notes_vue_vue_type_template_id_3d897ee6___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/Notes.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/Notes.vue?vue&type=script&lang=js&":
+/*!********************************************************************!*\
+  !*** ./resources/js/components/Notes.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_Notes_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!./Notes.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Notes.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_Notes_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/Notes.vue?vue&type=template&id=3d897ee6&":
+/*!**************************************************************************!*\
+  !*** ./resources/js/components/Notes.vue?vue&type=template&id=3d897ee6& ***!
+  \**************************************************************************/
+/*! 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_Notes_vue_vue_type_template_id_3d897ee6___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!./Notes.vue?vue&type=template&id=3d897ee6& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Notes.vue?vue&type=template&id=3d897ee6&");
+/* 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_Notes_vue_vue_type_template_id_3d897ee6___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_Notes_vue_vue_type_template_id_3d897ee6___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/WoInfoEditModal.vue":

resources/js/components/note-form-modal.vue → resources/js/components/NoteFormModal.vue

@@ -16,7 +16,11 @@
             </modal>
 </template>
 <script>
+import Modal from '../components/Modal.vue'
 export default {
+    components: {
+        Modal,
+    },
     props: {
         populateWith: {
             type: Object,

resources/js/components/WoInfoEditModal.vue

@@ -45,7 +45,7 @@ export default {
             required: true,
         },
         storeList: {
-            type: Array,
+            type: Object,
             required: true,
         },
         modalId: {

resources/js/components/credential.vue

@@ -55,7 +55,7 @@ export default {
             required: true,
         },
         descriptions: {
-            type: Array,
+            type: Object,
             required: true,
         }
     },

resources/js/components/notes.vue

@@ -38,7 +38,11 @@
 </template>
 <script>
 import dateMixin from '../mixins/dateMixin'
+import NoteFormModal from '../components/NoteFormModal.vue'
 export default {
+    components: {
+        NoteFormModal,
+    },
     mixins:[dateMixin],
     props: {
         initialnotes: {
@@ -54,7 +58,7 @@ export default {
             required: true,
         },
         woid: {
-            type: Number,
+            type: String,
             required: true,
         }
     },

resources/js/views/WorkOrder.vue

@@ -75,12 +75,13 @@
                 </div>
             </div>
         </div>
-        <!-- <div class="row my-3 no-gutters">
+        <div class="row my-3 no-gutters">
             <div class="col-12">
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">Customer Notes</h5>
-                        <notes :initialnotes='{{ $workOrder->notes->where('notetype', '0')->values() }}' authusername="{{Auth::user()->username}}" :note-type="0" :woid="{{$workOrder->woid}}"></notes>
+                        <notes v-if="!workOrderNotesLoading" :initialnotes="publicNotes" :authusername="authUser" :note-type="0" :woid="id"></notes>
+                        <circle-spinner v-else color="#663399"></circle-spinner>
                     </div>
                 </div>
             </div>
@@ -90,11 +91,12 @@
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">Private/Billing Notes</h5>
-                        <notes :initialnotes='{{ $workOrder->notes->where('notetype', '1')->values() }}' authusername="{{Auth::user()->username}}" :note-type="1" :woid="{{$workOrder->woid}}"></notes>
+                        <notes v-if="!workOrderNotesLoading" :initialnotes="privateNotes" :authusername="authUser" :note-type="1" :woid="id"></notes>
+                        <circle-spinner v-else color="#663399"></circle-spinner>
                     </div>
                 </div>
             </div>
-        </div> -->
+        </div>
     </div>
 </template>
 <script>
@@ -102,16 +104,18 @@ import WorkOrderInfo from '../components/WorkOrderInfo.vue'
 import AssetInfo from '../components/AssetInfo.vue'
 import CircleSpinner from '../components/CircleSpinner.vue'
 import CredentialList from '../components/CredentialList.vue'
+import Notes from '../components/Notes.vue'
 export default {
     components: {
         WorkOrderInfo,
         AssetInfo,
         CircleSpinner,
         CredentialList,
+        Notes,
     },
     props: {
         id: {
-            type: Number,
+            type: String,
             required: true,
         }
     },
@@ -122,11 +126,26 @@ export default {
             stores: {},
             credentials: {},
             credentialDescriptions: {},
+            workOrderNotes: [],
             woLoading: true,
             assetLoading: true,
             storesLoading: true,
             credentialsLoading: true,
             credentialDescriptionsLoading: true,
+            workOrderNotesLoading: true,
+            authUser: localStorage.getItem('user'),
+        }
+    },
+    computed: {
+        publicNotes: function() {
+            let notes = []
+            notes = this.workOrderNotes.filter(note => note.notetype === 0)
+            return notes
+        },
+        privateNotes: function() {
+            let notes = []
+            notes = this.workOrderNotes.filter(note => note.notetype === 1)
+            return notes
         }
     },
     mounted () {
@@ -181,6 +200,13 @@ export default {
         }).catch(error => {
             console.log(error)
         })
+
+        axios.get(`/api/workorders/${this.id}/notes`).then(response => {
+            this.workOrderNotes = response.data
+            this.workOrderNotesLoading = false
+        }).catch(error => {
+            console.log(error)
+        })
         
         Echo.channel('work-order.'+this.id)
                 .listen('WorkOrderUpdated', (e) => {

routes/api.php

@@ -24,6 +24,7 @@ Route::middleware('auth:api')->group( function() {
     Route::get('/users/{user}/workorders', 'Api\UsersController@workOrders');
 
     Route::get('/workorders/{workOrder}/asset', 'Api\WorkOrdersController@asset');
+    Route::get('/workorders/{workOrder}/notes', 'Api\WorkOrdersController@notes');
     Route::get('/workorders/{workOrder}', 'Api\WorkOrdersController@show');
     Route::put('/workorders/{workOrder}', 'Api\WorkOrdersController@update');