Rework Timerecords page to be async and responsive
This commit is contained in:
parent
33506a4d9e
commit
4131213723
@ -96,7 +96,7 @@
|
||||
haveLocation: ""
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
async mounted() {
|
||||
if (this.loggedIn) {
|
||||
try {
|
||||
let responses = await Promise.all([
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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();
|
||||
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
|
||||
}
|
||||
};
|
||||
userxhttp.open("DELETE", selfLink, false);
|
||||
|
||||
userxhttp.setRequestHeader(
|
||||
"Authorization",
|
||||
sessionStorage.getItem("jwt")
|
||||
);
|
||||
|
||||
userxhttp.send(null);
|
||||
},
|
||||
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";
|
||||
async mounted() {
|
||||
let url = BASE_URI + "/records/search/allForUser?"
|
||||
+ "username=" + sessionStorage.getItem("username") + "&"
|
||||
+ "sort=startdate,desc" + "&"
|
||||
+ "projection=overview"
|
||||
await this.loadPage(url)
|
||||
}
|
||||
}
|
||||
this.timeRecords = records;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user