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

<main class="layout-maxed" id="importer">
    <% if (page.action === 'albums') { %>
        <h1>Importer une collection</h1>
    <% } else { %>
        <h1>Importer une liste de souhaits</h1>
    <% } %>
    <p>
        Il est actuellement possible d'importer <%= page.action === 'albums' ? "une collection"  : "une liste de souhaits" %> provenant de discogs.
        <br />
        Vous devez dans un premier temps vous rendre sur la page <a href="https://www.discogs.com/fr/users/export" target="_blank" rel="noopener noreferrer">Exporter</a> de discogs.
        <br />
        Une fois exporter vous recevrez un mail de Discogs avec un lien de téléchargement. Une fois le fichier .zip téléchargé vous devez en extraire le fichier .csv afin de l'importer dans MusicTopus.
    </p>
    <p>
        D'autres formats d'imports seront ajoutés par la suite, comme l'import entre 2 instances MusicTopus.
    </p>
    <div class="flash info">
        <div class="header">
            Information
        </div>
        <div class="body">
            Si un album est déjà présent en base celui-ci sera ignoré.
        </div>
    </div>

    <form @submit="importCollection">

        <div class="field">
            <label for="file">Fichier .csv</label>
            <input type="file" name="file" id="file" @change="handleFileUpload( $event )" accept=".csv">
        </div>

        <div class="field">
            <span>
                Albums à impoter : <strong>{{content.length}}</strong>
            </span>
        </div>

        <button type="submit" class="button is-primary my-16" :disabled="disabled">
            <i v-if="['parse', 'submit'].includes(state)" class="icon-spin animate-spin"></i>
            <span v-if="state === 'default'">Importer</span>
            <span v-if="state === 'parse'">Analyse en cours...</span>
            <span v-if="state === 'submit'">Importation en cours... ({{imported}}/{{content.length}})</span>
            <span v-if="state === 'done'">Importatation terminée</span>
        </button>
    </form>
</main>

<script>
    const action = "<%- page.action %>";
</script>