MusicTopus/javascripts/collection.js

142 lines
4.6 KiB
JavaScript
Raw Normal View History

2022-10-28 22:56:04 +02:00
if (typeof userId !== "undefined") {
Vue.createApp({
data() {
return {
loading: false,
moreFilters: false,
items: [],
total: 0,
page: 1,
totalPages: 1,
limit: 16,
2022-10-28 22:56:04 +02:00
artist: "",
format: "",
year: "",
genre: "",
style: "",
sortOrder: "artists_sort-asc",
sort: "artists_sort",
order: "asc",
// eslint-disable-next-line no-undef
userId,
2022-10-28 22:56:04 +02:00
};
},
created() {
this.fetch();
},
methods: {
fetch() {
this.loading = true;
this.total = 0;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries();
2022-10-28 22:56:04 +02:00
// eslint-disable-next-line no-restricted-syntax
for (const entry of entries) {
const [key, value] = entry;
switch (key) {
case "artists_sort":
this.artist = value;
break;
default:
2022-10-28 22:56:04 +02:00
this[key] = value;
}
}
let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
2022-10-28 22:56:04 +02:00
if (this.artist) {
url += `&artists_sort=${this.artist.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.format) {
url += `&format=${this.format.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.year) {
url += `&year=${this.year}`;
}
2022-10-28 22:56:04 +02:00
if (this.genre) {
url += `&genre=${this.genre.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.style) {
url += `&style=${this.style.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
axios
.get(url)
.then((response) => {
this.items = response.data.rows;
this.total = response.data.count || 0;
2022-10-28 22:56:04 +02:00
this.totalPages =
parseInt(response.data.count / this.limit, 10) +
(response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
2022-10-28 22:56:04 +02:00
showToastr(
err.response?.data?.message ||
"Impossible de charger cette collection"
);
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
2022-10-28 22:56:04 +02:00
if (this.artist) {
url += `&artists_sort=${this.artist.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.format) {
url += `&format=${this.format.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.year) {
url += `&year=${this.year}`;
}
2022-10-28 22:56:04 +02:00
if (this.genre) {
url += `&genre=${this.genre.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
if (this.style) {
url += `&style=${this.style.replace("&", "%26")}`;
}
2022-10-28 22:56:04 +02:00
window.location.href = url;
},
next(event) {
event.preventDefault();
this.page += 1;
this.changeUrl();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.changeUrl();
},
goTo(page) {
this.page = page;
this.changeUrl();
},
changeSort() {
2022-10-28 22:56:04 +02:00
const [sort, order] = this.sortOrder.split("-");
this.sort = sort;
this.order = order;
this.page = 1;
this.changeUrl();
},
changeFilter() {
this.page = 1;
this.changeUrl();
},
showMoreFilters() {
this.moreFilters = !this.moreFilters;
2022-10-28 22:56:04 +02:00
},
},
}).mount("#collection-publique");
}