Set # for share on fediverse

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

.eslintrc.js

@@ -1,36 +1,49 @@
 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',]
-      },
-    ],
-  },
-  ignorePatterns: ['public/libs/**/*.js', 'public/js/main.js', 'dist/**'],
-  overrides: [
-    {
-      files: ['**/*.js'],
-      excludedFiles: '*.ejs',
+    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",
+                    "access_token",
+                    "api_url",
+                    "media_ids",
+                    "release_id",
+                ],
+            },
+        ],
+    },
+    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

README.md

@@ -18,7 +18,9 @@ Vous pouvez, si vous le souhaitez héberger l'application sur votre propre serve
 
 ### Prérequis
 
-Il existe 2 méthodes d'installation, soit via docker soit en mode standalone. Peu importe la méthode il vous faudra un compte sur [https://formspree.io/](https://formspree.io/) afin d'avoir une page nous-contacter fonctionnelle.
+Il existe 2 méthodes d'installation, soit via docker soit en mode standalone.
+
+Peu importe la méthode il vous faudra un compte sur [https://formspree.io/](https://formspree.io/) afin d'avoir une page nous-contacter fonctionnelle ou configurer le SMTP tel que défini dans la section [variables d'environnements](#env-file).
 
 Pour la méthode docker il ne vous faudra rien de plus que `docker` et `docker-compose`.
 
@@ -62,7 +64,7 @@ Le site est accessible sur [http://localhost:PORT](http://localhost:PORT).
 
 #### Standalone
 
-Pour la version standalone je vous conseille de faire un script embarquant les variables d'environnement que vous souhaitez modifier :
+Pour la version standalone je vous conseille de faire un script embarquant les variables d'environnement que vous souhaitez modifier ([voir à la fin pour la liste des variables](#env-file)) :
 
 ```bash
 #! /bin/bash
@@ -90,7 +92,7 @@ C'est terminé !
 
 Le site est accessible sur [http://localhost:3001](http://localhost:3001).
 
-:information_source: Information : Vous pouvez, et vous dreviez, également regarder du côté de `systemd`, `pm2` ou encore `supervisor` pour que le service démarre en même temps que votre serveur.
+:information_source: Information : Vous pouvez, et vous devriez, également regarder du côté de `systemd`, `pm2` ou encore `supervisor` pour que le service démarre en même temps que votre serveur.
 
 ### Aller plus loin
 
@@ -184,24 +186,59 @@ server {
 
 Une fois le vhost activé (lien symbolique dans le dossier site-enable) et nginx rechargé votre site sera alors accessible en https.
 
+### Jobs
+
+Par défaut toute les images des albums sont affichées depuis Discogs. Cependant avec les temps les urls deviennent invalides. Pour éviter cela lors de l'ajout d'un album à votre collection un job est créé. Ce job a pour rôle de stocker les images sur un bucket s3.
+
+Pour lancer les jobs il faut mettre en place une tâche cron qui sera éxécutée toute les heures (par exemple).
+
+Exemple de crontab :
+```crontab
+0 * * * * curl 'http://localhost:3001/jobs' \
+    -H 'JOBS_HEADER_KEY: JOBS_HEADER_VALUE' \
+    -H 'Accept: application/json'
+30 * * * * curl 'http://localhost:3001/jobs?state=ERROR' \
+    -H 'JOBS_HEADER_KEY: JOBS_HEADER_VALUE' \
+    -H 'Accept: application/json'
+```
+
+N'oubliez pas de remplacer `localhost:30001`, `JOBS_HEADER_KEY` et `JOBS_HEADER_VALUE` par les bonnes valeurs.
+
+La première ligne permet de parcourir tous les nouveaux jobs alors que la seconde permet de relancer les jobs en erreurs (après 5 tentatives le job est marqué comme définitivement perdu).
+
 ### Fichier .env {#env-file}
 
 Voici la liste des variables configurables :
 
 ```
 NODE_ENV # Environnement dans lequel exécuter le projet (development ou production)
-PORT # Port sur lequel éxécuter le serveur (par défaut 3001)
-MONGODB_URI # Url du serveur mongo (par défaut mongodb://musictopus-db/musictopus)
-SECRET # Hash utilisé pour pour sauvegardé les dessions (par défaut waemaeMe5ahc6ce1chaeKohKa6Io8Eik)
+PORT # Port sur lequel éxécuter le serveur (3001 par défaut)
+MONGODB_URI # Url du serveur mongo (mongodb://musictopus-db/musictopus par défaut)
+SECRET # Hash utilisé pour pour sauvegardé les dessions (waemaeMe5ahc6ce1chaeKohKa6Io8Eik par défault)
 DISCOGS_TOKEN # Token Discogs (vous devez créer un compte sur discogs afin d'en obtenir un gratuitement)
 FORMSPREE_ID # Id du formulaire formspree pour la page "nous-contacter"
 MATOMO_URL # Url vers l'instance matomo (exemple: https://analytics.darkou.fr/)
 MATOMO_ID # Id du site sur votre instance matomo (exemple: 1)
-SITE_NAME # Nom du site (utilisé dans le titre des pages)
+SITE_NAME # Nom du site utilisé dans le titre des pages (MusicTopus par défaut)
+AWS_ACCESS_KEY_ID # Clé d'accès AWS
+AWS_SECRET_ACCESS_KEY # Clé secrète AWS
+S3_ENDPOINT # Url de l'instance aws (s3.fr-par.scw.cloud par défaut)
+S3_SIGNATURE # Version de la signature AWS (s3v4 par défaut)
+S3_BASEFOLDER # Nom du sous dossier dans lequel seront mis les pochettes des albums (dev par défaut)
+S3_BUCKET # Nom du bucket (musictopus par défaut, à changer impérativement si vous voulez que cela fonctionne)
+JOBS_HEADER_KEY # Nom du header utilisé pour l'identification des tâches cron (musictopus par défaut)
+JOBS_HEADER_VALUE # Valeur de la clé (ooYee9xok7eigo2shiePohyoGh1eepew par défaut)
+REGISTRATION_OPEN # true/false en fonction de si vous souhaitez activer ou non l'inscription à votre instance (true par défaut)
+MAIL_METHOD # permet de définir la façon dont les mails de la page contact sont envoyés (formspree ou smtp)
+MAIL_HOST # Adresse du server mail (dams le cas ou MAIL_METHOD est défini sur smtp)
+MAIL_PORT # Port d'écoute du serveur smtp (dams le cas ou MAIL_METHOD est défini sur smtp)
+MAIL_USER # Adresse mail du compte permettant d'envoyer les mails (dams le cas ou MAIL_METHOD est défini sur smtp)
+MAIL_PASSWORD # Mot de passe du compte email (dams le cas ou MAIL_METHOD est défini sur smtp)
+MAIL_TO # Adresse mail du contact qui recevra les messages de la page "nous contacter" (dams le cas ou MAIL_METHOD est défini sur smtp)
+
 ```
 
 ## Contributeurs
 
 - Damien Broqua (développeur principal du projet)
 - Brunus (Logo et fournisseur d'idées :wink: )
-

docker-compose.yml.dev

@@ -3,7 +3,7 @@ version: "2.4"
 services:
   musictopus-www:
     container_name: musictopus-www
-    image: "node:16"
+    image: "node:18"
     restart: always
     user: "node"
     working_dir: /home/node/app
@@ -28,6 +28,21 @@ services:
       MATOMO_URL: ${MATOMO_URL}
       MATOMO_ID: ${MATOMO_ID}
       SITE_NAME: ${SITE_NAME}
+      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      S3_BASEFOLDER: ${S3_BASEFOLDER}
+      S3_BUCKET: ${S3_BUCKET}
+      S3_ENDPOINT: ${S3_ENDPOINT}
+      S3_SIGNATURE: ${S3_SIGNATURE}
+      JOBS_HEADER_KEY: ${JOBS_HEADER_KEY}
+      JOBS_HEADER_VALUE: ${JOBS_HEADER_VALUE}
+      REGISTRATION_OPEN: ${REGISTRATION_OPEN}
+      MAIL_METHOD: ${MAIL_METHOD}
+      MAIL_HOST: ${MAIL_HOST}
+      MAIL_PORT: ${MAIL_PORT}
+      MAIL_USER: ${MAIL_USER}
+      MAIL_PASSWORD: ${MAIL_PASSWORD}
+      MAIL_TO: ${MAIL_TO}
     networks:
       - musictopus
   musictopus-db:

docker-compose.yml.prod

@@ -3,7 +3,7 @@ version: "2.4"
 services:
   musictopus-www:
     container_name: musictopus-www
-    image: "node:16"
+    image: "node:18"
     restart: always
     user: "node"
     working_dir: /home/node/app
@@ -28,6 +28,15 @@ services:
       MATOMO_URL: ${MATOMO_URL}
       MATOMO_ID: ${MATOMO_ID}
       SITE_NAME: ${SITE_NAME}
+      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      S3_BASEFOLDER: ${S3_BASEFOLDER}
+      S3_BUCKET: ${S3_BUCKET}
+      S3_ENDPOINT: ${S3_ENDPOINT}
+      S3_SIGNATURE: ${S3_SIGNATURE}
+      JOBS_HEADER_KEY: ${JOBS_HEADER_KEY}
+      JOBS_HEADER_VALUE: ${JOBS_HEADER_VALUE}
+      REGISTRATION_OPEN: ${REGISTRATION_OPEN}
     networks:
       - musictopus
   musictopus-db:

fontello.json

@@ -0,0 +1,124 @@
+{
+  "name": "icon",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "ca90da02d2c6a3183f2458e4dc416285",
+      "css": "adjust",
+      "code": 59408,
+      "src": "fontawesome"
+    },
+    {
+      "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"
+    }
+  ]
+}

gulpfile.js

@@ -0,0 +1,47 @@
+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/chart.js/dist/chart.umd.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,211 @@
+/* eslint-disable no-undef */
+Vue.createApp({
+    data() {
+        return {
+            // eslint-disable-next-line no-undef
+            share: canPublish,
+            q: "",
+            year: "",
+            country: "",
+            format: "",
+            loading: false,
+            items: [],
+            details: {},
+            modalIsVisible: false,
+            submitting: 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",
+            ],
+        };
+    },
+    created() {
+        window.addEventListener("keydown", this.keyDown);
+    },
+    destroyed() {
+        window.removeEventListener("keydown", this.keyDown);
+    },
+    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,
+                            inCollection,
+                        } = results[i];
+                        items.push({
+                            id,
+                            title,
+                            thumb,
+                            year,
+                            country,
+                            format,
+                            genre,
+                            style,
+                            inCollection,
+                        });
+                    }
+
+                    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() {
+            if (this.submitting) {
+                return true;
+            }
+            this.submitting = true;
+
+            return axios
+                .post(`/api/v1/${action}`, {
+                    album: this.details,
+                    share: this.share,
+                })
+                .then(() => {
+                    window.location.href =
+                        action === "albums"
+                            ? "/ma-collection"
+                            : "/ma-liste-de-souhaits";
+                })
+                .catch((err) => {
+                    this.submitting = false;
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible d'ajouter cet album pour le moment…"
+                    );
+                });
+        },
+        orderedItems(items) {
+            return items.sort();
+        },
+        keyDown(event) {
+            const keycode = event.code;
+
+            if (this.modalIsVisible && keycode === "Escape") {
+                event.preventDefault();
+                this.modalIsVisible = false;
+            }
+        },
+    },
+}).mount("#ajouter-album");

javascripts/collection.js

@@ -0,0 +1,262 @@
+/* eslint-disable no-undef */
+Vue.createApp({
+    data() {
+        return {
+            loading: false,
+            moreFilters: false,
+            items: [],
+            total: 0,
+            // eslint-disable-next-line no-undef
+            page: query.page || 1,
+            limit: 16,
+            totalPages: 1,
+            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
+            userId,
+            // eslint-disable-next-line no-undef
+            vueType,
+            // eslint-disable-next-line no-undef
+            query,
+        };
+    },
+    created() {
+        this.fetch();
+
+        window.addEventListener("keydown", this.keyDown);
+    },
+    destroyed() {
+        window.removeEventListener("keydown", this.keyDown);
+    },
+    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/${action}?page=${this.page}&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)}`;
+            }
+            // INFO: Cas d'une collection partagée
+            if (this.vueType === "public" && this.userId) {
+                url += `&userId=${this.userId}`;
+            }
+
+            axios
+                .get(url)
+                .then((response) => {
+                    this.items = response.data.rows;
+                    this.limit = response.data.limit;
+                    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() {
+            // eslint-disable-next-line no-undef
+            if (vueType !== "private") {
+                return false;
+            }
+            return axios
+                .delete(`/api/v1/${action}/${this.itemId}`)
+                .then(() => {
+                    this.fetch();
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de supprimer cet album"
+                    );
+                })
+                .finally(() => {
+                    this.toggleModal();
+                });
+        },
+        shareCollection() {
+            // eslint-disable-next-line no-undef
+            if (vueType !== "private") {
+                return false;
+            }
+            return 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;
+        },
+        keyDown(event) {
+            const keycode = event.code;
+            if (this.showModalDelete && keycode === "Escape") {
+                event.preventDefault();
+                this.showModalDelete = false;
+            }
+            if (this.showModalShare && keycode === "Escape") {
+                event.preventDefault();
+                this.showModalShare = false;
+            }
+        },
+    },
+}).mount("#collection");