Mercurial > gemma
changeset 427:e4b961315e9f
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; },