dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Version 1.4.3 #83

Merged
dbroqua merged 19 commits from develop into master 2023-03-22 15:01:28 +01:00
Conversation 0 Commits 19 Files changed 2 +450 -370
10 changed files with 450 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e01f01337c - Show all commits

33
.eslintrc.js
View file

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

182
javascripts/ajouter-un-album.js
View file

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

72
javascripts/collection.js
View file

@ -1,4 +1,4 @@
if ( typeof userId !== 'undefined' ) { if (typeof userId !== "undefined") {
Vue.createApp({ Vue.createApp({
data() { data() {
return { return {
@ -9,16 +9,17 @@ if ( typeof userId !== 'undefined' ) {
page: 1, page: 1,
totalPages: 1, totalPages: 1,
limit: 16, limit: 16,
artist: '', artist: "",
format: '', format: "",
year: '', year: "",
genre: '', genre: "",
style: '', style: "",
sortOrder: 'artists_sort-asc', sortOrder: "artists_sort-asc",
sort: 'artists_sort', sort: "artists_sort",
order: 'asc', order: "asc",
// eslint-disable-next-line no-undef
userId, userId,
} };
}, },
created() { created() {
this.fetch(); this.fetch();
@ -32,42 +33,49 @@ if ( typeof userId !== 'undefined' ) {
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries(); const entries = urlParams.entries();
// eslint-disable-next-line no-restricted-syntax
for (const entry of entries) { for (const entry of entries) {
switch(entry[0]) { const [key, value] = entry;
case 'artists_sort': switch (key) {
this.artist = entry[1]; case "artists_sort":
this.artist = value;
break; break;
default: default:
this[entry[0]] = entry[1]; this[key] = value;
} }
} }
let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if (this.artist) { if (this.artist) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace("&", "%26")}`;
} }
if (this.format) { if (this.format) {
url += `&format=${this.format.replace('&', '%26')}`; url += `&format=${this.format.replace("&", "%26")}`;
} }
if (this.year) { if (this.year) {
url += `&year=${this.year}`; url += `&year=${this.year}`;
} }
if (this.genre) { if (this.genre) {
url += `&genre=${this.genre.replace('&', '%26')}`; url += `&genre=${this.genre.replace("&", "%26")}`;
} }
if (this.style) { if (this.style) {
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace("&", "%26")}`;
} }
axios.get(url) axios
.then( response => { .get(url)
.then((response) => {
this.items = response.data.rows; this.items = response.data.rows;
this.total = response.data.count || 0; this.total = response.data.count || 0;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0); this.totalPages =
parseInt(response.data.count / this.limit, 10) +
(response.data.count % this.limit > 0 ? 1 : 0);
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger cette collection"); showToastr(
err.response?.data?.message ||
"Impossible de charger cette collection"
);
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
@ -76,22 +84,22 @@ if ( typeof userId !== 'undefined' ) {
changeUrl() { changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if (this.artist) { if (this.artist) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace("&", "%26")}`;
} }
if (this.format) { if (this.format) {
url += `&format=${this.format.replace('&', '%26')}`; url += `&format=${this.format.replace("&", "%26")}`;
} }
if (this.year) { if (this.year) {
url += `&year=${this.year}`; url += `&year=${this.year}`;
} }
if (this.genre) { if (this.genre) {
url += `&genre=${this.genre.replace('&', '%26')}`; url += `&genre=${this.genre.replace("&", "%26")}`;
} }
if (this.style) { if (this.style) {
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace("&", "%26")}`;
} }
location.href = url; window.location.href = url;
}, },
next(event) { next(event) {
event.preventDefault(); event.preventDefault();
@ -113,7 +121,7 @@ if ( typeof userId !== 'undefined' ) {
this.changeUrl(); this.changeUrl();
}, },
changeSort() { changeSort() {
const [sort,order] = this.sortOrder.split('-'); const [sort, order] = this.sortOrder.split("-");
this.sort = sort; this.sort = sort;
this.order = order; this.order = order;
this.page = 1; this.page = 1;
@ -127,7 +135,7 @@ if ( typeof userId !== 'undefined' ) {
}, },
showMoreFilters() { showMoreFilters() {
this.moreFilters = !this.moreFilters; this.moreFilters = !this.moreFilters;
} },
} },
}).mount('#collection-publique'); }).mount("#collection-publique");
} }

33
javascripts/conctact.js
View file

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

88
javascripts/main.js
View file

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

17
javascripts/mon-compte/index.js
View file

@ -1,16 +1,19 @@
if ( typeof email !== 'undefined' && typeof username !== 'undefined' ) { if (typeof email !== "undefined" && typeof username !== "undefined") {
Vue.createApp({ Vue.createApp({
data() { data() {
return { return {
// eslint-disable-next-line no-undef
email, email,
// eslint-disable-next-line no-undef
username, username,
oldPassword: '', oldPassword: "",
password: '', password: "",
passwordConfirm: '', passwordConfirm: "",
loading: false, loading: false,
} };
}, },
methods: { methods: {
// eslint-disable-next-line no-unused-vars
async updateProfil(event) { async updateProfil(event) {
// try { // try {
// if ( this.password !== this.passwordConfirm ) { // if ( this.password !== this.passwordConfirm ) {
@ -21,6 +24,6 @@ if ( typeof email !== 'undefined' && typeof username !== 'undefined' ) {
// showToastr(err); // showToastr(err);
// } // }
}, },
} },
}).mount('#mon-compte'); }).mount("#mon-compte");
} }

92
javascripts/mon-compte/ma-collection/details.js
View file

@ -1,17 +1,18 @@
if ( typeof item !== 'undefined' ) { if (typeof item !== "undefined") {
Vue.createApp({ Vue.createApp({
data() { data() {
return { return {
// eslint-disable-next-line no-undef
item, item,
tracklist: [], tracklist: [],
identifiers: [], identifiers: [],
modalIsVisible: false, modalIsVisible: false,
identifiersMode: 'preview', identifiersMode: "preview",
identifiersPreviewLength: 16, identifiersPreviewLength: 16,
preview: null, preview: null,
index: null, index: null,
showModalDelete: false, showModalDelete: false,
} };
}, },
created() { created() {
this.setTrackList(); this.setTrackList();
@ -20,13 +21,17 @@ if ( typeof item !== 'undefined' ) {
window.addEventListener("keydown", this.changeImage); window.addEventListener("keydown", this.changeImage);
}, },
destroyed() { destroyed() {
window.removeEventListener('keydown', this.changeImage); window.removeEventListener("keydown", this.changeImage);
}, },
methods: { methods: {
setIdentifiers() { setIdentifiers() {
this.identifiers = []; this.identifiers = [];
let max = this.identifiersMode == 'preview' && this.item.identifiers.length > this.identifiersPreviewLength ? this.identifiersPreviewLength : this.item.identifiers.length; 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) { for (let i = 0; i < max; i += 1) {
this.identifiers.push(this.item.identifiers[i]); this.identifiers.push(this.item.identifiers[i]);
@ -39,15 +44,10 @@ if ( typeof item !== 'undefined' ) {
tracks: [], tracks: [],
}; };
for (let i = 0; i < this.item.tracklist.length; i += 1) { for (let i = 0; i < this.item.tracklist.length; i += 1) {
const { const { type_, title, position, duration, extraartists } =
type_, this.item.tracklist[i];
title,
position,
duration,
extraartists,
} = this.item.tracklist[i];
if ( type_ === 'heading' ) { if (type_ === "heading") {
if (subTrack.type) { if (subTrack.type) {
this.tracklist.push(subTrack); this.tracklist.push(subTrack);
subTrack = { subTrack = {
@ -64,7 +64,7 @@ if ( typeof item !== 'undefined' ) {
title, title,
position, position,
duration, duration,
extraartists extraartists,
}); });
} }
} }
@ -74,11 +74,12 @@ if ( typeof item !== 'undefined' ) {
this.preview = this.item.images[this.index].uri; this.preview = this.item.images[this.index].uri;
}, },
showGallery(event) { showGallery(event) {
const item = event.target.tagName === 'IMG' ? event.target.parentElement : event.target; const item =
event.target.tagName === "IMG"
? event.target.parentElement
: event.target;
const { const { index } = item.dataset;
index,
} = item.dataset;
this.index = Number(index); this.index = Number(index);
this.modalIsVisible = true; this.modalIsVisible = true;
@ -89,47 +90,62 @@ if ( typeof item !== 'undefined' ) {
this.modalIsVisible = !this.modalIsVisible; this.modalIsVisible = !this.modalIsVisible;
}, },
previous() { previous() {
this.index = this.index > 0 ? this.index - 1 : this.item.images.length -1; this.index =
this.index > 0
? this.index - 1
: this.item.images.length - 1;
this.setImage(); this.setImage();
}, },
next() { next() {
this.index = (this.index +1) === this.item.images.length ? 0 : this.index + 1; this.index =
this.index + 1 === this.item.images.length
? 0
: this.index + 1;
this.setImage(); this.setImage();
}, },
changeImage(event) { changeImage(event) {
const direction = event.code; const direction = event.code;
if ( this.modalIsVisible && ['ArrowRight', 'ArrowLeft', 'Escape'].indexOf(direction) !== -1 ) { if (
this.modalIsVisible &&
["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !==
-1
) {
switch (direction) { switch (direction) {
case 'ArrowRight': case "ArrowRight":
return this.next(); return this.next();
case 'ArrowLeft': case "ArrowLeft":
return this.previous(); return this.previous();
default: default:
this.modalIsVisible = false; this.modalIsVisible = false;
return true; return true;
} }
} }
return true;
}, },
showAllIdentifiers() { showAllIdentifiers() {
this.identifiersMode = 'all'; this.identifiersMode = "all";
this.setIdentifiers(); this.setIdentifiers();
}, },
showLessIdentifiers() { showLessIdentifiers() {
this.identifiersMode = 'preview'; this.identifiersMode = "preview";
this.setIdentifiers(); this.setIdentifiers();
document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' }); document
.querySelector("#identifiers")
.scrollIntoView({ behavior: "smooth" });
}, },
showConfirmDelete() { showConfirmDelete() {
this.toggleModal(); this.toggleModalDelete();
}, },
toggleModal() { toggleModalDelete() {
this.showModalDelete = !this.showModalDelete; this.showModalDelete = !this.showModalDelete;
}, },
updateItem() { updateItem() {
showToastr("Mise à jour en cours…", true); showToastr("Mise à jour en cours…", true);
axios.patch(`/api/v1/albums/${this.item._id}`) axios
.patch(`/api/v1/albums/${this.item._id}`)
.then((res) => { .then((res) => {
showToastr("Mise à jour réalisée avec succès", true); showToastr("Mise à jour réalisée avec succès", true);
this.item = res.data; this.item = res.data;
@ -139,24 +155,32 @@ if ( typeof item !== 'undefined' ) {
this.showLessIdentifiers(); this.showLessIdentifiers();
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false); showToastr(
err.response?.data?.message ||
"Impossible de mettre à jour cet album",
false
);
}); });
}, },
deleteItem() { deleteItem() {
axios.delete(`/api/v1/albums/${this.item._id}`) axios
.delete(`/api/v1/albums/${this.item._id}`)
.then(() => { .then(() => {
window.location.href = "/ma-collection"; window.location.href = "/ma-collection";
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album"); showToastr(
err.response?.data?.message ||
"Impossible de supprimer cet album"
);
}) })
.finally(() => { .finally(() => {
this.toggleModal(); this.toggleModalDelete();
}); });
}, },
goToArtist() { goToArtist() {
return ""; return "";
}, },
}, },
}).mount('#ma-collection-details'); }).mount("#ma-collection-details");
} }

16
javascripts/mon-compte/ma-collection/exporter.js
View file

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

95
javascripts/mon-compte/ma-collection/index.js
View file

@ -1,4 +1,4 @@
if ( typeof isPublicCollection !== 'undefined' ) { if (typeof isPublicCollection !== "undefined") {
Vue.createApp({ Vue.createApp({
data() { data() {
return { return {
@ -9,20 +9,21 @@ if ( typeof isPublicCollection !== 'undefined' ) {
page: 1, page: 1,
totalPages: 1, totalPages: 1,
limit: 16, limit: 16,
artist: '', artist: "",
format: '', format: "",
year: '', year: "",
genre: '', genre: "",
style: '', style: "",
sortOrder: 'artists_sort-asc', sortOrder: "artists_sort-asc",
sort: 'artists_sort', sort: "artists_sort",
order: 'asc', order: "asc",
itemId: null, itemId: null,
showModalDelete: false, showModalDelete: false,
showModalShare: false, showModalShare: false,
shareLink: `${protocol}//${host}/collection/<%= user._id %>`, shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
// eslint-disable-next-line no-undef
isPublicCollection, isPublicCollection,
} };
}, },
created() { created() {
this.fetch(); this.fetch();
@ -36,41 +37,49 @@ if ( typeof isPublicCollection !== 'undefined' ) {
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries(); const entries = urlParams.entries();
// eslint-disable-next-line no-restricted-syntax
for (const entry of entries) { for (const entry of entries) {
switch(entry[0]) { const [key, value] = entry;
case 'artists_sort': switch (key) {
this.artist = entry[1]; case "artists_sort":
this.artist = value;
break; break;
default: default:
this[entry[0]] = entry[1]; this[key] = value;
} }
} }
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if (this.artist) { if (this.artist) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace("&", "%26")}`;
} }
if (this.format) { if (this.format) {
url += `&format=${this.format.replace('&', '%26')}`; url += `&format=${this.format.replace("&", "%26")}`;
} }
if (this.year) { if (this.year) {
url += `&year=${this.year}`; url += `&year=${this.year}`;
} }
if (this.genre) { if (this.genre) {
url += `&genre=${this.genre.replace('&', '%26')}`; url += `&genre=${this.genre.replace("&", "%26")}`;
} }
if (this.style) { if (this.style) {
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace("&", "%26")}`;
} }
axios.get(url) axios
.then( response => { .get(url)
.then((response) => {
this.items = response.data.rows; this.items = response.data.rows;
this.total = response.data.count || 0; this.total = response.data.count || 0;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0); this.totalPages =
parseInt(response.data.count / this.limit, 10) +
(response.data.count % this.limit > 0 ? 1 : 0);
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection"); showToastr(
err.response?.data?.message ||
"Impossible de charger votre collection"
);
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
@ -79,22 +88,22 @@ if ( typeof isPublicCollection !== 'undefined' ) {
changeUrl() { changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`; let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if (this.artist) { if (this.artist) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace("&", "%26")}`;
} }
if (this.format) { if (this.format) {
url += `&format=${this.format.replace('&', '%26')}`; url += `&format=${this.format.replace("&", "%26")}`;
} }
if (this.year) { if (this.year) {
url += `&year=${this.year}`; url += `&year=${this.year}`;
} }
if (this.genre) { if (this.genre) {
url += `&genre=${this.genre.replace('&', '%26')}`; url += `&genre=${this.genre.replace("&", "%26")}`;
} }
if (this.style) { if (this.style) {
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace("&", "%26")}`;
} }
location.href = url; window.location.href = url;
}, },
next(event) { next(event) {
event.preventDefault(); event.preventDefault();
@ -116,7 +125,7 @@ if ( typeof isPublicCollection !== 'undefined' ) {
this.changeUrl(); this.changeUrl();
}, },
changeSort() { changeSort() {
const [sort,order] = this.sortOrder.split('-'); const [sort, order] = this.sortOrder.split("-");
this.sort = sort; this.sort = sort;
this.order = order; this.order = order;
this.page = 1; this.page = 1;
@ -142,37 +151,51 @@ if ( typeof isPublicCollection !== 'undefined' ) {
this.toggleModal(); this.toggleModal();
}, },
deleteItem() { deleteItem() {
axios.delete(`/api/v1/albums/${this.itemId}`) axios
.delete(`/api/v1/albums/${this.itemId}`)
.then(() => { .then(() => {
this.fetch(); this.fetch();
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album"); showToastr(
err.response?.data?.message ||
"Impossible de supprimer cet album"
);
}) })
.finally(() => { .finally(() => {
this.toggleModal(); this.toggleModal();
}); });
}, },
shareCollection() { shareCollection() {
axios.patch(`/api/v1/me`, { axios
.patch(`/api/v1/me`, {
isPublicCollection: !this.isPublicCollection, isPublicCollection: !this.isPublicCollection,
}) })
.then((res) => { .then((res) => {
this.isPublicCollection = res.data.isPublicCollection; this.isPublicCollection = res.data.isPublicCollection;
if (this.isPublicCollection) { if (this.isPublicCollection) {
showToastr("Votre collection est désormais publique", true); showToastr(
"Votre collection est désormais publique",
true
);
} else { } else {
showToastr("Votre collection n'est plus partagée", true); showToastr(
"Votre collection n'est plus partagée",
true
);
} }
}) })
.catch((err) => { .catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album"); showToastr(
err.response?.data?.message ||
"Impossible de supprimer cet album"
);
}) })
.finally(() => { .finally(() => {
this.toggleModalShare(); this.toggleModalShare();
}); });
}, },
} },
}).mount('#ma-collection'); }).mount("#ma-collection");
} }

2
views/pages/mon-compte/ma-collection/details.ejs
View file

@ -169,7 +169,7 @@
</section> </section>
<footer> <footer>
<button class="button is-primary" @click="deleteItem">Supprimer</button> <button class="button is-primary" @click="deleteItem">Supprimer</button>
<button class="button" @click="toggleModal">Annuler</button> <button class="button" @click="toggleModalDelete">Annuler</button>
</footer> </footer>
</div> </div>
</div> </div>