Another shot at implementing the note orientation switching.

public/js/app.js

@@ -2618,8 +2618,7 @@ __webpack_require__.r(__webpack_exports__);
   props: ['initialnotes', 'authusername', 'noteType', 'woid'],
   data: function data() {
     return {
-      notes: Object.values(this.initialnotes),
-      currentOrder: 'order-first',
+      notes: this.initialnotes,
       newNote: {
         notetype: this.noteType,
         thenote: '',
@@ -2628,6 +2627,11 @@ __webpack_require__.r(__webpack_exports__);
       }
     };
   },
+  computed: {
+    noteOrders: function noteOrders() {
+      return this.getNoteOrders(this.notes);
+    }
+  },
   mounted: function mounted() {
     var _this = this;
 
@@ -2655,6 +2659,23 @@ __webpack_require__.r(__webpack_exports__);
         $('#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;
     }
   }
 });
@@ -50204,45 +50225,53 @@ var render = function() {
               }
             }),
             _vm._v(" "),
-            _c("div", { staticClass: "col-md-1 d-flex flex-column mx-md-3" }, [
-              _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
-              )
-            ]),
+            _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" }, [

resources/js/components/notes.vue

@@ -15,7 +15,7 @@
             </div>
         <li class="row no-gutters mb-2" v-bind:key="index" v-for="(note, index) in this.notes">
             <note-form-modal :modal-id="'note'+note.noteid+'editModal'" :populate-with="note"></note-form-modal>
-            <div class="col-md-1 d-flex flex-column mx-md-3">
+            <div class="col-md-1 d-flex flex-column mx-md-3" :class="noteOrders[index]">
                 <div class="text-center p-0 m-0">{{note.noteuser}}</div>
                 <div class="text-muted text-small text-center p-0 m-0">{{getHRDate(note.notetime)}}</div>
                 <div class="btn-group justify-content-center p-0 m-0">
@@ -43,14 +43,18 @@ export default {
     props: ['initialnotes', 'authusername', 'noteType', 'woid'],
     data () {
         return {
-            notes: Object.values(this.initialnotes),
-            currentOrder: 'order-first',
+            notes: this.initialnotes,
             newNote: {
                 notetype: this.noteType,
                 thenote: '',
                 noteuser: this.authusername,
                 woid: this.woid
-            }
+            },
+        }
+    },
+    computed: {
+        noteOrders () {
+            return this.getNoteOrders(this.notes)
         }
     },
     mounted () {
@@ -78,6 +82,23 @@ export default {
                         $('#note'+this.noteType+'add').collapse('hide')
                         this.newNote.thenote = ''
                     })
+        },
+        getNoteOrders(notes) {
+            let noteOrders = []
+            notes.forEach((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
         }
     }
 }

resources/views/workorders/show.blade.php

@@ -2,8 +2,7 @@
 
 @section('content')
 
-<div id="app">
-    <div class="container-fluid">
+<div class="container-fluid">
     <div class="row my-3">
         <div class="col-lg-6">
             <div class="card h-100">
@@ -81,7 +80,7 @@
             <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">Customer Notes</h5>
-                    <notes :initialnotes="{{$workOrder->notes->where('notetype', '0')}}" authusername="{{Auth::user()->username}}" :note-type="0" :woid="{{$workOrder->woid}}"></notes>
+                    <notes :initialnotes='{{ $workOrder->notes->where('notetype', '0')->values() }}' authusername="{{Auth::user()->username}}" :note-type="0" :woid="{{$workOrder->woid}}"></notes>
                 </div>
             </div>
         </div>
@@ -91,12 +90,11 @@
             <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">Private/Billing Notes</h5>
-                    <notes :initialnotes="{{$workOrder->notes->where('notetype', '1')}}" authusername="{{Auth::user()->username}}" :note-type="1" :woid="{{$workOrder->woid}}"></notes>
+                    <notes :initialnotes='{{ $workOrder->notes->where('notetype', '1')->values() }}' authusername="{{Auth::user()->username}}" :note-type="1" :woid="{{$workOrder->woid}}"></notes>
                 </div>
             </div>
         </div>
     </div>
-    </div>
 </div>
 
 @endsection