#2 {menu, csv, xls}

views/index.ejs

@@ -68,6 +68,9 @@
                             <a class="navbar-item" href="/ma-collection">
                                 Ma collection
                             </a>
+                            <a class="navbar-item" href="/ma-collection/exporter">
+                                Exporter ma collection
+                            </a>
                         </div>
                     </div>
                     <% } %>

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

@@ -0,0 +1,68 @@
+<main class="layout-maxed ma-collection-exporter" 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>