Implement page for blocked users

webapp/graphql/settings/BlockedUsers.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql(`
+    {
+      blockedUsers {
+        id
+        name
+        slug
+        avatar
+        about
+        disabled
+        deleted
+      }
+    }
+  `)
+}

webapp/locales/de.json

@@ -189,6 +189,20 @@
       "submit": "Link hinzufügen",
       "successAdd": "Social-Media hinzugefügt. Profil aktualisiert!",
       "successDelete": "Social-Media gelöscht. Profil aktualisiert!"
+    },
+    "blocked-users": {
+      "name": "Blockierte Benutzer",
+      "explanation": {
+        "intro": "Wenn ein anderer Benutzer von dir blockiert wurde, dann passiert folgendes:",
+        "your-perspective": "In deiner Beitragsübersicht tauchen keine Beiträge der blockierten Person mehr auf.",
+        "their-perspective": "Umgekehrt das gleiche: Die blockierte Person sieht deine Beiträge auch nicht mehr in ihrer Übersicht.",
+        "closing": "Das sollte fürs Erste genügen, damit blockierte Benutzer dich nicht mehr länger belästigen können."
+      },
+      "columns": {
+        "name": "Name",
+        "slug": "Alias"
+      },
+      "empty": "Bislang hast du niemanden blockiert."
     }
   },
   "admin": {

webapp/locales/en.json

@@ -189,6 +189,21 @@
       "submit": "Add link",
       "successAdd": "Added social media. Updated user profile!",
       "successDelete": "Deleted social media. Updated user profile!"
+    },
+    "blocked-users": {
+      "name": "Blocked users",
+      "explanation": {
+        "intro": "If another user has been blocked by you, this is what happens:",
+        "your-perspective": "The blocked person's posts will no longer appear in your news feed.",
+        "their-perspective": "Vice versa: The blocked person will also no longer see your posts in their news feed.",
+        "closing": "This should be sufficient for now so that blocked users can no longer bother you."
+
+      },
+      "columns": {
+        "name": "Name",
+        "slug": "Slug"
+      },
+      "empty": "So far, you did not block anybody."
     }
   },
   "admin": {

webapp/pages/settings.vue

@@ -31,6 +31,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
+        {
+          name: this.$t('settings.blocked-users.name'),
+          path: `/settings/blocked-users`,
+        },
         {
           name: this.$t('settings.deleteUserAccount.name'),
           path: `/settings/delete-account`,

webapp/pages/settings/blocked-users.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <ds-space>
+      <ds-card :header="$t('settings.blocked-users.name')">
+        <ds-text>
+          {{ $t('settings.blocked-users.explanation.intro') }}
+        </ds-text>
+        <ds-list>
+          <ds-list-item>
+            {{ $t('settings.blocked-users.explanation.your-perspective') }}
+          </ds-list-item>
+          <ds-list-item>
+            {{ $t('settings.blocked-users.explanation.their-perspective') }}
+          </ds-list-item>
+        </ds-list>
+        <ds-text>
+          {{ $t('settings.blocked-users.explanation.closing') }}
+        </ds-text>
+      </ds-card>
+    </ds-space>
+    <ds-card v-if="blockedUsers && blockedUsers.length">
+      <ds-table :data="blockedUsers" :fields="fields" condensed>
+        <template slot="avatar" slot-scope="scope">
+          <nuxt-link
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.id, slug: scope.row.slug },
+            }"
+          >
+            <hc-avatar :user="scope" class="profile-avatar" size="small" />
+          </nuxt-link>
+        </template>
+        <template slot="name" slot-scope="scope">
+          <nuxt-link
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.id, slug: scope.row.slug },
+            }"
+          >
+            <b>{{ scope.row.name | truncate(20) }}</b>
+          </nuxt-link>
+        </template>
+        <template slot="slug" slot-scope="scope">
+          <nuxt-link
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.id, slug: scope.row.slug },
+            }"
+          >
+            <b>{{ scope.row.slug | truncate(20) }}</b>
+          </nuxt-link>
+        </template>
+      </ds-table>
+    </ds-card>
+    <ds-card v-else>
+      <ds-placeholder>
+        {{ $t('settings.blocked-users.empty') }}
+      </ds-placeholder>
+    </ds-card>
+  </div>
+</template>
+
+<script>
+import BlockedUsers from '~/graphql/settings/BlockedUsers'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
+
+export default {
+  components: {
+    HcAvatar,
+  },
+  data() {
+    return {
+      blockedUsers: [],
+    }
+  },
+  computed: {
+    fields() {
+      return {
+        avatar: '',
+        name: this.$t('settings.blocked-users.columns.name'),
+        slug: this.$t('settings.blocked-users.columns.slug'),
+      }
+    },
+  },
+  apollo: {
+    blockedUsers: { query: BlockedUsers },
+  },
+}
+</script>
+
+<style lang="scss">
+.ds-table-col {
+  vertical-align: middle;
+}
+</style>