Ajout de l'icone partage sur la page collection + appel axios

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

@@ -1,5 +1,8 @@
 <main class="layout-maxed ma-collection" id="app">
-    <h1>Ma collection</h1>
+    <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>
     <div class="filters">
         <div class="field">
             <label for="artist">Artiste</label>
@@ -105,9 +108,35 @@
             </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>
+                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.
+            </section>
+            <footer>
+                <button class="button is-primary" @click="shareCollection">Partager</button>
+                <button class="button" @click="toggleModalShare">Annuler</button>
+            </footer>
+        </div>
+    </div>
 </main>
 
 <script>
+    const {
+        protocol,
+        host
+    } = window.location;
+
     Vue.createApp({
         data() {
             return {
@@ -124,6 +153,8 @@
                 order: 'asc',
                 itemId: null,
                 showModalDelete: false,
+                showModalShare: false,
+                shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
             }
         },
         created() {
@@ -190,6 +221,9 @@
             toggleModal() {
                 this.showModalDelete = !this.showModalDelete;
             },
+            toggleModalShare() {
+                this.showModalShare = !this.showModalShare;
+            },
             showConfirmDelete(itemId) {
                 this.itemId = itemId;
                 this.toggleModal();
@@ -205,6 +239,22 @@
                     .finally(() => {
                         this.toggleModal();
                     });
+            },
+            shareCollection() {
+                axios.post(`/api/v1/me`, {
+                    isPublicCollection: true,
+                })
+                    .then( () => {
+                        showToastr("Collection partagée", true);
+
+                        window.open(this.shareLink, '_blank');
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
+                    })
+                    .finally(() => {
+                        this.toggleModalShare();
+                    });
             }
         }
   }).mount('#app');