From 15d28aa8ef84788aa640aac67838380bfacf63b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 23 Oct 2019 15:59:34 +0200
Subject: [PATCH] Finish redesign of moderators report list

- It is not perfect, but will do it for now.
---
 backend/src/seed/seed-db.js       |  12 +-
 webapp/locales/de.json            |   6 +-
 webapp/locales/en.json            |   6 +-
 webapp/pages/moderation/index.vue | 371 +++++++++++-------------------
 4 files changed, 145 insertions(+), 250 deletions(-)

diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js
index 225ffa834..3b3564533 100644
--- a/backend/src/seed/seed-db.js
+++ b/backend/src/seed/seed-db.js
@@ -693,24 +693,24 @@ import { gql } from '../jest/helpers'
         mutation: reportMutation,
         variables: {
           resourceId: 'c1',
-          reasonCategory: 'other',
-          reasonDescription: 'This comment is bigoted',
+          reasonCategory: 'pornographic_content_links',
+          reasonDescription: 'This comment is porno!!!',
         },
       }),
       mutate({
         mutation: reportMutation,
         variables: {
           resourceId: 'p1',
-          reasonCategory: 'discrimination_etc',
-          reasonDescription: 'This post is bigoted',
+          reasonCategory: 'intentional_intimidation_stalking_persecution',
+          reasonDescription: '',
         },
       }),
       mutate({
         mutation: reportMutation,
         variables: {
           resourceId: 'u1',
-          reasonCategory: 'doxing',
-          reasonDescription: 'This user is harassing me with bigoted remarks',
+          reasonCategory: 'glorific_trivia_of_cruel_inhuman_acts',
+          reasonDescription: 'murder',
         },
       }),
     ])
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9c7cde641..6dc8b2b78 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -449,8 +449,10 @@
       "reasonCategory": "Kategorie",
       "reasonDescription": "Beschreibung",
       "createdAt": "Datum",
-      "submitter": "Gemeldet von / am",
-      "disabledBy": "Deaktiviert von"
+      "submitter": "Gemeldet von",
+      "disabledBy": "Deaktiviert von",
+      "decision": "Entscheidung",
+      "noDecision": "Keine Entscheidung!"
     }
   },
   "disable": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 9a5b0e634..816815142 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -450,8 +450,10 @@
       "reasonCategory": "Category",
       "reasonDescription": "Description",
       "createdAt": "Date",
-      "submitter": "Reported by / at",
-      "disabledBy": "Disabled by"
+      "submitter": "Reported by",
+      "disabledBy": "Disabled by",
+      "decision": "Decision",
+      "noDecision": "No decision!"
     }
   },
   "disable": {
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index 18aa8475c..1d485cc2c 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -1,251 +1,127 @@
 <template>
   <ds-card space="small">
     <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
-    <ds-table
-      v-if="reports && reports.length"
-      :data="reportedContentStructure"
-      :fields="contentFields"
-      condensed
+    <table
+      v-if="reportedContentStructure && reportedContentStructure.length"
+      class="ds-table ds-table-condensed ds-table-bordered"
+      cellspacing="0"
+      cellpadding="0"
     >
-      <!-- Icon -->
-      <template slot="type" slot-scope="scope">
-        <ds-text color="soft">
-          <ds-icon
-            v-if="scope.row.type === 'Post'"
-            v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
-            name="bookmark"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'Comment'"
-            v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
-            name="comments"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'User'"
-            v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
-            name="user"
-          />
-        </ds-text>
+      <colgroup><col width="" /></colgroup>
+      <template v-for="content in reportedContentStructure">
+        <tbody :key="content.resource.id">
+          <tr valign="top">
+            <td class="ds-table-col ds-table-head-col ds-table-head-col-border">
+              <!-- Icon -->
+              <ds-text color="soft">
+                <ds-icon
+                  v-if="content.type === 'Post'"
+                  v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
+                  name="bookmark"
+                />
+                <ds-icon
+                  v-else-if="content.type === 'Comment'"
+                  v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
+                  name="comments"
+                />
+                <ds-icon
+                  v-else-if="content.type === 'User'"
+                  v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
+                  name="user"
+                />
+              </ds-text>
+            </td>
+            <td class="ds-table-col ds-table-head-col-border">
+              <!-- reported user or content -->
+              <div v-if="content.type === 'Post' || content.type === 'Comment'">
+                <nuxt-link
+                  :to="{
+                    name: 'post-id-slug',
+                    params: {
+                      id: content.type === 'Post' ? content.post.id : content.comment.post.id,
+                      slug: content.type === 'Post' ? content.post.slug : content.comment.post.slug,
+                    },
+                    hash:
+                      content.type === 'Comment' ? `#commentId-${content.comment.id}` : undefined,
+                  }"
+                >
+                  <b v-if="content.type === 'Post'">{{ content.post.title | truncate(100) }}</b>
+                  <b v-else>{{ content.comment.contentExcerpt | removeHtml | truncate(100) }}</b>
+                </nuxt-link>
+              </div>
+              <div v-else>
+                <hc-user :user="content.user" :showAvatar="false" :trunc="30" />
+              </div>
+            </td>
+            <td class="ds-table-col ds-table-head-col-border">
+              <ds-flex v-if="content.contentBelongsToUser">
+                <ds-flex-item width="20px">
+                  <ds-icon
+                    v-tooltip="{ content: $t('report.author'), placement: 'right' }"
+                    name="user"
+                  />
+                </ds-flex-item>
+                <ds-flex-item>
+                  <hc-user :user="content.contentBelongsToUser" :showAvatar="false" :trunc="25" />
+                </ds-flex-item>
+              </ds-flex>
+            </td>
+            <td class="ds-table-col ds-table-head-col-border">
+              <b>{{ $t('moderation.reports.decision') }}:</b>
+              <br />
+              <!-- disabledBy -->
+              <div v-if="content.resource.disabledBy">
+                {{ $t('moderation.reports.disabledBy') }}
+                <br />
+                <nuxt-link
+                  :to="{
+                    name: 'profile-id-slug',
+                    params: {
+                      id: content.resource.disabledBy.id,
+                      slug: content.resource.disabledBy.slug,
+                    },
+                  }"
+                >
+                  <b>{{ content.resource.disabledBy.name | truncate(50) }}</b>
+                </nuxt-link>
+              </div>
+              <span v-else class="no-decision">{{ $t('moderation.reports.noDecision') }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td class="ds-table-col ds-table-head-col-border"></td>
+            <td class="ds-table-col ds-table-head-col-border" colspan="3">
+              <ds-table :data="content.reports" :fields="reportFields" condensed>
+                <!-- submitter -->
+                <template slot="submitter" slot-scope="scope">
+                  <hc-user
+                    :user="scope.row.submitter"
+                    :showAvatar="false"
+                    :trunc="30"
+                    :date-time="scope.row.createdAt"
+                    :positionDatetime="'below'"
+                  />
+                </template>
+                <!-- reasonCategory -->
+                <template slot="reasonCategory" slot-scope="scope">
+                  {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
+                </template>
+                <!-- reasonDescription -->
+                <template slot="reasonDescription" slot-scope="scope">
+                  {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
+                </template>
+              </ds-table>
+            </td>
+          </tr>
+        </tbody>
       </template>
-      <!-- reported user or content -->
-      <template slot="reportedUserContent" slot-scope="scope">
-        <div v-if="scope.row.type === 'Post' || scope.row.type === 'Comment'">
-          <nuxt-link
-            :to="{
-              name: 'post-id-slug',
-              params: {
-                id: scope.row.type === 'Post' ? scope.row.post.id : scope.row.comment.post.id,
-                slug: scope.row.type === 'Post' ? scope.row.post.slug : scope.row.comment.post.slug,
-              },
-              hash: scope.row.type === 'Comment' ? `#commentId-${scope.row.comment.id}` : undefined,
-            }"
-          >
-            <b v-if="scope.row.type === 'Post'">{{ scope.row.post.title | truncate(100) }}</b>
-            <b v-else>{{ scope.row.comment.contentExcerpt | removeHtml | truncate(100) }}</b>
-          </nuxt-link>
-          <ds-space margin="x-small" />
-          <ds-flex>
-            <ds-flex-item width="20px">
-              <ds-icon
-                v-tooltip="{ content: $t('report.author'), placement: 'right' }"
-                name="user"
-              />
-            </ds-flex-item>
-            <ds-flex-item>
-              <hc-user
-                v-if="scope.row.contentBelongsToUser"
-                :user="scope.row.contentBelongsToUser"
-                :showAvatar="false"
-                :trunc="25"
-              />
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-        <div v-else>
-          <hc-user :user="scope.row.user" :showAvatar="false" :trunc="30" />
-        </div>
-      </template>
-      <!-- disabledBy -->
-      <template slot="disabledBy" slot-scope="scope">
-        <nuxt-link
-          v-if="scope.row.resource.disabledBy"
-          :to="{
-            name: 'profile-id-slug',
-            params: {
-              id: scope.row.resource.disabledBy.id,
-              slug: scope.row.resource.disabledBy.slug,
-            },
-          }"
-        >
-          <b>{{ scope.row.resource.disabledBy.name | truncate(50) }}</b>
-        </nuxt-link>
-        <b v-else>—</b>
-      </template>
-      <!-- <template slot="reports" slot-scope="scope">
-        <ds-table
-          :data="scope.row.submitter"
-          :fields="reportFields"
-          condensed
-        > -->
-          <!-- submitter -->
-          <!-- <template slot="submitter" slot-scope="scope">
-            <hc-user
-              :user="scope.row.submitter"
-              :showAvatar="false"
-              :trunc="30"
-              :date-time="scope.row.createdAt"
-              :positionDatetime="'below'"
-            />
-          </template>
-        </ds-table>
-      </template> -->
-    </ds-table>
-    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
-    <ds-table v-if="reports && reports.length" :data="reports" :fields="fields" condensed>
-      <!-- Icon -->
-      <template slot="type" slot-scope="scope">
-        <ds-text color="soft">
-          <ds-icon
-            v-if="scope.row.type === 'Post'"
-            v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
-            name="bookmark"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'Comment'"
-            v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
-            name="comments"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'User'"
-            v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
-            name="user"
-          />
-        </ds-text>
-      </template>
-      <!-- reported user or content -->
-      <template slot="reportedUserContent" slot-scope="scope">
-        <div v-if="scope.row.type === 'Post'">
-          <nuxt-link
-            :to="{
-              name: 'post-id-slug',
-              params: { id: scope.row.post.id, slug: scope.row.post.slug },
-            }"
-          >
-            <b>{{ scope.row.post.title | truncate(50) }}</b>
-          </nuxt-link>
-          <!-- author: Same as author of comment underneath. Maybe dry the code … -->
-          <ds-space margin="x-small" />
-          <ds-flex>
-            <ds-flex-item width="20px">
-              <ds-icon
-                v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
-                name="user"
-              />
-            </ds-flex-item>
-            <ds-flex-item>
-              <hc-user :user="scope.row.post.author" :showAvatar="false" :trunc="25" />
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-        <div v-else-if="scope.row.type === 'Comment'">
-          <nuxt-link
-            :to="{
-              name: 'post-id-slug',
-              params: {
-                id: scope.row.comment.post.id,
-                slug: scope.row.comment.post.slug,
-              },
-              hash: `#commentId-${scope.row.comment.id}`,
-            }"
-          >
-            <b>{{ scope.row.comment.contentExcerpt | removeHtml | truncate(50) }}</b>
-          </nuxt-link>
-          <!-- author: Same as author of post above. Maybe dry the code … -->
-          <ds-space margin="x-small" />
-          <ds-flex>
-            <ds-flex-item width="20px">
-              <ds-icon
-                v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
-                name="user"
-              />
-            </ds-flex-item>
-            <ds-flex-item>
-              <hc-user :user="scope.row.comment.author" :showAvatar="false" :trunc="25" />
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-        <div v-else>
-          <hc-user :user="scope.row.user" :showAvatar="false" :trunc="30" />
-        </div>
-      </template>
-      <!-- reasonCategory -->
-      <template slot="reasonCategory" slot-scope="scope">
-        {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
-      </template>
-      <!-- reasonDescription -->
-      <template slot="reasonDescription" slot-scope="scope">
-        {{ scope.row.reasonDescription }}
-      </template>
-      <!-- submitter -->
-      <template slot="submitter" slot-scope="scope">
-        <hc-user
-          :user="scope.row.submitter"
-          :showAvatar="false"
-          :trunc="30"
-          :date-time="scope.row.createdAt"
-          :positionDatetime="'below'"
-        />
-      </template>
-      <!-- createdAt -->
-      <template slot="createdAt" slot-scope="scope">
-        <ds-text size="small">
-          <client-only>
-            <hc-relative-date-time :date-time="scope.row.createdAt" />
-          </client-only>
-        </ds-text>
-      </template>
-      <!-- disabledBy -->
-      <template slot="disabledBy" slot-scope="scope">
-        <nuxt-link
-          v-if="scope.row.type === 'Post' && scope.row.post.disabledBy"
-          :to="{
-            name: 'profile-id-slug',
-            params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug },
-          }"
-        >
-          <b>{{ scope.row.post.disabledBy.name | truncate(50) }}</b>
-        </nuxt-link>
-        <nuxt-link
-          v-else-if="scope.row.type === 'Comment' && scope.row.comment.disabledBy"
-          :to="{
-            name: 'profile-id-slug',
-            params: {
-              id: scope.row.comment.disabledBy.id,
-              slug: scope.row.comment.disabledBy.slug,
-            },
-          }"
-        >
-          <b>{{ scope.row.comment.disabledBy.name | truncate(50) }}</b>
-        </nuxt-link>
-        <nuxt-link
-          v-else-if="scope.row.type === 'User' && scope.row.user.disabledBy"
-          :to="{
-            name: 'profile-id-slug',
-            params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug },
-          }"
-        >
-          <b>{{ scope.row.user.disabledBy.name | truncate(50) }}</b>
-        </nuxt-link>
-        <b v-else>—</b>
-      </template>
-    </ds-table>
+    </table>
     <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
   </ds-card>
 </template>
 
 <script>
 import HcEmpty from '~/components/Empty.vue'
-import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcUser from '~/components/User/User'
 import { reportListQuery } from '~/graphql/Moderation.js'
 
@@ -253,7 +129,6 @@ export default {
   components: {
     HcEmpty,
     HcUser,
-    HcRelativeDateTime,
   },
   data() {
     return {
@@ -271,7 +146,10 @@ export default {
     },
     reportFields() {
       return {
-        id: 'ID',
+        submitter: this.$t('moderation.reports.submitter'),
+        reasonCategory: this.$t('moderation.reports.reasonCategory'),
+        reasonDescription: this.$t('moderation.reports.reasonDescription'),
+        // Wolle createdAt: this.$t('moderation.reports.createdAt'),
       }
     },
     fields() {
@@ -301,7 +179,9 @@ export default {
               : report.type === 'Comment'
               ? report.comment
               : undefined
-          let idx = newReportedContentStructure.findIndex(content => content.resource.id === resource.id)
+          let idx = newReportedContentStructure.findIndex(
+            content => content.resource.id === resource.id,
+          )
           // if content not in content list, then push
           if (idx === -1) {
             idx = newReportedContentStructure.length
@@ -317,6 +197,7 @@ export default {
           }
           newReportedContentStructure[idx].reports.push(report)
         })
+        // Wolle !!! Sortieren !!!
         this.reportedContentStructure = newReportedContentStructure
       },
     },
@@ -329,3 +210,13 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+// Wolle
+.ds-table-head-col-border {
+  border-bottom: $border-color-softer dotted $border-size-base;
+}
+.no-decision {
+  color: $text-color-danger;
+}
+</style>