Client - update reports list display

SamR1 · Oct 15, 2023 · 5cf57e5 · 5cf57e5
1 parent c3158fd
commit 5cf57e5
Showing 1 changed file with 39 additions and 10 deletions.
diff --git a/fittrackee_client/src/components/Administration/AdminReports.vue b/fittrackee_client/src/components/Administration/AdminReports.vue
@@ -87,7 +87,6 @@
                     {{ $t('admin.APP_MODERATION.REPORTED_USER') }}
                   </span>
                   <router-link
-                    v-if="report.reported_user"
                     class="link-with-image"
                     :to="`/admin/users/${report.reported_user.username}`"
                   >
@@ -101,6 +100,9 @@
                   </span>
                   <router-link :to="`/admin/reports/${report.id}`">
                     {{ $t(objectTypes[report.object_type]) }}
+                    <span v-if="getReportedObjectContent(report)">
+                      ({{ getReportedObjectContent(report) }})
+                    </span>
                   </router-link>
                 </td>
                 <td>
@@ -210,6 +212,7 @@
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
   )
+  const maxTextLength = 20
 
   onBeforeMount(() => loadReports(query))
 
@@ -250,6 +253,25 @@
       authUser.value.date_format
     )
   }
+  function getReportedObjectContent(report: IReport): string {
+    let text: string | undefined
+    switch (report.object_type) {
+      case 'workout':
+        text = report.reported_workout?.title
+        break
+      case 'comment':
+        text = report.reported_comment?.text
+        break
+      default:
+        text = ''
+    }
+    if (text) {
+      return text.length > maxTextLength
+        ? `${text.substring(0, maxTextLength - 1)}…`
+        : text
+    }
+    return ''
+  }
 
   onUnmounted(() => {
     store.dispatch(REPORTS_STORE.ACTIONS.EMPTY_REPORTS)
@@ -287,18 +309,21 @@
     .left-text {
       text-align: left;
     }
-    ::v-deep(.user-picture) {
-      img {
-        height: 30px;
-        width: 30px;
-      }
-      .no-picture {
-        font-size: 2em;
-      }
-    }
+
     .link-with-image {
       display: flex;
       align-items: center;
+
+      ::v-deep(.user-picture) {
+        min-width: 40px;
+        img {
+          height: 30px;
+          width: 30px;
+        }
+        .no-picture {
+          font-size: 2em;
+        }
+      }
     }
 
     @media screen and (max-width: $small-limit) {
@@ -309,6 +334,10 @@
       .pagination-center {
         margin-top: -3 * $default-margin;
       }
+
+      .link-with-image {
+        justify-content: center;
+      }
     }
   }
 </style>