klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-09 19:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove history management from script.js and migrate sas albums to webpack

Browse Source
This commit is contained in:
Antoine Bartuccio
2024-10-11 14:31:32 +02:00
committed by Bartuccio Antoine
parent 2fa9daf627
commit f07a855e7e
6 changed files with 123 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
sas/static/webpack/sas/album-index.js Normal file
View File

@ -0,0 +1,59 @@
import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
import { picturesFetchPictures } from "#openapi";
/**
* @typedef AlbumConfig
* @property {number} albumId id of the album to visualize
* @property {number} maxPageSize maximum number of elements to show on a page
**/
/**
* Create a family graph of an user
* @param {AlbumConfig} config
**/
window.loadAlbum = (config) => {
document.addEventListener("alpine:init", () => {
Alpine.data("pictures", () => ({
pictures: {},
page: Number.parseInt(initialUrlParams.get("page")) || 1,
pushstate: History.Push /* Used to avoid pushing a state on a back action */,
loading: false,
async init() {
await this.fetchPictures();
this.$watch("page", () => {
updateQueryString("page", this.page === 1 ? null : this.page, this.pushstate);
this.pushstate = History.Push;
this.fetchPictures();
});
window.addEventListener("popstate", () => {
this.pushstate = History.Replace;
this.page =
Number.parseInt(new URLSearchParams(window.location.search).get("page")) ||
1;
});
},
async fetchPictures() {
this.loading = true;
this.pictures = (
await picturesFetchPictures({
query: {
// biome-ignore lint/style/useNamingConvention: API is in snake_case
album_id: config.albumId,
page: this.page,
// biome-ignore lint/style/useNamingConvention: API is in snake_case
page_size: config.maxPageSize,
},
})
).data;
this.loading = false;
},
nbPages() {
return Math.ceil(this.pictures.count / config.maxPageSize);
},
}));
});
};

54
sas/templates/sas/album.jinja
View File

@ -5,6 +5,10 @@
<link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
{%- endblock -%}
{%- block additional_js -%}
<script src="{{ static('webpack/sas/album-index.js') }}" defer></script>
{%- endblock -%}
{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}
@ -108,48 +112,14 @@
{% block script %}
{{ super() }}
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("pictures", () => ({
pictures: {},
page: parseInt(initialUrlParams.get("page")) || 1,
pushstate: History.PUSH, /* Used to avoid pushing a state on a back action */
loading: false,
async init() {
await this.fetchPictures();
this.$watch("page", () => {
updateQueryString("page",
this.page === 1 ? null : this.page,
this.pushstate
);
this.pushstate = History.PUSH;
this.fetchPictures();
});
window.addEventListener("popstate", () => {
this.pushstate = History.REPLACE;
this.page = parseInt(
new URLSearchParams(window.location.search).get("page")
) || 1;
});
},
async fetchPictures() {
this.loading=true;
const url = "{{ url("api:pictures") }}"
+"?album_id={{ album.id }}"
+`&page=${this.page}`
+"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}";
this.pictures = await (await fetch(url)).json();
this.loading = false;
},
nbPages() {
return Math.ceil(this.pictures.count / {{ settings.SITH_SAS_IMAGES_PER_PAGE }});
}
}))
})
window.addEventListener("DOMContentLoaded", () => {
loadAlbum({
albumId: {{ album.id }},
maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
});
});
// Todo: migrate to alpine.js if we have some time
$("form#upload_form").submit(function (event) {
let formData = new FormData($(this)[0]);
@ -255,4 +225,6 @@
}
});
</script>
{% endblock %}