Implement paginating user view for admins

backend/src/seed/seed-db.js

@@ -707,6 +707,13 @@ import Factory from './factories'
         to: 'o3',
       }),
     ])
+
+    await Promise.all(
+      [...Array(30).keys()].map(i => {
+        return f.create('User')
+      }),
+    )
+
     /* eslint-disable-next-line no-console */
     console.log('Seeded Data...')
     process.exit(0)

webapp/locales/de.json

@@ -188,7 +188,14 @@
       "name": "Organisationen"
     },
     "users": {
-      "name": "Benutzer"
+      "name": "Benutzer",
+      "table": {
+        "columns": {
+          "name": "Name",
+          "slug": "Username",
+          "role": "Rolle"
+        }
+      }
     },
     "pages": {
       "name": "Seiten"

webapp/locales/en.json

@@ -189,7 +189,14 @@
       "name": "Organizations"
     },
     "users": {
-      "name": "Users"
+      "name": "Users",
+      "table": {
+        "columns": {
+          "name": "Name",
+          "slug": "Username",
+          "role": "Role"
+        }
+      }
     },
     "pages": {
       "name": "Pages"

webapp/pages/admin.vue

@@ -24,11 +24,10 @@ export default {
           name: this.$t('admin.dashboard.name'),
           path: `/admin`,
         },
-        // TODO implement
-        /* {
+        {
           name: this.$t('admin.users.name'),
-          path: `/admin/users`
-        }, */
+          path: `/admin/users`,
+        },
         // TODO implement
         /* {
           name: this.$t('admin.organizations.name'),

webapp/pages/admin/users.vue

@@ -1,15 +1,93 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+      <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(50) }}</b>
+        </nuxt-link>
+      </template>
+    </ds-table>
+    <ds-flex direction="row-reverse">
+      <ds-flex-item width="50px">
+        <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+      </ds-flex-item>
+      <ds-flex-item width="50px">
+        <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
+      </ds-flex-item>
+    </ds-flex>
   </ds-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty.vue'
+import gql from 'graphql-tag'
 
 export default {
-  components: {
-    HcEmpty,
+  data() {
+    const pageSize = 15
+    return {
+      offset: 0,
+      pageSize,
+      first: pageSize,
+      User: [],
+    }
+  },
+  computed: {
+    hasNext() {
+      const { countUsers } = this.statistics
+      return this.offset < countUsers - this.pageSize
+    },
+    hasPrevious() {
+      return this.offset > 0
+    },
+    fields() {
+      return {
+        id: 'ID',
+        name: this.$t('admin.users.table.columns.name'),
+        slug: this.$t('admin.users.table.columns.slug'),
+        role: this.$t('admin.users.table.columns.role'),
+      }
+    },
+  },
+  apollo: {
+    statistics: {
+      query() {
+        return gql('query { statistics { countUsers } }')
+      },
+    },
+    User: {
+      query() {
+        return gql(`
+        query($filter: _UserFilter, $first: Int, $offset: Int) {
+          User(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+            id
+            name
+            slug
+            role
+          }
+        }
+      `)
+      },
+      variables() {
+        const { offset, first } = this
+        return { first, offset }
+      },
+    },
+  },
+  methods: {
+    back() {
+      this.offset -= this.pageSize
+      this.offset = Math.max(this.offset, 0)
+    },
+    next() {
+      this.offset += this.pageSize
+      const { countUsers } = this.statistics
+      this.offset = Math.min(this.offset, countUsers - this.pageSize)
+    },
   },
 }
 </script>