Merge pull request #62 from bcgov/ofmcc-1023-bug-internal-messaging

ofmcc-1023 - fix minor UI bugs and hide Messaging icon from Internal site
bcgov · Dec 18, 2023 · 53fb860 · 53fb860
2 parents 9a0d0d2 + 614081b
commit 53fb860
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 60 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -12,7 +12,7 @@
       <TheModalIdle v-if="isAuthenticated" class="align-start px-8 mb-0" />
       <TheHeroImage v-if="$route.meta.showHeroImage" />
       <TheFacilityHeader v-if="isActingProvider" :showFacility="$route.meta.showFacility" />
-      <router-view class="align-start pt-0 px-8 mb-0" />
+      <router-view class="align-start pt-5 px-8 mb-0" />
     </v-main>
     <TheFooter />
   </v-app>

diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
@@ -17,7 +17,7 @@
         <v-spacer></v-spacer>
         <div v-if="isAuthenticated && userInfo" class="mt-5">
           <v-row>
-            <v-col style="width: 70px">
+            <v-col v-if="showMessagingIcon" style="width: 70px">
               <v-btn @click="$router.push({ name: 'messaging' })" id="mail_box_button" rounded class="mr-5 elevation-0" dark v-if="!isNaN(messageNotificationCount)">
                 <v-badge color="red" class="pt-0" :content="messageNotificationCount" bottom right overlap offset-x="8" offset-y="28">
                   <v-icon aria-hidden="false" icon="mdi-email-outline" size="40" color="white" />
@@ -85,12 +85,17 @@ export default {
       const readActionRequiredMessagesCount = this.assistanceRequests?.filter((message) => message.status === 'Action required' && message.isRead)?.length
       return this.unreadMessageCount + readActionRequiredMessagesCount
     },
+    showMessagingIcon() {
+      return this.isAuthenticated && this.userInfo && !this.isMinistryUser
+    },
   },
   async created() {
     try {
       await this.getUserInfo()
-      await this.getNotifications(this.userInfo.contactId)
-      await this.getAssistanceRequests(this.userInfo?.contactId)
+      if (this.showMessagingIcon) {
+        await this.getNotifications(this.userInfo?.contactId)
+        await this.getAssistanceRequests(this.userInfo?.contactId)
+      }
     } catch (error) {
       console.log(error)
     }

diff --git a/frontend/src/components/messages/MessagesTab.vue b/frontend/src/components/messages/MessagesTab.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'pinia'
+import { mapState } from 'pinia'
 import { useMessagesStore } from '@/stores/messages'
 import NewRequestDialog from '@/components/messages/NewRequestDialog.vue'
 import AssistanceRequestTable from '@/components/messages/AssistanceRequestTable.vue'
@@ -62,7 +62,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions(useMessagesStore, ['getAssistanceRequests']),
     toggleNewRequestDialog() {
       this.showNewRequestDialog = !this.showNewRequestDialog
     },

diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
@@ -16,10 +16,10 @@ export const useAuthStore = defineStore('auth', {
   }),
   getters: {
     isActingProvider: (state) => !state.isMinistryUser || state.isImpersonating,
-    hasRoles: (state) => state.userInfo && state.userInfo.roles && state.userInfo.roles.length > 0,
-    hasFacilities: (state) => state.userInfo && state.userInfo.facilities && state.userInfo.facilities.length > 0,
+    hasRoles: (state) => state.userInfo?.roles?.length > 0,
+    hasFacilities: (state) => state.userInfo?.facilities?.length > 0,
     hasRole: (state) => {
-      return (role) => state.userInfo && state.userInfo.roles.includes(role)
+      return (role) => state.userInfo?.roles?.includes(role)
     },
   },
   actions: {

diff --git a/frontend/src/views/MinistryLoginView.vue b/frontend/src/views/MinistryLoginView.vue
@@ -1,38 +1,20 @@
 <template>
-  <v-container fluid class="full-height">
-    <!-- login article -->
-    <!-- <article id="login-banner" class="top-banner"> -->
-    <v-row align="center" justify="center">
-      <v-col cols="12" align="center" class="pt-0">
-        <v-img src="@/assets/images/login-header-img-resized.jpg" max-width="1448" class="align-end">
-          <v-col align="center" style="background-color: rgb(28, 115, 158, 0.85)">
-            <span class="text-h4 text-white font-weight-bold" style="font-family: BCSans">Early Childhood Care - Operating Funding Model</span>
-            <br />
-            <span class="text-h6 text-white">Welcome</span>
-          </v-col>
-        </v-img>
+  <v-container fluid>
+    <v-row>
+      <v-col class="xs-12 lg-6 xl-2">
+        <v-card flat class="d-flex flex-column justify-center align-center">
+          <v-card-title class="gov-header">
+            <h4 id="login_text">Ministry</h4>
+          </v-card-title>
+          <v-card-text id="login_descriptor">Log in with your IDIR account</v-card-text>
+          <v-card-actions>
+            <v-row>
+              <AppButton icon="mdi-login" :href="authRoutes.LOGIN_IDIR" @click="clearStorage" width="250px" id="idir-login">IDIR Log In</AppButton>
+            </v-row>
+          </v-card-actions>
+        </v-card>
       </v-col>
     </v-row>
-
-    <v-container class="containerWidth1450 pa-0">
-      <v-row>
-        <v-col class="xs-12 lg-6 xl-2">
-          <v-divider></v-divider>
-          <v-card flat class="d-flex flex-column justify-center align-center">
-            <v-card-title class="gov-header">
-              <h4 id="login_text">Ministry</h4>
-            </v-card-title>
-            <v-card-text id="login_descriptor">Log in with your IDIR account</v-card-text>
-            <v-card-actions>
-              <v-row>
-                <AppButton icon="mdi-login" :href="authRoutes.LOGIN_IDIR" @click="clearStorage" width="250px" id="idir-login">IDIR Log In</AppButton>
-              </v-row>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-    <!-- </article> -->
   </v-container>
 </template>
 
@@ -63,26 +45,7 @@ export default {
 </script>
 
 <style scoped>
-.login-card {
-  max-width: 400px;
-}
-
 .gov-header {
   color: #003366;
 }
-
-.top-banner {
-  min-height: 500px;
-  background-size: cover;
-  align-items: center;
-  display: flex;
-}
-
-.full-height {
-  height: 100%;
-}
-
-.containerWidth1450 {
-  max-width: 1450px;
-}
 </style>