#49 - Mise à jour d'une fiche

fontello.json

@@ -0,0 +1,118 @@
+{
+  "name": "icon",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "44e04715aecbca7f266a17d5a7863c68",
+      "css": "plus",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
+      "css": "user",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
+      "css": "search",
+      "code": 59394,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "bf882b30900da12fca090d9796bc3030",
+      "css": "mail",
+      "code": 59395,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
+      "css": "link",
+      "code": 59396,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "e15f0d620a7897e2035c18c80142f6d9",
+      "css": "link-ext",
+      "code": 61582,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9bc2902722abb366a213a052ade360bc",
+      "css": "spin",
+      "code": 59449,
+      "src": "fontelico"
+    },
+    {
+      "uid": "bbfb51903f40597f0b70fd75bc7b5cac",
+      "css": "trash",
+      "code": 61944,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "d73eceadda1f594cec0536087539afbf",
+      "css": "heart",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "cce5e05853d0798a4d10077ef613387c",
+      "css": "blind",
+      "code": 62109,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "567e3e257f2cc8fba2c12bf691c9f2d8",
+      "css": "moon",
+      "code": 61830,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "aa035df0908c4665c269b7b09a5596f3",
+      "css": "sun",
+      "code": 61829,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5fd349cbd3d23e4ade333789c29c729",
+      "css": "eye",
+      "code": 59398,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "d870630ff8f81e6de3958ecaeac532f2",
+      "css": "left-open",
+      "code": 59399,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "399ef63b1e23ab1b761dfbb5591fa4da",
+      "css": "right-open",
+      "code": 59400,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "895405dfac8a3b7b2f23b183c6608ee6",
+      "css": "export",
+      "code": 59401,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4aad6bb50b02c18508aae9cbe14e784e",
+      "css": "share",
+      "code": 61920,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "a73c5deb486c8d66249811642e5d719a",
+      "css": "refresh",
+      "code": 59402,
+      "src": "fontawesome"
+    }
+  ]
+}

public/font/icon.svg

@@ -26,6 +26,8 @@
 
 <glyph glyph-name="export" unicode="&#xe809;" d="M786 298v-144q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h142q7 0 13-6t5-12q0-15-15-18-43-15-74-34-5-2-9-2h-62q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v119q0 11 10 16 16 7 31 21 8 9 19 4 12-5 12-16z m132 277l-214-214q-10-11-25-11-7 0-14 3-22 9-22 33v107h-89q-181 0-245-73-66-77-41-264 2-13-11-19-5-1-7-1-9 0-14 7-6 8-12 17t-22 39-28 55-21 64-10 68q0 27 2 51t8 50 15 49 27 45 38 42 52 34 70 27 89 17 110 6h89v107q0 24 22 33 7 3 14 3 14 0 25-11l214-214q11-10 11-25t-11-25z" horiz-adv-x="928.6" />
 
+<glyph glyph-name="refresh" unicode="&#xe80a;" d="M843 261q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-36 90-57t105-20q74 0 139 37t104 99q6 10 30 66 4 13 16 13h107q8 0 13-6t5-12z m14 446v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

sass/icons.scss

@@ -1,11 +1,11 @@
 @font-face {
     font-family: 'icon';
-    src: url('/font/icon.eot?80770511');
+    src: url('/font/icon.eot?41426785');
-    src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'),
+    src: url('/font/icon.eot?41426785#iefix') format('embedded-opentype'),
-         url('/font/icon.woff2?80770511') format('woff2'),
+         url('/font/icon.woff2?41426785') format('woff2'),
-         url('/font/icon.woff?80770511') format('woff'),
+         url('/font/icon.woff?41426785') format('woff'),
-         url('/font/icon.ttf?80770511') format('truetype'),
+         url('/font/icon.ttf?41426785') format('truetype'),
-         url('/font/icon.svg?80770511#icon') format('svg');
+         url('/font/icon.svg?41426785#icon') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -42,6 +42,7 @@
 .icon-left-open:before { content: '\e807'; } /* '' */
 .icon-right-open:before { content: '\e808'; } /* '' */
 .icon-export:before { content: '\e809'; } /* '' */
+.icon-refresh:before { content: '\e80a'; } /* '' */
 .icon-spin:before { content: '\e839'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-sun:before { content: '\f185'; } /* '' */

sass/ma-collection-details.scss

@@ -1,4 +1,26 @@
 .ma-collection-details {
+    h1 {
+        i {
+            cursor: pointer;
+
+            &.icon-trash {
+                color: $danger-color;
+                @include transition() {}
+
+                &:hover {
+                    color: $danger-color-hl;
+                }
+            }
+            &.icon-refresh {
+                color: $primary-color;
+                @include transition() {}
+
+                &:hover {
+                    color: $primary-color-hl;
+                }
+            }
+        }
+    }
     .galerie {
         display: flex;
         flex-wrap: wrap;

src/middleware/Albums.js

@@ -7,7 +7,8 @@ import AlbumsModel from "../models/albums";
 import JobsModel from "../models/jobs";
 import UsersModel from "../models/users";
 import ErrorEvent from "../libs/error";
-// import { uploadFromUrl } from "../libs/aws";
+
+import { getAlbumDetails } from "../helpers";
 
 /**
  * Classe permettant la gestion des albums d'un utilisateur
@@ -182,6 +183,30 @@ class Albums extends Pages {
         }
     }
 
+    /**
+     * Méthode permettant de mettre à jour un album
+     *
+     * @return {Object}
+     */
+    async patchOne() {
+        const { itemId: _id } = this.req.params;
+        const { _id: User } = this.req.user;
+        const album = await AlbumsModel.findOne({
+            _id,
+            User,
+        });
+
+        if (!album) {
+            throw new ErrorEvent(404, "Impossible de trouver cet album");
+        }
+
+        const values = await getAlbumDetails(album.discogsId);
+
+        await album.updateOne(values);
+
+        return album;
+    }
+
     /**
      * Méthode permettant de supprimer un élément d'une collection
      * @return {Boolean}

src/routes/api/v1/albums.js

@@ -47,6 +47,16 @@ router
 
 router
     .route("/:itemId")
+    .patch(ensureLoggedIn("/connexion"), async (req, res, next) => {
+        try {
+            const albums = new Albums(req);
+            const data = await albums.patchOne();
+
+            sendResponse(req, res, data);
+        } catch (err) {
+            next(err);
+        }
+    })
     .delete(ensureLoggedIn("/connexion"), async (req, res, next) => {
         try {
             const albums = new Albums(req);

views/pages/composants.ejs

@@ -355,6 +355,7 @@
     <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-refresh">.icon-refresh</i>
     <i class="icon-share">.icon-share</i>
     <i class="icon-spin">.icon-spin</i>
     <i class="icon-sun">.icon-sun</i>

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

@@ -1,6 +1,10 @@
 <main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
 
-    <h1>{{item.artists_sort}} - {{item.title}}</h1>
+    <h1>
+        {{item.artists_sort}} - {{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>
+    </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}`" />
@@ -153,6 +157,20 @@
             <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="toggleModal">Annuler</button>
+            </footer>
+        </div>
+    </div>
 </main>
 
 <script>
@@ -167,6 +185,7 @@
                 identifiersPreviewLength: 16,
                 preview: null,
                 index: null,
+                showModalDelete: false,
             }
         },
         created() {
@@ -277,6 +296,35 @@
 
                 document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
             },
+            showConfirmDelete() {
+                this.toggleModal();
+            },
+            toggleModal() {
+                this.showModalDelete = !this.showModalDelete;
+            },
+            updateItem() {
+                showToastr("Mise à jour en cours…", true);
+                axios.patch(`/api/v1/albums/${this.item._id}`)
+                    .then( (res) => {
+                        showToastr("Mise à jour réalisée avec succès", true);
+                        this.item = res.data;
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
+                    });
+            },
+            deleteItem() {
+                axios.delete(`/api/v1/albums/${this.item._id}`)
+                    .then( () => {
+                        return locatiom.href = "/ma-collection";
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
+                    })
+                    .finally(() => {
+                        this.toggleModal();
+                    });
+            },
         },
     }).mount('#app');
 </script>