Merge branch 'main' into ofmcc-5679-service-delivery-upload-docs

frontend/src/components/funding/FundingAgreementsTab.vue

@@ -25,8 +25,8 @@
         </template>
         <template #[`item.actions`]="{ item }">
           <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
-            <AppButton v-if="showSign(item)" :primary="false" size="small" height="30px" @click="goToPDFViewer(item)">Sign</AppButton>
-            <AppButton v-else-if="showOpen(item)" :primary="false" size="small" height="30px" @click="goToPDFViewer(item)">Open</AppButton>
+            <AppButton v-if="showSign(item)" :primary="false" size="small" @click="goToPDFViewer(item)">Sign</AppButton>
+            <AppButton v-else-if="showOpen(item)" :primary="false" size="small" @click="goToPDFViewer(item)">Open</AppButton>
           </v-row>
         </template>
       </v-data-table>

frontend/src/components/messages/MessagesTab.vue

@@ -1,37 +1,35 @@
 <template>
   <v-row>
     <v-col sm="12" md="6" class="pa-0" :class="borderClass">
-      <v-row>
-        <v-col class="mt-3 ml-3">
-          <div>
-            <AppButton variant="text" @click="toggleNewRequestDialog()">
-              <v-icon class="icon" left>mdi-email-plus-outline</v-icon>
-              <span class="btn-label">New message</span>
-            </AppButton>
-            <AppButton variant="text" @click="toggleMarkUnreadButtonInMessageTable()">
-              <v-icon class="icon" left>mdi-email-outline</v-icon>
-              <span class="btn-label">Mark unread</span>
-            </AppButton>
-            <AppButton variant="text" class="btn-style" @click="toggleMarkReadButton()">
-              <v-icon class="icon" left>mdi-email-open-outline</v-icon>
-              <span class="btn-label">Mark read</span>
-            </AppButton>
-          </div>
+      <v-row class="mt-0 ml-0">
+        <v-col cols="12">
+          <AppButton size="small" class="messages-button" @click="toggleNewRequestDialog()">
+            <v-icon left>mdi-email-plus-outline</v-icon>
+            New message
+          </AppButton>
+          <AppButton size="small" class="messages-button mx-1" :primary="false" @click="toggleMarkUnreadButtonInMessageTable()">
+            <v-icon left>mdi-email-outline</v-icon>
+            Mark unread
+          </AppButton>
+          <AppButton size="small" class="messages-button" :primary="false" @click="toggleMarkReadButton()">
+            <v-icon left>mdi-email-open-outline</v-icon>
+            Mark read
+          </AppButton>
         </v-col>
       </v-row>
       <v-skeleton-loader :loading="!assistanceRequests" type="table-tbody">
         <AssistanceRequestTable
-          :markReadButtonState="markReadButtonState"
-          :markUnreadButtonInMessageTableState="markUnreadButtonInMessageTableState"
-          :markUnreadButtonInConversationThreadState="markUnreadButtonInConversationThreadState"
-          @openRequestConversation="openRequestConversation" />
+          :mark-read-button-state="markReadButtonState"
+          :mark-unread-button-in-message-table-state="markUnreadButtonInMessageTableState"
+          :mark-unread-button-in-conversation-thread-state="markUnreadButtonInConversationThreadState"
+          @open-request-conversation="openRequestConversation" />
       </v-skeleton-loader>
     </v-col>
     <v-col sm="12" md="6">
-      <RequestConversations :assistanceRequestId="selectedAssistanceRequestId" @toggleMarkUnreadButtonInConversationThread="toggleMarkUnreadButtonInConversationThread" />
+      <RequestConversations :assistance-request-id="selectedAssistanceRequestId" @toggle-mark-unread-button-in-conversation-thread="toggleMarkUnreadButtonInConversationThread" />
     </v-col>
   </v-row>
-  <NewRequestDialog class="pa-0" :show="showNewRequestDialog" :isInvokedFromMessages="true" @close="toggleNewRequestDialog" />
+  <NewRequestDialog class="pa-0" :show="showNewRequestDialog" :is-invoked-from-messages="true" @close="toggleNewRequestDialog" />
 </template>
 
 <script>
@@ -89,4 +87,8 @@ export default {
 .border-bottom {
   border-bottom: 2px solid #003366;
 }
+
+.messages-button {
+  display: inline-block;
+}
 </style>

frontend/src/components/messages/RequestConversations.vue

@@ -1,30 +1,29 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <v-container v-if="assistanceRequest">
     <v-row>
-      <v-col cols="9" class="d-flex align-center pl-0 pt-0 pb-4">
+      <v-col cols="7" lg="9" class="d-flex align-center pl-0 pt-0 pb-4">
         <span class="subject-header">Subject: {{ assistanceRequest.subject }}</span>
       </v-col>
-      <v-col cols="3" class="d-flex flex-column align-end pa-0">
-        <AppButton variant="text" v-if="assistanceRequest.isRead" @click="this.$emit('toggleMarkUnreadButtonInConversationThread')">
-          <v-icon class="icon" left>mdi-email-outline</v-icon>
-          <span>Mark unread</span>
+      <v-col cols="5" lg="3" class="d-flex flex-column align-end pa-0">
+        <AppButton v-if="assistanceRequest.isRead" size="small" :primary="false" class="conversations-button" @click="$emit('toggleMarkUnreadButtonInConversationThread')">
+          <v-icon left>mdi-email-outline</v-icon>
+          Mark unread
         </AppButton>
-        <v-tooltip v-if="showTooltip" content-class="tooltip" :text="getReplyDisabledText()">
-          <template v-slot:activator="{ props }">
-            <div v-bind="props" class="reply-disabled">
-              <v-icon left>mdi-reply</v-icon>
-              <span>Reply</span>
+        <v-tooltip
+          :disabled="!showTooltip"
+          class="ma-1"
+          content-class="tooltip"
+          text="Your request is still in the queue. If this is an urgent request, you can call the program at 1-888-338-6622 (Option 7).">
+          <template #activator="{ props }">
+            <div v-bind="props">
+              <AppButton class="reply-button my-1" :disabled="!isReplyButtonEnabled" size="small">
+                <v-icon left>mdi-reply</v-icon>
+                Reply
+              </AppButton>
             </div>
           </template>
         </v-tooltip>
-        <AppButton variant="text" v-else-if="isReplyButtonEnabled" @click="toggleReplyRequestDialog" class="pr-2">
-          <v-icon class="icon" left>mdi-reply</v-icon>
-          <span>Reply</span>
-        </AppButton>
-        <div v-else class="reply-disabled">
-          <v-icon left>mdi-reply</v-icon>
-          <span>Reply</span>
-        </div>
       </v-col>
     </v-row>
     <v-row>
@@ -44,13 +43,13 @@
         <span class="font-weight-bold">Sort By:</span>
         <AppButton variant="text" @click="toggleSort()">
           <span>{{ isSortedDesc ? 'Newest' : 'Oldest' }} first</span>
-          <v-icon v-if="isSortedDesc" class="icon">mdi-arrow-up</v-icon>
-          <v-icon v-else class="icon">mdi-arrow-down</v-icon>
+          <v-icon v-if="isSortedDesc">mdi-arrow-up</v-icon>
+          <v-icon v-else>mdi-arrow-down</v-icon>
         </AppButton>
       </v-col>
     </v-row>
     <v-row v-if="showCloseRequestBanner">
-      <CloseRequestBanner :assistanceRequestId="assistanceRequestId" class="pa-0 mb-4" />
+      <CloseRequestBanner :assistance-request-id="assistanceRequestId" class="pa-0 mb-4" />
     </v-row>
     <v-row v-if="assistanceRequest" class="border-top">
       <v-col cols="12" class="border-right pa-0">
@@ -78,8 +77,8 @@
     </v-row>
     <ReplyRequestDialog
       class="pa-0"
-      :assistanceRequestId="assistanceRequest.assistanceRequestId"
-      :referenceNumber="assistanceRequest.referenceNumber"
+      :assistance-request-id="assistanceRequest.assistanceRequestId"
+      :reference-number="assistanceRequest.referenceNumber"
       :show="showReplyRequestDialog"
       @reply-success-event="replySuccessEvent"
       @close="toggleReplyRequestDialog" />
@@ -95,19 +94,19 @@ import CloseRequestBanner from '@/components/messages/CloseRequestBanner.vue'
 import AppButton from '@/components/ui/AppButton.vue'
 import alertMixin from '@/mixins/alertMixin'
 import format from '@/utils/format'
-import { ASSISTANCE_REQUEST_REPLY_DISABLED_TEXT, ASSISTANCE_REQUEST_STATUS_CODES, OFM_PROGRAM } from '@/utils/constants'
+import { ASSISTANCE_REQUEST_STATUS_CODES, OFM_PROGRAM } from '@/utils/constants'
 
 export default {
   components: { AppButton, ReplyRequestDialog, CloseRequestBanner },
   mixins: [alertMixin],
-  format: [format],
   props: {
     assistanceRequestId: {
       type: String,
       required: true,
       default: '',
     },
   },
+  format: [format],
   emits: ['toggleMarkUnreadButtonInConversationThread'],
   data() {
     return {
@@ -199,13 +198,6 @@ export default {
       }
     },
 
-    /**
-     * Returns the text to display in the tooltip for the reply button when it is disabled.
-     */
-    getReplyDisabledText() {
-      return ASSISTANCE_REQUEST_REPLY_DISABLED_TEXT
-    },
-
     /**
      * Returns the sent by value for the conversation depending on the source system.
      */
@@ -217,6 +209,10 @@ export default {
 </script>
 
 <style scoped>
+.reply-button {
+  width: 155px;
+}
+
 .data-table {
   max-height: 48vh;
 }
@@ -234,13 +230,4 @@ export default {
 .border-bottom {
   border-top: 1px solid #e0e0e0;
 }
-
-.reply-disabled {
-  padding-right: 10px;
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 1.25px;
-  color: #c0c0c0;
-  font-family: BCSans, veranda, arial, sans-serif;
-}
 </style>

frontend/src/components/notifications/NotificationDetails.vue

@@ -1,15 +1,16 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <v-card v-if="notification" variant="flat">
     <v-card-title class="notification-details-header">
       <v-row>
-        <v-col sm="12" lg="9" xl="10" class="notification-from-text pa-0">
+        <v-col cols="7" md="8" lg="9" class="notification-from-text pa-0">
           <strong>From:</strong>
           &nbsp;Operating Funding Model Program
         </v-col>
-        <v-col sm="12" lg="3" xl="2" class="pa-0 d-flex justify-end mt-1">
-          <AppButton v-if="notification?.isRead" variant="text" @click="$emit('toggleMarkUnreadButtonInNotificationDetails')">
+        <v-col cols="5" md="4" lg="3" class="pa-0 d-flex justify-end mt-1">
+          <AppButton v-if="notification?.isRead" size="small" :primary="false" @click="$emit('toggleMarkUnreadButtonInNotificationDetails')">
             <v-icon class="icon" left>mdi-email-outline</v-icon>
-            <span class="btn-label">Mark Unread</span>
+            Mark Unread
           </AppButton>
         </v-col>
       </v-row>

frontend/src/components/notifications/NotificationsTab.vue

@@ -4,27 +4,27 @@
       <v-row>
         <v-col class="mt-3 ml-3">
           <div>
-            <AppButton @click="toggleMarkUnreadButtonInNotificationTable(false)" variant="text">
+            <AppButton class="mx-1 notifications-button" size="small" :primary="false" @click="toggleMarkUnreadButtonInNotificationTable(false)">
               <v-icon class="icon" left>mdi-email-outline</v-icon>
-              <span class="btn-label">Mark unread</span>
+              Mark unread
             </AppButton>
-            <AppButton @click="toggleMarkReadButton(true)" variant="text">
+            <AppButton class="mx-1 notifications-button" size="small" :primary="false" @click="toggleMarkReadButton(true)">
               <v-icon class="icon" left>mdi-email-open-outline</v-icon>
-              <span class="btn-label">Mark read</span>
+              Mark read
             </AppButton>
           </div>
         </v-col>
       </v-row>
       <v-skeleton-loader :loading="!notifications" type="table-tbody">
         <NotificationsTable
-          :markReadButtonState="markReadButtonState"
-          :markUnreadButtonInNotificationTableState="markUnreadButtonInNotificationTableState"
-          :markUnreadButtonInNotificationDetailsState="markUnreadButtonInNotificationDetailsState"
-          @openNotificationDetails="openNotificationDetails" />
+          :mark-read-button-state="markReadButtonState"
+          :mark-unread-button-in-notification-table-state="markUnreadButtonInNotificationTableState"
+          :mark-unread-button-in-notification-details-state="markUnreadButtonInNotificationDetailsState"
+          @open-notification-details="openNotificationDetails" />
       </v-skeleton-loader>
     </v-col>
     <v-col cols="12" md="6">
-      <NotificationDetails :notificationId="selectedNotificationId" @toggleMarkUnreadButtonInNotificationDetails="toggleMarkUnreadButtonInNotificationDetails" />
+      <NotificationDetails :notification-id="selectedNotificationId" @toggle-mark-unread-button-in-notification-details="toggleMarkUnreadButtonInNotificationDetails" />
     </v-col>
   </v-row>
 </template>
@@ -78,4 +78,7 @@ export default {
 .border-right {
   border-right: 2px solid #003366;
 }
+.notifications-button {
+  display: inline-block;
+}
 </style>

frontend/src/components/reports/PendingReportsTab.vue

@@ -37,8 +37,8 @@
         </template>
         <template #[`item.actions`]="{ item }">
           <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
-            <AppButton v-if="showUpdate(item)" :primary="false" size="small" height="30px" @click="openSurveyResponse(item)">Update</AppButton>
-            <AppButton v-else-if="showView()" :primary="false" size="small" height="30px" @click="openSurveyResponse(item)">View</AppButton>
+            <AppButton v-if="showUpdate(item)" :primary="false" size="small" @click="openSurveyResponse(item)">Update</AppButton>
+            <AppButton v-else-if="showView()" :primary="false" size="small" @click="openSurveyResponse(item)">View</AppButton>
             <AppButton
               v-if="showUnlock(item)"
               :primary="false"

frontend/src/components/reports/ReportingHistoryTab.vue

@@ -30,8 +30,8 @@
         </template>
         <template #[`item.actions`]="{ item }">
           <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
-            <AppButton v-if="showUpdate(item)" :primary="false" size="small" height="30px" @click="openSurveyResponse(item)">Update</AppButton>
-            <AppButton v-else-if="showView()" :primary="false" size="small" height="30px" @click="openSurveyResponse(item)">View</AppButton>
+            <AppButton v-if="showUpdate(item)" :primary="false" size="small" @click="openSurveyResponse(item)">Update</AppButton>
+            <AppButton v-else-if="showView()" :primary="false" size="small" @click="openSurveyResponse(item)">View</AppButton>
             <AppButton
               v-if="showUnlock(item)"
               :primary="false"

frontend/src/components/ui/AppButton.vue

@@ -109,6 +109,7 @@ export default {
 
 .small {
   font-size: 14px;
+  height: 30px !important;
   padding: 0px;
 }
 </style>

frontend/src/utils/constants.js

@@ -254,7 +254,6 @@ export const YES_NO_CHOICE_CRM_MAPPING = Object.freeze({
   NA: 3,
 })
 
-export const ASSISTANCE_REQUEST_REPLY_DISABLED_TEXT = 'Your request is still in the queue. If this is an urgent request, you can call the program at 1-888-338-6622 (Option 7).'
 export const SUPPORTED_DOCUMENTS_MESSAGE = 'The maximum file size is 4MB for each document. Accepted file types are jpg, jpeg, heic, png, pdf, docx, doc, xls, and xlsx.'
 export const OFM_PROGRAM = 'OFM Program'
 

frontend/src/views/MessagingView.vue

@@ -4,12 +4,16 @@
     <v-card>
       <v-tabs v-model="tab" bg-color="#ffffff" density="compact" color="#003366">
         <v-tab value="notifications">
-          Notifications
-          <template v-if="unreadNotificationCount > 0">({{ unreadNotificationCount }} unread)</template>
+          <strong>
+            Notifications
+            <template v-if="unreadNotificationCount > 0">({{ unreadNotificationCount }} unread)</template>
+          </strong>
         </v-tab>
         <v-tab value="messages">
-          Messages
-          <template v-if="unreadMessageCount > 0">({{ unreadMessageCount }} unread)</template>
+          <strong>
+            Messages
+            <template v-if="unreadMessageCount > 0">({{ unreadMessageCount }} unread)</template>
+          </strong>
         </v-tab>
       </v-tabs>
       <v-card-text>
@@ -40,7 +44,7 @@ export default {
   components: { AppBackButton, MessagesTab, NotificationsTab, OrganizationHeader },
   data() {
     return {
-      tab: null,
+      tab: 1,
     }
   },
   computed: {