Added basic moderation interface

components/ReportModal.vue

@@ -73,7 +73,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($id: ID!, $type: _ResourceType!, $description: String) {
+            mutation($id: ID!, $type: ResourceEnum!, $description: String) {
               report(
                 resource: { id: $id, type: $type }
                 description: $description

layouts/default.vue

@@ -101,6 +101,7 @@ export default {
     ...mapGetters({
       user: 'auth/user',
       isLoggedIn: 'auth/isLoggedIn',
+      isModerator: 'auth/isModerator',
       isAdmin: 'auth/isAdmin'
     }),
     routes() {
@@ -119,6 +120,13 @@ export default {
           icon: 'cogs'
         }
       ]
+      if (this.isModerator) {
+        routes.push({
+          name: this.$t('moderation.name'),
+          path: `/moderation`,
+          icon: 'balance-scale'
+        })
+      }
       if (this.isAdmin) {
         routes.push({
           name: this.$t('admin.name'),

locales/de.json

@@ -81,6 +81,13 @@
       "name": "Einstellungen"
     }
   },
+  "moderation": {
+    "name": "Moderation",
+    "reports": {
+      "name": "Meldungen",
+      "reporter": "gemeldet von"
+    }
+  },
   "post": {
     "name": "Beitrag",
     "moreInfo": {

locales/en.json

@@ -81,6 +81,13 @@
       "name": "Settings"
     }
   },
+  "moderation": {
+    "name": "Moderation",
+    "reports": {
+      "name": "Reports",
+      "reporter": "reported by"
+    }
+  },
   "post": {
     "name": "Post",
     "moreInfo": {

pages/moderation.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <ds-heading tag="h1">
+      {{ $t('moderation.name') }}
+    </ds-heading>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+      <ds-flex-item>
+        <transition
+          name="slide-up"
+          appear
+        >
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    routes() {
+      return [
+        {
+          name: this.$t('moderation.reports.name'),
+          path: `/moderation`
+        }
+      ]
+    }
+  }
+}
+</script>

pages/moderation/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <ds-card space="small">
+    <ds-heading tag="h3">
+      {{ $t('moderation.reports.name') }}
+    </ds-heading>
+    <ds-table
+      :data="Report"
+      :fields="fields"
+      condensed
+    >
+      <template
+        slot="type"
+        slot-scope="scope"
+      >
+        <template v-if="scope.row.type === 'contribution'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.contribution.slug } }">
+            <b>{{ scope.row.contribution.title | truncate(50) }}</b>
+          </nuxt-link>
+        </template>
+        <template v-else-if="scope.row.type === 'comment'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.contribution.slug } }">
+            <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
+          </nuxt-link>
+        </template>
+        <template v-else>
+          <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
+            <b>{{ scope.row.user.name | truncate(50) }}</b>
+          </nuxt-link>
+        </template><br>
+        <ds-text
+          size="small"
+          color="soft"
+        >
+          {{ scope.row.type }}
+        </ds-text>
+      </template>
+      <template
+        slot="reporter"
+        slot-scope="scope"
+      >
+        <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.reporter.slug } }">
+          {{ scope.row.reporter.name }}
+        </nuxt-link>
+      </template>
+      <template slot="actions">
+        <no-ssr>
+          <dropdown
+            class="moderation-menu"
+            placement="left"
+            offset="5"
+          >
+            <template
+              slot="default"
+              slot-scope="{toggleMenu}"
+            >
+              <a
+                class="moderation-menu-trigger"
+                href="#"
+                @click.prevent="toggleMenu"
+              >
+                <ds-icon name="ellipsis-v" />
+              </a>
+            </template>
+            <template
+              slot="popover"
+            >
+              Actions...
+            </template>
+          </dropdown>
+        </no-ssr>
+      </template>
+    </ds-table>
+  </ds-card>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown
+  },
+  data() {
+    return {
+      Report: []
+    }
+  },
+  computed: {
+    fields() {
+      return {
+        type: ' ',
+        reporter: this.$t('moderation.reports.reporter'),
+        actions: ' '
+      }
+    }
+  },
+  apollo: {
+    Report: {
+      query: gql(`
+        query {
+          Report(first: 20, orderBy: createdAt_desc) {
+            id
+            description
+            type
+            createdAt
+            reporter {
+              name
+              slug
+            }
+            user {
+              name
+              slug
+            }
+            comment {
+              contentExcerpt
+              author {
+                name
+                slug
+              }
+              post {
+                title
+                slug
+              }
+            }
+            contribution {
+              title
+              slug
+              author {
+                name
+                slug
+              }
+            }
+          }
+        }
+      `)
+    }
+  }
+}
+</script>