Implemented: user details header on user details page (#3)

src/components/Image.vue

@@ -0,0 +1,69 @@
+<template>
+  <img :src="imageUrl"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Image",
+  props: ['src'],
+  components: {},
+  created() {
+    if (
+      process.env.VUE_APP_RESOURCE_URL
+    ) {
+      this.resourceUrl = process.env.VUE_APP_RESOURCE_URL;
+    }
+  },
+  mounted() {
+    this.setImageUrl();
+  },
+  updated() {
+    this.setImageUrl();
+  },
+  data() {
+    return {
+      resourceUrl: '',
+      imageUrl: require("@/assets/images/defaultImage.png")
+    }
+  },
+  methods: {
+    checkIfImageExists(src: string) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () {
+          resolve(true);
+        }
+        img.onerror = function () {
+          reject(false);
+        }
+        img.src = src;
+      })
+    },
+    setImageUrl() {
+      if (this.src) {
+        if (this.src.indexOf('assets/') != -1) {
+          // Assign directly in case of assets
+          this.imageUrl = this.src;
+        } else if (this.src.startsWith('http')) {
+          // If starts with http, it is web url check for existence and assign
+          this.checkIfImageExists(this.src).then(() => {
+            this.imageUrl = this.src;
+          }).catch(() => {
+            this.$log.warn("Image doesn't exist", this.src);
+          })
+        } else {
+          // Image is from resource server, hence append to base resource url, check for existence and assign
+          const imageUrl = this.resourceUrl.concat(this.src)
+          this.checkIfImageExists(imageUrl).then(() => {
+            this.imageUrl = imageUrl;
+          }).catch(() => {
+            this.$log.warn("Image doesn't exist", imageUrl);
+          })
+        }
+      }
+    }
+  },
+});
+</script>

src/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "User details": "User details"
+}

src/main.ts

@@ -27,7 +27,6 @@ import '@hotwax/apps-theme';
 
 import i18n from './i18n'
 import store from './store'
-import { DateTime } from 'luxon';
 
 import logger from './logger';
 
@@ -42,23 +41,6 @@ const app = createApp(App)
   .use(i18n)
   .use(store);
 
-// Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
-app.config.globalProperties.$filters = {
-  formatDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Make default format configurable and from environment variables
-    if(inFormat){
-      return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-    }
-    return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-  },
-  formatUtcDate(value: any, inFormat?: any, outFormat?: string) {
-    // TODO Make default format configurable and from environment variables
-    const userProfile = store.getters['user/getUserProfile'];
-    // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-    return DateTime.fromISO(value, { zone: 'utc' }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')  
-  }
-}
-
 router.isReady().then(() => {
   app.mount('#app');
 });

src/router/index.ts

@@ -1,7 +1,13 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
+import UserDetails from '@/views/UserDetails.vue'
 
 const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/user-details/:partyId',
+    name: 'UserDetails',
+    component: UserDetails,
+  },
 ]
 
 const router = createRouter({

src/views/UserDetails.vue

@@ -0,0 +1,69 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-menu-button slot="start" />
+        <ion-title>{{ $t("User details") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <ion-item lines="none">
+          <!-- TODO show image only if available -->
+          <ion-avatar slot="start">
+            <Image />
+          </ion-avatar>
+          <ion-label>
+            <h1>First Last</h1>
+            <p>username</p>
+          </ion-label>
+        </ion-item>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+<script>
+import {
+  IonAvatar,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonMenuButton,
+  IonPage,
+  IonToolbar,
+  IonTitle,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { useRouter } from 'vue-router';
+import { useStore } from "vuex";
+import { addOutline, arrowForwardOutline } from 'ionicons/icons';
+import Image from '@/components/Image.vue'
+
+export default defineComponent({
+  name: "User Details",
+  components: {
+    Image,
+    IonAvatar,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonMenuButton,
+    IonPage,
+    IonToolbar,
+    IonTitle,
+  },
+  setup() {
+    const router = useRouter();
+    const store = useStore();
+    return {
+      addOutline,
+      arrowForwardOutline,
+      router,
+      store
+    }
+  }
+})
+</script>