Implements reversing note orientation when noteuser changes.

public/js/app.js

@@ -2554,8 +2554,17 @@ __webpack_require__.r(__webpack_exports__);
   props: ['initialnotes', 'authusername'],
   data: function data() {
     return {
-      notes: this.initialnotes
+      notes: Object.values(this.initialnotes)
     };
+  },
+  methods: {
+    userChanged: function userChanged(index) {
+      if (index === 0) {
+        return false;
+      } else {
+        return this.notes[index].noteuser !== this.notes[index - 1].noteuser;
+      }
+    }
   }
 });
 
@@ -49904,7 +49913,7 @@ var render = function() {
   return _c(
     "ul",
     { staticClass: "list-unstyled" },
-    _vm._l(this.notes, function(note) {
+    _vm._l(this.notes, function(note, index) {
       return _c(
         "li",
         { key: note.noteid, staticClass: "row no-gutters mb-2" },
@@ -49993,45 +50002,52 @@ 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: { "order-last": _vm.userChanged(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

@@ -1,6 +1,6 @@
 <template>
     <ul class="list-unstyled">
-        <li class="row no-gutters mb-2" v-bind:key="note.noteid" v-for="note in this.notes">
+        <li class="row no-gutters mb-2" v-bind:key="note.noteid" v-for="(note, index) in this.notes">
             <modal :id="'note'+note.noteid+'editModal'" tabindex="-1" role="dialog" :aria-labelledby="'note'+note.noteid+'editModalLabel'">
                 <h5 slot="header" class="modal-title" :id="'note'+note.noteid+'editModalLabel'">
                     Edit Note
@@ -16,7 +16,7 @@
                     <button type="button" class="btn btn-primary" @click="updateNote(note.noteid)">Save</button>
                 </div>
             </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="{ 'order-last': userChanged(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">
@@ -44,8 +44,18 @@ export default {
     props: ['initialnotes', 'authusername'],
     data () {
         return {
-            notes: this.initialnotes,
+            notes: Object.values(this.initialnotes),
         }
+    },
+    methods: {
+        userChanged (index) {
+            if (index === 0) {
+                return false
+            } else {
+                return this.notes[index].noteuser !== this.notes[index-1].noteuser
+            }
+        }
+        
     }
 }
 </script>