MusicTopus/views/pages/mon-compte/ma-collection/index.ejs

<main class="layout-maxed collection" id="app">
    <h1>
        Ma collection
        <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
    </h1>
    <a :href="shareLink" v-if="isPublicCollection" target="_blank">
        <i class="icon-share"></i> Voir ma collection partagée
    </a>

    <div class="filters">
        <div class="field">
            <label for="artist">Artiste</label>
            <select id="artist" v-model="artist" @change="changeFilter">
                <option value="">Tous</option>
                <%
                    for (let i = 0; i < page.artists.length; i += 1 ) {
                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
                    }
                %>
            </select>
        </div>
        <div class="field">
            <label for="format">Format</label>
            <select id="format" v-model="format" @change="changeFilter">
                <option value="">Tous</option>
                <%
                    for (let i = 0; i < page.formats.length; i += 1 ) {
                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
                    }
                %>
            </select>
        </div>
        <div class="field">
            <label for="sortOrder">Trier par</label>
            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
                <option value="artists_sort-asc">Artiste (A-Z)</option>
                <option value="artists_sort-desc">Artiste (Z-A)</option>
                <option value="year-asc">Année (A-Z)</option>
                <option value="year-desc">Année (Z-A)</option>
                <option value="country-asc">Pays (A-Z)</option>
                <option value="country-desc">Pays (Z-A)</option>
                <option value="formats.name-asc">Format (A-Z)</option>
                <option value="formats.name-desc">Format (Z-A)</option>
            </select>
        </div>
    </div>

    <div class="filters" v-if="moreFilters">
        <div class="field">
            <label for="format">Année</label>
            <select id="format" v-model="year" @change="changeFilter">
                <option value="">Toutes</option>
                <%
                    for (let i = 0; i < page.years.length; i += 1 ) {
                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
                    }
                %>
            </select>
        </div>
        <div class="field">
            <label for="genre">Genre</label>
            <select id="genre" v-model="genre" @change="changeFilter">
                <option value="">Tous</option>
                <%
                    for (let i = 0; i < page.genres.length; i += 1 ) {
                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
                    }
                %>
            </select>
        </div>
        <div class="field">
            <label for="style">Style</label>
            <select id="style" v-model="style" @change="changeFilter">
                <option value="">Tous</option>
                <%
                    for (let i = 0; i < page.styles.length; i += 1 ) {
                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
                    }
                %>
            </select>
        </div>
    </div>

    <span @click="showMoreFilters" class="showMoreFilters">
        <template v-if="!moreFilters">Voir plus de filtres</template>
        <template v-if="moreFilters">Voir moins de filtres</template>
        <i class="icon-left-open down" v-if="!moreFilters"></i>
        <i class="icon-left-open up" v-if="moreFilters"></i>
    </span>

    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
        <div class="loader" v-if="loading">
            <div class="animation"></div>
            <div>
                Chargement des données en cours…
            </div>
        </div>
        <div class="item" v-if="!loading" v-for="item in items">
            <span class="title">
                <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
                <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
            </span>
            <div class="grid grid-cols-2 md:grid-cols-4">
                <div>
                    <a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
                </div>
                <div class="md:col-span-3">
                    <span><strong>Année :</strong> {{ item.year }}</span>
                    <br />
                    <span><strong>Pays :</strong> {{ item.country }}</span>
                    <br />
                    <span>
                        <strong>Format : </strong>
                        <span v-for="(format, index) in item.formats">
                            {{ format.name }}
                            <template v-if="format.descriptions">
                                (<template v-for="(description, j) in format.descriptions">
                                    {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
                                </template>)
                            </template>
                            <template v-if="index < item.formats.length - 1">, </template>
                        </span>
                    </span>
                    <br />
                    <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
                    <br />
                    <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
                </div>
            </div>
        </div>
    </div>
    <div class="total">
        <strong>Nombre total d'éléments : </strong>{{total}}
    </div>
    <nav class="pagination" role="navigation" aria-label="Pagination">
        <ul class="pagination-list">
            <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                <template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
                    <li>
                        <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
                    </li>
                </template>
                <template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
                    <li>
                        <a class="pagination-link is-disabled">…</a>
                    </li>
                </template>
            </template>
        </ul>
    </nav>

    <div class="modal" :class="{'is-visible': showModalDelete}">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header></header>
            <section>
                Êtes-vous sûr de vouloir supprimer cet album ?
            </section>
            <footer>
                <button class="button is-primary" @click="deleteItem">Supprimer</button>
                <button class="button" @click="toggleModal">Annuler</button>
            </footer>
        </div>
    </div>
    <div class="modal" :class="{'is-visible': showModalShare}">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header>
                Partager ma collection
            </header>
            <section>
                <template v-if="!isPublicCollection">
                    Votre collection sera visible de toute personne disposant du lien suivant :
                    <br />
                    <a :href="shareLink" target="_blank">{{shareLink}}</a>
                    <br />
                    Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
                    <br />
                    Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
                </template>
                <template v-if="isPublicCollection">
                    Vous êtes sur le point de rendre votre collection privée.
                    <br />
                    Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
                    <br />
                    Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
                </template>
            </section>
            <footer>
                <button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
                <button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
                <button class="button" @click="toggleModalShare">Annuler</button>
            </footer>
        </div>
    </div>
</main>

<script>
    const {
        protocol,
        host
    } = window.location;

    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/<%= user._id %>`,
                isPublicCollection: <%= user.isPublicCollection ? 'true' : 'false' %>,
            }
        },
        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();

                for(const entry of entries) {
                    switch(entry[0]) {
                        case 'artists_sort':
                            this.artist = entry[1];
                            break;
                        default:
                            this[entry[0]] = entry[1];
                    }
                }

                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}`;
                }
                if ( this.format ) {
                    url += `&format=${this.format}`;
                }
                if ( this.year ) {
                    url += `&year=${this.year}`;
                }
                if ( this.genre ) {
                    url += `&genre=${this.genre}`;
                }
                if ( this.style ) {
                    url += `&style=${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) + (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')}`;
                }

                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('#app');
</script>