From 00d5f58b00fd246084b60d8e9311d16ac9885680 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 2 Dec 2019 11:26:11 +0100
Subject: [PATCH] Move components to features, style table[WIP]

- In conversations with @alina-beck, she suggested we move the
ReportsTable and FiledTable to features since it is tightly coupled to
Reports... we can work towards a table that is "dumb" and just takes the
data and displays it in another PR
- Add extra column for Current status
- Fix widths
---
 .../FiledTable/FiledTable.vue                 |  0
 .../_new/features/ReportList/ReportList.vue   |  2 +-
 .../ReportsTable/ReportsTable.spec.js         |  0
 .../ReportsTable/ReportsTable.vue             | 80 ++++++++++---------
 4 files changed, 44 insertions(+), 38 deletions(-)
 rename webapp/components/_new/{generic => features}/FiledTable/FiledTable.vue (100%)
 rename webapp/components/_new/{generic => features}/ReportsTable/ReportsTable.spec.js (100%)
 rename webapp/components/_new/{generic => features}/ReportsTable/ReportsTable.vue (81%)

diff --git a/webapp/components/_new/generic/FiledTable/FiledTable.vue b/webapp/components/_new/features/FiledTable/FiledTable.vue
similarity index 100%
rename from webapp/components/_new/generic/FiledTable/FiledTable.vue
rename to webapp/components/_new/features/FiledTable/FiledTable.vue
diff --git a/webapp/components/_new/features/ReportList/ReportList.vue b/webapp/components/_new/features/ReportList/ReportList.vue
index 6b5488107..2a141a875 100644
--- a/webapp/components/_new/features/ReportList/ReportList.vue
+++ b/webapp/components/_new/features/ReportList/ReportList.vue
@@ -16,7 +16,7 @@
 </template>
 <script>
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
-import ReportsTable from '~/components/_new/generic/ReportsTable/ReportsTable'
+import ReportsTable from '~/components/_new/features/ReportsTable/ReportsTable'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
 
 export default {
diff --git a/webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js b/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js
similarity index 100%
rename from webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js
rename to webapp/components/_new/features/ReportsTable/ReportsTable.spec.js
diff --git a/webapp/components/_new/generic/ReportsTable/ReportsTable.vue b/webapp/components/_new/features/ReportsTable/ReportsTable.vue
similarity index 81%
rename from webapp/components/_new/generic/ReportsTable/ReportsTable.vue
rename to webapp/components/_new/features/ReportsTable/ReportsTable.vue
index b11714223..a8fa669db 100644
--- a/webapp/components/_new/generic/ReportsTable/ReportsTable.vue
+++ b/webapp/components/_new/features/ReportsTable/ReportsTable.vue
@@ -1,30 +1,33 @@
 <template>
   <table
     v-if="reports && reports.length"
-    class="ds-table ds-table-condensed ds-table-bordered"
+    class="ds-table ds-table-condensed"
     cellspacing="0"
     cellpadding="0"
   >
+    <colgroup>
+      <col width="5%" />
+      <col width="35%" />
+      <col width="20%" />
+      <col width="20%" />
+      <col width="20%" />
+    </colgroup>
     <template v-for="report in reports">
       <thead
-        :class="[
-          report.closed ? 'decision' : 'no-decision',
-          'ds-table-col',
-          'ds-table-head-col',
-          'ds-table-head-col-border',
-        ]"
+        :class="[report.closed ? 'decision' : 'no-decision', 'ds-table-col', 'ds-table-head-col']"
         :key="'thead-' + report.resource.id"
       >
         <tr valign="top">
-          <th>
-            {{ $t('moderation.reports.typeRowHeadline') }}
-          </th>
+          <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>
@@ -32,7 +35,7 @@
       </thead>
       <tbody :key="'tbody-' + report.resource.id">
         <tr valign="top">
-          <td class="ds-table-col ds-table-head-col ds-table-head-col-border">
+          <td class="ds-table-col">
             <ds-text color="soft">
               <base-icon
                 v-if="isPost(report.resource)"
@@ -49,18 +52,9 @@
                 v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
                 name="user"
               />
-              <base-icon v-if="report.resource.disabled" name="eye-slash" class="ban" />
-              <base-icon v-else name="eye" class="no-ban" />
             </ds-text>
-            <ds-space margin-top="xx-large" margin-bottom="x-small">
-              <counter-icon icon="flag" :count="report.filed.length">
-                <ds-button ghost primary @click="showFiledReports = !showFiledReports">
-                  {{ $t('moderation.reports.moreDetails') }}
-                </ds-button>
-              </counter-icon>
-            </ds-space>
           </td>
-          <td class="ds-table-col ds-table-head-col-border">
+          <td class="ds-table-col ">
             <div v-if="isPost(report.resource) || isComment(report.resource)">
               <nuxt-link
                 :to="{
@@ -78,7 +72,7 @@
               </client-only>
             </div>
           </td>
-          <td class="ds-table-col ds-table-head-col-border">
+          <td class="ds-table-col ">
             <client-only>
               <hc-user
                 v-if="report.resource.__typename !== 'User'"
@@ -89,19 +83,7 @@
               <span v-else>—</span>
             </client-only>
           </td>
-          <td class="ds-table-col ds-table-head-col-border">
-            <b v-if="report.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>
             <div v-if="report.reviewed">
               <br />
               <div v-if="report.resource.disabled">
@@ -134,9 +116,33 @@
               </div>
             </div>
           </td>
+          <td class="ds-table-col">
+            <b v-if="report.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 class="ds-table-col ds-table-head-col-border filed-table" colspan="4">
+          <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>
@@ -150,7 +156,7 @@
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import HcUser from '~/components/User/User'
-import FiledTable from '~/components/_new/generic/FiledTable/FiledTable'
+import FiledTable from '~/components/_new/features/FiledTable/FiledTable'
 import HcEmpty from '~/components/Empty/Empty'
 
 export default {