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

<div class="container" id="app">
    <form method="POST" @submit="add">
        <div class="columns is-mobile">
            <div class="column is-12-mobile is-4-desktop">
                <div class="has-text-centered">
                    <img src="<%= page.values.thumb %>" alt="Miniature" />
                    <hr />
                    <img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
                    <hr />
                </div>
                <ol>
                    <li v-for="track in album.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">
                        <div class="column is-12">
                            <div class="field">
                                <label class="label" for="artists">Titre</label>
                                <div class="control">
                                    <input type="text" id="title" name="title" class="input" v-model="album.title" disabled />
                                </div>
                            </div>
                    
                            <div class="field" v-for="artist in album.artists">
                                <label class="label" for="artists">Artiste</label>
                                <div class="control">
                                    <input type="text" id="artists" name="artists" class="input" v-model="artist.name" disabled />
                                </div>
                            </div>
                        </div>   
                    </div>             
                    <hr />
                    <div class="columns is-mobile is-multiline">
                        <div class="column is-12-mobile is-6-desktop" v-for="genre in album.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 album.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="album.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="album.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="album.country" disabled />
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="columns is-mobile">
                        <div class="column is-12">
                            <span class="label">Codes barres</span>
                            <ol>
                                <li v-for="identifier in album.identifiers">
                                    {{identifier.value}} ({{identifier.type}})
                                </li>
                            </ol>
                        </div>
                    </div>                    
                    <hr />
                    <div class="columns is-mobile">
                        <div class="column is-12">
                            <div class="field">
                                <label class="label" for="country">Notes</label>
                                <div class="control">
                                    <textarea id="notes" id="notes" name="notes" class="textarea" rows="8" v-model="album.notes" disabled></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="columns is-mobile is-multiline">
                        <div class="column is-12-mobile is-6-desktop" v-for="format in album.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 is-multiline">
                        <div class="column is-12-mobile is-6-desktop" v-for="label in album.labels">
                            <div class="field">
                                <label class="label" for="label">Label</label>
                                <div class="control">
                                    <input type="text" id="label" name="label" class="input" v-model="label.name" disabled />
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="columns is-mobile is-multiline">
                        <div class="column is-12-mobile is-6-desktop" v-for="company in album.companies">
                            <div class="field">
                                <label class="label" for="label">Société</label>
                                <div class="control">
                                    <input type="text" id="company" name="company" class="input" v-model="company.name" disabled />
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="columns is-mobile is-multiline">
                        <div class="column is-12-mobile">
                            <span class="label">Vidéos</span>
                            <ol>
                                <li v-for="video in album.videos">
                                    <a :href="video.uri" target="_blank">{{video.title}}</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <hr />
                    <div class="columns is-mobile is-multiline">
                        <div class="column is-12-mobile">
                            <span class="label">Artistes</span>
                            <ul>
                                <li v-for="extraartist in album.extraartists">
                                    {{extraartist.name}} ({{extraartist.role}})
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="button is-primary is-fullwidth">Ajouter</button>
    </form>
</div>


<script>
    const defaultValues = <%- JSON.stringify(page.values) %>;

    Vue.createApp({
        data() {
            return {
                album: defaultValues,
            }
        },
        methods: {
            add(event) {
                event.preventDefault();

                axios.post('/api/v1/albums', this.album)
                    .then(() => {
                        window.location.href = '/ma-collection';
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
                    });
            }
        }
    }).mount('#app')
  </script>