mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-21 13:43:20 +00:00
Migrate uv guide to webpack
This commit is contained in:
parent
46e58bb49e
commit
86bbc4cf6e
@ -15,7 +15,8 @@
|
||||
"sideEffects": [".css"],
|
||||
"imports": {
|
||||
"#openapi": "./staticfiles/generated/openapi/index.ts",
|
||||
"#core:*": "./core/static/webpack/*"
|
||||
"#core:*": "./core/static/webpack/*",
|
||||
"#pedagogy:*": "./pedagogy/static/webpack/*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
120
pedagogy/static/webpack/pedagogy/guide-index.js
Normal file
120
pedagogy/static/webpack/pedagogy/guide-index.js
Normal file
@ -0,0 +1,120 @@
|
||||
import { uvFetchUvList } from "#openapi";
|
||||
|
||||
const pageDefault = 1;
|
||||
const pageSizeDefault = 100;
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("uv_search", () => ({
|
||||
uvs: {
|
||||
count: 0,
|
||||
next: null,
|
||||
previous: null,
|
||||
results: [],
|
||||
},
|
||||
loading: false,
|
||||
page: pageDefault,
|
||||
// biome-ignore lint/style/useNamingConvention: api is in snake_case
|
||||
page_size: pageSizeDefault,
|
||||
search: "",
|
||||
department: [],
|
||||
// biome-ignore lint/style/useNamingConvention: api is in snake_case
|
||||
credit_type: [],
|
||||
semester: [],
|
||||
// biome-ignore lint/style/useNamingConvention: api is in snake_case
|
||||
to_change: [],
|
||||
pushstate: History.PUSH,
|
||||
|
||||
update: undefined,
|
||||
|
||||
initializeArgs() {
|
||||
const url = new URLSearchParams(window.location.search);
|
||||
this.pushstate = History.REPLACE;
|
||||
|
||||
this.page = Number.parseInt(url.get("page")) || pageDefault;
|
||||
this.page_size = Number.parseInt(url.get("page_size")) || pageSizeDefault;
|
||||
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_") : [];
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
async init() {
|
||||
this.update = Alpine.debounce(async () => {
|
||||
/* Create the whole url before changing everything all at once */
|
||||
const first = this.to_change.shift();
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
|
||||
let url = updateQueryString(first.param, first.value, History.NONE);
|
||||
for (const value of this.to_change) {
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
|
||||
url = updateQueryString(value.param, value.value, History.NONE, url);
|
||||
}
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
|
||||
updateQueryString(first.param, first.value, this.pushstate, url);
|
||||
await this.fetchData(); /* reload data on form change */
|
||||
this.to_change = [];
|
||||
this.pushstate = History.PUSH;
|
||||
}, 50);
|
||||
|
||||
const searchParams = ["search", "department", "credit_type", "semester"];
|
||||
const paginationParams = ["page", "page_size"];
|
||||
|
||||
for (const param of searchParams) {
|
||||
this.$watch(param, () => {
|
||||
if (this.pushstate !== History.PUSH) {
|
||||
/* This means that we are doing a mass param edit */
|
||||
return;
|
||||
}
|
||||
/* Reset pagination on search */
|
||||
this.page = pageDefault;
|
||||
this.page_size = pageSizeDefault;
|
||||
});
|
||||
}
|
||||
for (const param of searchParams.concat(paginationParams)) {
|
||||
this.$watch(param, (value) => {
|
||||
this.to_change.push({ param: param, value: value });
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
window.addEventListener("popstate", () => {
|
||||
this.initializeArgs();
|
||||
});
|
||||
this.initializeArgs();
|
||||
},
|
||||
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
const args = {
|
||||
// biome-ignore lint/style/useNamingConvention: api is in snake_case
|
||||
page_size: this.page_size,
|
||||
};
|
||||
for (const [param, value] of new URL(
|
||||
window.location.href,
|
||||
).searchParams.entries()) {
|
||||
// Deal with array type params
|
||||
if (["credit_type", "department", "semester"].includes(param)) {
|
||||
if (args[param] === undefined) {
|
||||
args[param] = [];
|
||||
}
|
||||
args[param].push(value);
|
||||
} else {
|
||||
args[param] = value;
|
||||
}
|
||||
}
|
||||
this.uvs = (
|
||||
await uvFetchUvList({
|
||||
query: args,
|
||||
})
|
||||
).data;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
maxPage() {
|
||||
return Math.ceil(this.uvs.count / this.page_size);
|
||||
},
|
||||
}));
|
||||
});
|
||||
@ -9,6 +9,10 @@
|
||||
<link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script src="{{ static('webpack/pedagogy/guide-index.js') }}" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
|
||||
@ -113,105 +117,6 @@
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ paginate_alpine("page", "max_page()") }}
|
||||
{{ paginate_alpine("page", "maxPage()") }}
|
||||
</div>
|
||||
<script>
|
||||
{#
|
||||
How does this work :
|
||||
|
||||
The page contains two main elements : the form and the results.
|
||||
The form contains multiple inputs, allowing the user to apply the filter of its choice.
|
||||
Each modification of those filters will modify the GET parameters of the URL,
|
||||
then fetch the corresponding data from the API.
|
||||
This data will then be displayed on the result part of the page.
|
||||
#}
|
||||
const pageDefault = 1;
|
||||
const pageSizeDefault = 100;
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("uv_search", () => ({
|
||||
uvs: [],
|
||||
loading: false,
|
||||
page: pageDefault,
|
||||
pageSize: pageSizeDefault,
|
||||
search: "",
|
||||
department: [],
|
||||
credit_type: [],
|
||||
semester: [],
|
||||
to_change: [],
|
||||
pushstate: History.PUSH,
|
||||
|
||||
update: undefined,
|
||||
|
||||
async initializeArgs() {
|
||||
let url = new URLSearchParams(window.location.search);
|
||||
this.pushstate = History.REPLACE;
|
||||
|
||||
this.page = parseInt(url.get("page")) || pageDefault;;
|
||||
this.pageSize = parseInt(url.get("pageSize")) || pageSizeDefault;
|
||||
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_") : [];
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
async init() {
|
||||
this.update = Alpine.debounce(async () => {
|
||||
{# Create the whole url before changing everything all at once #}
|
||||
let first = this.to_change.shift();
|
||||
let url = updateQueryString(first.param, first.value, History.NONE);
|
||||
this.to_change.forEach((value) => {
|
||||
url = updateQueryString(value.param, value.value, History.NONE, url);
|
||||
})
|
||||
updateQueryString(first.param, first.value, this.pushstate, url);
|
||||
await this.fetchData(); {# reload data on form change #}
|
||||
this.to_change = [];
|
||||
this.pushstate = History.PUSH;
|
||||
}, 50);
|
||||
|
||||
let search_params = ["search", "department", "credit_type", "semester"];
|
||||
let pagination_params = ["page", "pageSize"];
|
||||
|
||||
search_params.forEach((param) => {
|
||||
this.$watch(param, async (value) => {
|
||||
if (this.pushstate != History.PUSH){
|
||||
{# This means that we are doing a mass param edit #}
|
||||
return;
|
||||
}
|
||||
{# Reset pagination on search #}
|
||||
this.page = pageDefault;
|
||||
this.pageSize = pageSizeDefault;
|
||||
});
|
||||
});
|
||||
search_params.concat(pagination_params).forEach((param) => {
|
||||
this.$watch(param, async (value) => {
|
||||
this.to_change.push({ param: param, value: value })
|
||||
this.update();
|
||||
});
|
||||
});
|
||||
window.addEventListener("popstate", async (event) => {
|
||||
await this.initializeArgs();
|
||||
});
|
||||
await this.initializeArgs();
|
||||
},
|
||||
|
||||
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
const url = "{{ url("api:fetch_uvs") }}" + window.location.search;
|
||||
this.uvs = await (await fetch(url)).json();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
max_page() {
|
||||
return Math.ceil(this.uvs.count / this.pageSize);
|
||||
}
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"#openapi": ["./staticfiles/generated/openapi/index.ts"],
|
||||
"#core:*": ["./core/static/webpack/*"]
|
||||
"#core:*": ["./core/static/webpack/*"],
|
||||
"#pedagogy:*": ["./pedagogy/static/webpack/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user