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

<main class="layout-maxed" id="app">
    <h1>Exporter ma collection</h1>
    <p>
        Les formats CSV et Excel sont facilement lisiblent par un humain. Dans ces 2 formats vous trouverez seulement les informations principales de vos albums, à savoir :
    </p>
    <ul>
        <li>Nom de l'artiste</li>
        <li>Nom de l'album</li>
        <li>Liste des genres</li>
        <li>Liste des styles</li>
        <li>Pays (ou région) de distribution</li>
        <li>Année de sortie</li>
        <li>Date de sortie</li>
        <li>Format de l'album</li>
    </ul>
    <p>
        Le format XML quand a lui est un peu moins lisible par un humain, même s'il reste un fichier texte. Dans ce format vous retrouverez toute les informations de vos albums.
    </p>
    <p>
        Enfin le dernier format, MusicTopus, vous permettra d'exporter votre collection afin de l'importer ensuite sur une autre instance MusicTopus.
    </p>
    <form @submit="exportCollection">
        <strong>Choisir le format d'export</strong>

        <div class="field inline">
            <input type="radio" name="format" v-model="format" value="csv" id="csv">
            <label for="csv">CSV</label>
        </div>
        <div class="field inline">
            <input type="radio" name="format" v-model="format" value="xls" id="xls">
            <label for="xls">Excel</label>
        </div>
        <div class="field inline">
            <input type="radio" name="format" v-model="format" value="xml" id="xml">
            <label for="xml">XML</label>
        </div>
        <div class="field inline">
            <input type="radio" name="format" v-model="format" value="musictopus" id="musictopus">
            <label for="musictopus">MusicTopus</label>
        </div>

        <button type="submit" class="button is-primary my-16">
            <i class="icon-export"></i>
            Exporter
        </button>
    </form>
</main>

<script>
    Vue.createApp({
        data() {
            return {
                format: 'xml',
            }
        },
        created() {
        },
        destroyed() {
        },
        methods: {
            exportCollection(event) {
                event.preventDefault();

                window.open(`/api/v1/albums?exportFormat=${this.format}`, '_blank');
            }
        },
    }).mount('#app');
</script>