From 21a3ff4bc85496de18cb1328c455f06fc857bac1 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 3 Dec 2019 12:03:41 +0300
Subject: [PATCH] render just one thead and tbody for the reports table

---
 .../_new/features/ReportList/ReportList.vue   |   4 +-
 .../features/ReportsTable/ReportsTable.vue    | 269 +++++++++---------
 2 files changed, 135 insertions(+), 138 deletions(-)

diff --git a/webapp/components/_new/features/ReportList/ReportList.vue b/webapp/components/_new/features/ReportList/ReportList.vue
index 65c8fdc95..b29362da5 100644
--- a/webapp/components/_new/features/ReportList/ReportList.vue
+++ b/webapp/components/_new/features/ReportList/ReportList.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-card>
-    <div class="report-list-header">
+    <div class="reports-header">
       <h3 class="title">{{ $t('moderation.reports.name') }}</h3>
       <client-only>
         <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
@@ -132,7 +132,7 @@ export default {
 </script>
 
 <style lang="scss">
-.report-list-header {
+.reports-header {
   display: flex;
   justify-content: space-between;
   margin: $space-small 0;
diff --git a/webapp/components/_new/features/ReportsTable/ReportsTable.vue b/webapp/components/_new/features/ReportsTable/ReportsTable.vue
index 29637aefb..04fd877c5 100644
--- a/webapp/components/_new/features/ReportsTable/ReportsTable.vue
+++ b/webapp/components/_new/features/ReportsTable/ReportsTable.vue
@@ -1,7 +1,7 @@
 <template>
   <table
     v-if="reports && reports.length"
-    class="ds-table ds-table-condensed"
+    class="ds-table ds-table-condensed ds-table-bordered"
     cellspacing="0"
     cellpadding="0"
   >
@@ -12,152 +12,149 @@
       <col width="20%" />
       <col width="20%" />
     </colgroup>
+    <thead class="ds-table-col ds-table-head-col">
+      <tr valign="top">
+        <th></th>
+        <th>
+          {{ $t('moderation.reports.contentRowHeadline') }}
+        </th>
+        <th>
+          {{ $t('moderation.reports.authorRowHeadline') }}
+        </th>
+        <th>
+          {{ $t('moderation.reports.typeRowHeadline') }}
+        </th>
+        <th>
+          {{ $t('moderation.reports.decisionRowHeadline') }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
     <template v-for="report in reports">
-      <thead
-        :class="[report.closed ? 'decision' : 'no-decision', 'ds-table-col', 'ds-table-head-col']"
-        :key="'thead-' + report.resource.id"
-      >
-        <tr valign="top">
-          <th></th>
-          <th>
-            {{ $t('moderation.reports.contentRowHeadline') }}
-          </th>
-          <th>
-            {{ $t('moderation.reports.authorRowHeadline') }}
-          </th>
-          <th>
-            {{ $t('moderation.reports.typeRowHeadline') }}
-          </th>
-          <th>
-            {{ $t('moderation.reports.decisionRowHeadline') }}
-          </th>
-        </tr>
-      </thead>
-      <tbody :key="'tbody-' + report.resource.id">
-        <tr valign="top" :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 ">
-            <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 ">
+      <tr :key="report.resource.id" valign="top" :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 ">
+          <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
-                v-if="report.resource.__typename !== 'User'"
-                :user="report.resource.author"
+                :user="report.resource"
                 :showAvatar="false"
                 :trunc="30"
-                :data-test="report.resource.author.slug"
+                :data-test="report.resource.slug"
               />
-              <span v-else>—</span>
             </client-only>
-          </td>
-          <td>
-            <div v-if="report.reviewed">
-              <br />
-              <div v-if="report.resource.disabled" data-test="disabled">
-                <base-icon name="eye-slash" class="ban" />
-                {{ $t('moderation.reports.disabledBy') }}
-              </div>
-              <div v-else data-test="enabled">
-                <base-icon name="eye" class="no-ban" />
-                {{ $t('moderation.reports.enabledBy') }}
-              </div>
-              <client-only>
-                <hc-user
-                  :user="moderatorOfLatestReview(report)"
-                  :showAvatar="false"
-                  :trunc="30"
-                  :date-time="report.updatedAt"
-                  positionDatetime="below"
-                  :data-test="moderatorOfLatestReview(report).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>
+          <div v-if="report.reviewed">
+            <br />
+            <div v-if="report.resource.disabled" data-test="disabled">
+              <base-icon name="eye-slash" class="ban" />
+              {{ $t('moderation.reports.disabledBy') }}
             </div>
-            <div v-else>
-              <br />
-              <div data-test="unreviewed">
-                <base-icon name="eye" class="no-ban" />
-                {{ $t('moderation.reports.enabled') }}
-              </div>
+            <div v-else data-test="enabled">
+              <base-icon name="eye" class="no-ban" />
+              {{ $t('moderation.reports.enabledBy') }}
             </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"
-              :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
-              @click="confirm(report)"
-            >
-              {{ $t('moderation.reports.decideButton') }}
+            <client-only>
+              <hc-user
+                :user="moderatorOfLatestReview(report)"
+                :showAvatar="false"
+                :trunc="30"
+                :date-time="report.updatedAt"
+                positionDatetime="below"
+                :data-test="moderatorOfLatestReview(report).slug"
+              />
+            </client-only>
+          </div>
+          <div v-else>
+            <br />
+            <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"
+            :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
+            @click="confirm(report)"
+          >
+            {{ $t('moderation.reports.decideButton') }}
+          </ds-button>
+        </td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>
+          <counter-icon icon="flag" :count="report.filed.length">
+            <ds-button ghost primary @click="showFiledReports = !showFiledReports">
+              {{ $t('moderation.reports.moreDetails') }}
             </ds-button>
-          </td>
-        </tr>
-        <tr>
-          <td></td>
-          <td>
-            <counter-icon icon="flag" :count="report.filed.length">
-              <ds-button ghost primary @click="showFiledReports = !showFiledReports">
-                {{ $t('moderation.reports.moreDetails') }}
-              </ds-button>
-            </counter-icon>
-          </td>
-        </tr>
-        <tr>
-          <td class="ds-table-col filed-table" colspan="4">
-            <ds-space margin-bottom="base" />
-            <filed-table :filed="report.filed" v-if="showFiledReports" />
-          </td>
-        </tr>
-      </tbody>
+          </counter-icon>
+        </td>
+      </tr>
+      <tr>
+        <td class="ds-table-col filed-table" colspan="4">
+          <ds-space margin-bottom="base" />
+          <filed-table :filed="report.filed" v-if="showFiledReports" />
+        </td>
+      </tr>
     </template>
+    </tbody>
   </table>
   <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>