Merge pull request #661 from SamR1/mark-notification-as-read-on-click

Mark notification as read on click
SamR1 · Dec 18, 2024 · c5920e3 · c5920e3
2 parents 3e54932 + 2738884
commit c5920e3
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 87 deletions.
diff --git a/fittrackee/dist/index.html b/fittrackee/dist/index.html
@@ -7,11 +7,11 @@
     <link rel="stylesheet" href="/static/css/fork-awesome.min.css"/>
     <link rel="stylesheet" href="/static/css/leaflet.css"/>
     <title>FitTrackee</title>
-    <script type="module" crossorigin src="/static/index-Bb43FHRT.js"></script>
+    <script type="module" crossorigin src="/static/index-DkoQ8pId.js"></script>
     <link rel="modulepreload" crossorigin href="/static/charts-BDOr5tL2.js">
     <link rel="modulepreload" crossorigin href="/static/maps-DkiRMund.js">
     <link rel="stylesheet" crossorigin href="/static/css/maps-CIGW-MKW.css">
-    <link rel="stylesheet" crossorigin href="/static/css/index-CFTbC7L9.css">
+    <link rel="stylesheet" crossorigin href="/static/css/index-DQTEmVQT.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/...rackee/dist/static/css/index-CFTbC7L9.css → ...rackee/dist/static/css/index-DQTEmVQT.css b/...rackee/dist/static/css/index-CFTbC7L9.css → ...rackee/dist/static/css/index-DQTEmVQT.css
diff --git a/fittrackee/dist/static/index-Bb43FHRT.js → fittrackee/dist/static/index-DkoQ8pId.js b/fittrackee/dist/static/index-Bb43FHRT.js → fittrackee/dist/static/index-DkoQ8pId.js
diff --git a/fittrackee_client/src/components/Comment/Comment.vue b/fittrackee_client/src/components/Comment/Comment.vue
@@ -17,6 +17,7 @@
               displayOptions.dateFormat
             )
           "
+          @click="$emit('commentLinkClicked')"
         >
           {{
             formatDistance(new Date(comment.created_at), new Date(), {

diff --git a/fittrackee_client/src/components/Comment/CommentForUser.vue b/fittrackee_client/src/components/Comment/CommentForUser.vue
@@ -11,6 +11,7 @@
       comments-loading="null"
       :for-notification="true"
       :action="action"
+      @commentLinkClicked="$emit('commentLinkClicked')"
     />
   </div>
 </template>

diff --git a/fittrackee_client/src/components/Common/StaticMap.vue b/fittrackee_client/src/components/Common/StaticMap.vue
@@ -16,6 +16,7 @@
         backgroundImage: `url(${imageUrl})`,
       }"
       :aria-label="$t('workouts.WORKOUT_MAP')"
+      @click="$emit('workoutLinkClicked')"
     />
     <div class="map-attribution">
       <a

diff --git a/fittrackee_client/src/components/Notifications/NotificationDetail.vue b/fittrackee_client/src/components/Notifications/NotificationDetail.vue
@@ -73,13 +73,15 @@
           :display-object-name="notification.type.startsWith('user_warning')"
           :comment="notification.comment"
           :action="notification.report_action"
+          @commentLinkClicked="markAsReadOnClick(notification)"
         />
       </template>
       <RelationshipDetail
         v-else-if="displayRelationshipCard(notification.type)"
         :notification="notification"
         :authUser="authUser"
         @updatedUserRelationship="emitReload"
+        @userLinkClicked="markAsReadOnClick(notification)"
       />
       <ReportNotification
         v-else-if="
@@ -88,13 +90,15 @@
           ) && notification.report
         "
         :report="notification.report"
+        @reportButtonClicked="markAsReadOnClick(notification)"
       />
       <template v-else-if="notification.workout">
         <WorkoutForUser
           :action="notification.report_action"
           :display-appeal="notification.type !== 'user_warning'"
           :display-object-name="notification.type.startsWith('user_warning')"
           :workout="notification.workout"
+          @workoutLinkClicked="markAsReadOnClick(notification)"
         />
       </template>
       <div
@@ -126,6 +130,7 @@
           v-else-if="!notification.report_action?.appeal"
           class="appeal-link"
           :to="`profile/moderation/sanctions/${notification.report_action.id}`"
+          @click="markAsReadOnClick(notification)"
         >
           {{ $t('user.APPEAL') }}
         </router-link>
@@ -168,6 +173,11 @@
   function updateReadStatus(notificationId: number, markedAsRead: boolean) {
     emit('updateReadStatus', { notificationId, markedAsRead })
   }
+  function markAsReadOnClick(notification: INotification) {
+    if (!notification.marked_as_read) {
+      updateReadStatus(notification.id, true)
+    }
+  }
   function displayCommentCard(notificationType: TNotificationType): boolean {
     return (
       [

diff --git a/fittrackee_client/src/components/Notifications/RelationshipDetail.vue b/fittrackee_client/src/components/Notifications/RelationshipDetail.vue
@@ -3,7 +3,10 @@
     <div class="follow-request-user">
       <UserPicture :user="notification.from" />
       <div class="user-name">
-        <router-link :to="`/users/${notification.from.username}`">
+        <router-link
+          :to="`/users/${notification.from.username}`"
+          @click="$emit('userLinkClicked')"
+        >
           {{ notification.from.username }}
         </router-link>
       </div>
@@ -54,7 +57,7 @@
   const props = defineProps<Props>()
   const { authUser, notification } = toRefs(props)
 
-  const emit = defineEmits(['updatedUserRelationship'])
+  const emit = defineEmits(['updatedUserRelationship', 'userLinkClicked'])
 
   const store = useStore()
 

diff --git a/fittrackee_client/src/components/Notifications/ReportNotification.vue b/fittrackee_client/src/components/Notifications/ReportNotification.vue
@@ -28,7 +28,7 @@
       </span>
     </div>
     <div class="report-button">
-      <button @click="$router.push(`/admin/reports/${report.id}`)">
+      <button @click="displayReport(report.id)">
         {{ $t('admin.APP_MODERATION.VIEW_REPORT') }} #{{ report.id }}
       </button>
     </div>
@@ -37,6 +37,7 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
+  import { useRouter } from 'vue-router'
 
   import CommentForUser from '@/components/Comment/CommentForUser.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
@@ -48,6 +49,15 @@
   }
   const props = defineProps<Props>()
   const { report } = toRefs(props)
+
+  const emit = defineEmits(['reportButtonClicked'])
+
+  const router = useRouter()
+
+  function displayReport(reportId: number) {
+    router.push(`/admin/reports/${reportId}`)
+    emit('reportButtonClicked')
+  }
 </script>
 
 <style scoped lang="scss">

diff --git a/fittrackee_client/src/components/Workout/WorkoutCard.vue b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@@ -14,6 +14,7 @@
               name: 'Workout',
               params: { workoutId: workout.id },
             }"
+            @click="$emit('workoutLinkClicked')"
           >
             {{ workout.title }}
           </router-link>
@@ -39,13 +40,18 @@
         </div>
       </div>
       <div class="workout-map">
-        <StaticMap v-if="workout.with_gpx" :workout="workout" />
+        <StaticMap
+          v-if="workout.with_gpx"
+          :workout="workout"
+          @workoutLinkClicked="$emit('workoutLinkClicked')"
+        />
         <router-link
           v-else-if="workout.id"
           :to="{
             name: 'Workout',
             params: { workoutId: workout.id },
           }"
+          @click="$emit('workoutLinkClicked')"
         >
           <div class="no-map">
             {{ $t('workouts.NO_MAP') }}
@@ -55,14 +61,7 @@
       <div
         class="workout-data"
         :class="{ 'without-elevation': !hasElevation(workout) }"
-        @click="
-          workout.id
-            ? $router.push({
-                name: 'Workout',
-                params: { workoutId: workout.id },
-              })
-            : null
-        "
+        @click="navigateToWorkout(workout)"
       >
         <div class="img">
           <SportImage
@@ -138,6 +137,7 @@
   import Username from '@/components/User/Username.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
   import useApp from '@/composables/useApp'
+  import router from '@/router'
   import type { ISport } from '@/types/sports'
   import type { IUserProfile } from '@/types/user'
   import type { IWorkout } from '@/types/workouts'
@@ -160,6 +160,8 @@
 
   const { locale } = useApp()
 
+  const emit = defineEmits(['workoutLinkClicked'])
+
   const workoutDateWithTZ = computed(() =>
     formatDate(workout.value.workout_date, timezone.value, dateFormat.value)
   )
@@ -176,6 +178,15 @@
       workout.descent !== null
     )
   }
+  function navigateToWorkout(workout: IWorkout) {
+    if (workout.id) {
+      router.push({
+        name: 'Workout',
+        params: { workoutId: workout.id },
+      })
+      emit('workoutLinkClicked')
+    }
+  }
 </script>
 
 <style lang="scss" scoped>

diff --git a/fittrackee_client/src/components/Workout/WorkoutForUser.vue b/fittrackee_client/src/components/Workout/WorkoutForUser.vue
@@ -9,6 +9,7 @@
     :useImperialUnits="imperialUnits"
     :dateFormat="dateFormat"
     :timezone="timezone"
+    @workoutLinkClicked="$emit('workoutLinkClicked')"
   />
   <WorkoutActionAppeal
     v-if="action && displayWorkoutAppeal"
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ @@
                   displayOptions.dateFormat
                 )
               "
+              @click="$emit('commentLinkClicked')"
             >
               {{
                 formatDistance(new Date(comment.created_at), new Date(), {
@@ Expand Down @@