Additional code QA feedback addressed.

backend/src/components/message.js

@@ -61,7 +61,7 @@ function mapAssistanceRequestObjectForBack(data) {
 
 async function createAssistanceRequest(req, res) {
   try {
-    let payload = mapAssistanceRequestObjectForBack(req.body)
+    const payload = mapAssistanceRequestObjectForBack(req.body)
     let response = await postOperation('ofm_assistance_requests?$select=ofm_name,ofm_assistance_requestid', payload)
     response = new MappableObjectForFront(response, AssistanceRequestMappings).toJSON()
     return res.status(HttpStatus.OK).json(response)
@@ -87,9 +87,9 @@ async function getAssistanceRequests(req, res) {
   try {
     log.debug('getAssistanceRequests: ', req.params.contactId)
     let assistanceRequests = []
-    let operation = `ofm_assistance_requests?$select=modifiedon,ofm_assistance_requestid,ofm_last_opened_time,ofm_name,_ofm_request_category_value,ofm_subject,statecode,statuscode,ofm_is_read&$expand=ofm_facility_request_request($select=_ofm_facility_value),ofm_conversation_request($select=modifiedon)&$filter=(_ofm_contact_value eq ${req.params.contactId}) and (ofm_facility_request_request/any(o1:(o1/ofm_facility_requestid ne null))) and (ofm_conversation_request/any(o2:(o2/ofm_conversationid ne null)))`
+    const operation = `ofm_assistance_requests?$select=modifiedon,ofm_assistance_requestid,ofm_last_opened_time,ofm_name,_ofm_request_category_value,ofm_subject,statecode,statuscode,ofm_is_read&$expand=ofm_facility_request_request($select=_ofm_facility_value),ofm_conversation_request($select=modifiedon)&$filter=(_ofm_contact_value eq ${req.params.contactId}) and (ofm_facility_request_request/any(o1:(o1/ofm_facility_requestid ne null))) and (ofm_conversation_request/any(o2:(o2/ofm_conversationid ne null)))`
     log.debug('operation: ', operation)
-    let response = await getOperation(operation)
+    const response = await getOperation(operation)
     response?.value?.forEach((item) => assistanceRequests.push(mapAssistanceRequestObjectForFront(item)))
     return res.status(HttpStatus.OK).json(assistanceRequests)
   } catch (e) {
@@ -110,8 +110,8 @@ async function getAssistanceRequest(req, res) {
 
 async function updateAssistanceRequest(req, res) {
   try {
-    let payload = new MappableObjectForBack(req.body, AssistanceRequestMappings).toJSON()
-    let response = await patchOperationWithObjectId('ofm_assistance_requests', req.params.assistanceRequestId, payload)
+    const payload = new MappableObjectForBack(req.body, AssistanceRequestMappings).toJSON()
+    const response = await patchOperationWithObjectId('ofm_assistance_requests', req.params.assistanceRequestId, payload)
     return res.status(HttpStatus.OK).json(response)
   } catch (e) {
     return res.status(HttpStatus.INTERNAL_SERVER_ERROR).json(e.data ? e.data : e?.status)
@@ -120,9 +120,9 @@ async function updateAssistanceRequest(req, res) {
 
 async function getAssistanceRequestConversation(req, res) {
   try {
-    let operation = `ofm_conversations?$select=ofm_conversationid,ofm_name,createdon,ofm_message,ofm_source_system,_ofm_request_value,_ownerid_value,statecode,statuscode&$expand=createdby($select=firstname,lastname)&$filter=(_ofm_request_value eq ${req.params.assistanceRequestId})&$orderby=createdon desc`
+    const operation = `ofm_conversations?$select=ofm_conversationid,ofm_name,createdon,ofm_message,ofm_source_system,_ofm_request_value,_ownerid_value,statecode,statuscode&$expand=createdby($select=firstname,lastname)&$filter=(_ofm_request_value eq ${req.params.assistanceRequestId})&$orderby=createdon desc`
     log.debug('operation: ', operation)
-    let response = await getOperation(operation)
+    const response = await getOperation(operation)
     const messages = []
 
     for (const item of response.value) {

frontend/src/assets/css/main.css

@@ -161,3 +161,8 @@ input[type='number'] {
 .theme--light.v-btn.v-btn--disabled:not(.v-btn--text):not(.v-btn--outlined) {
   background-color: rgba(0, 0, 0, 0.12) !important;
 }
+
+:global(.tooltip) {
+  background-color: #003466 !important;
+  color: #ffffff !important;
+}

frontend/src/components/messages/AssistanceRequestTable.vue

@@ -30,7 +30,7 @@
     </template>
     <template #item.lastConversationTime="{ item }">
       <div :class="getItemClass(item)">
-        {{ formatDate(item.lastConversationTime) }}
+        {{ format.formatDate(item.lastConversationTime) }}
       </div>
     </template>
   </v-data-table-virtual>
@@ -39,10 +39,11 @@
 <script>
 import { mapState, mapActions } from 'pinia'
 import { useMessagesStore } from '@/stores/messages'
-import moment from 'moment'
+import format from '@/utils/format'
 
 export default {
   name: 'AssistanceRequestTable',
+  format: [format],
   props: {
     markReadButtonState: {
       type: Boolean,
@@ -60,6 +61,7 @@ export default {
   emits: ['openRequestConversation'],
   data() {
     return {
+      format,
       headers: [
         { title: 'Status', align: 'start', key: 'status', sortable: true, width: '15%' },
         { title: 'Subject', align: 'start', key: 'subject', sortable: true, width: '40%' },
@@ -139,9 +141,6 @@ export default {
         'highlighted-row': this.selectedRequestId === item?.assistanceRequestId,
       }
     },
-    formatDate(date) {
-      return moment(date).format('YYYY-MMM-DD')
-    },
   },
 }
 </script>

frontend/src/components/messages/MessagesTab.vue

@@ -44,7 +44,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useMessagesStore } from '@/stores/messages'
 import NewRequestDialog from '@/components/messages/NewRequestDialog.vue'
 import AssistanceRequestTable from '@/components/messages/AssistanceRequestTable.vue'
-import RequestConversations from './RequestConversations.vue'
+import RequestConversations from '@/components/messages/RequestConversations.vue'
 export default {
   name: 'MessagesTab',
   components: { NewRequestDialog, AssistanceRequestTable, RequestConversations },

frontend/src/components/messages/ReplyRequestDialog.vue

@@ -37,8 +37,8 @@
 <script>
 import { mapActions } from 'pinia'
 import { useMessagesStore } from '@/stores/messages'
-import AppButton from '../ui/AppButton.vue'
-import AppDialog from '../ui/AppDialog.vue'
+import AppButton from '@/components/ui/AppButton.vue'
+import AppDialog from '@/components/ui/AppDialog.vue'
 import rules from '@/utils/rules'
 
 export default {
@@ -50,7 +50,7 @@ export default {
       default: false,
     },
     assistanceRequestId: {
-      type: [String, null],
+      type: String,
       required: true,
       default: '',
     },
@@ -116,7 +116,7 @@ export default {
       if (this.replyRequestModel?.isFormComplete) {
         try {
           this.isLoading = true
-          let response = await this.replyToAssistanceRequest(this.replyRequestModel)
+          await this.replyToAssistanceRequest(this.replyRequestModel)
           this.$emit('reply-success-event', true) // emit success to flag showing success message
         } catch (error) {
           console.log(`Failed to create a reply for Assistance Request - ${error}`)

frontend/src/components/messages/RequestConversations.vue

@@ -1,10 +1,10 @@
 <template>
   <v-container v-if="assistanceRequest" class="pa-3">
     <v-row>
-      <v-col class="d-flex align-center pl-0 pt-0 pb-0">
+      <v-col cols="10" class="d-flex align-center pl-0 pt-0 pb-0">
         <span class="subject-header">Subject: {{ assistanceRequest.subject }}</span>
       </v-col>
-      <v-col class="d-flex flex-column align-end pb-0 pt-0">
+      <v-col cols="2" class="d-flex flex-column align-start pb-0 pt-0">
         <v-btn v-if="assistanceRequest.lastOpenedTime"
           @click="this.$emit('toggleMarkUnreadButtonInConversationThread')" class="btn-style">
           <v-icon class="icon" left>mdi-email-open-outline</v-icon>
@@ -19,7 +19,7 @@
             </div>
           </template>
         </v-tooltip>
-        <v-btn v-else @click="toggleReplyRequestDialog" class="btn-style mr-15">
+        <v-btn v-else @click="toggleReplyRequestDialog" class="btn-style pl-0 pr-15">
           <v-icon class="icon" left>mdi-reply</v-icon>
           <span class="btn-label">Reply</span>
         </v-btn>
@@ -39,7 +39,7 @@
         facility.facilityName).join(', ') }}</v-col>
     </v-row>
     <v-row class="border-bottom">
-      <v-col class="d-flex justify-end pt-0 pb-0 pr-2 w-100 align-center"><span class="font-weight-bold">Sort
+      <v-col class="d-flex justify-end pt-0 pb-0 pr-0 w-100 align-center"><span class="font-weight-bold">Sort
           By:</span>
         <v-btn class="btn-style" @click="toggleSort()">
           <span class="btn-label">{{ isSortedDesc ? 'Newest' : 'Oldest' }} first</span>
@@ -50,20 +50,22 @@
     </v-row>
     <v-row v-if="assistanceRequest">
       <v-col cols="12" class="border-right pa-0">
-        <v-data-table-virtual :headers="headers" :items="assistanceRequestConversation" item-key="messageId"
-          class="data-table">
-          <template #headers>
-          </template>
-          <template #item="{ item }">
-            <v-row class="border-bottom mr-0">
-              <v-col>
-                <div><span class="font-weight-bold">From:</span> {{ deriveFromDisplay(item) }}</div>
-                <div><span class="font-weight-bold">Sent:</span> {{ format.formatDate(item.sentDate) }}</div>
-                <div class="pt-1">{{ item.message }}</div>
-              </v-col>
-            </v-row>
-          </template>
-        </v-data-table-virtual>
+        <v-skeleton-loader :loading="loading" type="table-tbody">
+          <v-data-table-virtual :headers="headers" :items="assistanceRequestConversation" item-key="messageId"
+            class="data-table">
+            <template #headers>
+            </template>
+            <template #item="{ item }">
+              <v-row class="border-bottom mr-0">
+                <v-col>
+                  <div><span class="font-weight-bold">From:</span> {{ deriveFromDisplay(item) }}</div>
+                  <div><span class="font-weight-bold">Sent:</span> {{ format.formatDate(item.sentDate) }}</div>
+                  <div class="pt-1">{{ item.message }}</div>
+                </v-col>
+              </v-row>
+            </template>
+          </v-data-table-virtual>
+        </v-skeleton-loader>
       </v-col>
     </v-row>
     <ReplyRequestDialog class="pa-0"
@@ -102,6 +104,7 @@ export default {
       showReplyRequestDialog: false,
       isSortedDesc: true,
       assistanceRequest: null,
+      loading: false,
       headers: [
         {
           title: 'dateReceived',
@@ -123,7 +126,9 @@ export default {
   watch: {
     // When assistanceRequestId changes, get the conversation for the new assistance request.
     assistanceRequestId: async function (newVal) {
+      this.loading = true
       await this.getAssistanceRequestConversation(this.assistanceRequestId)
+      this.loading = false
       this.assistanceRequest = this.assistanceRequests.find(item => item.assistanceRequestId === newVal)
     },
   },
@@ -181,19 +186,14 @@ export default {
      * Returns the sent by value for the conversation depending on the source system.
      */
     deriveFromDisplay(item) {
-      return (item.ofmSourceSystem) ? this.userInfo?.firstName + ' ' + this.userInfo?.lastName : OFM_PROGRAM
+      return (item.ofmSourceSystem) ? `${this.userInfo?.firstName} ${this.userInfo?.lastName}` : OFM_PROGRAM;
     }
 
   }
 }
 </script>
   
 <style scoped>
-:global(.tooltip) {
-  background-color: #003466 !important;
-  color: #ffffff !important;
-}
-
 .data-table {
   max-height: 635px;
 }
@@ -237,7 +237,7 @@ export default {
 }
 
 .reply-disabled {
-  width: 131px;
+  padding-right: 17px;
   font-size: 14px;
   font-weight: 400;
   letter-spacing: 1.25px;