mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-22 14:13:21 +00:00
Don't rely on waiting for pedagogy history
This commit is contained in:
parent
2a6c1f050d
commit
cdb73ee49c
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user