Make timetrackAccounts load async

Update a package

frontend/package-lock.json

@@ -5852,9 +5852,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",

frontend/src/views/timetrackaccounts/TimeTrackAccounts.vue

@@ -22,6 +22,7 @@
 <script>
   import {BASE_URI} from "../../globals.js";
   import TimeTrackAccountItem from "./TimeTrackAccountItem.vue";
+  import axios from "axios"
 
   export default {
     name: "TimeTrackAccounts",
@@ -35,50 +36,31 @@
       };
     },
     methods: {
-      deleteTimeTrackAccount(selfLink) {
-        var accountxhttp = new XMLHttpRequest();
-        accountxhttp.onreadystatechange = function () {
-          if (this.readyState == 4 && this.status == 204) {
-            location.reload();
-          }
-        };
-        accountxhttp.open("DELETE", selfLink, false);
-        accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-        accountxhttp.send(null);
+      async deleteTimeTrackAccount(selfLink) {
+        try {
+          await axios.delete(selfLink)
+          this.timeTrackAccounts = this.timeTrackAccounts.filter(account => account._links.self.href !== selfLink)
+        } catch (e) {
+          alert(e)
+        }
       },
       editTimeTrackAccount(selfLink) {
         sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
-        this.$router.push("/edittimetrackaccount");
+        this.$router.push("/edittimetrackaccount")
       },
       createTimeTrackAccount() {
-        this.$router.push("/createtimetrackaccount");
+        this.$router.push("/createtimetrackaccount")
       }
     },
-
-    created() {
-      var accounts;
-      var timeTrackAccountsTMP;
-      var accountxhttp = new XMLHttpRequest();
-      accountxhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-          accounts = JSON.parse(accountxhttp.responseText);
-          timeTrackAccountsTMP = accounts._embedded.accounts;
-        }
-      };
-      accountxhttp.open(
-        "GET",
-        BASE_URI +
-        "/accounts/search/findByUsername?username=" +
-        sessionStorage.getItem("timeTrackAccountListUser"),
-        false
-      );
-
-      accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-      accountxhttp.send(null);
-
-      this.timeTrackAccounts = timeTrackAccountsTMP;
+    async mounted() {
+      let accountsResponse = await axios.get(
+        BASE_URI
+        + "/accounts/search/findByUsername?username="
+        + sessionStorage.getItem("username")
+      )
+      this.timeTrackAccounts = accountsResponse.data._embedded.accounts
     }
-  };
+  }
 </script>
 
 <style scoped>