MusicTopus/views/pages/ajouter-un-album/search.ejs

<section class="layout-maxed ajouter-un-album" id="app">
    <div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header>
                <div>{{details.artists_sort}} - {{details.title}}</div>
                <button aria-label="close" @click="toggleModal"></button>
            </header>
            <section>
                <div class="grid grid-cols-2 gap-16">
                    <div>
                        <div class="text-center">
                            <img :src="details.thumb %>" alt="Miniature" />
                            <hr />
                            <img v-for="image in details.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
                            <hr />
                        </div>
                        <ol class="ml-4">
                            <li v-for="track in details.tracklist">{{ track.title }} ({{track.duration}})</li>
                        </ol>
                    </div>
                    <div>
                        <div class="grid grid-cols-2 gap-10">
                            <div>
                                <strong>Genres</strong>
                                <br />
                                <span class="item" v-for="genre in details.genres">{{genre}}</span>
                            </div>
                            <div>
                                <strong>Styles</strong>
                                <br />
                                <span class="item" v-for="style in details.styles">{{style}}</span>
                            </div>
                        </div> 
                        <hr />
                        <div class="grid grid-cols-3 gap-10">
                            <div>
                                <strong>Pays</strong>
                                <br />
                                <span>{{details.country}}</span>
                            </div> 
                            <div>
                                <strong>Année</strong>
                                <br />
                                <span>{{details.year}}</span>
                            </div>
                            <div>
                                <strong>Date de sortie</strong>
                                <br />
                                <span>{{details.released}}</span>
                            </div>
                        </div>
                        <hr />
                        <div class="grid grid-cols-2 gap-10">
                            <div>
                                <strong>Format</strong>
                                <br />
                                <span v-for="format in details.formats">{{format.name}}</span>
                            </div>
                        </div>
                        <hr />
                        <div class="grid grid-cols-2 gap-10">
                            <div>
                                <strong>Codes barres</strong>
                                <ol>
                                    <li v-for="identifier in details.identifiers">
                                        {{identifier.value}} ({{identifier.type}})
                                    </li>
                                </ol>
                            </div>
                            <div>
                                <strong>Label</strong>
                                <ol>
                                    <li v-for="label in details.labels">
                                        {{label.name}}
                                    </li>
                                </ol>
                                <strong>Société</strong>
                                <ol>
                                    <li v-for="company in details.companie">
                                        {{company.name}}
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer>
                <button class="button is-primary" @click="add">Ajouter</button>
                <button class="button" @click="toggleModal">Annuler</button>
            </footer>      
        </div>
    </div>
    <div class="layout-hero">
        <form @submit="search">
            <div class="field has-addons">
                <input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
                <button class="button is-link" :disabled="loading">
                    <span class="icon">
                        <i class="fas fa-search"></i>
                    </span>
                </button>
            </div>
        </form>
        <table class="mt-20">
            <thead>
                <tr>
                    <th>Pochette</th>
                    <th>Titre</th>
                    <th>Pays</th>
                    <th>Année</th>
                    <th>Format</th>
                    <th>Genres</th>
                    <th>Styles</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="loading">
                    <td colspan="7">
                        Chargement en cours…
                    </td>
                </tr>
                <tr v-for="item in items">
                    <td>
                        <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
                    </td>
                    <td>
                        <a @click="loadDetails(item.id)">{{ item.title }}</a>
                    </td>
                    <td>{{ item.year }}</td>
                    <td>{{ item.country }}</td>
                    <td>
                        <ul>
                            <li v-for="format in item.format">{{ format }}</li>
                        </ul>                    
                    </td>
                    <td>
                        <ul>
                            <li v-for="genre in item.genre">{{ genre }}</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li v-for="style in item.style">{{ style }}</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<script>
    Vue.createApp({
        data() {
            return {
                q: '',
                loading: false,
                items: [],
                details: {},
                modalIsVisible: false,
            }
        },
        methods: {
            search(event) {
                event.preventDefault();

                if ( this.loading ) {
                    return false;
                }

                this.loading = true;

                axios.get(`/api/v1/search?q=${this.q}`)
                    .then( response => {
                        const {
                            results,
                        } = response.data;
                        let items = [];

                        for (let i = 0 ; i < results.length ; i += 1 ) {
                            const {
                                id,
                                title,
                                thumb,
                                year,
                                country,
                                format,
                                genre,
                                style,
                            } = results[i];
                            items.push({
                                id,
                                title,
                                thumb,
                                year,
                                country,
                                format,
                                genre,
                                style,
                            });
                        }

                        this.items = items;
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            toggleModal() {
                this.modalIsVisible = !this.modalIsVisible;
            },
            loadDetails(discogsId) {
                console.log('discogsId:', discogsId);

                axios.get(`/api/v1/search/${discogsId}`)
                    .then( response => {
                        const {
                            data,
                        } = response;

                        this.details = data;
                        this.toggleModal();
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            add() {
                axios.post('/api/v1/albums', this.details)
                    .then(() => {
                        window.location.href = '/ma-collection';
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
                    });
            },
        }
    }).mount('#app')
  </script>