Implement pages for admin view

frontend/src/views/Users.vue

@@ -3,6 +3,20 @@
     <div v-bind:key="user.username" v-for="user in users">
       <UsersItems v-bind:user="user" v-on:edit-user="edituser" v-on:del-user="deluser" v-on:show-accounts="showAccounts"/>
     </div>
+     <v-row>
+      <v-col cols="5"></v-col>
+       <v-col cols="1">
+        <v-btn v-if="havePrevPage == true" @click="prevPage()">
+          <v-icon>mdi-arrow-left</v-icon>
+        </v-btn>
+      </v-col>
+      <v-col cols="1">
+        <v-btn v-if="haveNextPage == true" @click="nextPage()">
+          <v-icon>mdi-arrow-right</v-icon>
+        </v-btn>
+      </v-col>     
+      <v-col cols="5"></v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -15,7 +29,10 @@ export default {
   },
   data: () => ({
     users: JSON.parse(sessionStorage.getItem("users")),
-    dialog: false
+    dialog: false,
+    page: sessionStorage.getItem("page"),
+      haveNextPage: "",
+      havePrevPage: ""
   }),
   methods: {
     edituser(userlink) {
@@ -45,9 +62,24 @@ export default {
       sessionStorage.setItem("timeTrackAccountListUserId", uid);
 
       this.$router.push("/timetrackaccounts");
+    },
+    nextPage() {
+      var pageTMP = parseInt(this.page) + 1;
+      sessionStorage.setItem("page", pageTMP);
+      location.reload();
+    },
+    prevPage() {
+      var pageTMP = parseInt(this.page) - 1;
+      sessionStorage.setItem("page", pageTMP);
+      location.reload();
     }
   },
   created() {
+    var userLinks;
+      if (this.page == null) {
+      this.page = 0;
+    }
+    sessionStorage.removeItem("page");
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
@@ -56,13 +88,20 @@ export default {
           "users",
           JSON.stringify(usersInformation._embedded.users)
         );
+         userLinks = usersInformation._links;
       }
     };
-    xhttp.open("GET", baseUri + "/users", false);
+    xhttp.open("GET", baseUri + "/users?page=" +this.page, false);
 
     xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
     xhttp.send(null);
+       if (userLinks.next != undefined) {
+      this.haveNextPage = true;
+    }
+    if (userLinks.prev != undefined) {
+      this.havePrevPage = true;
+    }
     this.users = JSON.parse(sessionStorage.getItem("users"));
   }
 };