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

<main class="layout-maxed ma-collection-details" id="ma-collection-details" v-cloak @keyup="changeImage">

    <h1>
        <template v-for="artist in item.artists">
            <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artist=${artist.name}`">{{artist.name}}</a>
            <template v-if="artist.join">&nbsp;{{artist.join}}&nbsp;</template>
        </template>
        - {{item.title}}
        <i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
        <i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
        <i class="icon-share" title="Partager cet album sur le fédiverse" @click="showModalShare = true" v-if="canShareItem"></i>
    </h1>
    <div class="grid sm:grid-cols-3 gap-16">
        <div class="text-center">
            <img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
        </div>
        <div class="sm:col-span-2 text-center galerie">
            <div v-for="(image, index) in item.images" :data-index="index" @click.stop.prevent="showGallery">
                <img :src="image.uri150" :alt="`Miniature de type ${image.type}`" />
            </div>
        </div>
    </div>
    <hr />
    <%- include('../../../components/album.ejs') %>

    <div class="modal" :class="{'is-visible': modalIsVisible}">
        <div class="modal-background"></div>
        <button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
        <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous" v-if="index > 0">
            <i class="icon-left-open"></i>
        </button>
        <button type="button" aria-label="Image suivante" class="navigation next" @click="next" v-if="index + 1 < item.images.length">
            <i class="icon-right-open"></i>
        </button>
        <div class="modal-card">
            <img :src="preview" />
        </div>
    </div>

    <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="toggleModalDelete">Annuler</button>
            </footer>
        </div>
    </div>

    <div class="modal" :class="{'is-visible': showModalShare}">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header>Partager un album sur le fédiverse</header>
            <section>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="field">
                        <label for="shareMessage">Message</label>
                        <textarea
                            name="shareMessage"
                            id="shareMessage"
                            v-model="shareMessage"
                            rows="6"
                        ></textarea>
                        Caractères utilisés : {{ shareMessageLength }}
                    </div>
                    <div>
                        <small>
                            Variables possibles :
                            <ul>
                                <li>{artist}, exemple : Iron Maiden</li>
                                <li>{album}, exemple : Powerslave</li>
                                <li>{format}, exemple : Cassette</li>
                                <li>{year}, exemple: 1984</li>
                                <li>{video}, exemple : https://www.youtube.com/watch?v=Qx0s8OqgBIw</li>
                            </ul>
                        </small>
                    </div>
                </div>
            </section>
            <footer>
                <button :class="['button is-primary', shareSubmiting ? 'is-disabled' : '']" @click="shareAlbum">Partager</button>
                <button class="button" @click="showModalShare=!showModalShare">Annuler</button>
            </footer>
        </div>
    </div>
</main>

<script>
    const item = <%- JSON.stringify(page.item) %>;
    const canShareItem = <%= user.mastodon?.publish || false %>;
</script>