MusicTopus/javascripts/mon-compte/ma-collection/index.js

if (typeof isPublicCollection !== "undefined") {
    Vue.createApp({
        data() {
            return {
                loading: false,
                moreFilters: false,
                items: [],
                total: 0,
                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,
                shareLink: `${protocol}//${host}/collection/${userId}`,
                // eslint-disable-next-line no-undef
                isPublicCollection,
            };
        },
        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();

                // 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:
                            this[key] = value;
                    }
                }

                let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
                if (this.artist) {
                    url += `&artists_sort=${this.artist.replace("&", "%26")}`;
                }
                if (this.format) {
                    url += `&format=${this.format.replace("&", "%26")}`;
                }
                if (this.year) {
                    url += `&year=${this.year}`;
                }
                if (this.genre) {
                    url += `&genre=${this.genre.replace("&", "%26")}`;
                }
                if (this.style) {
                    url += `&style=${this.style.replace("&", "%26")}`;
                }

                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.artist.replace("&", "%26")}`;
                }
                if (this.format) {
                    url += `&format=${this.format.replace("&", "%26")}`;
                }
                if (this.year) {
                    url += `&year=${this.year}`;
                }
                if (this.genre) {
                    url += `&genre=${this.genre.replace("&", "%26")}`;
                }
                if (this.style) {
                    url += `&style=${this.style.replace("&", "%26")}`;
                }

                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() {
                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() {
                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("#ma-collection");
}