Rework Timerecords page to be async and responsive

This commit is contained in:
Marcel Schwarz 2020-07-30 22:01:06 +02:00
parent 33506a4d9e
commit 4131213723
3 changed files with 49 additions and 110 deletions

View File

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

View File

@ -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>

View File

@ -1,21 +1,19 @@
<template>
<v-container fluid>
<div v-bind:key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
<TimeRecordItem
v-bind:timeRecord="timeRecord"
v-on:del-timeRecord="deleteTimeRecord"
v-on:edit-timeRecord="editTimeRecord"
/>
<div :key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
<TimeRecordItem :timeRecord="timeRecord"
@del-timeRecord="deleteTimeRecord"
@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"),
haveNextPage: "",
havePrevPage: "",
loggedIn: sessionStorage.getItem("loggedin")
nextPage: "",
prevPage: "",
loggedIn: JSON.parse(sessionStorage.getItem("loggedin"))
};
},
methods: {
deleteTimeRecord(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 deleteTimeRecord(selfLink) {
try {
await axios.delete(selfLink)
this.timeRecords = this.timeRecords.filter(record => record._links.self.href !== selfLink)
} catch (e) {
alert("Delete failed!")
}
},
async loadPage(url) {
try {
let recordsResponse = await axios.get(url)
this.timeRecords = recordsResponse.data._embedded.records
this.timeRecords.map(record => {
record.duration = `${Math.floor(record.duration / 60)}h ${record.duration % 60} min`
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") {
alert("It's not possible to edit a running track");
if (end === "pending") {
alert("It's not possible to edit a running track")
} else {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
this.$router.push("/edittimerecord");
sessionStorage.setItem("timeRecordEditSelfLink", selfLink)
this.$router.push("/edittimerecord")
}
},
createTimeRecord(selfLink) {
sessionStorage.setItem("timeRecordEditSelfLink", selfLink);
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();
sessionStorage.setItem("timeRecordEditSelfLink", selfLink)
this.$router.push("/createtimerecord")
}
},
created() {
var xhttp = new XMLHttpRequest();
var records;
var recordLinks;
if (this.page == null) {
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;
async mounted() {
let url = BASE_URI + "/records/search/allForUser?"
+ "username=" + sessionStorage.getItem("username") + "&"
+ "sort=startdate,desc" + "&"
+ "projection=overview"
await this.loadPage(url)
}
};
}
</script>
<style scoped>