Rework admin page to be async and responsive

frontend/src/views/admin/Users.vue

@@ -7,12 +7,12 @@
     <v-row>
       <v-col cols="5"></v-col>
       <v-col cols="1">
-        <v-btn @click="prevPage()" v-if="havePrevPage == true">
+        <v-btn @click="loadPage(prevPage)" v-if="prevPage">
           <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
       </v-col>
       <v-col cols="1">
-        <v-btn @click="nextPage()" v-if="haveNextPage == true">
+        <v-btn @click="loadPage(nextPage)" v-if="nextPage">
           <v-icon>mdi-arrow-right</v-icon>
         </v-btn>
       </v-col>
@@ -22,78 +22,51 @@
 </template>
 
 <script>
-  import {BASE_URI} from "../../globals.js";
-  import UsersItems from "./UsersItems.vue";
+  import {BASE_URI} from "../../globals.js"
+  import UsersItems from "./UsersItems.vue"
+  import axios from "axios"
 
   export default {
     components: {
       UsersItems
     },
-    data: () => ({
+    data() {
+      return {
         users: JSON.parse(sessionStorage.getItem("users")),
         dialog: false,
         page: sessionStorage.getItem("page"),
-      haveNextPage: "",
-      havePrevPage: ""
-    }),
+        nextPage: "",
+        prevPage: ""
+      }
+    },
     methods: {
       edituser(userlink) {
         sessionStorage.setItem("edituser", userlink);
         this.$router.push("/edituser");
       },
-      deluser(selfLink) {
-        var userxhttp = new XMLHttpRequest();
-        userxhttp.onreadystatechange = function () {
-          if (this.readyState == 4 && this.status == 204) {
-            location.reload();
-          }
-        };
-        userxhttp.open("DELETE", selfLink, false);
-        userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        userxhttp.send(null);
+      async deluser(selfLink) {
+        await axios.delete(selfLink)
+        location.reload()
       },
       showAccounts(username, uid) {
         sessionStorage.setItem("timeTrackAccountListUser", username);
         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();
+      async loadPage(url) {
+        let usersResponse = await axios.get(url)
+        this.users = usersResponse.data._embedded?.users
+        this.nextPage = usersResponse.data._links?.next?.href
+        this.prevPage = usersResponse.data._links?.prev?.href
       }
     },
-    created() {
-      var userLinks;
-      if (this.page == null) {
-        this.page = 0;
+    async created() {
+      try {
+        await this.loadPage(BASE_URI + "/users")
+      } catch (e) {
+        if (e.response.status === 403) await this.$router.push("/") // Solve later with location guard
       }
-      sessionStorage.removeItem("page");
-      var xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-          var usersInformation = JSON.parse(xhttp.responseText);
-          sessionStorage.setItem("users", JSON.stringify(usersInformation._embedded.users));
-          userLinks = usersInformation._links;
-        }
-      };
-      xhttp.open("GET", BASE_URI + "/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"));
     }
   };
 </script>