202 lines
No EOL
9.4 KiB
Text
202 lines
No EOL
9.4 KiB
Text
<main class="layout-maxed collection" id="ma-collection">
|
|
<h1>
|
|
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>
|
|
</h1>
|
|
<a :href="shareLink" v-if="isPublicCollection" target="_blank">
|
|
<i class="icon-share"></i> Voir ma collection partagée
|
|
</a>
|
|
|
|
<div class="filters">
|
|
<div class="field">
|
|
<label for="artist">Artiste</label>
|
|
<select id="artist" v-model="artist" @change="changeFilter">
|
|
<option value="">Tous</option>
|
|
<%
|
|
for (let i = 0; i < page.artists.length; i += 1 ) {
|
|
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="format">Format</label>
|
|
<select id="format" v-model="format" @change="changeFilter">
|
|
<option value="">Tous</option>
|
|
<%
|
|
for (let i = 0; i < page.formats.length; i += 1 ) {
|
|
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="sortOrder">Trier par</label>
|
|
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
|
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
|
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
|
<option value="year-asc">Année (A-Z)</option>
|
|
<option value="year-desc">Année (Z-A)</option>
|
|
<option value="country-asc">Pays (A-Z)</option>
|
|
<option value="country-desc">Pays (Z-A)</option>
|
|
<option value="formats.name-asc">Format (A-Z)</option>
|
|
<option value="formats.name-desc">Format (Z-A)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters" v-if="moreFilters">
|
|
<div class="field">
|
|
<label for="format">Année</label>
|
|
<select id="format" v-model="year" @change="changeFilter">
|
|
<option value="">Toutes</option>
|
|
<%
|
|
for (let i = 0; i < page.years.length; i += 1 ) {
|
|
__append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="genre">Genre</label>
|
|
<select id="genre" v-model="genre" @change="changeFilter">
|
|
<option value="">Tous</option>
|
|
<%
|
|
for (let i = 0; i < page.genres.length; i += 1 ) {
|
|
__append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="style">Style</label>
|
|
<select id="style" v-model="style" @change="changeFilter">
|
|
<option value="">Tous</option>
|
|
<%
|
|
for (let i = 0; i < page.styles.length; i += 1 ) {
|
|
__append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<span @click="showMoreFilters" class="showMoreFilters">
|
|
<template v-if="!moreFilters">Voir plus de filtres</template>
|
|
<template v-if="moreFilters">Voir moins de filtres</template>
|
|
<i class="icon-left-open down" v-if="!moreFilters"></i>
|
|
<i class="icon-left-open up" v-if="moreFilters"></i>
|
|
</span>
|
|
|
|
<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">
|
|
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
|
|
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|
|
</span>
|
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
|
<div>
|
|
<a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
|
|
</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">
|
|
<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>
|
|
</ul>
|
|
</nav>
|
|
|
|
<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 isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
|
|
const userId = "<%= user._id %>";
|
|
const query = <%- JSON.stringify(query) %>;
|
|
</script> |