Vue.createApp({ data() { return { loading: false, moreFilters: false, items: [], total: 0, // eslint-disable-next-line no-undef page: query.page || 1, totalPages: 1, limit: 16, artist: "", format: "", year: "", genre: "", style: "", sortOrder: "artists_sort-asc", sort: "artists_sort", order: "asc", itemId: null, showModalDelete: false, showModalShare: false, // eslint-disable-next-line no-undef shareLink: `${protocol}//${host}/collection/${userId}`, // eslint-disable-next-line no-undef isPublicCollection, // eslint-disable-next-line no-undef query, }; }, created() { this.fetch(); }, methods: { formatParams(param) { return param.replace("&", "%26").replace("+", "%2B"); }, fetch() { this.loading = true; this.total = 0; const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const entries = urlParams.entries(); const sortOrder = { sort: "artists_sort", order: "asc", }; // 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: if (["order", "sort"].indexOf(key) !== -1) { sortOrder[key] = value; } this[key] = value; } } this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`; let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; if (this.artist) { url += `&artists_sort=${this.formatParams(this.artist)}`; } if (this.format) { url += `&format=${this.formatParams(this.format)}`; } if (this.year) { url += `&year=${this.year}`; } if (this.genre) { url += `&genre=${this.formatParams(this.genre)}`; } if (this.style) { url += `&style=${this.formatParams(this.style)}`; } axios .get(url) .then((response) => { this.items = response.data.rows; this.total = response.data.count || 0; this.totalPages = parseInt(response.data.count / this.limit, 10) + (response.data.count % this.limit > 0 ? 1 : 0); }) .catch((err) => { showToastr( err.response?.data?.message || "Impossible de charger votre collection" ); }) .finally(() => { this.loading = false; }); }, changeUrl() { let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; if (this.artist) { url += `&artists_sort=${this.formatParams(this.artist)}`; } if (this.format) { url += `&format=${this.formatParams(this.format)}`; } if (this.year) { url += `&year=${this.year}`; } if (this.genre) { url += `&genre=${this.formatParams(this.genre)}`; } if (this.style) { url += `&style=${this.formatParams(this.style)}`; } 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() { 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; }, toggleModal() { this.showModalDelete = !this.showModalDelete; }, toggleModalShare() { this.showModalShare = !this.showModalShare; }, showConfirmDelete(itemId) { this.itemId = itemId; this.toggleModal(); }, deleteItem() { if ( vueType === 'private' ) { return false; } axios .delete(`/api/v1/albums/${this.itemId}`) .then(() => { this.fetch(); }) .catch((err) => { showToastr( err.response?.data?.message || "Impossible de supprimer cet album" ); }) .finally(() => { this.toggleModal(); }); }, shareCollection() { if ( vueType === 'private' ) { return false; } axios .patch(`/api/v1/me`, { isPublicCollection: !this.isPublicCollection, }) .then((res) => { this.isPublicCollection = res.data.isPublicCollection; if (this.isPublicCollection) { showToastr( "Votre collection est désormais publique", true ); } else { showToastr( "Votre collection n'est plus partagée", true ); } }) .catch((err) => { showToastr( err.response?.data?.message || "Impossible de supprimer cet album" ); }) .finally(() => { this.toggleModalShare(); }); }, }, }).mount("#collection");