Mercurial > gemma

changeset 427:e4b961315e9f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Pagination added to usermanagement
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 16 Aug 2018 17:49:24 +0200
parents 4a03d000c854
children d7a06b9fffc9
files client/public/index.html client/src/views/Users.vue
diffstat 2 files changed, 37 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/client/public/index.html	Thu Aug 16 17:37:29 2018 +0200
+++ b/client/public/index.html	Thu Aug 16 17:49:24 2018 +0200
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>wamosjs</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but wamosjs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>wamosjs</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but wamosjs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>
--- a/client/src/views/Users.vue	Thu Aug 16 17:37:29 2018 +0200
+++ b/client/src/views/Users.vue	Thu Aug 16 17:49:24 2018 +0200
@@ -30,6 +30,7 @@
                     </tbody>
                 </table>
               </div>
+              <div><i @click="prevPage" v-if="this.currentPage!=1" class="fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage" class="fa fa-caret-right"></i></div>
                 <div class="adduser">
                   <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button>
                 </div>
@@ -61,7 +62,6 @@
 .userlist {
   margin-top: $large-offset;
   margin-right: $offset;
-  height: 100%;
   min-width: 520px;
 }
 
@@ -110,7 +110,11 @@
 export default {
   name: "userview",
   data() {
-    return { sortCriterion: "user" };
+    return {
+      sortCriterion: "user",
+      pageSize: 10,
+      currentPage: 1
+    };
   },
   components: {
     Sidebar,
@@ -133,7 +137,12 @@
           return 1;
         return 0;
       });
-      return users;
+      const start = (this.currentPage - 1) * this.pageSize;
+      return users.slice(start, start + this.pageSize);
+    },
+    pages() {
+      let users = [...this.$store.getters["usermanagement/users"]];
+      return Math.ceil(users.length / this.pageSize);
     },
     tableStyle() {
       return {
@@ -152,6 +161,14 @@
     }
   },
   methods: {
+    nextPage() {
+      if (this.currentPage < this.pages) this.currentPage += 1;
+      return;
+    },
+    prevPage() {
+      if (this.currentPage > 0) this.currentPage -= 1;
+      return;
+    },
     sortBy(criterion) {
       this.sortCriterion = criterion;
     },