Added new views for Sprint 2. (#25)

Co-authored-by: weskubo-cgi <[email protected]>
bcgov · Oct 24, 2023 · c4c54e7 · c4c54e7
1 parent 0361a6a
commit c4c54e7
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 17 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -13,7 +13,7 @@
       <v-navigation-drawer class="site-menu" :width="200" :model-value="showMenu" :scrim="false">
         <TheMenu />
       </v-navigation-drawer>
-      <router-view class="align-start px-8 mb-0" />
+      <router-view class="align-start pt-8 px-8 mb-0" />
     </v-main>
     <TheFooter />
   </v-app>

diff --git a/frontend/src/components/TheMenu.vue b/frontend/src/components/TheMenu.vue
@@ -1,26 +1,18 @@
 <template>
   <AppMenuItem icon="mdi-home-outline" :to="{ name: 'home' }">Home</AppMenuItem>
-  <AppMenuItem>
+  <AppMenuItem :to="{ name: 'messaging' }">
     <div class="badge-wrapper">
       <v-badge color="red" :content="unreadMessageCount" offset-x="18" offset-y="17">
-        <v-icon class="menu-email-icon" aria-hidden="false" icon="mdi-email-outline" size="30" />
+        <v-icon class="badge-icon" aria-hidden="false" icon="mdi-email-outline" size="30" />
       </v-badge>
-      Notifications
+      Messaging
     </div>
   </AppMenuItem>
   <AppMenuItem icon="mdi-text-box-outline">Reporting</AppMenuItem>
   <AppMenuItem icon="mdi-currency-usd">Funding</AppMenuItem>
-  <AppMenuItem icon="mdi-account-group-outline">Enrollment</AppMenuItem>
   <AppMenuItem icon="mdi-folder-outline">Documents</AppMenuItem>
   <AppMenuItem icon="mdi-file-document-edit-outline">Applications</AppMenuItem>
-  <AppMenuItem class="my-menu-item">
-    <div class="badge-wrapper">
-      <v-badge color="red" :content="unreadReplyCount" offset-x="18" offset-y="17">
-        <v-icon class="menu-email-icon" aria-hidden="false" icon="mdi-help" size="30" />
-      </v-badge>
-      <span>Get help</span>
-    </div>
-  </AppMenuItem>
+  <AppMenuItem icon="mdi-help" :to="{ name: 'resources' }">Resources</AppMenuItem>
   <AppMenuItem icon="mdi-cog-outline">Settings</AppMenuItem>
 </template>
 
@@ -51,8 +43,7 @@ export default {
   width: 100%;
   height: 100%;
 }
-.menu-email-icon,
-.menu-help-icon {
+.badge-icon {
   color: #003366;
   margin-right: 15px;
 }

diff --git a/frontend/src/components/messages/MessagesTab.vue b/frontend/src/components/messages/MessagesTab.vue
@@ -0,0 +1 @@
+<template>Messages</template>
diff --git a/frontend/src/components/notifications/NotificationsTab.vue b/frontend/src/components/notifications/NotificationsTab.vue
@@ -0,0 +1 @@
+<template>Notifications</template>
diff --git a/frontend/src/components/ui/AppMenuItem.vue b/frontend/src/components/ui/AppMenuItem.vue
@@ -26,6 +26,7 @@ export default {
 }
 
 .menu-icon {
+  color: #003366;
   margin-right: 15px;
 }
 </style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -6,10 +6,12 @@ import { PAGE_TITLES } from '@/utils/constants'
 import BackendSessionExpiredView from '@/views/BackendSessionExpiredView.vue'
 import ErrorView from '@/views/ErrorView.vue'
 import HomeView from '@/views/HomeView.vue'
-import Impersonate from '@/views/ImpersonateView.vue'
+import ImpersonateView from '@/views/ImpersonateView.vue'
 import LoginView from '@/views/LoginView.vue'
 import LogoutView from '@/views/LogoutView.vue'
+import MessagingView from '@/views/MessagingView.vue'
 import MinistryLoginView from '@/views/MinistryLoginView.vue'
+import ResourcesView from '@/views/ResourcesView.vue'
 import SessionExpiredView from '@/views/SessionExpiredView.vue'
 import UnAuthorizedPageView from '@/views/UnAuthorizedPageView.vue'
 import UnAuthorizedView from '@/views/UnAuthorizedView.vue'
@@ -56,12 +58,30 @@ const router = createRouter({
     {
       path: '/impersonate',
       name: 'impersonate',
-      component: Impersonate,
+      component: ImpersonateView,
       meta: {
         pageTitle: 'Impersonate a BCeID User',
         requiresAuth: true,
       },
     },
+    {
+      path: '/messaging',
+      name: 'messaging',
+      component: MessagingView,
+      meta: {
+        pageTitle: 'Messaging',
+        requiresAuth: true,
+      },
+    },
+    {
+      path: '/resources',
+      name: 'resources',
+      component: ResourcesView,
+      meta: {
+        pageTitle: 'Resources',
+        requiresAuth: true,
+      },
+    },
     {
       path: '/session-expired',
       name: 'session-expired',

diff --git a/frontend/src/views/MessagingView.vue b/frontend/src/views/MessagingView.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-card class="messaging-card" variant="flat">
+    <v-tabs v-model="tab" bg-color="none" class="messaging-tabs" density="compact">
+      <v-tab class="messaging-tab" selected-class="messaging-tab-selected" value="one">Notifications</v-tab>
+      <v-tab class="messaging-tab" selected-class="messaging-tab-selected" value="two">Messages</v-tab>
+      <v-tab class="messaging-tab" selected-class="messaging-tab-selected" value="three">Archive</v-tab>
+    </v-tabs>
+    <v-card-text class="messaging-card-text">
+      <v-window v-model="tab" direction="vertical" class="messaging-window">
+        <v-window-item value="one" class="messaging-window-item"><NotificationsTab /></v-window-item>
+        <v-window-item value="two" class="messaging-window-item"><MessagesTab /></v-window-item>
+        <v-window-item value="three" class="messaging-window-item">Three</v-window-item>
+      </v-window>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import MessagesTab from '@/components/messages/MessagesTab.vue'
+import NotificationsTab from '@/components/notifications/NotificationsTab.vue'
+
+export default {
+  components: { MessagesTab, NotificationsTab },
+  data: () => ({
+    tab: null,
+  }),
+}
+</script>
+
+<style scoped>
+.messaging-card {
+  max-width: 1000px;
+}
+.messaging-tab {
+  border: 2px solid #6699cc;
+  border-bottom: 0px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+  color: #336699;
+  font-weight: bold;
+}
+
+.messaging-tab-selected {
+  background-color: #6699cc;
+  color: white;
+}
+
+.messaging-card-text {
+  padding: 0px;
+}
+
+.messaging-window {
+  border: 2px solid #6699cc;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  min-height: 300px;
+  box-shadow:
+    0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
+    0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
+    0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+  margin-bottom: 20px;
+}
+
+.messaging-window-item {
+  padding: 10px;
+}
+</style>
diff --git a/frontend/src/views/ResourcesView.vue b/frontend/src/views/ResourcesView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Resources</div>
+</template>