Merge branch 'master' of git.darkou.fr:dbroqua/MusicTopus into develop

Fonctionnalités :

    #80 - Ajout des boutons pages de début et de fin sur la pagination

Correction de bugs :

    #79 - Correction d'un bug empêchant de filtrer sur un artiste contenant un "+" dans son nom

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #83

.eslintrc.js

@@ -1,36 +1,43 @@
 module.exports = {
-  env: {
-    browser: true,
-    es2020: true,
-    node: true,
-    jquery: true,
-  },
-  extends: ['airbnb-base', 'prettier'],
-  plugins: ['prettier'],
-  parserOptions: {
-    ecmaVersion: 11,
-    sourceType: 'module',
-  },
-  rules: {
-    'prettier/prettier': ['error'],
-    'no-underscore-dangle': [
-      'error',
-      {
-        allow: ['_id', 'artists_sort', 'type_'],
-      },
-    ],
-    'camelcase': [
-      'error',
-      {
-        allow: ['artists_sort',]
-      },
+    env: {
+        browser: true,
+        es2020: true,
+        node: true,
+        jquery: true,
+    },
+    extends: ["airbnb-base", "prettier"],
+    plugins: ["prettier"],
+    parserOptions: {
+        ecmaVersion: 11,
+        sourceType: "module",
+    },
+    rules: {
+        "prettier/prettier": ["error"],
+        "no-underscore-dangle": [
+            "error",
+            {
+                allow: ["_id", "artists_sort", "type_"],
+            },
+        ],
+        camelcase: [
+            "error",
+            {
+                allow: ["artists_sort"],
+            },
+        ],
+    },
+    ignorePatterns: ["public/libs/**/*.js", "public/js/main.js", "dist/**"],
+    overrides: [
+        {
+            files: ["**/*.js"],
+            excludedFiles: "*.ejs",
+        },
     ],
-  },
-  ignorePatterns: ['public/libs/**/*.js', 'public/js/main.js', 'dist/**'],
-  overrides: [
-    {
-      files: ['**/*.js'],
-      excludedFiles: '*.ejs',
+    globals: {
+        Vue: true,
+        axios: true,
+        showToastr: true,
+        protocol: true,
+        host: true,
     },
-  ],
 };

.gitignore

@@ -121,6 +121,6 @@ dist
 dist
 yarn.lock
 public/css
-public/css
+public/js
 docker-compose.yml
 dump

gulpfile.js

@@ -0,0 +1,46 @@
+const { parallel, src, dest } = require("gulp");
+
+const sourcemaps = require("gulp-sourcemaps");
+const concat = require("gulp-concat");
+
+const gulp = require("gulp");
+const uglify = require("gulp-uglify");
+const babel = require("gulp-babel");
+
+const sourceJs = "javascripts/**/*.js";
+const sourceRemoteJS = [
+    "./node_modules/vue/dist/vue.global.prod.js",
+    "./node_modules/axios/dist/axios.min.js",
+];
+
+const destination = "public/js";
+
+// TASKS ----------------------------------------------------------------------
+
+const compileJs = function () {
+    return gulp
+        .src(sourceJs)
+        .pipe(sourcemaps.init())
+        .pipe(concat("main.js"))
+        .pipe(
+            babel({
+                presets: ["@babel/env"],
+            })
+        )
+        .pipe(uglify())
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(destination));
+};
+const compileRemoteJs = function () {
+    return gulp
+        .src(sourceRemoteJS)
+        .pipe(sourcemaps.init())
+        .pipe(concat("libs.js"))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(destination));
+};
+// ----------------------------------------------------------------------------
+
+// COMMANDS -------------------------------------------------------------------
+exports.default = parallel(compileJs, compileRemoteJs);
+// ----------------------------------------------------------------------------

javascripts/ajouter-un-album.js

@@ -0,0 +1,179 @@
+Vue.createApp({
+    data() {
+        return {
+            q: "",
+            year: "",
+            country: "",
+            format: "",
+            loading: false,
+            items: [],
+            details: {},
+            modalIsVisible: false,
+            formats: [
+                "Vinyl",
+                "Acetate",
+                "Flexi-disc",
+                "Lathe Cut",
+                "Mighty Tiny",
+                "Shellac",
+                "Sopic",
+                "Pathé Disc",
+                "Edison Disc",
+                "Cylinder",
+                "CD",
+                "CDr",
+                "CDV",
+                "DVD",
+                "DVDr",
+                "HD DVD",
+                "HD DVD-R",
+                "Blu-ray",
+                "Blu-ray-R",
+                "Ultra HD Blu-ray",
+                "SACD",
+                "4-Track Cartridge",
+                "8-Track Cartridge",
+                "Cassette",
+                "DC-International",
+                "Elcaset",
+                "PlayTape",
+                "RCA Tape Cartridge",
+                "DAT",
+                "DCC",
+                "Microcassette",
+                "NT Cassette",
+                "Pocket Rocker",
+                "Revere Magnetic Stereo Tape Ca",
+                "Tefifon",
+                "Reel-To-Reel",
+                "Sabamobil",
+                "Betacam",
+                "Betacam SP",
+                "Betamax",
+                "Cartrivision",
+                "MiniDV",
+                "Super VHS",
+                "U-matic",
+                "VHS",
+                "Video 2000",
+                "Video8",
+                "Film Reel",
+                "HitClips",
+                "Laserdisc",
+                "SelectaVision",
+                "VHD",
+                "Wire Recording",
+                "Minidisc",
+                "MVD",
+                "UMD",
+                "Floppy Disk",
+                "File",
+                "Memory Stick",
+                "Hybrid",
+                "All Media",
+                "Box Set",
+            ],
+        };
+    },
+    methods: {
+        search(event) {
+            event.preventDefault();
+
+            if (this.loading) {
+                return false;
+            }
+
+            this.loading = true;
+            let url = `/api/v1/search?q=${this.q}`;
+
+            if (this.year) {
+                url += `&year=${this.year}`;
+            }
+            if (this.country) {
+                url += `&country=${this.country}`;
+            }
+            if (this.format) {
+                url += `&format=${this.format}`;
+            }
+
+            return axios
+                .get(url)
+                .then((response) => {
+                    const { results } = response.data;
+                    const items = [];
+
+                    for (let i = 0; i < results.length; i += 1) {
+                        const {
+                            id,
+                            title,
+                            thumb,
+                            year,
+                            country,
+                            format,
+                            genre,
+                            style,
+                        } = results[i];
+                        items.push({
+                            id,
+                            title,
+                            thumb,
+                            year,
+                            country,
+                            format,
+                            genre,
+                            style,
+                        });
+                    }
+
+                    this.items = items;
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Aucun résultat trouvé :/"
+                    );
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        toggleModal() {
+            this.modalIsVisible = !this.modalIsVisible;
+        },
+        loadDetails(discogsId) {
+            axios
+                .get(`/api/v1/search/${discogsId}`)
+                .then((response) => {
+                    const { data } = response;
+
+                    this.details = data;
+                    this.toggleModal();
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de charger les détails de cet album"
+                    );
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        add() {
+            axios
+                .post("/api/v1/albums", this.details)
+                .then(() => {
+                    window.location.href = "/ma-collection";
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible d'ajouter cet album pour le moment…"
+                    );
+                });
+        },
+        orderedItems(items) {
+            return items.sort();
+        },
+    },
+}).mount("#ajouter-album");

javascripts/collection.js

@@ -0,0 +1,237 @@
+Vue.createApp({
+    data() {
+        return {
+            loading: false,
+            moreFilters: false,
+            items: [],
+            total: 0,
+            // eslint-disable-next-line no-undef
+            page: query.page || 1,
+            totalPages: 1,
+            limit: 16,
+            artist: "",
+            format: "",
+            year: "",
+            genre: "",
+            style: "",
+            sortOrder: "artists_sort-asc",
+            sort: "artists_sort",
+            order: "asc",
+            itemId: null,
+            showModalDelete: false,
+            showModalShare: false,
+            // eslint-disable-next-line no-undef
+            shareLink: `/collection/${userId}`,
+            // eslint-disable-next-line no-undef
+            isPublicCollection,
+            // eslint-disable-next-line no-undef
+            query,
+        };
+    },
+    created() {
+        this.fetch();
+    },
+    methods: {
+        formatParams(param) {
+            return param.replace("&", "%26").replace("+", "%2B");
+        },
+        fetch() {
+            this.loading = true;
+            this.total = 0;
+
+            const queryString = window.location.search;
+            const urlParams = new URLSearchParams(queryString);
+            const entries = urlParams.entries();
+
+            const sortOrder = {
+                sort: "artists_sort",
+                order: "asc",
+            };
+
+            // eslint-disable-next-line no-restricted-syntax
+            for (const entry of entries) {
+                const [key, value] = entry;
+                switch (key) {
+                    case "artists_sort":
+                        this.artist = value;
+                        break;
+                    default:
+                        if (["order", "sort"].indexOf(key) !== -1) {
+                            sortOrder[key] = value;
+                        }
+                        this[key] = value;
+                }
+            }
+
+            this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`;
+
+            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+            if (this.artist) {
+                url += `&artist=${this.formatParams(this.artist)}`;
+            }
+            if (this.format) {
+                url += `&format=${this.formatParams(this.format)}`;
+            }
+            if (this.year) {
+                url += `&year=${this.year}`;
+            }
+            if (this.genre) {
+                url += `&genre=${this.formatParams(this.genre)}`;
+            }
+            if (this.style) {
+                url += `&style=${this.formatParams(this.style)}`;
+            }
+
+            axios
+                .get(url)
+                .then((response) => {
+                    this.items = response.data.rows;
+                    this.total = response.data.count || 0;
+                    this.totalPages =
+                        parseInt(response.data.count / this.limit, 10) +
+                        (response.data.count % this.limit > 0 ? 1 : 0);
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de charger votre collection"
+                    );
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        changeUrl() {
+            let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+            if (this.artist) {
+                url += `&artists_sort=${this.formatParams(this.artist)}`;
+            }
+            if (this.format) {
+                url += `&format=${this.formatParams(this.format)}`;
+            }
+            if (this.year) {
+                url += `&year=${this.year}`;
+            }
+            if (this.genre) {
+                url += `&genre=${this.formatParams(this.genre)}`;
+            }
+            if (this.style) {
+                url += `&style=${this.formatParams(this.style)}`;
+            }
+
+            window.location.href = url;
+        },
+        next(event) {
+            event.preventDefault();
+
+            this.page += 1;
+
+            this.changeUrl();
+        },
+        previous(event) {
+            event.preventDefault();
+
+            this.page -= 1;
+
+            this.changeUrl();
+        },
+        goTo(page) {
+            this.page = page;
+
+            this.changeUrl();
+        },
+        changeSort() {
+            const [sort, order] = this.sortOrder.split("-");
+            this.sort = sort;
+            this.order = order;
+            this.page = 1;
+
+            this.changeUrl();
+        },
+        changeFilter() {
+            this.page = 1;
+
+            this.changeUrl();
+        },
+        showMoreFilters() {
+            this.moreFilters = !this.moreFilters;
+        },
+        toggleModal() {
+            this.showModalDelete = !this.showModalDelete;
+        },
+        toggleModalShare() {
+            this.showModalShare = !this.showModalShare;
+        },
+        showConfirmDelete(itemId) {
+            this.itemId = itemId;
+            this.toggleModal();
+        },
+        deleteItem() {
+            if ( vueType === 'private' ) {
+                return false;
+            }
+            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() {
+            if ( vueType === 'private' ) {
+                return false;
+            }
+            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();
+                });
+        },
+        renderAlbumTitle(item) {
+            let render = '';
+
+            for ( let i = 0 ; i < item.artists.length ; i += 1 ) {
+                const {
+                    name,
+                    join,
+                } = item.artists[i];
+                render += `${name} ${join ? `${join} ` : ''}`;
+            }
+
+            render += `- ${item.title}`;
+
+            return render;
+        }
+    },
+}).mount("#collection");

javascripts/conctact.js

@@ -0,0 +1,43 @@
+// eslint-disable-next-line no-undef
+if (typeof contactMethod !== "undefined" && contactMethod === "smtp") {
+    Vue.createApp({
+        data() {
+            return {
+                email: "",
+                name: "",
+                message: "",
+                captcha: "",
+                loading: false,
+            };
+        },
+        methods: {
+            send(event) {
+                event.preventDefault();
+
+                if (this.loading) {
+                    return false;
+                }
+
+                this.loading = true;
+
+                const { email, message, name, captcha } = this;
+
+                return axios
+                    .post("/api/v1/contact", { email, name, message, captcha })
+                    .then(() => {
+                        showToastr("Message correctement envoyé", true);
+                    })
+                    .catch((err) => {
+                        showToastr(
+                            err.response?.data?.message ||
+                                "Impossible d'envoyer votre message",
+                            false
+                        );
+                    })
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            },
+        },
+    }).mount("#contact");
+}

javascripts/main.js

@@ -0,0 +1,151 @@
+/* eslint-disable no-unused-vars */
+const { protocol, host } = window.location;
+
+/**
+ * Fonction permettant d'afficher un message dans un toastr
+ * @param {String} message
+ */
+function showToastr(message, success = false) {
+    const x = document.getElementById("toastr");
+    if (message) {
+        x.getElementsByTagName("SPAN")[0].innerHTML = message;
+    }
+
+    x.className = `${x.className} show`.replace("sucess", "");
+    if (success) {
+        x.className = `${x.className} success`;
+    }
+    setTimeout(() => {
+        x.className = x.className.replace("show", "");
+    }, 3000);
+}
+
+/**
+ * Fonction permettant de masquer le toastr
+ */
+function hideToastr() {
+    const x = document.getElementById("toastr");
+
+    x.className = x.className.replace("show", "");
+    x.getElementsByTagName("SPAN")[0].innerHTML = "";
+}
+
+/**
+ * Fonction permettant de récupérer la valeur d'un cookie
+ * @param {String} cname
+ * @param {String} defaultValue
+ *
+ * @return {String}
+ */
+function getCookie(cname, defaultValue = "false") {
+    const name = `${cname}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const ca = decodedCookie.split(";");
+    for (let i = 0; i < ca.length; i += 1) {
+        let c = ca[i];
+        while (c.charAt(0) === " ") {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return defaultValue;
+}
+
+/**
+ * Fonction permettant de créer un cookie
+ * @param {String} cname
+ * @param {String} cvalue
+ * @param {Number} exdays
+ */
+function setCookie(cname, cvalue, exdays = 30) {
+    const d = new Date();
+    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+    const expires = `expires=${d.toUTCString()}`;
+    document.cookie = `${cname}=${cvalue};${expires};path=/`;
+}
+
+/**
+ * Fonction de (dé)charger le thème accessible
+ * @param {String} value
+ */
+function setAriaTheme(value) {
+    const { body } = document;
+    if (value === "true") {
+        const classesString = body.className || "";
+        if (classesString.indexOf("is-accessible") === -1) {
+            body.classList.add("is-accessible");
+        }
+    } else {
+        body.classList.remove("is-accessible");
+    }
+}
+
+/**
+ * Fonction de (dé)charger  le thème accessible
+ */
+function switchAriaTheme() {
+    const { body } = document;
+
+    body.classList.toggle("is-accessible");
+
+    setCookie("ariatheme", body.classList.contains("is-accessible"));
+}
+
+/**
+ * Fonction permettant de switcher de thème clair/sombre
+ * @param {Object} e
+ */
+function switchTheme(e) {
+    const theme = e.target.checked ? "dark" : "light";
+
+    document.documentElement.setAttribute("data-theme", theme);
+    setCookie("theme", theme);
+}
+
+/**
+ * Ensemble d'actions effectuées au chargement de la page
+ */
+document.addEventListener("DOMContentLoaded", () => {
+    const $navbarBurgers = Array.prototype.slice.call(
+        document.querySelectorAll(".navbar-burger"),
+        0
+    );
+    if ($navbarBurgers.length > 0) {
+        $navbarBurgers.forEach((el) => {
+            el.addEventListener("click", () => {
+                const { target } = el.dataset;
+                const $target = document.getElementById(target);
+
+                el.classList.toggle("is-active");
+                $target.classList.toggle("is-active");
+            });
+        });
+    }
+
+    const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
+    if (switchAriaThemeBtn) {
+        switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
+    }
+    setAriaTheme(getCookie("ariatheme"));
+
+    const toggleSwitch = document.querySelector(
+        '.theme-switch input[type="checkbox"]'
+    );
+    if (toggleSwitch) {
+        toggleSwitch.addEventListener("change", switchTheme, false);
+    }
+
+    let currentThemeIsDark = getCookie("theme");
+    if (currentThemeIsDark === "false" && window.matchMedia) {
+        currentThemeIsDark = window.matchMedia("(prefers-color-scheme: dark)")
+            .matches
+            ? "dark"
+            : "light";
+    }
+    switchTheme({ target: { checked: currentThemeIsDark === "dark" } });
+    if (toggleSwitch) {
+        toggleSwitch.checked = currentThemeIsDark === "dark";
+    }
+});

javascripts/mon-compte/index.js

@@ -0,0 +1,29 @@
+if (typeof email !== "undefined" && typeof username !== "undefined") {
+    Vue.createApp({
+        data() {
+            return {
+                // eslint-disable-next-line no-undef
+                email,
+                // eslint-disable-next-line no-undef
+                username,
+                oldPassword: "",
+                password: "",
+                passwordConfirm: "",
+                loading: false,
+            };
+        },
+        methods: {
+            // eslint-disable-next-line no-unused-vars
+            async updateProfil(event) {
+                // try {
+                //     if ( this.password !== this.passwordConfirm ) {
+                //         throw "La confirnation du mot de passe ne correspond pas";
+                //     }
+                // } catch(err) {
+                //     event.preventDefault();
+                //     showToastr(err);
+                // }
+            },
+        },
+    }).mount("#mon-compte");
+}

javascripts/mon-compte/ma-collection/details.js

@@ -0,0 +1,194 @@
+if (typeof item !== "undefined") {
+    Vue.createApp({
+        data() {
+            return {
+                // eslint-disable-next-line no-undef
+                item,
+                tracklist: [],
+                identifiers: [],
+                modalIsVisible: false,
+                identifiersMode: "preview",
+                identifiersPreviewLength: 16,
+                preview: null,
+                index: null,
+                showModalDelete: false,
+            };
+        },
+        created() {
+            this.setTrackList();
+            this.setIdentifiers();
+
+            window.addEventListener("keydown", this.changeImage);
+        },
+        destroyed() {
+            window.removeEventListener("keydown", this.changeImage);
+        },
+        methods: {
+            setIdentifiers() {
+                this.identifiers = [];
+
+                const max =
+                    this.identifiersMode === "preview" &&
+                    this.item.identifiers.length > this.identifiersPreviewLength
+                        ? this.identifiersPreviewLength
+                        : this.item.identifiers.length;
+
+                for (let i = 0; i < max; i += 1) {
+                    this.identifiers.push(this.item.identifiers[i]);
+                }
+            },
+            setTrackList() {
+                this.tracklist = [];
+                let subTrack = {
+                    type: null,
+                    title: null,
+                    tracks: [],
+                };
+                for (let i = 0; i < this.item.tracklist.length; i += 1) {
+                    const {
+                        type_,
+                        title,
+                        position,
+                        duration,
+                        artists,
+                        extraartists,
+                    } = this.item.tracklist[i];
+
+                    if (type_ === "heading") {
+                        if (subTrack.type) {
+                            this.tracklist.push(subTrack);
+                            subTrack = {
+                                type: null,
+                                title: null,
+                                tracks: [],
+                            };
+                        }
+
+                        subTrack.type = type_;
+                        subTrack.title = title;
+                    } else {
+                        subTrack.tracks.push({
+                            title,
+                            position,
+                            duration,
+                            extraartists,
+                            artists,
+                        });
+                    }
+                }
+                this.tracklist.push(subTrack);
+            },
+            setImage() {
+                this.preview = this.item.images[this.index].uri;
+            },
+            showGallery(event) {
+                const item =
+                    event.target.tagName === "IMG"
+                        ? event.target.parentElement
+                        : event.target;
+
+                const { index } = item.dataset;
+
+                this.index = Number(index);
+                this.modalIsVisible = true;
+
+                this.setImage();
+            },
+            toggleModal() {
+                this.modalIsVisible = !this.modalIsVisible;
+            },
+            previous() {
+                this.index =
+                    this.index > 0
+                        ? this.index - 1
+                        : this.item.images.length - 1;
+                this.setImage();
+            },
+            next() {
+                this.index =
+                    this.index + 1 === this.item.images.length
+                        ? 0
+                        : this.index + 1;
+                this.setImage();
+            },
+            changeImage(event) {
+                const direction = event.code;
+
+                if (
+                    this.modalIsVisible &&
+                    ["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !==
+                        -1
+                ) {
+                    switch (direction) {
+                        case "ArrowRight":
+                            return this.next();
+                        case "ArrowLeft":
+                            return this.previous();
+                        default:
+                            this.modalIsVisible = false;
+                            return true;
+                    }
+                }
+
+                return true;
+            },
+            showAllIdentifiers() {
+                this.identifiersMode = "all";
+                this.setIdentifiers();
+            },
+            showLessIdentifiers() {
+                this.identifiersMode = "preview";
+                this.setIdentifiers();
+
+                document
+                    .querySelector("#identifiers")
+                    .scrollIntoView({ behavior: "smooth" });
+            },
+            showConfirmDelete() {
+                this.toggleModalDelete();
+            },
+            toggleModalDelete() {
+                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;
+
+                        this.setTrackList();
+                        this.setIdentifiers();
+                        this.showLessIdentifiers();
+                    })
+                    .catch((err) => {
+                        showToastr(
+                            err.response?.data?.message ||
+                                "Impossible de mettre à jour cet album",
+                            false
+                        );
+                    });
+            },
+            deleteItem() {
+                axios
+                    .delete(`/api/v1/albums/${this.item._id}`)
+                    .then(() => {
+                        window.location.href = "/ma-collection";
+                    })
+                    .catch((err) => {
+                        showToastr(
+                            err.response?.data?.message ||
+                                "Impossible de supprimer cet album"
+                        );
+                    })
+                    .finally(() => {
+                        this.toggleModalDelete();
+                    });
+            },
+            goToArtist() {
+                return "";
+            },
+        },
+    }).mount("#ma-collection-details");
+}

javascripts/mon-compte/ma-collection/exporter.js

@@ -0,0 +1,16 @@
+Vue.createApp({
+    data() {
+        return {
+            format: "xml",
+        };
+    },
+    created() {},
+    destroyed() {},
+    methods: {
+        exportCollection(event) {
+            event.preventDefault();
+
+            window.open(`/api/v1/albums?exportFormat=${this.format}`, "_blank");
+        },
+    },
+}).mount("#exporter");

package.json

@@ -4,13 +4,14 @@
   "description": "Simple application to manage your CD/Vinyl collection",
   "scripts": {
     "start": "node ./dist/bin/www",
-    "run:all": "npm-run-all build sass start",
-    "watch": "nodemon -e js,scss",
+    "run:all": "npm-run-all build sass uglify start",
+    "watch": "npx nodemon -e js,scss",
     "sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
+    "uglify": "npx gulp",
     "prebuild": "rimraf dist",
-    "build": "babel ./src --out-dir dist --copy-files",
+    "build": "npx babel ./src --out-dir dist --copy-files",
     "test": "jest",
-    "prepare": "husky install"
+    "prepare": "npx husky install"
   },
   "engines": {
     "node": "16.x",
@@ -55,6 +56,11 @@
     "excel4node": "^1.7.2",
     "express": "^4.17.2",
     "express-session": "^1.17.2",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-uglify": "^3.0.2",
     "joi": "^17.6.0",
     "knacss": "^8.0.4",
     "mongoose": "^6.2.1",
@@ -72,10 +78,11 @@
     "vue": "^3.2.31"
   },
   "nodemonConfig": {
-    "exec": "yarn run:all",
+    "exec": "npm run run:all",
     "watch": [
       "src/*",
-      "sass/*"
+      "sass/*",
+      "javascripts/*"
     ],
     "ignore": [
       "**/__tests__/**",

public/js/main.js

@@ -1,138 +0,0 @@
-/**
- * Fonction permettant d'afficher un message dans un toastr
- * @param {String} message
- */
- function showToastr(message, success = false) {
-    let x = document.getElementById("toastr");
-    if ( message ) {
-        x.getElementsByTagName("SPAN")[0].innerHTML = message;
-    }
-
-    x.className = `${x.className} show`.replace("sucess", "");
-    if ( success ) {
-        x.className = `${x.className} success`;
-    }
-    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
-};
-
-/**
- * Fonction permettant de masquer le toastr
- */
-function hideToastr() {
-    let x = document.getElementById("toastr");
-
-    x.className = x.className.replace("show", "");
-    x.getElementsByTagName("SPAN")[0].innerHTML = "";
-}
-
-/**
- * Fonction permettant de récupérer la valeur d'un cookie
- * @param {String} cname
- * @param {String} defaultValue
- *
- * @return {String}
- */
-function getCookie(cname, defaultValue = 'false') {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i < ca.length; i+=1) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-        c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-        return c.substring(name.length, c.length);
-        }
-    }
-    return defaultValue;
-}
-
-/**
- * Fonction permettant de créer un cookie
- * @param {String} cname
- * @param {String} cvalue
- * @param {Number} exdays
- */
-function setCookie(cname, cvalue, exdays = 30) {
-    const d = new Date();
-    d.setTime(d.getTime() + (exdays*24*60*60*1000));
-    let expires = "expires="+ d.toUTCString();
-    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-}
-
-/**
- * Fonction de (dé)charger le thème accessible
- * @param {String} value
- */
-function setAriaTheme(value) {
-    let body = document.body;
-    if ( value === 'true' ) {
-        let classesString = body.className || "";
-        if (classesString.indexOf("is-accessible") === -1) {
-            body.classList.add("is-accessible");
-        }
-    } else {
-        body.classList.remove("is-accessible");
-    }
-}
-
-/**
- * Fonction de (dé)charger  le thème accessible
- */
-function switchAriaTheme() {
-    let body = document.body;
-
-    body.classList.toggle("is-accessible");
-
-    setCookie('ariatheme', body.classList.contains("is-accessible"));
-}
-
-/**
- * Fonction permettant de switcher de thème clair/sombre
- * @param {Object} e
- */
-function switchTheme(e) {
-    const theme = e.target.checked ? 'dark' : 'light';
-
-    document.documentElement.setAttribute('data-theme', theme);
-    setCookie('theme', theme);
-}
-
-/**
- * Ensemble d'actions effectuées au chargement de la page
- */
-document.addEventListener('DOMContentLoaded', () => {
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-    if ($navbarBurgers.length > 0) {
-    $navbarBurgers.forEach( el => {
-            el.addEventListener('click', () => {
-                const target = el.dataset.target;
-                const $target = document.getElementById(target);
-
-                el.classList.toggle('is-active');
-                $target.classList.toggle('is-active');
-            });
-        });
-    }
-
-    const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
-    if ( switchAriaThemeBtn ) {
-        switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
-    }
-    setAriaTheme(getCookie('ariatheme'));
-
-    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
-    if ( toggleSwitch ) {
-        toggleSwitch.addEventListener('change', switchTheme, false);
-    }
-
-    let currentThemeIsDark = getCookie('theme');
-    if ( currentThemeIsDark === 'false' && window.matchMedia ) {
-        currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
-    if ( toggleSwitch) {
-        toggleSwitch.checked = currentThemeIsDark === 'dark';
-    }
-});

src/app.js

@@ -75,14 +75,6 @@ app.set("views", path.join(__dirname, "../views"));
 app.set("view engine", "ejs");
 
 app.use(express.static(path.join(__dirname, "../public")));
-app.use(
-    "/libs/vue",
-    express.static(path.join(__dirname, "../node_modules/vue/dist"))
-);
-app.use(
-    "/libs/axios",
-    express.static(path.join(__dirname, "../node_modules/axios/dist"))
-);
 
 app.use("/", indexRouter);
 app.use("/mon-compte", monCompteRouter);

src/middleware/Albums.js

@@ -80,7 +80,7 @@ class Albums extends Pages {
             exportFormat = "json",
             sort = "artists_sort",
             order = "asc",
-            artists_sort,
+            artist,
             format,
             year,
             genre,
@@ -92,8 +92,8 @@ class Albums extends Pages {
 
         const where = {};
 
-        if (artists_sort) {
-            where.artists_sort = artists_sort;
+        if (artist) {
+            where["artists.name"] = artist;
         }
         if (format) {
             where["formats.name"] = format;
@@ -191,10 +191,11 @@ class Albums extends Pages {
     async patchOne() {
         const { itemId: _id } = this.req.params;
         const { _id: User } = this.req.user;
-        const album = await AlbumsModel.findOne({
+        const query = {
             _id,
             User,
-        });
+        };
+        const album = await AlbumsModel.findOne(query);
 
         if (!album) {
             throw new ErrorEvent(
@@ -206,9 +207,7 @@ class Albums extends Pages {
 
         const values = await getAlbumDetails(album.discogsId);
 
-        await album.updateOne(values);
-
-        return album;
+        return AlbumsModel.findOneAndUpdate(query, values, { new: true });
     }
 
     /**
@@ -237,7 +236,7 @@ class Albums extends Pages {
      */
     async loadMyCollection() {
         const artists = await Albums.getAllDistincts(
-            "artists_sort",
+            "artists.name",
             this.req.user._id
         );
         const formats = await Albums.getAllDistincts(
@@ -302,7 +301,7 @@ class Albums extends Pages {
             );
         }
 
-        const artists = await Albums.getAllDistincts("artists_sort", userId);
+        const artists = await Albums.getAllDistincts("artists.name", userId);
         const formats = await Albums.getAllDistincts("formats.name", userId);
         const years = await Albums.getAllDistincts("year", userId);
         const genres = await Albums.getAllDistincts("genres", userId);

src/routes/ma-collection.js

@@ -10,7 +10,7 @@ const router = express.Router();
 
 router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
     try {
-        const page = new Albums(req, "mon-compte/ma-collection/index");
+        const page = new Albums(req, "collection");
 
         await page.loadMyCollection();
 

views/components/filters/artist.ejs

@@ -0,0 +1,11 @@
+<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>

views/components/filters/format.ejs

@@ -0,0 +1,11 @@
+<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>

views/components/filters/genre.ejs

@@ -0,0 +1,12 @@
+
+<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>

views/components/filters/index.ejs

@@ -0,0 +1,18 @@
+<div class="filters">
+    <%- include('./artist') %>
+    <%- include('./format') %>
+    <%- include('./sort') %>
+</div>
+
+<div class="filters" v-if="moreFilters">
+    <%- include('./year') %>
+    <%- include('./genre') %>
+    <%- include('./style') %>
+</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>

views/components/filters/sort.ejs

@@ -0,0 +1,15 @@
+<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 (1-9)</option>
+      <option value="year-desc">Année (9-1)</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>
+      <option value="createdAt-asc">Date d'ajout (1-9)</option>
+      <option value="createdAt-desc">Date d'ajout (9-1)</option>
+  </select>
+</div>

views/components/filters/style.ejs

@@ -0,0 +1,11 @@
+<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>

views/components/filters/year.ejs

@@ -0,0 +1,11 @@
+<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>

views/index.ejs

@@ -16,9 +16,8 @@
 
         <link href="/css/main.css" rel="stylesheet" />
 
-        <script src="/libs/axios/axios.min.js"></script>
-        <script src="/libs/vue/vue.global.prod.js"></script>
-        <script src="/js/main.js"></script>
+        <script defer src="/js/libs.js"></script>