MusicTopus/views/pages/collection.ejs

<%
    const pageType = page.username ? 'public' : 'private';
%>

<main class="layout-maxed collection" id="collection">
    <% if (page.action === 'albums') { %>
        <h1>
            <% if ( pageType === 'private' ) {
                __append('Ma collection <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>');
            } else {
                __append(`Collection de ${page.username}`);
            } %>
        </h1>
        <% if ( pageType === 'private' ) { %>
            <div>
                <a :href="shareLink" v-if="isPublicCollection" target="_blank">
                    <i class="icon-share"></i> Voir ma collection partagée
                </a>
            </div>
        <% } %>
    <% } else { %>
        <h1>Ma liste de souhaits</h1>
    <% } %>

    <%- include('../components/filters/index') %>

    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
        <div class="loader" v-if="loading">
            <div class="animation"></div>
            <div>
                Chargement des données en cours…
            </div>
        </div>
        <div class="item" v-if="!loading" v-for="item in items">
            <span class="title">
                <% if ( pageType === 'private' ) { %>
                    <a :href="'/<%= page.action === 'albums' ? 'ma-collection' : 'ma-liste-de-souhaits' %>/' + item._id">{{ renderAlbumTitle(item) }}</a>
                    <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
                <% } else { %>
                    {{ item.artists_sort}} - {{ item.title }}
                <% } %>
            </span>
            <div class="grid grid-cols-2 md:grid-cols-4">
                <div>
                    <% if ( pageType === 'private' ) { %>
                        <a :href="'/<%= page.action === 'albums' ? 'ma-collection' : 'ma-liste-de-souhaits' %>/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
                    <% } else { %>
                        <img :src="item.thumb" :alt="item.title" />
                    <% } %>
                </div>
                <div class="md:col-span-3">
                    <span><strong>Année :</strong> {{ item.year }}</span>
                    <br />
                    <span><strong>Pays :</strong> {{ item.country }}</span>
                    <br />
                    <span>
                        <strong>Format : </strong>
                        <span v-for="(format, index) in item.formats">
                            {{ format.name }}
                            <template v-if="format.descriptions">
                                (<template v-for="(description, j) in format.descriptions">
                                    {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
                                </template>)
                            </template>
                            <template v-if="index < item.formats.length - 1">, </template>
                        </span>
                    </span>
                    <br />
                    <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
                    <br />
                    <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
                </div>
            </div>
        </div>
    </div>
    <div class="total">
        <strong>Nombre total d'éléments : </strong>{{total}}
    </div>
    <nav class="pagination" role="navigation" aria-label="Pagination">
        <ul class="pagination-list">
            <li v-if="page > 1">
                <a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">&laquo;</a>
            </li>
            <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                <template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
                    <li>
                        <a class="pagination-link" :class="{'is-current': p === Number(page)}" @click="goTo(p)" :aria-label="'Aller à la page '+p">{{ p }}</a>
                    </li>
                </template>
                <template v-if="(Number(page) - 3 === p && Number(page) - 2 > 1) || (Number(page) + 2 === p && Number(page) + 2 < totalPages - 1)">
                    <li>
                        <a class="pagination-link is-disabled">…</a>
                    </li>
                </template>
            </template>
            <li v-if="page < totalPages">
                <a class="pagination-link" @click="goTo(totalPages)" aria-label="Aller à la derière page">&raquo;</a>
            </li>
        </ul>
    </nav>

    <% if ( pageType === 'private' ) { %>
        <div class="modal" :class="{'is-visible': showModalDelete}">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header></header>
                <section>
                    Êtes-vous sûr de vouloir supprimer cet album ?
                </section>
                <footer>
                    <button class="button is-primary" @click="deleteItem">Supprimer</button>
                    <button class="button" @click="toggleModal">Annuler</button>
                </footer>
            </div>
        </div>
        <div class="modal" :class="{'is-visible': showModalShare}">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header>
                    Partager ma collection
                </header>
                <section>
                    <template v-if="!isPublicCollection">
                        Votre collection sera visible de toute personne disposant du lien suivant :
                        <br />
                        <a :href="shareLink" target="_blank">{{shareLink}}</a>
                        <br />
                        Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
                        <br />
                        Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
                    </template>
                    <template v-if="isPublicCollection">
                        Vous êtes sur le point de rendre votre collection privée.
                        <br />
                        Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
                        <br />
                        Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
                    </template>
                </section>
                <footer>
                    <button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
                    <button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
                    <button class="button" @click="toggleModalShare">Annuler</button>
                </footer>
            </div>
        </div>
    <% } %>

</main>

<script>
    const vueType = "<%= pageType %>";
    const query = <%- JSON.stringify(query) %>;
    const action = "<%- page.action %>";
<% if ( pageType === 'private' ) { %>
    const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
    const userId = "<%= user._id %>";
<% } else { %>
    const userId = "<%= params.userId %>";
    const isPublicCollection = false;
<% } %>
</script>