issue/1 (#31)

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/31

views/pages/mon-compte/ma-collection/exporter.ejs

@@ -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

views/pages/mon-compte/ma-collection/index.ejs

@@ -1,5 +1,11 @@
-<main class="layout-maxed ma-collection" id="app">
-    <h1>Ma collection</h1>
+<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>
@@ -105,9 +111,45 @@
             </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 {
@@ -124,6 +166,9 @@
                 order: 'asc',
                 itemId: null,
                 showModalDelete: false,
+                showModalShare: false,
+                shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
+                isPublicCollection: <%= user.isPublicCollection ? 'true' : 'false' %>,
             }
         },
         created() {
@@ -190,6 +235,9 @@
             toggleModal() {
                 this.showModalDelete = !this.showModalDelete;
             },
+            toggleModalShare() {
+                this.showModalShare = !this.showModalShare;
+            },
             showConfirmDelete(itemId) {
                 this.itemId = itemId;
                 this.toggleModal();
@@ -205,6 +253,26 @@
                     .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');