klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 06:03:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix back action in uv guide

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-08-11 14:58:05 +02:00
parent 121b388d85
commit 2ec1f8cdc0
1 changed files with 59 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
pedagogy/templates/pedagogy/guide.jinja
View File

@ -114,13 +114,25 @@
</tbody> </tbody>
</table> </table>
<nav class="pagination" x-show="max_page() > 1"> <nav class="pagination" x-show="max_page() > 1">
<button @click="page--" :disabled="page <= 1"> <button
@click="page--"
:disabled="page <= 1"
@keyup.right.window="page = Math.min(max_page(), page + 1)"
>
<i class="fa fa-caret-left"></i> <i class="fa fa-caret-left"></i>
</button> </button>
<template x-for="i in max_page()"> <template x-for="i in max_page()">
<button x-text="i" @click="page = i" :class="(page === i) && 'active'"></button> <button
x-text="i"
@click="page = i"
:class="(page === i) && 'active'"
></button>
</template> </template>
<button @click="page++" :disabled="page >= max_page()"> <button
@click="page++"
:disabled="page >= max_page()"
@keyup.left.window="page = Math.max(1, page - 1)"
>
<i class="fa fa-caret-right"></i> <i class="fa fa-caret-right"></i>
</button> </button>
</nav> </nav>
@ -141,34 +153,63 @@
Alpine.data("uv_search", () => ({ Alpine.data("uv_search", () => ({
uvs: [], uvs: [],
loading: false, loading: false,
page: parseInt(initialUrlParams.get("page")) || page_default, page: page_default,
page_size: parseInt(initialUrlParams.get("page_size")) || page_size_default, page_size: page_size_default,
search: initialUrlParams.get("search") || "", search: "",
department: initialUrlParams.getAll("department"), department: [],
credit_type: initialUrlParams.getAll("credit_type"), credit_type: [],
{# The semester is easier to use on the backend as an enum (spring/autumn/both/none) semester: [],
and easier to use on the frontend as an array ([spring, autumn]). pushstate: History.PUSH,
Thus there is some conversion involved when both communicate together #}
semester: initialUrlParams.has("semester") ? async initialize_args() {
initialUrlParams.get("semester").split("_AND_") : [], let url = new URLSearchParams(window.location.search);
this.pushstate = History.REPLACE;
this.page = parseInt(url.get("page")) || page_default;;
this.page_size = parseInt(url.get("page_size")) || page_size_default;
this.search = url.get("search") || "";
this.department = url.getAll("department");
this.credit_type = url.getAll("credit_type");
{# The semester is easier to use on the backend as an enum (spring/autumn/both/none)
and easier to use on the frontend as an array ([spring, autumn]).
Thus there is some conversion involved when both communicate together #}
this.semester = url.has("semester") ?
url.get("semester").split("_AND_") : [];
{# Wait for all watch callbacks to be called #}
await (new Promise(resolve => setTimeout(resolve, 100)));
this.pushstate = History.PUSH;
},
async init() { async init() {
await this.initialize_args();
let search_params = ["search", "department", "credit_type", "semester"]; let search_params = ["search", "department", "credit_type", "semester"];
let pagination_params = ["semester", "page"]; let pagination_params = ["page", "page_size"];
this.fetch_data(); {# load initial data #}
search_params.forEach((param) => { search_params.forEach((param) => {
this.$watch(param, async () => { this.$watch(param, async (value) => {
{# Reset pagination on search #} if (this.pushstate != History.PUSH){
{# This means that we are doing a mass param edit #}
return;
}
{# Reset pagination on search #}
this.page = page_default; this.page = page_default;
this.page_size = page_size_default; this.page_size = page_size_default;
}); });
}); });
search_params.concat(pagination_params).forEach((param) => { search_params.concat(pagination_params).forEach((param) => {
this.$watch(param, async (value) => { this.$watch(param, async (value) => {
update_query_string(param, value); console.log(param + " " + value)
update_query_string(param, value, this.pushstate);
await this.fetch_data(); {# reload data on form change #} await this.fetch_data(); {# reload data on form change #}
}); });
}); });
await this.fetch_data(); {# load initial data #} window.addEventListener("popstate", () => {
this.initialize_args();
});
}, },
async fetch_data() { async fetch_data() {