michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

Version 1.0 (#26)

Browse source 
Issues :

* [x] Pouvoir partager sa collection #1
* [x] Exporter sa collection #2
* [x] Pouvoir visualiser le détail d'un album #3
* [x] Pouvoir visualiser les médias d'un album #5
* [x] Avoir un titre distinct par page #29
* [x] Avoir des statistiques avec Matomo #30
* [x] Avoir un logo pour les pages d'erreurs #32

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/26
This commit is contained in:
Damien Broqua 2022-04-08 15:03:01 +02:00
parent b27a81a0b6
commit 23c58459af
44 changed files with 1161 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

2
views/error.ejs
View file

@ -5,7 +5,9 @@
<img src="/img/404.svg" alt="Erreur 404" style="max-height: 400px;" />
</p>
<% } %>
<% if ( process.env.NODE_ENV !== 'production' ) { %>
<div>
<pre><%= page.error %></pre>
</div>
<% } %>
</main>

20
views/index.ejs
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - MusicTopus <% } %></title>
<title><%= config.siteName %> :: <%= page.title %></title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -19,6 +19,24 @@
<script src="/libs/axios/axios.min.js"></script>
<script src="/libs/vue/vue.global.prod.js"></script>
<script src="/js/main.js"></script>
<% if ( config.matomoUrl ) { %>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="<%= config.matomoUrl %>";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', <%= config.matomoId %>]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<% } %>
</head>
<body>
<nav class="navbar" aria-label="Navigation principale">

2
views/pages/ajouter-un-album.ejs
View file

@ -15,7 +15,7 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div class="item" v-if="!loading" v-for="item in items">
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
<div class="grid grid-cols-2 md:grid-cols-4">

57
views/pages/mon-compte/ma-collection.ejs → views/pages/collection.ejs
View file

@ -1,5 +1,8 @@
<main class="layout-maxed ma-collection" id="app">
<h1>Ma collection</h1>
<main class="layout-maxed collection" id="app">
<h1>
Collection de <%= page.username %>
</h1>
<div class="filters">
<div class="field">
<label for="artist">Artiste</label>
@ -40,12 +43,11 @@
<div class="grid grid-cols-1 md:grid-cols-2 list">
<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>
{{ item.artists_sort}} - {{ item.title }}
</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>
<img :src="item.thumb" :alt="item.title" />
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
@ -91,23 +93,14 @@
</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>
</main>
<script>
const {
protocol,
host
} = window.location;
Vue.createApp({
data() {
return {
@ -122,8 +115,7 @@
sortOrder: 'artists_sort-asc',
sort: 'artists_sort',
order: 'asc',
itemId: null,
showModalDelete: false,
userId: "<%= params.userId %>",
}
},
created() {
@ -133,7 +125,7 @@
fetch() {
this.loading = true;
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist}`;
}
@ -149,7 +141,7 @@
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
showToastr(err.response?.data?.message || "Impossible de charger cette collection");
})
.finally(() => {
this.loading = false;
@ -187,25 +179,6 @@
this.fetch();
},
toggleModal() {
this.showModalDelete = !this.showModalDelete;
},
showConfirmDelete(itemId) {
this.itemId = itemId;
this.toggleModal();
},
deleteItem() {
axios.delete(`/api/v1/albums/${this.itemId}`)
.then( () => {
this.fetch();
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
})
.finally(() => {
this.toggleModal();
});
}
}
}).mount('#app');
</script>

173
views/pages/composants.ejs
View file

@ -1,8 +1,9 @@
<main class="layout-maxed" id="app">
<main class="layout-maxed composants" id="app">
<h1>Les composants</h1>
<ul>
<li><a href="#titres">Les titres</a></li>
<li><a href="#couleurs">Les couleurs</a></li>
<li><a href="#grilles">Les grilles</a></li>
<li><a href="#boutons">Les boutons</a></li>
<li><a href="#formulaires">Les formulaires</a></li>
@ -24,11 +25,92 @@
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
<h2 id="couleurs">Les couleurs</h2>
<h3>Polar Night</h3>
<div class="grid grid-cols-5 gap-5">
<div class="couleur">
<div style="background-color: var(--nord0);">&nbsp;</div>
nord0
</div>
<div class="couleur">
<div style="background-color: var(--nord1);">&nbsp;</div>
nord1
</div>
<div class="couleur">
<div style="background-color: var(--nord2);">&nbsp;</div>
nord2
</div>
<div class="couleur">
<div style="background-color: var(--nord3);">&nbsp;</div>
nord3
</div>
</div>
<h3>Snow Storm</h3>
<div class="grid grid-cols-5 gap-5">
<div class="couleur">
<div style="background-color: var(--nord4);">&nbsp;</div>
nord4
</div>
<div class="couleur">
<div style="background-color: var(--nord5);">&nbsp;</div>
nord5
</div>
<div class="couleur">
<div style="background-color: var(--nord6);">&nbsp;</div>
nord6
</div>
</div>
<h3>Frost</h3>
<div class="grid grid-cols-5 gap-5">
<div class="couleur">
<div style="background-color: var(--nord7);">&nbsp;</div>
nord7
</div>
<div class="couleur">
<div style="background-color: var(--nord8);">&nbsp;</div>
nord8
</div>
<div class="couleur">
<div style="background-color: var(--nord9);">&nbsp;</div>
nord9
</div>
<div class="couleur">
<div style="background-color: var(--nord10);">&nbsp;</div>
nord10
</div>
</div>
<h3>Aurora</h3>
<div class="grid grid-cols-5 gap-5">
<div class="couleur">
<div style="background-color: var(--nord11);">&nbsp;</div>
nord11
</div>
<div class="couleur">
<div style="background-color: var(--nord12);">&nbsp;</div>
nord12
</div>
<div class="couleur">
<div style="background-color: var(--nord13);">&nbsp;</div>
nord13
</div>
<div class="couleur">
<div style="background-color: var(--nord14);">&nbsp;</div>
nord14
</div>
<div class="couleur">
<div style="background-color: var(--nord15);">&nbsp;</div>
nord15
</div>
</div>
<p>
Vous pourrez trouver plus d'informations sur le <a href="https://www.nordtheme.com/" target="_blank" rel="noopener noreferrer">site offciel</a> du projet nord.
</p>
<h2 id="grilles">Les grilles</h2>
<p>
Se référer à la documentation de <a href="https://www.knacss.com/doc.html#grid" target="_blank" rel="noopener noreferrer">Knacss</a>.
</p>
<h2 id="boutons">Les boutons</h2>
<div type="button" class="button">.button</div>
<div type="button" class="button is-link">.button.is-link</div>
@ -39,13 +121,13 @@
<h2 id="formulaires">Les formulaires</h2>
<div class="field">
<label for="email">Adresse e-mail</label>
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
<label for="demo-email">Adresse e-mail</label>
<input type="email" name="email" id="demo-email" placeholder="ex : damien@darkou.fr">
</div>
<pre>
&lt;div class="field"&gt;
&lt;label for="email"&gt;Adresse e-mail&lt;/label&gt;
&lt;input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr"&gt;
&lt;label for="demo-email"&gt;Adresse e-mail&lt;/label&gt;
&lt;input type="email" name="email" id="demo-email" placeholder="ex : damien@darkou.fr"&gt;
&lt;/div&gt;
</pre>
<div class="field">
@ -86,30 +168,38 @@
&lt;/select&gt;
&lt;/div&gt;
</pre>
<div class="field">
<form>
<fieldset>
<div class="field inline">
<label for="choix1">choix 1</label>
<input type="radio" id="choix1" name="choix" value="choix1" checked>
<input type="radio" id="choix1" name="choix" value="choix1" checked>
</div>
<div class="field inline">
<label for="choix2">choix 2</label>
<input type="radio" id="choix2" name="choix" value="choix2">
</div>
</fieldset>
</form>
<pre>
&lt;div class="field"&gt;
&lt;div class="field inline"&gt;
&lt;label for="choix1"&gt;choix 1&lt;/label&gt;
&lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt;
&lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt;
&lt;/div&gt;
&lt;div class="field inline"&gt;
&lt;label for="choix2"&gt;choix 2&lt;/label&gt;
&lt;input type="radio" id="choix2" name="choix" value="choix2"&gt;
&lt;/div&gt;
</pre>
<div class="field">
<label for="checkbox1">choix 1</label>
<input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked>
<input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked>
<label for="checkbox2">choix 2</label>
<input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2">
</div>
<pre>
&lt;div class="field"&gt;
&lt;label for="checkbox1"&gt;choix 1&lt;/label&gt;
&lt;input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked&gt;
&lt;input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked&gt;
&lt;label for="checkbox2"&gt;choix 2&lt;/label&gt;
&lt;input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"&gt;
&lt;/div&gt;
@ -161,11 +251,11 @@
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" placeholder="********">
</div>
<div class="text-right mt-10">
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
</div>
<button type="submit" class="button is-primary">Connexion</button>
</form>
</div>
@ -196,20 +286,41 @@
</pre>
<h2 id="notifications">Les notifications</h2>
<h3>Erreur</h3>
<button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification');">Afficher une notification</button>
<div id="toastr">
<button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
<span></span>
</div>
<pre>
&lt;button
&lt;button
type="button"
class="button is-primary"
class="button is-primary"
onclick="showToastr('Ceci est une notification');"
&gt;
Afficher une notification
&lt;/button&gt;
&lt;div id="toastr"&gt;
&lt;button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"&gt;&lt;/button&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</pre>
<h3>Succès</h3>
<button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification', true);">Afficher une notification</button>
<div id="toastr">
<button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
<span></span>
</div>
<pre>
&lt;button
type="button"
class="button is-primary"
onclick="showToastr('Ceci est une notification', true);"
&gt;
Afficher une notification
&lt;/button&gt;
&lt;div id="toastr"&gt;
&lt;button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"&gt;&lt;/button&gt;
&lt;span&gt;&lt;/span&gt;
@ -225,15 +336,18 @@
<i class="icon-link-ext">.icon-link-ext</i>
<i class="icon-heart">.icon-heart</i>
<i class="icon-eye">.icon-eye</i>
<i class="icon-left-open">.icon-left-open</i>
<i class="icon-right-open">.icon-right-open</i>
<i class="icon-export">.icon-export</i>
<i class="icon-share">.icon-share</i>
<i class="icon-spin">.icon-spin</i>
<i class="icon-sun">.icon-sun</i>
<i class="icon-moon">.icon-moon</i>
<i class="icon-trash">.icon-trash</i>
<i class="icon-blind">.icon-blind</i>
<i class="icon-left-open">.icon-left-open</i>
<i class="icon-right-open">.icon-right-open</i>
<h2 id="listes">Les listes</h2>
<h3>Liste normale</h3>
<div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="item" v-for="item in items">
<span class="title">
@ -256,6 +370,29 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3>Liste avec effet au hover</h3>
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div class="item" v-for="item in items">
<span class="title">
{{ item.title }}
</span>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" />
</div>
<div class="md:col-span-3">
{{ item.lorem }}
</div>
</div>
</div>
</div>
<pre>
&lt;div class="grid grid-cols-1 md:grid-cols-2 list hover"&gt;
&lt;div class="item"&gt;
Contenu
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h2 id="paginations">Les paginations</h2>
<nav class="pagination" role="navigation" aria-label="Pagination">

4
views/pages/mon-compte/ma-collection/exporter.ejs
View file

@ -1,4 +1,4 @@
<main class="layout-maxed ma-collection-exporter" id="app">
<main class="layout-maxed" 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 :
@ -38,7 +38,7 @@
<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

279
views/pages/mon-compte/ma-collection/index.ejs Normal file
View file

@ -0,0 +1,279 @@
<main class="layout-maxed collection" id="app">
<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="grid grid-cols-1 md:grid-cols-2 list hover">
<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) || (page - 1) <= p && page + 1 >= p">
<li>
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
</li>
</template>
<template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && 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 {
protocol,
host
} = window.location;
Vue.createApp({
data() {
return {
loading: false,
items: [],
total: 0,
page: 1,
totalPages: 1,
limit: 16,
artist: '',
format: '',
sortOrder: 'artists_sort-asc',
sort: 'artists_sort',
order: 'asc',
itemId: null,
showModalDelete: false,
showModalShare: false,
shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
isPublicCollection: <%= user.isPublicCollection ? 'true' : 'false' %>,
}
},
created() {
this.fetch();
},
methods: {
fetch() {
this.loading = true;
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
})
.finally(() => {
this.loading = false;
});
},
next(event) {
event.preventDefault();
this.page += 1;
this.fetch();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.fetch();
},
goTo(page) {
this.page = page;
this.fetch();
},
changeSort() {
const [sort,order] = this.sortOrder.split('-');
this.sort = sort;
this.order = order;
this.page = 1;
this.fetch();
},
changeFilter() {
this.page = 1;
this.fetch();
},
toggleModal() {
this.showModalDelete = !this.showModalDelete;
},
toggleModalShare() {
this.showModalShare = !this.showModalShare;
},
showConfirmDelete(itemId) {
this.itemId = itemId;
this.toggleModal();
},
deleteItem() {
axios.delete(`/api/v1/albums/${this.itemId}`)
.then( () => {
this.fetch();
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
})
.finally(() => {
this.toggleModal();
});
},
shareCollection() {
axios.patch(`/api/v1/me`, {
isPublicCollection: !this.isPublicCollection,
})
.then( (res) => {
this.isPublicCollection = res.data.isPublicCollection;
if ( this.isPublicCollection ) {
showToastr("Votre collection est désormais publique", true);
} else {
showToastr("Votre collection n'est plus partagée", true);
}
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
})
.finally(() => {
this.toggleModalShare();
});
}
}
}).mount('#app');
</script>