Don't rely on waiting for pedagogy history

This commit is contained in:
Antoine Bartuccio 2024-08-17 02:57:00 +02:00
parent 2a6c1f050d
commit cdb73ee49c
2 changed files with 58 additions and 15 deletions

View File

@ -74,6 +74,7 @@ const initialUrlParams = new URLSearchParams(window.location.search);
* @enum {number} * @enum {number}
*/ */
const History = { const History = {
NONE: 0,
PUSH: 1, PUSH: 1,
REPLACE: 2, REPLACE: 2,
}; };
@ -82,9 +83,12 @@ const History = {
* @param {string} key * @param {string} key
* @param {string | string[] | null} value * @param {string | string[] | null} value
* @param {History} action * @param {History} action
* @param {URL | null} url
*/ */
function update_query_string(key, value, action = History.REPLACE) { function update_query_string(key, value, action = History.REPLACE, url = null) {
const url = new URL(window.location.href); if (!url){
url = new URL(window.location.href);
}
if (!value) { if (!value) {
// If the value is null, undefined or empty => delete it // If the value is null, undefined or empty => delete it
url.searchParams.delete(key) url.searchParams.delete(key)
@ -96,8 +100,10 @@ function update_query_string(key, value, action = History.REPLACE) {
} }
if (action === History.PUSH) { if (action === History.PUSH) {
history.pushState(null, document.title, url.toString()); history.pushState(null, "", url.toString());
} else if (action === History.REPLACE) { } else if (action === History.REPLACE) {
history.replaceState(null, document.title, url.toString()); history.replaceState(null, "", url.toString());
} }
return url;
} }

View File

@ -128,6 +128,27 @@
#} #}
const page_default = 1; const page_default = 1;
const page_size_default = 100; const page_size_default = 100;
function debouncePromise (fn, ms = 0) {
let timeoutId;
const pending = [];
return (...args) =>
new Promise((res, rej) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
const currentPending = [...pending];
pending.length = 0;
Promise.resolve(fn.apply(this, args)).then(
data => {
currentPending.forEach(({ resolve }) => resolve(data));
},
error => {
currentPending.forEach(({ reject }) => reject(error));
}
);
}, ms);
pending.push({ resolve: res, reject: rej });
});
};
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.data("uv_search", () => ({ Alpine.data("uv_search", () => ({
uvs: [], uvs: [],
@ -138,8 +159,11 @@
department: [], department: [],
credit_type: [], credit_type: [],
semester: [], semester: [],
to_change: [],
pushstate: History.PUSH, pushstate: History.PUSH,
update: undefined,
async initialize_args() { async initialize_args() {
let url = new URLSearchParams(window.location.search); let url = new URLSearchParams(window.location.search);
this.pushstate = History.REPLACE; this.pushstate = History.REPLACE;
@ -155,19 +179,28 @@
this.semester = url.has("semester") ? this.semester = url.has("semester") ?
url.get("semester").split("_AND_") : []; url.get("semester").split("_AND_") : [];
{# Wait for all watch callbacks to be called #} await this.update()
await (new Promise(resolve => setTimeout(resolve, 100)));
this.pushstate = History.PUSH; this.pushstate = History.PUSH;
}, },
async init() { async init() {
await this.initialize_args(); this.update = debouncePromise(async () => {
await Promise.all(this.to_change).then(async (data) => {
{# Create the whole url before changing everything all at once #}
let first = data.shift();
let url = update_query_string(first[0], first[1], History.NONE);
data.forEach((data) => {
url = update_query_string(data[0], data[1], History.NONE, url);
})
update_query_string(first[0], first[1], this.pushstate, url);
await this.fetch_data(); {# reload data on form change #}
this.to_change = [];
})
}, 50);
let search_params = ["search", "department", "credit_type", "semester"]; let search_params = ["search", "department", "credit_type", "semester"];
let pagination_params = ["page", "page_size"]; let pagination_params = ["page", "page_size"];
this.fetch_data(); {# load initial data #}
search_params.forEach((param) => { search_params.forEach((param) => {
this.$watch(param, async (value) => { this.$watch(param, async (value) => {
if (this.pushstate != History.PUSH){ if (this.pushstate != History.PUSH){
@ -181,16 +214,20 @@
}); });
search_params.concat(pagination_params).forEach((param) => { search_params.concat(pagination_params).forEach((param) => {
this.$watch(param, async (value) => { this.$watch(param, async (value) => {
console.log(param + " " + value) this.to_change.push(new Promise((resolve) => {
update_query_string(param, value, this.pushstate); resolve([param, value]);
await this.fetch_data(); {# reload data on form change #} })
);
this.update();
}); });
}); });
window.addEventListener("popstate", () => { window.addEventListener("popstate", async (event) => {
this.initialize_args(); await this.initialize_args();
}); });
await this.initialize_args();
}, },
async fetch_data() { async fetch_data() {
this.loading = true; this.loading = true;
const url = "{{ url("api:fetch_uvs") }}" + window.location.search; const url = "{{ url("api:fetch_uvs") }}" + window.location.search;