Implemented: App Version Info for centralized use (#142)

src/components/AppVersionInfo.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="section-header">
+    <div>
+      <h1>{{ $t('App') }}</h1>
+      <p class="overline">{{ "Version: " + appVersion }}</p>
+    </div>
+    <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon';
+
+declare var process: any;
+
+const appInfo = (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any;
+const appVersion = appInfo.branch ? (appInfo.branch + "-" + appInfo.revision) : appInfo.tag;
+const getDateTime = (time: any) => DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
+</script>

src/components/index.ts

@@ -14,6 +14,7 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+export { default as AppVersionInfo } from './AppVersionInfo.vue';
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
+import { AppVersionInfo, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -41,6 +41,7 @@ export let dxpComponents = {
     app.use(pinia);
     app.use(i18n);
 
+    app.component('AppVersionInfo', AppVersionInfo)
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)