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

<div class="container" id="app">
    <form @submit="search">
        <div class="field has-addons">
            <div class="control">
                <input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
            </div>
            <div class="control">
                <button class="button is-link" :disabled="loading">
                    <span class="icon">
                        <i class="fas fa-search"></i>
                      </span>
                </button>
            </div>
        </div>
    </form>
    <table class="table is-striped is-hoverable is-fullwidth">
        <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>
                    <!-- <a :href="'/ajouter-un-album/' + 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 class="modal" :class="{'is-active': modalIsVisible}" id="addAlbum">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">{{details.artists_sort}} - {{details.title}}</p>
                <button class="delete" aria-label="close" @click="toggleModal"></button>
            </header>
            <section class="modal-card-body">
                <div class="columns is-mobile">
                    <div class="column is-12-mobile is-4-desktop">
                        <div class="has-text-centered">
                            <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 class="column is-12-mobile is-8-desktop">
                        <div class="column is-12">
                            <div class="columns is-mobile is-multiline">
                                <div class="column is-12-mobile is-6-desktop" v-for="genre in details.genres">
                                    <div class="field">
                                        <label class="label" for="company">Genre</label>
                                        <div class="control">
                                            <input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-12-mobile is-6-desktop" v-for="style in details.styles">
                                    <div class="field">
                                        <label class="label" for="company">Style</label>
                                        <div class="control">
                                            <input type="text" id="style" name="style" class="input" v-model="style" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div> 
                            <hr />
                            <div class="columns is-mobile">
                                <div class="column is-12-mobile is-6-desktop">
                                    <div class="field">
                                        <label class="label" for="year">Année</label>
                                        <div class="control">
                                            <input type="text" id="year" name="year" class="input" v-model="details.year" disabled />
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-12-mobile is-6-desktop">
                                    <div class="field">
                                        <label class="label" for="released">Date de sortie</label>
                                        <div class="control">
                                            <input type="text" id="released" name="released" class="input" v-model="details.released" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="columns is-mobile">
                                <div class="column is-12-mobile is-6-desktop">
                                    <div class="field">
                                        <label class="label" for="country">Pays</label>
                                        <div class="control">
                                            <input type="text" id="country" name="country" class="input" v-model="details.country" disabled />
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-12-mobile is-6-desktop" v-for="format in details.formats">
                                    <div class="field">
                                        <label class="label" for="format">Format</label>
                                        <div class="control">
                                            <input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="columns is-mobile">
                                <div class="column is-12-mobile is-6-desktop">
                                    <span class="label">Codes barres</span>
                                    <ol>
                                        <li v-for="identifier in details.identifiers">
                                            {{identifier.value}} ({{identifier.type}})
                                        </li>
                                    </ol>
                                </div>
                                <div class="column is-12-mobile is-6-desktop">
                                    <span class="label">Label</span>
                                    <div class="field" v-for="label in details.labels">
                                        <div class="control">
                                            <input type="text" name="label" class="input" v-model="label.name" disabled />
                                        </div>
                                    </div>
                                    <span class="label">Société</span>
                                    <div class="field" v-for="company in details.companies">
                                        <div class="control">
                                            <input type="text" name="company" class="input" v-model="company.name" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>                 
                        </div>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success" @click="add">Ajouter</button>
                <button class="button" @click="toggleModal">Annuler</button>
            </footer>      
        </div>
        <button class="modal-close is-large" aria-label="close" @click="toggleModal"></button>
    </div>
</div>
<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>