Add pagination buttons to search users

admin/src/graphql/searchUsers.js

@@ -1,14 +1,17 @@
 import gql from 'graphql-tag'
 
 export const searchUsers = gql`
-  query ($searchText: String!) {
-    searchUsers(searchText: $searchText) {
-      userId
-      firstName
-      lastName
-      email
-      creation
-      emailChecked
+  query ($searchText: String!, $currentPage: Int, $notActivated: Boolean) {
+    searchUsers(searchText: $searchText, currentPage: $currentPage, notActivated: $notActivated) {
+      userCount
+      userList {
+        userId
+        firstName
+        lastName
+        email
+        creation
+        emailChecked
+      }
     }
   }
 `

admin/src/locales/de.json

@@ -1,4 +1,5 @@
 {
+  "all_emails": "Alle E-Mails",
   "bookmark": "bookmark",
   "confirmed": "bestätigt",
   "creation_form": {
@@ -53,7 +54,7 @@
   "transactionlist": {
     "title": "Alle geschöpften Transaktionen für den Nutzer"
   },
-  "unregistered_emails": "Unregistrierte E-Mails",
+  "unregistered_emails": "Nur unregistrierte E-Mails",
   "unregister_mail": {
     "button": "Registrierungs-Email bestätigen, jetzt senden",
     "error": "Fehler beim Senden des Bestätigungs-Links an den Benutzer: {message}",

admin/src/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "all_emails": "All e-mails",
   "bookmark": "Remember",
   "confirmed": "confirmed",
   "creation_form": {
@@ -53,7 +54,7 @@
   "transactionlist": {
     "title": "All creation-transactions for the user"
   },
-  "unregistered_emails": "Unregistered e-mails",
+  "unregistered_emails": "Only unregistered e-mails",
   "unregister_mail": {
     "button": "Confirm registration email, send now",
     "error": "Error sending the confirmation link to the user: {message}",

admin/src/pages/Creation.vue

@@ -116,7 +116,7 @@ export default {
           },
         })
         .then((result) => {
-          this.itemsList = result.data.searchUsers.map((user) => {
+          this.itemsList = result.data.searchUsers.userList.map((user) => {
             return {
               ...user,
               showDetails: false,

admin/src/pages/UserSearch.vue

@@ -3,7 +3,7 @@
     <div style="text-align: right">
       <b-button block variant="danger" @click="unconfirmedRegisterMails">
         <b-icon icon="envelope" variant="light"></b-icon>
-        {{ $t('unregistered_emails') }}
+        {{ filterCheckedEmails ? $t('all_emails') : $t('unregistered_emails') }}
       </b-button>
     </div>
     <label>{{ $t('user_search') }}</label>
@@ -21,6 +21,14 @@
       :fieldsTable="fields"
       :criteria="criteria"
     />
+    <b-pagination
+      pills
+      size="lg"
+      v-model="currentPage"
+      per-page="25"
+      :total-rows="rows"
+      align="center"
+    ></b-pagination>
     <div></div>
   </div>
 </template>
@@ -67,14 +75,15 @@ export default {
       beforeLastMonth: {
         short: this.$moment().subtract(2, 'month').format('MMMM'),
       },
+      filterCheckedEmails: false,
+      rows: 0,
+      currentPage: 1,
     }
   },
-
   methods: {
     unconfirmedRegisterMails() {
-      this.searchResult = this.searchResult.filter((user) => {
-        return !user.emailChecked
-      })
+      this.filterCheckedEmails = !this.filterCheckedEmails
+      this.getUsers()
     },
     getUsers() {
       this.$apollo
@@ -82,16 +91,24 @@ export default {
           query: searchUsers,
           variables: {
             searchText: this.criteria,
+            currentPage: this.currentPage,
+            notActivated: this.filterCheckedEmails,
           },
         })
         .then((result) => {
-          this.searchResult = result.data.searchUsers
+          this.rows = result.data.searchUsers.userCount
+          this.searchResult = result.data.searchUsers.userList
         })
         .catch((error) => {
           this.$toasted.error(error.message)
         })
     },
   },
+  watch: {
+    currentPage() {
+      this.getUsers()
+    },
+  },
   created() {
     this.getUsers()
   },