From 448f350c2ed5a134fcddbb13f4f105c799974359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 21:45:37 +0200
Subject: [PATCH 01/11] Implement paginating user view for admins

---
 backend/src/seed/seed-db.js  |  7 +++
 webapp/locales/de.json       |  9 +++-
 webapp/locales/en.json       |  9 +++-
 webapp/pages/admin.vue       |  7 ++-
 webapp/pages/admin/users.vue | 86 ++++++++++++++++++++++++++++++++++--
 5 files changed, 108 insertions(+), 10 deletions(-)

diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js
index 18eefb76f..bd12549be 100644
--- a/backend/src/seed/seed-db.js
+++ b/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)
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index f5231ddf6..2f38e2be3 100644
--- a/webapp/locales/de.json
+++ b/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"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7fb596c9e..14872b3d4 100644
--- a/webapp/locales/en.json
+++ b/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"
diff --git a/webapp/pages/admin.vue b/webapp/pages/admin.vue
index c9e48ca65..4d498dc9b 100644
--- a/webapp/pages/admin.vue
+++ b/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'),
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 90f6d598d..6632d39ca 100644
--- a/webapp/pages/admin/users.vue
+++ b/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>

From 095a5e7c679d0a493d6986e2c738c8e68ab3bee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 21:49:15 +0200
Subject: [PATCH 02/11] Id is not so important, it's in the profile URL

---
 webapp/pages/admin/users.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 6632d39ca..3ecb5edf9 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -46,7 +46,6 @@ export default {
     },
     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'),

From 8b1d92ee7e84d313cbcbc03e2147d79eb647f528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 00:43:17 +0200
Subject: [PATCH 03/11] Implement pagination without a total count

This is necessary, because once we filter the collection, the
`countUsers` is not valid anymore.
---
 webapp/pages/admin/users.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 3ecb5edf9..de910dd34 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,6 +1,9 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
     <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+      <template slot="index" slot-scope="scope">
+        {{ scope.row.index }}.
+      </template>
       <template slot="name" slot-scope="scope">
         <nuxt-link
           :to="{
@@ -34,18 +37,16 @@ export default {
       pageSize,
       first: pageSize,
       User: [],
+      hasNext: false,
     }
   },
   computed: {
-    hasNext() {
-      const { countUsers } = this.statistics
-      return this.offset < countUsers - this.pageSize
-    },
     hasPrevious() {
       return this.offset > 0
     },
     fields() {
       return {
+        index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
         role: this.$t('admin.users.table.columns.role'),
@@ -53,11 +54,6 @@ export default {
     },
   },
   apollo: {
-    statistics: {
-      query() {
-        return gql('query { statistics { countUsers } }')
-      },
-    },
     User: {
       query() {
         return gql(`
@@ -75,17 +71,19 @@ export default {
         const { offset, first } = this
         return { first, offset }
       },
+      update({ User }) {
+        this.hasNext = User && User.length >= this.pageSize
+        if (User.length <= 0) return this.User // edge case, avoid a blank page
+        return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
+      },
     },
   },
   methods: {
     back() {
-      this.offset -= this.pageSize
-      this.offset = Math.max(this.offset, 0)
+      this.offset = Math.max(this.offset - this.pageSize, 0)
     },
     next() {
       this.offset += this.pageSize
-      const { countUsers } = this.statistics
-      this.offset = Math.min(this.offset, countUsers - this.pageSize)
     },
   },
 }

From 08a5a70fd035cb885af44b8e71949f51969b5836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 01:24:09 +0200
Subject: [PATCH 04/11] Fine tuning of admin users page

---
 webapp/locales/de.json       |  2 +-
 webapp/locales/en.json       |  2 +-
 webapp/pages/admin/users.vue | 39 +++++++++++++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 2f38e2be3..d0cbf13ac 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -192,7 +192,7 @@
       "table": {
         "columns": {
           "name": "Name",
-          "slug": "Username",
+          "slug": "Slug",
           "role": "Rolle"
         }
       }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 14872b3d4..c7262795d 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -193,7 +193,7 @@
       "table": {
         "columns": {
           "name": "Name",
-          "slug": "Username",
+          "slug": "Slug",
           "role": "Role"
         }
       }
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index de910dd34..8fa0dfe24 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -11,16 +11,26 @@
             params: { id: scope.row.id, slug: scope.row.slug },
           }"
         >
-          <b>{{ scope.row.name | truncate(50) }}</b>
+          <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-flex direction="row-reverse">
       <ds-flex-item width="50px">
-        <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+        <ds-button @click="next" :loading="$apollo.loading" :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-button @click="back" :loading="$apollo.loading" :disabled="!hasPrevious" icon="arrow-left" primary />
       </ds-flex-item>
     </ds-flex>
   </ds-card>
@@ -49,7 +59,22 @@ export default {
         index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
-        role: this.$t('admin.users.table.columns.role'),
+        contributionsCount: {
+          label: '🖉',
+          align: 'right'
+        },
+        commentedCount: {
+          label: '🗨',
+          align: 'right'
+        },
+        shoutedCount: {
+          label: '❤',
+          align: 'right'
+        },
+        role: {
+          label: this.$t('admin.users.table.columns.role'),
+          align: 'right'
+        }
       }
     },
   },
@@ -63,6 +88,9 @@ export default {
             name
             slug
             role
+            contributionsCount
+            commentedCount
+            shoutedCount
           }
         }
       `)
@@ -72,7 +100,8 @@ export default {
         return { first, offset }
       },
       update({ User }) {
-        this.hasNext = User && User.length >= this.pageSize
+        if (!User) return []
+        this.hasNext = User.length >= this.pageSize
         if (User.length <= 0) return this.User // edge case, avoid a blank page
         return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
       },

From ed8605875ed8b97c87299ad73cb4e4e8974c6a89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 02:24:03 +0200
Subject: [PATCH 05/11] Adding input field

Note: Apparently there is a nasty side-effect when you combine `loading`
and `disabled`. The `disabled` flag gets overridden, if `loading` is
false.
---
 webapp/pages/admin/users.vue | 87 +++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 8fa0dfe24..7fea65224 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,39 +1,46 @@
 <template>
-  <ds-card :header="$t('admin.users.name')">
-    <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
-      <template slot="index" slot-scope="scope">
-        {{ scope.row.index }}.
-      </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-flex direction="row-reverse">
-      <ds-flex-item width="50px">
-        <ds-button @click="next" :loading="$apollo.loading" :disabled="!hasNext" icon="arrow-right" primary />
-      </ds-flex-item>
-      <ds-flex-item width="50px">
-        <ds-button @click="back" :loading="$apollo.loading" :disabled="!hasPrevious" icon="arrow-left" primary />
-      </ds-flex-item>
-    </ds-flex>
-  </ds-card>
+  <div>
+    <ds-space>
+      <ds-card :header="$t('admin.users.name')">
+        <ds-input placeholder="..." icon="search" />
+      </ds-card>
+    </ds-space>
+    <ds-card>
+      <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+        <template slot="index" slot-scope="scope">
+          {{ scope.row.index }}.
+        </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-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>
+  </div>
 </template>
 
 <script>
@@ -61,20 +68,20 @@ export default {
         slug: this.$t('admin.users.table.columns.slug'),
         contributionsCount: {
           label: '🖉',
-          align: 'right'
+          align: 'right',
         },
         commentedCount: {
           label: '🗨',
-          align: 'right'
+          align: 'right',
         },
         shoutedCount: {
           label: '❤',
-          align: 'right'
+          align: 'right',
         },
         role: {
           label: this.$t('admin.users.table.columns.role'),
-          align: 'right'
-        }
+          align: 'right',
+        },
       }
     },
   },

From e83aa5c921f33d582e8af5b82447df5c85d5b6bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 12:45:32 +0200
Subject: [PATCH 06/11] Typo: .main-container was missing bottoM padding

FYI: @ogerly
---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 008323b65..f6d3f1201 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -228,7 +228,7 @@ export default {
 
 .main-container {
   padding-top: 6rem;
-  padding-botton: 5rem;
+  padding-bottom: 6rem;
 }
 
 .main-navigation {

From 3f0afa08341139094ebce14f90ea5f64ec602752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 13:12:24 +0200
Subject: [PATCH 07/11] Localise placeholder

---
 webapp/locales/de.json       | 3 +++
 webapp/locales/en.json       | 3 +++
 webapp/pages/admin/users.vue | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d0cbf13ac..ecc067566 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -189,6 +189,9 @@
     },
     "users": {
       "name": "Benutzer",
+      "form": {
+        "placeholder": "E-Mail, Name oder Beschreibung"
+      },
       "table": {
         "columns": {
           "name": "Name",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index c7262795d..0a7b87db6 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -190,6 +190,9 @@
     },
     "users": {
       "name": "Users",
+      "form": {
+        "placeholder": "E-Mail, name or description"
+      },
       "table": {
         "columns": {
           "name": "Name",
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 7fea65224..049da9458 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -2,7 +2,7 @@
   <div>
     <ds-space>
       <ds-card :header="$t('admin.users.name')">
-        <ds-input placeholder="..." icon="search" />
+        <ds-input :placeholder="$t('admin.users.form.placeholder')" icon="search" />
       </ds-card>
     </ds-space>
     <ds-card>

From 4d10b7aece897fe75f98166a9f9563add111b053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 15:37:13 +0200
Subject: [PATCH 08/11] Basic email filtering on admin/users page

---
 webapp/pages/admin/users.spec.js | 37 +++++++++++++++++++++++++++++++
 webapp/pages/admin/users.vue     | 38 +++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 webapp/pages/admin/users.spec.js

diff --git a/webapp/pages/admin/users.spec.js b/webapp/pages/admin/users.spec.js
new file mode 100644
index 000000000..3e63c380e
--- /dev/null
+++ b/webapp/pages/admin/users.spec.js
@@ -0,0 +1,37 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Users from './users.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('Users', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(Users, {
+        mocks,
+        localVue,
+      })
+    }
+
+    it('renders', () => {
+      wrapper = Wrapper()
+      expect(wrapper.is('div')).toBe(true)
+    })
+  })
+})
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 049da9458..a5d02220b 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -2,7 +2,20 @@
   <div>
     <ds-space>
       <ds-card :header="$t('admin.users.name')">
-        <ds-input :placeholder="$t('admin.users.form.placeholder')" icon="search" />
+        <ds-form v-model="form" @submit="submit">
+          <ds-flex gutter="small">
+            <ds-flex-item width="90%">
+              <ds-input
+                model="query"
+                :placeholder="$t('admin.users.form.placeholder')"
+                icon="search"
+              />
+            </ds-flex-item>
+            <ds-flex-item width="30px">
+              <ds-button primary type="submit" icon="search" :loading="$apollo.loading" />
+            </ds-flex-item>
+          </ds-flex>
+        </ds-form>
       </ds-card>
     </ds-space>
     <ds-card>
@@ -55,6 +68,12 @@ export default {
       first: pageSize,
       User: [],
       hasNext: false,
+      email: null,
+      form: {
+        formData: {
+          query: '',
+        },
+      },
     }
   },
   computed: {
@@ -89,8 +108,8 @@ export default {
     User: {
       query() {
         return gql(`
-        query($filter: _UserFilter, $first: Int, $offset: Int) {
-          User(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+        query($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
+          User(email: $email, filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
             id
             name
             slug
@@ -103,13 +122,15 @@ export default {
       `)
       },
       variables() {
-        const { offset, first } = this
-        return { first, offset }
+        const { offset, first, email } = this
+        const variables = { first, offset }
+        if (email) variables.email = email
+        return variables
       },
       update({ User }) {
         if (!User) return []
         this.hasNext = User.length >= this.pageSize
-        if (User.length <= 0) return this.User // edge case, avoid a blank page
+        if (User.length <= 0 && this.offset > 0) return this.User // edge case, avoid a blank page
         return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
       },
     },
@@ -121,6 +142,11 @@ export default {
     next() {
       this.offset += this.pageSize
     },
+    submit(formData) {
+      this.offset = 0
+      const { query } = formData
+      this.email = query
+    },
   },
 }
 </script>

From 88ef6c00f2537e9627df697ba702c8089789cd19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 15:47:22 +0200
Subject: [PATCH 09/11] Display "no users found" for empty user list

---
 webapp/locales/de.json       | 3 ++-
 webapp/locales/en.json       | 3 ++-
 webapp/pages/admin/users.vue | 9 +++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index ecc067566..dd6ec2185 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -198,7 +198,8 @@
           "slug": "Slug",
           "role": "Rolle"
         }
-      }
+      },
+      "empty": "Keine Benutzer gefunden"
     },
     "pages": {
       "name": "Seiten"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0a7b87db6..53825d83e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -199,7 +199,8 @@
           "slug": "Slug",
           "role": "Role"
         }
-      }
+      },
+      "empty": "No users found"
     },
     "pages": {
       "name": "Pages"
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index a5d02220b..c94abd529 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -18,8 +18,8 @@
         </ds-form>
       </ds-card>
     </ds-space>
-    <ds-card>
-      <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+    <ds-card v-if="User && User.length">
+      <ds-table :data="User" :fields="fields" condensed>
         <template slot="index" slot-scope="scope">
           {{ scope.row.index }}.
         </template>
@@ -53,6 +53,11 @@
         </ds-flex-item>
       </ds-flex>
     </ds-card>
+    <ds-card v-else>
+      <ds-placeholder>
+        {{ $t('admin.users.empty') }}
+      </ds-placeholder>
+    </ds-card>
   </div>
 </template>
 

From f9969b964c8555bca18952b0ff2cb6abb824dc81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 14:00:03 +0200
Subject: [PATCH 10/11] Implement conditional filtering

---
 backend/src/schema/types/type/User.gql |  3 +++
 webapp/package.json                    |  3 ++-
 webapp/pages/admin/users.spec.js       | 35 +++++++++++++++++++++++++-
 webapp/pages/admin/users.vue           | 15 +++++++++--
 webapp/yarn.lock                       | 17 +++++++++----
 5 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index b984f2d79..a735e90e5 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -79,6 +79,9 @@ type User {
 input _UserFilter {
   AND: [_UserFilter!]
   OR: [_UserFilter!]
+  name_contains: String
+  about_contains: String
+  slug_contains: String
   id: ID
   id_not: ID
   id_in: [ID!]
diff --git a/webapp/package.json b/webapp/package.json
index edad9509d..8385f37ec 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -63,6 +63,7 @@
     "date-fns": "2.0.0-beta.2",
     "express": "~4.17.1",
     "graphql": "~14.4.2",
+    "isemail": "^3.2.0",
     "jsonwebtoken": "~8.5.1",
     "linkify-it": "~2.1.0",
     "nuxt": "~2.8.1",
@@ -111,4 +112,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/pages/admin/users.spec.js b/webapp/pages/admin/users.spec.js
index 3e63c380e..e6b84cad9 100644
--- a/webapp/pages/admin/users.spec.js
+++ b/webapp/pages/admin/users.spec.js
@@ -16,7 +16,6 @@ describe('Users', () => {
       $t: jest.fn(),
       $apollo: {
         loading: false,
-        mutate: jest.fn().mockResolvedValue(),
       },
     }
   })
@@ -33,5 +32,39 @@ describe('Users', () => {
       wrapper = Wrapper()
       expect(wrapper.is('div')).toBe(true)
     })
+
+    describe('search', () => {
+      let searchAction
+      beforeEach(() => {
+        searchAction = (wrapper, { query }) => {
+          wrapper.find('input').setValue(query)
+          wrapper.find('form').trigger('submit')
+          return wrapper
+        }
+      })
+
+      describe('query looks like an email address', () => {
+        it('searches users for exact email address', async () => {
+          const wrapper = await searchAction(Wrapper(), { query: 'email@example.org' })
+          expect(wrapper.vm.email).toEqual('email@example.org')
+          expect(wrapper.vm.filter).toBe(null)
+        })
+      })
+
+      describe('query is just text', () => {
+        it('tries to find matching users by `name`, `slug` or `about`', async () => {
+          const wrapper = await searchAction(await Wrapper(), { query: 'Find me' })
+          const expected = {
+            OR: [
+              { name_contains: 'Find me' },
+              { slug_contains: 'Find me' },
+              { about_contains: 'Find me' },
+            ],
+          }
+          expect(wrapper.vm.email).toBe(null)
+          expect(wrapper.vm.filter).toEqual(expected)
+        })
+      })
+    })
   })
 })
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index c94abd529..4f9a0849b 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -63,6 +63,7 @@
 
 <script>
 import gql from 'graphql-tag'
+import isemail from 'isemail'
 
 export default {
   data() {
@@ -74,6 +75,7 @@ export default {
       User: [],
       hasNext: false,
       email: null,
+      filter: null,
       form: {
         formData: {
           query: '',
@@ -127,9 +129,10 @@ export default {
       `)
       },
       variables() {
-        const { offset, first, email } = this
+        const { offset, first, email, filter } = this
         const variables = { first, offset }
         if (email) variables.email = email
+        if (filter) variables.filter = filter
         return variables
       },
       update({ User }) {
@@ -150,7 +153,15 @@ export default {
     submit(formData) {
       this.offset = 0
       const { query } = formData
-      this.email = query
+      if (isemail.validate(query)) {
+        this.email = query
+        this.filter = null
+      } else {
+        this.email = null
+        this.filter = {
+          OR: [{ name_contains: query }, { slug_contains: query }, { about_contains: query }],
+        }
+      }
     },
   },
 }
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 1456371d2..0e6b7218a 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -6047,6 +6047,13 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isemail@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
+  integrity sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==
+  dependencies:
+    punycode "2.x.x"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -9173,16 +9180,16 @@ punycode@1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
   integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
+punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
 punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"

From 5da5b8658e36271f3398d250ab92c78d2a2b47dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 14:14:21 +0200
Subject: [PATCH 11/11] Display creation date in user view

---
 webapp/locales/de.json       | 3 ++-
 webapp/locales/en.json       | 3 ++-
 webapp/pages/admin/users.vue | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index dd6ec2185..30e77891a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -196,7 +196,8 @@
         "columns": {
           "name": "Name",
           "slug": "Slug",
-          "role": "Rolle"
+          "role": "Rolle",
+          "createdAt": "Erstellt am"
         }
       },
       "empty": "Keine Benutzer gefunden"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 53825d83e..69e80e5bb 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -197,7 +197,8 @@
         "columns": {
           "name": "Name",
           "slug": "Slug",
-          "role": "Role"
+          "role": "Role",
+          "createdAt": "Created at"
         }
       },
       "empty": "No users found"
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 4f9a0849b..0d737cfc0 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -43,6 +43,9 @@
             <b>{{ scope.row.slug | truncate(20) }}</b>
           </nuxt-link>
         </template>
+        <template slot="createdAt" slot-scope="scope">
+          {{ scope.row.createdAt | dateTime }}
+        </template>
       </ds-table>
       <ds-flex direction="row-reverse">
         <ds-flex-item width="50px">
@@ -92,6 +95,7 @@ export default {
         index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
+        createdAt: this.$t('admin.users.table.columns.createdAt'),
         contributionsCount: {
           label: '🖉',
           align: 'right',
@@ -121,6 +125,7 @@ export default {
             name
             slug
             role
+            createdAt
             contributionsCount
             commentedCount
             shoutedCount