Merge pull request #5575 from lyttam/BOAC-6697

BOAC-6697: fixes error displaying comments on PAM dashboard

Author: pauline2k

src/components/comment/AdvisingComments.vue

@@ -17,16 +17,6 @@
               :peer-advising-department-id="comment.peerAdvisingDepartmentId"
             />
           </div>
-          <v-badge
-            class="advising-comment-new"
-            :class="{'show': !comment.read}"
-            color="info"
-            inline
-          >
-            <template #badge>
-              <span class="font-weight-black text-caption text-uppercase">new</span>
-            </template>
-          </v-badge>
         </div>
         <div
           :id="`${idPrefix}-comment-${comment.id}-text`"
@@ -86,6 +76,7 @@
             :date="comment.createdAt"
             :include-time-of-day="comment.createdAt.length > 10"
             class="mb-2"
+            :class="{'font-weight-bold': !comment.read && comment.createdAt === comment.updatedAt}"
           />
         </div>
         <div v-if="comment.updatedAt && comment.createdAt !== comment.updatedAt" class="pl-2">
@@ -95,6 +86,7 @@
             :date="comment.updatedAt"
             :include-time-of-day="comment.updatedAt.length > 10"
             class="mb-2"
+            :class="{'font-weight-bold': !comment.read}"
           />
         </div>
       </footer>
@@ -268,16 +260,6 @@ const onUpdateComment = (id, body, attachments, deleteAttachmentIds) => {
 .academic-timeline-column-date{
   margin-right: -24px;
 }
-.advising-comment-new {
-  margin-top: 2px;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
-}
-.advising-comment-new.show {
-  visibility: visible;
-  opacity: 1;
-}
 .advising-comments :deep(ul), .advising-comments :deep(ol) {
   padding-left: 25px;
 }

src/components/peer/note/PeerAdvisingNotesTable.vue

@@ -182,7 +182,7 @@
           <AdvisingComments
             class="pl-5"
             :class="{'sr-only': !isExpanded(note)}"
-            :note="note"
+            :parent="note"
           />
         </div>
       </article>
@@ -210,7 +210,7 @@
 <script setup lang="ts">
 import {DateTime} from 'luxon'
 import {computed, ref} from 'vue'
-import {get, replace, size, truncate} from 'lodash'
+import {each, get, replace, size, truncate} from 'lodash'
 import {mdiCloseCircle} from '@mdi/js'
 import {useDisplay} from 'vuetify'
 import type {Note} from '@/lib/types'
@@ -336,6 +336,7 @@ const toggleShowHide = (note: Note) => {
   const index = expandedNoteIds.value.indexOf(note.id)
   if (index > -1) {
     expandedNoteIds.value.splice(index, 1)
+    each(note.comments, c => { c.read = true })
     putFocusNextTick(`open-peer-advising-${note.id}`, {scroll: false})
   } else {
     expandedNoteIds.value.push(note.id)

src/components/student/profile/academic-timeline/AcademicTimelineTable.vue

@@ -598,6 +598,9 @@ const close = message => {
   }
   if (isExpanded(message)) {
     pull(openMessages.value, message.transientId)
+    if (size(message.comments)) {
+      each(message.comments, c => { c.read = true })
+    }
   }
   if (openMessages.value.length === 0) {
     allExpanded.value = false
@@ -686,9 +689,6 @@ const markRead = message => {
       markAppointmentRead(message.id)
     }
   }
-  if (size(message.comments)) {
-    each(message.comments, c => { c.read = true })
-  }
 }
 
 const messagesPerType = type => {