Implemented: landing page for the app(#2)

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <ion-app>
     <ion-split-pane content-id="main-content" when="lg">
-      <Menu />
       <ion-router-outlet id="main-content" />
     </ion-split-pane>
   </ion-app>
@@ -10,7 +9,6 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import Menu from '@/components/Menu.vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus";
 import { mapGetters, useStore } from 'vuex';
@@ -24,8 +22,7 @@ export default defineComponent({
   components: {
     IonApp,
     IonRouterOutlet,
-    IonSplitPane,
-    Menu
+    IonSplitPane
   },
   data() {
     return {

src/router/index.ts

@@ -1,12 +1,14 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
 import 'vue-router'
 import { useAuthStore, DxpLogin, translate } from '@hotwax/dxp-components'
 import { loader } from '@/utils/user';
+import FacilityManagement from '@/views/FacilityManagement.vue'
+import Settings from '@/views/Settings.vue';
+import FindFacilities from '@/views/FindFacilities.vue';
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -38,7 +40,7 @@ const loginGuard = (to: any, from: any, next: any) => {
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/settings'
+    redirect: '/facility-management'
   },
   {
     path: '/login',
@@ -47,8 +49,20 @@ const routes: Array<RouteRecordRaw> = [
     beforeEnter: loginGuard
   },
   {
-    path: "/settings",
-    name: "Settings",
+    path: '/facility-management',
+    name: 'FacilityManagement',
+    component: FacilityManagement,
+    beforeEnter: authGuard
+  },
+  {
+    path: '/find-facilities',
+    name: 'FindFacilities',
+    component: FindFacilities,
+    beforeEnter: authGuard
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
     component: Settings,
     beforeEnter: authGuard
   }

src/store/modules/facility/FacilityState.ts

@@ -0,0 +1,3 @@
+export default interface FacilityState {
+  query: object
+}

src/store/modules/facility/actions.ts

@@ -0,0 +1,9 @@
+import { ActionTree } from 'vuex'
+import RootState from '@/store/RootState'
+import FacilityState from './FacilityState'
+
+const actions: ActionTree<FacilityState, RootState> = {
+
+}
+
+export default actions;

src/store/modules/facility/getters.ts

@@ -0,0 +1,8 @@
+import { GetterTree } from 'vuex'
+import FacilityState from './FacilityState'
+import RootState from '@/store/RootState'
+
+const getters: GetterTree <FacilityState, RootState> = {
+
+}
+export default getters;

src/store/modules/facility/index.ts

@@ -0,0 +1,18 @@
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import { Module } from 'vuex'
+import FacilityState from './FacilityState'
+import RootState from '@/store/RootState'
+
+const userModule: Module<FacilityState, RootState> = {
+    namespaced: true,
+    state: {
+      query: {}
+    },
+    getters,
+    actions,
+    mutations,
+}
+
+export default userModule;

src/store/modules/facility/mutation-types.ts

@@ -0,0 +1 @@
+export const SN_FACILITY = 'facility'

src/store/modules/facility/mutations.ts

@@ -0,0 +1,7 @@
+import { MutationTree } from 'vuex'
+import FacilityState from './FacilityState'
+import * as types from './mutation-types'
+
+const mutations: MutationTree <FacilityState> = {
+}
+export default mutations;

src/views/FacilityManagement.vue

@@ -0,0 +1,95 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ translate("Facility Management") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-card button @click="router.push('/find-facilities')">
+        <ion-card-header>
+          <ion-icon :icon="businessOutline"/>
+          <ion-card-title>{{ translate("Facilities") }}</ion-card-title>
+        </ion-card-header>
+      </ion-card>
+
+      <ion-card button @click="router.push('/find-parking')">
+        <ion-card-header>
+          <ion-icon :icon="golfOutline"/>
+          <ion-card-title>{{ translate("Parking") }}</ion-card-title>
+        </ion-card-header>
+      </ion-card>
+
+      <ion-card button @click="router.push('/find-groups')">
+        <ion-card-header>
+          <ion-icon :icon="albumsOutline"/>
+          <ion-card-title>{{ translate("Groups") }}</ion-card-title>
+        </ion-card-header>
+      </ion-card>
+
+      <ion-card button @click="router.push('/settings')">
+        <ion-card-header>
+          <ion-icon :icon="settingsOutline"/>
+          <ion-card-title>{{ translate("Settings") }}</ion-card-title>
+        </ion-card-header>
+      </ion-card>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import {
+  albumsOutline,
+  businessOutline,
+  golfOutline,
+  settingsOutline
+} from 'ionicons/icons';
+import { useRouter } from 'vue-router';
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: 'FacilityManagement',
+  components: {
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  setup() {
+    const router = useRouter();
+
+    return {
+      albumsOutline,
+      businessOutline,
+      golfOutline,
+      settingsOutline,
+      translate,
+      router
+    };
+  }
+});
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 4;
+}
+</style>