app/ayanova/package-lock.json

@@ -4726,6 +4726,11 @@
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.7.7.tgz",
+      "integrity": "sha512-Qlkiu0NNDpYwhk0syK4ImvAl/5YnsEMkvC2O123INviGeOA3Q8s5VyVkZzmN5SC7Wv9bb1+rfwO+uSqtHB4UWw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

app/ayanova/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0-rc.1",
+    "dayjs": "^1.7.7",
     "jwt-decode": "^2.2.0",
     "nprogress": "^0.2.0",
     "register-service-worker": "^1.0.0",

app/ayanova/src/components/inventorywidgettop.vue

@@ -32,13 +32,13 @@
         class="elevation-1"
       >
         <template slot="items" slot-scope="props">
-          <td class="text-xs-left">{{ props.item.name }}</td>
+          <td class="text-xs-left">{{ props.item.name | capitalize }}</td>
           <td class="text-xs-left">{{ props.item.serial }}</td>
-          <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
-          <td class="text-xs-left">{{ props.item.active }}</td>
+          <td class="text-xs-left">{{ props.item.dollarAmount | currency }}</td>
+          <td class="text-xs-left">{{ props.item.active | boolastext }}</td>
           <td class="text-xs-left">{{ props.item.roles }}</td>
-          <td class="text-xs-left">{{ props.item.startDate }}</td>
-          <td class="text-xs-left">{{ props.item.endDate }}</td>
+          <td class="text-xs-left">{{ props.item.startDate | shortdate}}</td>
+          <td class="text-xs-left">{{ props.item.endDate | shortdate }}</td>
           <td class="justify-center layout px-0">
             <v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
           </td>

app/ayanova/src/main.js

@@ -10,36 +10,13 @@ import "./registerServiceWorker";
 import errorHandler from "./utils/errorhandler";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
+import dayjs from "dayjs";
 
 Vue.config.productionTip = false;
 
 Vue.config.errorHandler = errorHandler.handleVueError;
 window.onerror = errorHandler.handleGeneralError;
 
-//Loading indicator on route change, probably don't need this
-//but do need one for ajax calls
-
-// router.beforeResolve((to, from, next) => {
-//   // If this isn't an initial page load.
-//   from;
-//   if (to.name) {
-//     // Start the route progress bar.
-//     //NProgress.start()
-//     // eslint-disable-next-line
-//     console.log("---===LOADING===---");
-//   }
-//   next();
-// });
-
-// router.afterEach((to, from) => {
-//   // Complete the animation of the route progress bar.
-//   //NProgress.done()
-//   to;
-//   from;
-//   // eslint-disable-next-line
-//   console.log("---===FINISHED LOADING===---");
-// });
-
 // Store a copy of the fetch function
 var _oldFetch = fetch;
 
@@ -88,6 +65,31 @@ document.addEventListener("fetchEnd", function() {
   NProgress.done();
 });
 
+//TODO: Will need currency symbol, date format from user settings at server
+//rather than try to use local browser settings which is fraught with peril will need to be specified at server itself
+
+Vue.filter("capitalize", function(value) {
+  if (!value) return "";
+  value = value.toString();
+  return value.charAt(0).toUpperCase() + value.slice(1);
+});
+
+Vue.filter("shortdate", function(value) {
+  if (!value) return "";
+  var dj = dayjs(value);
+  return dj.format("YYYY-MM-DD hh:mm:ss A");
+});
+
+Vue.filter("currency", function(value) {
+  if (!value) return "";
+  return "$" + value;
+});
+
+Vue.filter("boolastext", function(value) {
+  if (!value) return "";
+  return value ? "Yes" : "Nope";
+});
+
 new Vue({
   router,
   store,