Fixes live updating of work order notes.

app/Events/WorkOrderNoteAdded.php

@@ -34,6 +34,6 @@ class WorkOrderNoteAdded implements ShouldBroadcast
      */
     public function broadcastOn()
     {
-        return new Channel('wonotes.'.$this->note->notetype.'.'.$this->note->woid);
+        return new Channel('wonotes.'.$this->note->woid);
     }
 }

app/Events/WorkOrderNoteUpdated.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use App\WorkOrderNote;
+
+class WorkOrderNoteUpdated implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public $note;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(WorkOrderNote $workOrderNote)
+    {
+        $this->note = $workOrderNote;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new Channel('wonotes.'.$this->note->woid);
+    }
+}

app/Http/Controllers/Api/WorkOrderNotesController.php

@@ -58,6 +58,7 @@ class WorkOrderNotesController extends Controller
     {
         $workOrderNote->thenote = $request->input('thenote');
         $workOrderNote->save();
+        event(new \App\Events\WorkOrderNoteUpdated($workOrderNote));
         return response()->json($workOrderNote, 200);
     }
 

public/js/app.js

@@ -2607,8 +2607,10 @@ __webpack_require__.r(__webpack_exports__);
   },
   methods: {
     updateNote: function updateNote(note) {
+      var _this = this;
+
       axios.put('/api/workorders/notes/' + note.noteid, note).then(function (response) {
-        hideModal();
+        _this.hideModal();
       });
     },
     hideModal: function hideModal() {
@@ -2629,7 +2631,7 @@ __webpack_require__.r(__webpack_exports__);
 "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 import */ var _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/NoteFormModal.vue */ "./resources/js/components/NoteFormModal.vue");
 //
 //
 //
@@ -2672,11 +2674,11 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    NoteFormModal: _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
+    NoteFormModal: _components_NoteFormModal_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
   },
   mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
   props: {
-    initialnotes: {
+    notes: {
       type: Array,
       "default": []
     },
@@ -2695,7 +2697,6 @@ __webpack_require__.r(__webpack_exports__);
   },
   data: function data() {
     return {
-      notes: this.initialnotes,
       newNote: {
         notetype: this.noteType,
         thenote: '',
@@ -2709,32 +2710,13 @@ __webpack_require__.r(__webpack_exports__);
       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;
+      var _this = this;
 
       axios.post('/api/workorders/notes', this.newNote).then(function (response) {
-        $('#note' + _this2.noteType + 'add').collapse('hide');
-        _this2.newNote.thenote = '';
+        $('#note' + _this.noteType + 'add').collapse('hide');
+        _this.newNote.thenote = '';
       });
     },
     getNoteOrders: function getNoteOrders(notes) {
@@ -3475,6 +3457,23 @@ __webpack_require__.r(__webpack_exports__);
     Echo.channel('work-order.' + this.id).listen('WorkOrderUpdated', function (e) {
       _this.workOrder = e.data;
     });
+    Echo.channel('wonotes.' + this.id).listen('WorkOrderNoteAdded', function (e) {
+      _this.workOrderNotes.push(e.note);
+    }).listen('WorkOrderNoteUpdated', function (e) {
+      var index = _this.workOrderNotes.findIndex(function (note) {
+        return note.noteid === e.note.noteid;
+      }); // Note has to be edited this way, or else Vue cannot
+      // see it to recompute the computed values.
+
+
+      _this.workOrderNotes.splice(index, 1, e.note);
+    }).listen('WorkOrderNoteDeleted', function (e) {
+      var index = _this.notes.findIndex(function (note) {
+        return note.noteid === e.noteid;
+      });
+
+      _this.notes.splice(index, 1);
+    });
   }
 });
 
@@ -52550,7 +52549,7 @@ var render = function() {
               !_vm.workOrderNotesLoading
                 ? _c("notes", {
                     attrs: {
-                      initialnotes: _vm.publicNotes,
+                      notes: _vm.publicNotes,
                       authusername: _vm.authUser,
                       "note-type": 0,
                       woid: _vm.id
@@ -52578,7 +52577,7 @@ var render = function() {
               !_vm.workOrderNotesLoading
                 ? _c("notes", {
                     attrs: {
-                      initialnotes: _vm.privateNotes,
+                      notes: _vm.privateNotes,
                       authusername: _vm.authUser,
                       "note-type": 1,
                       woid: _vm.id

resources/js/components/NoteFormModal.vue

@@ -49,7 +49,7 @@ export default {
         updateNote (note) {
             axios.put('/api/workorders/notes/' + note.noteid, note)
                 .then((response) => {
-                    hideModal()
+                    this.hideModal()
                 })
         },
         hideModal () {

resources/js/components/notes.vue

@@ -45,7 +45,7 @@ export default {
     },
     mixins:[dateMixin],
     props: {
-        initialnotes: {
+        notes: {
             type: Array,
             default: [],
         },
@@ -64,7 +64,6 @@ export default {
     },
     data () {
         return {
-            notes: this.initialnotes,
             newNote: {
                 notetype: this.noteType,
                 thenote: '',
@@ -78,24 +77,6 @@ export default {
             return this.getNoteOrders(this.notes)
         }
     },
-    mounted () {
-        Echo.channel('wonotes.'+this.noteType+'.'+this.woid)
-            .listen('WorkOrderNoteAdded', (e) => {
-                this.notes.push(e.note)
-            })
-            .listen('WorkOrderNoteEdited', (e) => {
-                let index = this.notes.findIndex((note) => {
-                    return note.noteid === e.note.noteid
-                })
-                this.notes[index] = e.note
-            })
-            .listen('WorkOrderNoteDeleted', (e) => {
-                let index = this.notes.findIndex((note) => {
-                    return note.noteid === e.noteid
-                })
-                this.notes.splice(index, 1)
-            })
-    },
     methods: {
         createNote () {
             axios.post('/api/workorders/notes', this.newNote)

resources/js/views/WorkOrder.vue

@@ -80,7 +80,7 @@
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">Customer Notes</h5>
-                        <notes v-if="!workOrderNotesLoading" :initialnotes="publicNotes" :authusername="authUser" :note-type="0" :woid="id"></notes>
+                        <notes v-if="!workOrderNotesLoading" :notes="publicNotes" :authusername="authUser" :note-type="0" :woid="id"></notes>
                         <circle-spinner v-else color="#663399"></circle-spinner>
                     </div>
                 </div>
@@ -91,7 +91,7 @@
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">Private/Billing Notes</h5>
-                        <notes v-if="!workOrderNotesLoading" :initialnotes="privateNotes" :authusername="authUser" :note-type="1" :woid="id"></notes>
+                        <notes v-if="!workOrderNotesLoading" :notes="privateNotes" :authusername="authUser" :note-type="1" :woid="id"></notes>
                         <circle-spinner v-else color="#663399"></circle-spinner>
                     </div>
                 </div>
@@ -209,9 +209,28 @@ export default {
         })
         
         Echo.channel('work-order.'+this.id)
-                .listen('WorkOrderUpdated', (e) => {
-                    this.workOrder = e.data;
-                });
+            .listen('WorkOrderUpdated', (e) => {
+                this.workOrder = e.data;
+            });
+
+        Echo.channel('wonotes.'+this.id)
+            .listen('WorkOrderNoteAdded', (e) => {
+                this.workOrderNotes.push(e.note)
+            })
+            .listen('WorkOrderNoteUpdated', (e) => {
+                let index = this.workOrderNotes.findIndex((note) => {
+                    return note.noteid === e.note.noteid
+                })
+                // Note has to be edited this way, or else Vue cannot
+                // see it to recompute the computed values.
+                this.workOrderNotes.splice(index, 1, e.note)
+            })
+            .listen('WorkOrderNoteDeleted', (e) => {
+                let index = this.notes.findIndex((note) => {
+                    return note.noteid === e.noteid
+                })
+                this.notes.splice(index, 1)
+            })
     },
 }
 </script>