Cleans up Work Order Notes display.

public/css/app.css

@@ -16835,6 +16835,10 @@ a.text-dark:focus {
   background-color: inherit;
 }
 
+.text-small {
+  font-size: 0.65rem;
+}
+
 .bg-lightgray {
   background-color: #f1f1f1;
 }

public/js/app.js

@@ -2034,6 +2034,12 @@ __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");
+//
+//
+//
+//
+//
 //
 //
 //
@@ -2050,7 +2056,12 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+
 /* harmony default export */ __webpack_exports__["default"] = ({
+  mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
   props: ['initialnotes', 'authusername'],
   data: function data() {
     return {
@@ -48560,39 +48571,81 @@ var render = function() {
     _vm._l(this.notes, function(note) {
       return _c(
         "li",
-        { key: note.noteid, staticClass: "d-flex" },
+        { key: note.noteid, staticClass: "row no-gutters mb-2" },
         [
-          _vm.authusername === note.noteuser || _vm.authusername === "admin"
-            ? [
-                _c("button", { staticClass: "btn btn-primary m-1 my-2" }, [
-                  _vm._v("Edit")
-                ]),
-                _vm._v(" "),
-                _c("button", { staticClass: "btn btn-danger m-1 my-2" }, [
-                  _vm._v("Delete")
-                ]),
-                _vm._v(" "),
-                _c("button", { staticClass: "btn btn-primary m-1 my-2" }, [
-                  _vm._v("Switch")
-                ])
-              ]
-            : _vm._e(),
+          _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"
+                  ? [
+                      _vm._m(0, true),
+                      _vm._v(" "),
+                      _vm._m(1, true),
+                      _vm._v(" "),
+                      _vm._m(2, true)
+                    ]
+                  : _vm._e()
+              ],
+              2
+            )
+          ]),
           _vm._v(" "),
-          _c("div", { staticClass: "card m-2 w-100" }, [
-            _c("div", { staticClass: "card-body p-2" }, [
-              _vm._v(
-                "\n                " + _vm._s(note.thenote) + "\n            "
-              )
+          _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                "
+                )
+              ])
             ])
           ])
-        ],
-        2
+        ]
       )
     }),
     0
   )
 }
-var staticRenderFns = []
+var staticRenderFns = [
+  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: "fas fa-fw fa-edit" })
+    ])
+  },
+  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
 
 
@@ -61329,15 +61382,13 @@ __webpack_require__.r(__webpack_exports__);
     },
     getHRDate: function getHRDate(dateString) {
       var date = new Date(dateString);
-      var year = date.getFullYear();
-      var month = date.toLocaleString('default', {
-        month: 'short'
+      return date.toLocaleString('default', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
       });
-      var day = date.getDate();
-      var hour = date.getHours() % 12;
-      var minute = date.getMinutes();
-      var period = date.getHours() < 24 ? 'AM' : 'PM';
-      return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + period;
     },
     isZero: function isZero(dateString) {
       return dateString === '0000-00-00 00:00:00';

resources/js/components/notes.vue

@@ -1,25 +1,35 @@
 <template>
     <ul class="list-unstyled">
-        <li class="d-flex" v-bind:key="note.noteid" v-for="note in this.notes">
-            <template v-if="authusername === note.noteuser || authusername === 'admin'">
-                <button class="btn btn-primary m-1 my-2">Edit</button>
-                <button class="btn btn-danger m-1 my-2">Delete</button>
-                <button class="btn btn-primary m-1 my-2">Switch</button>
-            </template>
-            <div class="card m-2 w-100">
-                <div class="card-body p-2">
-                    {{ note.thenote }}
+        <li class="row no-gutters mb-2" v-bind:key="note.noteid" v-for="note in this.notes">
+            <div class="col-md-1 d-flex flex-column mx-md-3">
+                <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">
+                    <template v-if="authusername === note.noteuser || authusername === 'admin'">
+                        <button class="btn btn-sm btn-primary m-1"><i class="fas fa-fw fa-edit"></i></button>
+                        <button class="btn btn-sm btn-danger m-1"><i class="fas fa-fw fa-trash-alt"></i></button>
+                        <button class="btn btn-sm btn-primary m-1"><i class="fa fa-fw fa-random"></i></button>
+                    </template>
+                </div>
+            </div>
+            <div class="col-md-10">
+                <div class="card m-2">
+                    <div class="card-body p-2">
+                        {{ note.thenote }}
+                    </div>
                 </div>
             </div>
         </li>
     </ul>
 </template>
 <script>
+import dateMixin from '../mixins/dateMixin'
 export default {
+    mixins:[dateMixin],
     props: ['initialnotes', 'authusername'],
     data () {
         return {
-            notes: this.initialnotes
+            notes: this.initialnotes,
         }
     }
 }

resources/js/mixins/dateMixin.js

@@ -12,14 +12,7 @@ export default {
         },
         getHRDate: function (dateString) {
             var date = new Date(dateString);
-            var year = date.getFullYear();
-            var month = date.toLocaleString('default', {month: 'short'});
-            var day = date.getDate();
-            var hour = date.getHours() % 12;
-            var minute = date.getMinutes();
-            var period = date.getHours() < 24 ? 'AM' : 'PM';
-
-            return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + period;
+            return date.toLocaleString('default', {month:'short', day:'numeric', year: 'numeric', hour:'numeric', minute:'numeric'})
         },
         isZero: function(dateString) {
             return dateString === '0000-00-00 00:00:00'

resources/sass/app.scss

@@ -25,6 +25,10 @@
     background-color: inherit;
 }
 
+.text-small {
+    font-size: 0.65rem;
+}
+
 .bg-lightgray {
     background-color: #f1f1f1;
 }