Move User Moderation History to Table Row

Proof of concept of idea Related to Issues #39, #43
oengusio · Nov 4, 2021 · ed9b3ba · ed9b3ba
1 parent 8f1c8e4
commit ed9b3ba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/components/user/history/Moderation.vue b/components/user/history/Moderation.vue
@@ -9,17 +9,7 @@
         {{ $t('marathon.submissions.table.date') }}
       </ElementTableCell>
 
-      <template v-for="(marathon, marathonIndex) in moderatedMarathons">
-        <ElementTableCell :key="`marathon-${marathonIndex}`" class="marathon" :class="getRowParity(marathonIndex)">
-          <ElementLink :to="`/marathon/${marathon.id}`">
-            {{ marathon.name }}
-          </ElementLink>
-        </ElementTableCell>
-        <ElementTableCell :key="`date-${marathonIndex}`" class="date" :class="getRowParity(marathonIndex)">
-          <ElementTemporalDateTime :datetime="marathon.startDate" format="mediumDateTime" />
-          (<ElementTemporalDistance :datetime="marathon.startDate" />)
-        </ElementTableCell>
-      </template>
+      <UserHistoryModerationRow v-for="(marathon, index) in moderatedMarathons" :key="index" :marathon="marathon" :class="getRowParity(index)" />
     </ElementTable>
   </div>
 </template>

diff --git a/components/user/history/ModerationRow.vue b/components/user/history/ModerationRow.vue
@@ -0,0 +1,27 @@
+<template>
+  <ElementTableRow>
+    <ElementTableCell class="marathon">
+      <ElementLink :to="`/marathon/${marathon.id}`">
+        {{ marathon.name }}
+      </ElementLink>
+    </ElementTableCell>
+    <ElementTableCell class="date">
+      <ElementTemporalDateTime :datetime="marathon.startDate" format="mediumDateTime" />
+      (<ElementTemporalDistance :datetime="marathon.startDate" />)
+    </ElementTableCell>
+  </ElementTableRow>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Marathon } from '~/types/api/marathon';
+
+export default Vue.extend({
+  props: {
+    marathon: {
+      type: Object as () => Marathon,
+      default: undefined,
+    },
+  },
+});
+</script>