extract ReportRow into separate component

webapp/components/_new/features/FiledTable/FiledTable.vue

@@ -1,5 +1,11 @@
 <template>
-  <ds-table class="nested-table" v-if="filed && filed.length" :data="filed" :fields="reportFields" condensed>
+  <ds-table
+    class="nested-table"
+    v-if="filed && filed.length"
+    :data="filed"
+    :fields="reportFields"
+    condensed
+  >
     <template #submitter="scope">
       <hc-user :user="scope.row.submitter" :showAvatar="false" :trunc="30" />
     </template>

webapp/components/_new/features/ReportRow/ReportRow.vue

@@ -0,0 +1,186 @@
+<template>
+  <tbody class="report-row">
+    <tr>
+      <!-- Icon Column -->
+      <td class="ds-table-col">
+        <base-icon :name="iconName" :title="iconLabel" />
+      </td>
+
+      <!-- Number of Filed Reports Column -->
+      <td class="ds-table-col">
+        <span class="user-count">
+          {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
+        </span>
+        <ds-button size="small" @click="showFiledReports = !showFiledReports">
+          {{ $t('moderation.reports.moreDetails') }}
+        </ds-button>
+      </td>
+
+      <!-- Content Column -->
+      <td class="ds-table-col">
+        <client-only v-if="isUser">
+          <hc-user
+            :user="report.resource"
+            :showAvatar="false"
+            :trunc="30"
+            :data-test="report.resource.slug"
+          />
+        </client-only>
+        <nuxt-link v-else class="title" :to="linkTarget">
+          {{ linkText | truncate(50) }}
+        </nuxt-link>
+      </td>
+
+      <!-- Author Column -->
+      <td class="ds-table-col">
+        <client-only v-if="!isUser">
+          <hc-user
+            :user="report.resource.author"
+            :showAvatar="false"
+            :trunc="30"
+            :data-test="report.resource.author.slug"
+          />
+        </client-only>
+        <span v-else>—</span>
+      </td>
+
+      <!-- Status Column -->
+      <td class="ds-table-col">
+        <span class="status-line">
+          <base-icon :name="statusIconName" :class="isDisabled ? 'ban' : 'no-ban'" />
+          {{ statusText }}
+        </span>
+        <client-only v-if="report.reviewed">
+          <hc-user
+            :user="moderatorOfLatestReview"
+            :showAvatar="false"
+            :trunc="30"
+            :date-time="report.updatedAt"
+            positionDatetime="below"
+          />
+        </client-only>
+      </td>
+
+      <!-- Decision Column -->
+      <td class="ds-table-col">
+        <b v-if="report.closed" data-test="closed">
+          {{ $t('moderation.reports.decided') }}
+        </b>
+        <ds-button
+          v-else
+          danger
+          class="confirm"
+          size="small"
+          :icon="statusIconName"
+          @click="$emit('confirm-report')"
+        >
+          {{ $t('moderation.reports.decideButton') }}
+        </ds-button>
+      </td>
+    </tr>
+
+    <tr class="row">
+      <td colspan="100%">
+        <filed-table :filed="report.filed" v-if="showFiledReports" />
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+import FiledTable from '~/components/_new/features/FiledTable/FiledTable'
+import HcUser from '~/components/User/User'
+
+export default {
+  components: {
+    FiledTable,
+    HcUser,
+  },
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showFiledReports: false,
+    }
+  },
+  computed: {
+    isPost() {
+      return this.report.resource.__typename === 'Post'
+    },
+    isComment() {
+      return this.report.resource.__typename === 'Comment'
+    },
+    isUser() {
+      return this.report.resource.__typename === 'User'
+    },
+    isDisabled() {
+      return this.report.resource.disabled
+    },
+    iconName() {
+      if (this.isPost) return 'bookmark'
+      else if (this.isComment) return 'comments'
+      else if (this.isUser) return 'user'
+      else return null
+    },
+    iconLabel() {
+      if (this.isPost) return this.$t('report.contribution.type')
+      else if (this.isComment) return this.$t('report.comment.type')
+      else if (this.isUser) return this.$t('report.user.type')
+      else return null
+    },
+    linkTarget() {
+      const { id, slug } = this.isComment ? this.report.resource.post : this.report.resource
+      return {
+        name: 'post-id-slug',
+        params: { id, slug },
+        hash: this.isComment ? `#commentId-${this.report.resource.id}` : '',
+      }
+    },
+    linkText() {
+      return (
+        this.report.resource.title || this.$filters.removeHtml(this.report.resource.contentExcerpt)
+      )
+    },
+    statusIconName() {
+      return this.isDisabled ? 'eye-slash' : 'eye'
+    },
+    statusText() {
+      if (!this.report.reviewed) return this.$t('moderation.reports.enabled')
+      else if (this.isDisabled) return this.$t('moderation.reports.disabledBy')
+      else return this.$t('moderation.reports.enabledBy')
+    },
+    moderatorOfLatestReview() {
+      return this.report.reviewed[0].moderator
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.report-row {
+  &:nth-child(2n + 1) {
+    background-color: $color-neutral-95;
+  }
+
+  .title {
+    font-weight: $font-weight-bold;
+  }
+
+  .status-line {
+    display: inline-flex;
+
+    > .base-icon {
+      margin-right: $space-xx-small;
+    }
+  }
+
+  .user-count {
+    display: block;
+    margin-bottom: $space-xx-small;
+  }
+}
+</style>

webapp/components/_new/features/ReportsTable/ReportsTable.vue

@@ -7,10 +7,10 @@
   >
     <colgroup>
       <col width="4%" />
-      <col width="12%" />
-      <col width="40%" />
-      <col width="16%" />
-      <col width="16%" />
+      <col width="14%" />
+      <col width="36%" />
+      <col width="14%" />
+      <col width="20%" />
       <col width="12%" />
     </colgroup>
     <thead class="ds-table-col ds-table-head-col">
@@ -23,217 +23,28 @@
         <th class="ds-table-head-col">{{ $t('moderation.reports.decision') }}</th>
       </tr>
     </thead>
-    <tbody>
-      <template v-for="report in reports">
-        <tr :key="report.resource.id" valign="top" class="row" :data-test="report.resource.__typename">
-          <td class="ds-table-col">
-            <ds-text color="soft">
-              <base-icon
-                v-if="isPost(report.resource)"
-                v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
-                name="bookmark"
-              />
-              <base-icon
-                v-else-if="isComment(report.resource)"
-                v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
-                name="comments"
-              />
-              <base-icon
-                v-else-if="isUser(report.resource)"
-                v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
-                name="user"
-              />
-            </ds-text>
-          </td>
-          <td class="ds-table-col">
-            <span class="user-count">
-              {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
-            </span>
-            <ds-button size="small" @click="showFiledReports = !showFiledReports">
-              {{ $t('moderation.reports.moreDetails') }}
-            </ds-button>
-          </td>
-          <td class="ds-table-col">
-            <div v-if="isPost(report.resource) || isComment(report.resource)">
-              <nuxt-link
-                data-test="post-link"
-                :to="{
-                  name: 'post-id-slug',
-                  params: params(report.resource),
-                  hash: hashParam(report.resource),
-                }"
-              >
-                <b>
-                  {{
-                    report.resource.title ||
-                      $filters.removeHtml(report.resource.contentExcerpt) | truncate(50)
-                  }}
-                </b>
-              </nuxt-link>
-            </div>
-            <div v-else>
-              <client-only>
-                <hc-user
-                  :user="report.resource"
-                  :showAvatar="false"
-                  :trunc="30"
-                  :data-test="report.resource.slug"
-                />
-              </client-only>
-            </div>
-          </td>
-          <td class="ds-table-col">
-            <client-only>
-              <hc-user
-                v-if="report.resource.__typename !== 'User'"
-                :user="report.resource.author"
-                :showAvatar="false"
-                :trunc="30"
-                :data-test="report.resource.author.slug"
-              />
-              <span v-else>—</span>
-            </client-only>
-          </td>
-          <td class="ds-table-col">
-            <template v-if="report.reviewed">
-              <span v-if="report.resource.disabled" data-test="disabled" class="status-line">
-                <base-icon name="eye-slash" class="ban" />
-                {{ $t('moderation.reports.disabledBy') }}
-              </span>
-              <span v-else data-test="enabled" class="status-line">
-                <base-icon name="eye" class="no-ban" />
-                {{ $t('moderation.reports.enabledBy') }}
-              </span>
-              <client-only>
-                <hc-user
-                  :user="moderatorOfLatestReview(report)"
-                  :showAvatar="false"
-                  :trunc="30"
-                  :date-time="report.updatedAt"
-                  positionDatetime="below"
-                  :data-test="moderatorOfLatestReview(report).slug"
-                />
-              </client-only>
-            </template>
-            <div v-else>
-              <div data-test="unreviewed">
-                <base-icon name="eye" class="no-ban" />
-                {{ $t('moderation.reports.enabled') }}
-              </div>
-            </div>
-          </td>
-          <td class="ds-table-col">
-            <b v-if="report.closed" data-test="closed">
-              {{ $t('moderation.reports.decided') }}
-            </b>
-            <ds-button
-              v-else
-              danger
-              class="confirm"
-              size="small"
-              :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
-              @click="confirm(report)"
-            >
-              {{ $t('moderation.reports.decideButton') }}
-            </ds-button>
-          </td>
-        </tr>
-        <tr :key="'nested-table-' + report.resource.id" class="row">
-          <td colspan="100%">
-            <filed-table :filed="report.filed" v-if="showFiledReports" />
-          </td>
-        </tr>
-      </template>
-    </tbody>
+    <template v-for="report in reports">
+      <report-row
+        :key="report.resource.id"
+        :report="report"
+        @confirm-report="$emit('confirm', report)"
+      />
+    </template>
   </table>
   <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
 
 <script>
-import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import HcUser from '~/components/User/User'
-import FiledTable from '~/components/_new/features/FiledTable/FiledTable'
 import HcEmpty from '~/components/Empty/Empty'
+import ReportRow from '~/components/_new/features/ReportRow/ReportRow'
 
 export default {
   components: {
-    CounterIcon,
-    HcUser,
-    FiledTable,
     HcEmpty,
-  },
-  data() {
-    return {
-      showFiledReports: false,
-    }
+    ReportRow,
   },
   props: {
     reports: { type: Array, default: () => [] },
   },
-  methods: {
-    confirm(report) {
-      this.$emit('confirm', report)
-    },
-    isComment(resource) {
-      return resource.__typename === 'Comment'
-    },
-    isPost(resource) {
-      return resource.__typename === 'Post'
-    },
-    isUser(resource) {
-      return resource.__typename === 'User'
-    },
-    moderatorOfLatestReview(report) {
-      return report.reviewed[0].moderator
-    },
-    params(resource) {
-      const post = this.isComment(resource) ? resource.post : resource
-      return {
-        id: post.id,
-        slug: post.slug,
-      }
-    },
-    hashParam(resource) {
-      return this.isComment(resource) ? `#commentId-${resource.id}` : ''
-    },
-  },
 }
 </script>
-<style lang="scss">
-.reports-table {
-  .row {
-    position: relative;
-  }
-
-  .row:nth-child(4n+1) {
-    background-color: $color-neutral-95;
-  }
-
-  .row:nth-child(4n+2) {
-    background-color: $color-neutral-95;
-  }
-}
-
-.status-line {
-  display: inline-flex;
-
-  > .base-icon {
-    margin-right: $space-xx-small;
-  }
-}
-
-.user-count {
-  display: block;
-  margin-bottom: $space-xx-small;
-}
-
-.nested-table-toggle {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-
-.filed-table {
-  padding-left: $space-xx-large;
-}
-</style>