Rework Timerecords page to be async and responsive

frontend/src/views/Home.vue

@@ -96,7 +96,7 @@
         haveLocation: ""
       }
     },
-    async created() {
+    async mounted() {
       if (this.loggedIn) {
         try {
           let responses = await Promise.all([

frontend/src/views/admin/Users.vue

@@ -60,13 +60,12 @@
         this.prevPage = usersResponse.data._links?.prev?.href
       }
     },
-    async created() {
+    async mounted() {
       try {
         await this.loadPage(BASE_URI + "/users")
       } catch (e) {
         if (e.response.status === 403) await this.$router.push("/") // Solve later with location guard
       }
-
     }
   };
 </script>

frontend/src/views/timerecords/TimeRecords.vue

@@ -1,21 +1,19 @@
 <template>
   <v-container fluid>
-    <div v-bind:key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
+    <div :key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
-      <TimeRecordItem
+      <TimeRecordItem :timeRecord="timeRecord"
-        v-bind:timeRecord="timeRecord"
+                      @del-timeRecord="deleteTimeRecord"
-        v-on:del-timeRecord="deleteTimeRecord"
+                      @edit-timeRecord="editTimeRecord"/>
-        v-on:edit-timeRecord="editTimeRecord"
-      />
     </div>
     <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>
@@ -24,7 +22,7 @@
     <v-row>
       <v-col cols="6"></v-col>
       <v-col cols="1">
-        <v-btn @click="createTimeRecord()" color="primary" fab v-if="loggedIn == 'true'">
+        <v-btn @click="createTimeRecord" color="primary" fab v-if="loggedIn">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-col>
@@ -36,6 +34,7 @@
 <script>
   import TimeRecordItem from "./TimeRecordItem.vue";
   import {BASE_URI} from "../../globals.js";
+  import axios from "axios"
 
   export default {
     name: "TimeRecords",
@@ -45,116 +44,57 @@
     data() {
       return {
         timeRecords: "",
-        page: sessionStorage.getItem("page"),
+        nextPage: "",
-        haveNextPage: "",
+        prevPage: "",
-        havePrevPage: "",
+        loggedIn: JSON.parse(sessionStorage.getItem("loggedin"))
-        loggedIn: sessionStorage.getItem("loggedin")
       };
     },
     methods: {
-      deleteTimeRecord(selfLink) {
+      async deleteTimeRecord(selfLink) {
-        var userxhttp = new XMLHttpRequest();
+        try {
-        userxhttp.onreadystatechange = function () {
+          await axios.delete(selfLink)
-          if (this.readyState == 4 && this.status == 204) {
+          this.timeRecords = this.timeRecords.filter(record => record._links.self.href !== selfLink)
-            location.reload();
+        } catch (e) {
-          }
+          alert("Delete failed!")
-        };
+        }
-        userxhttp.open("DELETE", selfLink, false);
+      },
-
+      async loadPage(url) {
-        userxhttp.setRequestHeader(
+        try {
-          "Authorization",
+          let recordsResponse = await axios.get(url)
-          sessionStorage.getItem("jwt")
+          this.timeRecords = recordsResponse.data._embedded.records
-        );
+          this.timeRecords.map(record => {
-
+            record.duration = `${Math.floor(record.duration / 60)}h ${record.duration % 60} min`
-        userxhttp.send(null);
+            record.date = record.startdate.split("T")[0]
+            record.startdate = record.startdate.split("T")[1]
+            record.enddate = record.enddate ? record.enddate.split("T")[1] : "pending"
+          })
+          this.nextPage = recordsResponse.data._links?.next?.href
+          this.prevPage = recordsResponse.data._links?.prev?.href
+        } catch (e) {
+          if (e.response.status === 403) await this.$router.push("/") // Solve later with location guard
+        }
       },
       editTimeRecord(selfLink, end) {
-        if (end == "pending") {
+        if (end === "pending") {
-          alert("It's not possible to edit a running track");
+          alert("It's not possible to edit a running track")
         } else {
-          sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+          sessionStorage.setItem("timeRecordEditSelfLink", selfLink)
-
+          this.$router.push("/edittimerecord")
-          this.$router.push("/edittimerecord");
         }
       },
       createTimeRecord(selfLink) {
-        sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
+        sessionStorage.setItem("timeRecordEditSelfLink", selfLink)
-
+        this.$router.push("/createtimerecord")
-        this.$router.push("/createtimerecord");
-      },
-      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() {
+    async mounted() {
-      var xhttp = new XMLHttpRequest();
+      let url = BASE_URI + "/records/search/allForUser?"
-      var records;
+        + "username=" + sessionStorage.getItem("username") + "&"
-      var recordLinks;
+        + "sort=startdate,desc" + "&"
-
+        + "projection=overview"
-      if (this.page == null) {
+      await this.loadPage(url)
-        this.page = 0;
-      }
-      sessionStorage.removeItem("page");
-      xhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-          var recordsDB = JSON.parse(xhttp.responseText);
-          records = recordsDB._embedded.records;
-          recordLinks = recordsDB._links;
-        }
-      };
-      xhttp.open(
-        "GET",
-        BASE_URI +
-        "/records/search/allForUser?username=" +
-        sessionStorage.getItem("username") +
-        "&sort=startdate,desc&page=" +
-        this.page +
-        "&projection=overview",
-        false
-      );
-
-      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-      xhttp.send(null);
-      if (recordLinks.next != undefined) {
-        this.haveNextPage = true;
-      }
-      if (recordLinks.prev != undefined) {
-        this.havePrevPage = true;
-      }
-
-      for (let index = 0; index < records.length; index++) {
-        var record = records[index];
-        var time = record.duration;
-        var hours = time / 60;
-        hours = Math.floor(hours);
-
-        var min = time % 60;
-        record.duration = hours + "h " + min + "min";
-        var start = record.startdate;
-        records[index].completeStartDate = start;
-        start = start.split("T");
-        records[index].startdate = start[1];
-        records[index].date = start[0];
-
-        try {
-          var end = record.enddate;
-          end = end.split("T");
-          records[index].enddate = end[1];
-        } catch (e) {
-          records[index].enddate = "pending";
-        }
-      }
-      this.timeRecords = records;
     }
-  };
+  }
 </script>
 
 <style scoped>