<main class="layout-maxed ma-collection" id="app"> <h1>Ma collection</h1> <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="grid grid-cols-1 md:grid-cols-2 list"> <div class="item" v-if="!loading" v-for="item in items"> <span class="title"> {{ item.artists_sort}} - {{ item.title }} <i class="icon-trash" @click="showConfirmDelete(item._id)"></i> </span> <div class="grid grid-cols-2 md:grid-cols-4"> <div> <img :src="item.thumb" :alt="item.title" /> </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> </main> <script> Vue.createApp({ data() { return { loading: false, items: [], total: 0, page: 1, totalPages: 1, limit: 16, artist: '', format: '', sortOrder: 'artists_sort-asc', sort: 'artists_sort', order: 'asc', itemId: null, showModalDelete: false, } }, 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() { console.log('TEST:', this.sortOrder); const [sort,order] = this.sortOrder.split('-'); this.sort = sort; this.order = order; this.page = 1; this.fetch(); }, changeFilter() { this.page = 1; this.fetch(); }, toggleModal() { this.showModalDelete = !this.showModalDelete; }, 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(); }); } } }).mount('#app') </script>