hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework admin page to be async and responsive

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-27 02:32:43 +02:00
parent 933e0e7c0c
commit 33506a4d9e
1 changed files with 27 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/views/admin/Users.vue
View File

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