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

<div class="container" id="app">
    <table class="table is-striped is-hoverable is-fullwidth">
        <thead>
            <tr>
                <th>Pochette</th>
                <th>
                    <div class="field">
                        <label class="label">
                            <span class="icon-text">
                                <span class="icon has-text-info">
                                    <i v-if="sort !== 'artists_sort'" class="fa-solid fa-sort" @click="changeSort('artists_sort', 'asc')"></i>
                                    <i v-if="sort === 'artists_sort' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('artists_sort', 'asc')"></i>
                                    <i v-if="sort === 'artists_sort' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('artists_sort', 'desc')"></i>
                                </span>
                                <span>Artiste</span>
                            </span>
                        </label>
                        <div class="control">
                            <div class="select is-small">
                                <select 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>
                    </div>
                </th>
                <th>Titre</th>
                <th>
                    <span class="icon-text">
                        <span class="icon has-text-info">
                            <i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
                            <i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
                            <i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
                        </span>
                        <span>Année</span>
                    </span>
                </th>
                <th>
                    <span class="icon-text">
                        <span class="icon has-text-info">
                            <i v-if="sort !== 'country'" class="fa-solid fa-sort" @click="changeSort('country', 'asc')"></i>
                            <i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('country', 'asc')"></i>
                            <i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('country', 'desc')"></i>
                        </span>
                        <span>Pays</span>
                    </span>
                </th>
                <th>
                    <div class="field">
                        <label class="label">
                            <span class="icon-text">
                                <span class="icon has-text-info">
                                    <i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
                                    <i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
                                    <i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
                                </span>
                                <span>Format</span>
                            </span>
                        </label>
                        <div class="control">
                            <div class="select is-small">
                                <select 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>
                    </div>
                </th>
                <th>Genres</th>
                <th>Styles</th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="loading">
                <td colspan="8">
                    Chargement en cours…
                </td>
            </tr>
            <tr v-if="!loading" v-for="item in items">
                <td>
                    <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
                </td>
                <td>{{ item.artists_sort }}</td>
                <td>
                    <a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
                </td>
                <td>{{ item.year }}</td>
                <td>{{ item.country }}</td>
                <td>
                    <ul>
                        <li v-for="format in item.formats">{{ format.name }}</li>
                    </ul>                    
                </td>
                <td>
                    <ul>
                        <li v-for="genre in item.genres">{{ genre }}</li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li v-for="style in item.styles">{{ style }}</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    <nav class="pagination" role="navigation" aria-label="pagination">
        <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
        <a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
        <ul class="pagination-list">
            <li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
            </li>
            <!-- <li>
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 45">45</a>
            </li>
            <li>
                <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 47">47</a>
            </li>
            <li>
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 86">86</a>
            </li> -->
            </ul>
    </nav>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                loading: false,
                items: [],
                total: 0,
                page: 1,
                totalPages: 1,
                limit: 5,
                artist: '',
                format: '',
                sort: 'artists_sort',
                order: 'asc',
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            fetch() {
                this.loading = true;

                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}`;
                }

                axios.get(url)
                    .then( response => {
                        this.items = response.data.rows;
                        this.total = response.data.count;
                        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;
                    });
            },
            next(event) {
                event.preventDefault();

                this.page += 1;

                this.fetch();
            },
            previous(event) {
                event.preventDefault();

                this.page -= 1;

                this.fetch();
            },
            goTo(page) {
                this.page = page;

                this.fetch();
            },
            changeSort(sort, order) {
                this.sort = sort;
                this.order = order;
                this.page = 1;

                this.fetch();
            },
            changeFilter() {
                this.page = 1;

                this.fetch();
            }
        }
  }).mount('#app')
</script>