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,