Move components to _new structure/refactor

- extract more components

webapp/components/_new/features/ReportList/ReportList.vue

@@ -1,23 +1,60 @@
 <template>
-  <reports-table v-if="reports && reports.length" :reports="reports" @confirm="confirm" />
+  <ds-card space="small" v-if="reports && reports.length">
+    <ds-flex class="notifications-page-flex">
+      <ds-flex-item :width="{ lg: '85%' }">
+        <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
+      </ds-flex-item>
+      <ds-flex-item width="110px">
+        <client-only>
+          <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
+        </client-only>
+      </ds-flex-item>
+    </ds-flex>
+    <ds-space />
+    <reports-table :reports="reports" @confirm="confirm" />
+  </ds-card>
   <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
 <script>
-import ReportsTable from '~/components/features/ReportsTable/ReportsTable'
+import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
+import ReportsTable from '~/components/_new/generic/ReportsTable/ReportsTable'
 import HcEmpty from '~/components/Empty/Empty'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
 
 export default {
   components: {
+    DropdownFilter,
     ReportsTable,
     HcEmpty,
   },
   data() {
     return {
       reports: [],
+      allReports: [],
+      unreviewedReports: [],
+      reviewedReports: [],
+      closedReports: [],
+      selected: this.$t('moderation.reports.filterLabel.all'),
     }
   },
+  computed: {
+    filterOptions() {
+      return [
+        { label: this.$t('moderation.reports.filterLabel.all'), value: this.allReports },
+        {
+          label: this.$t('moderation.reports.filterLabel.unreviewed'),
+          value: this.unreviewedReports,
+        },
+        { label: this.$t('moderation.reports.filterLabel.reviewed'), value: this.reviewedReports },
+        { label: this.$t('moderation.reports.filterLabel.closed'), value: this.closedReports },
+      ]
+    },
+  },
   methods: {
+    filter(option) {
+      this.reports = option.value
+      this.selected = option.label
+    },
     confirm(report) {
       this.openModal(report)
     },
@@ -86,6 +123,10 @@ export default {
       query: reportsListQuery(),
       update({ reports }) {
         this.reports = reports
+        this.allReports = reports
+        this.unreviewedReports = reports.filter(report => !report.reviewed)
+        this.reviewedReports = reports.filter(report => report.reviewed)
+        this.closedReports = reports.filter(report => report.closed)
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/components/_new/generic/FiledTable/FiledTable.vue

@@ -1,16 +1,14 @@
 <template>
-  <ds-table :data="filed" :fields="reportFields" condensed>
+  <ds-table v-if="filed && filed.length" :data="filed" :fields="reportFields" condensed>
     <template #submitter="scope">
-      <ds-space margin-bottom="x-large">
-        <client-only>
-          <hc-user
-            :user="scope.row.submitter"
-            :showAvatar="false"
-            :trunc="30"
-            :date-time="scope.row.createdAt"
-            :positionDatetime="'below'"
-          />
-        </client-only>
+      <ds-space margin-bottom="base">
+        <hc-user
+          :user="scope.row.submitter"
+          :showAvatar="false"
+          :trunc="30"
+          :date-time="scope.row.createdAt"
+          :position-date-time="'below'"
+        />
       </ds-space>
     </template>
     <template #reasonCategory="scope">

webapp/components/_new/generic/ReportsTable/ReportsTable.vue

@@ -29,56 +29,44 @@
       <tbody :key="'tbody-' + report.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="report.resource.__typename === 'Post'"
+              <base-icon
+                v-if="isPost(report.resource)"
                 v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
                 name="bookmark"
               />
-              <ds-icon
-                v-else-if="report.resource.__typename === 'Comment'"
+              <base-icon
+                v-else-if="isComment(report.resource)"
                 v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
                 name="comments"
               />
-              <ds-icon
-                v-else-if="report.resource.__typename === 'User'"
+              <base-icon
+                v-else-if="isUser(report.resource)"
                 v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
                 name="user"
               />
-              <ds-icon v-if="report.resource.disabled" name="eye-slash" class="ban" />
-              <ds-icon v-else name="eye" class="no-ban" />
+              <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">
+                <a @click="showFiledReports = !showFiledReports">
+                  {{ $t('moderation.reports.moreDetails') }}
+                </a>
+              </counter-icon>
+            </ds-space>
           </td>
           <td class="ds-table-col ds-table-head-col-border">
-            <!-- reported user or other resource -->
-            <div
-              v-if="
-                report.resource.__typename === 'Post' || report.resource.__typename === 'Comment'
-              "
-            >
+            <div v-if="isPost(report.resource) || isComment(report.resource)">
               <nuxt-link
                 :to="{
                   name: 'post-id-slug',
-                  params: {
-                    id: report.resource.id,
-                    slug:
-                      report.resource.__typename === 'Post'
-                        ? report.resource.slug
-                        : report.resource.post.slug,
-                  },
-                  hash:
-                    report.resource.__typename === 'Comment'
-                      ? `#commentId-${report.resource.id}`
-                      : undefined,
+                  params: params(report.resource),
+                  hash: hashParam(report.resource),
                 }"
+                @click.native="markNotificationAsRead(report.resource.id)"
               >
-                <b v-if="report.resource.__typename === 'Post'">
-                  {{ report.resource.title | truncate(100) }}
-                </b>
-                <b v-else>
-                  {{ report.resource.contentExcerpt | removeHtml | truncate(100) }}
-                </b>
+                <b>{{ report.resource.title || report.resource.contentExcerpt | truncate(50) }}</b>
               </nuxt-link>
             </div>
             <div v-else>
@@ -86,35 +74,7 @@
                 <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
               </client-only>
             </div>
-            <!-- <div v-if="report.reviewed">
-              <ds-space margin="x-large"/>
-              <ds-flex gutter="small">
-                <ds-flex-item width="25%">
-                  <b>{{ $t('moderation.reports.previousDecision') }}</b>
-                </ds-flex-item>
-                <ds-flex-item>
-                  <div>
-                    <span v-if="report.resource.disabled">
-                      <ds-icon name="eye-slash" class="ban" />
-                      {{ $t('moderation.reports.disabledAt') }}
-                    </span>
-                    <span v-else>
-                      <ds-icon name="eye" class="no-ban" />
-                      {{ $t('moderation.reports.enabledAt') }}
-                    </span>
-                    <ds-text size="small" color="soft">
-                      <ds-icon name="clock" />
-                      <client-only>
-                        <hc-relative-date-time :date-time="report.updatedAt" />
-                      </client-only>
-                    </ds-text>
-                  </div>
-                </ds-flex-item>
-              </ds-flex>
-              <ds-space margin-bottom="x-small" />
-            </div> -->
           </td>
-          <!-- contentBelongsToUser -->
           <td class="ds-table-col ds-table-head-col-border">
             <client-only>
               <hc-user
@@ -127,7 +87,6 @@
             </client-only>
           </td>
           <td class="ds-table-col ds-table-head-col-border">
-            <!-- latestClaim.closed -->
             <b v-if="report.closed">
               {{ $t('moderation.reports.decided') }}
             </b>
@@ -140,15 +99,14 @@
             >
               {{ $t('moderation.reports.decideButton') }}
             </ds-button>
-            <!-- reviewed -->
             <div v-if="report.reviewed">
               <br />
               <div v-if="report.resource.disabled">
-                <ds-icon name="eye-slash" class="ban" />
+                <base-icon name="eye-slash" class="ban" />
                 {{ $t('moderation.reports.disabledBy') }}
               </div>
               <div v-else>
-                <ds-icon name="eye" class="no-ban" />
+                <base-icon name="eye" class="no-ban" />
                 {{ $t('moderation.reports.enabledBy') }}
               </div>
               <client-only>
@@ -164,11 +122,11 @@
             <div v-else>
               <br />
               <div v-if="report.resource.disabled">
-                <ds-icon name="eye-slash" class="ban" />
+                <base-icon name="eye-slash" class="ban" />
                 {{ $t('moderation.reports.disabled') }}
               </div>
               <div v-else>
-                <ds-icon name="eye" class="no-ban" />
+                <base-icon name="eye" class="no-ban" />
                 {{ $t('moderation.reports.enabled') }}
               </div>
             </div>
@@ -177,10 +135,8 @@
         <tr>
           <td class="ds-table-col ds-table-head-col-border"></td>
           <td class="ds-table-col ds-table-head-col-border" colspan="3">
-            <div>
-              <ds-space margin-bottom="base" />
-              <filed-table :filed="report.filed" />
-            </div>
+            <ds-space margin-bottom="base" />
+            <filed-table :filed="report.filed" v-if="showFiledReports" />
           </td>
         </tr>
       </tbody>
@@ -188,16 +144,21 @@
   </table>
 </template>
 <script>
-// import HcRelativeDateTime from '~/components/RelativeDateTime'
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import HcUser from '~/components/User/User'
-import FiledTable from '~/components/generic/FiledTable/FiledTable'
+import FiledTable from '~/components/_new/generic/FiledTable/FiledTable'
 
 export default {
   components: {
-    // HcRelativeDateTime,
+    CounterIcon,
     HcUser,
     FiledTable,
   },
+  data() {
+    return {
+      showFiledReports: false,
+    }
+  },
   props: {
     reports: { type: Array, default: () => [] },
   },
@@ -205,6 +166,25 @@ export default {
     confirm(report) {
       this.$emit('confirm', report)
     },
+    isComment(resource) {
+      return resource.__typename === 'Comment'
+    },
+    isPost(resource) {
+      return resource.__typename === 'Post'
+    },
+    isUser(resource) {
+      return resource.__typename === 'User'
+    },
+    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>