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

Lint

Browse source
This commit is contained in:
Damien Broqua 2022-10-28 22:56:04 +02:00
parent 980586d8eb
commit e01f01337c
10 changed files with 450 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
.eslintrc.js
View file

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

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

@ -1,109 +1,108 @@
Vue.createApp({
data() {
return {
q: '',
year: '',
country: '',
format: '',
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',
]
}
"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 ) {
if (this.loading) {
return false;
}
this.loading = true;
let url = `/api/v1/search?q=${this.q}`;
if ( this.year ) {
if (this.year) {
url += `&year=${this.year}`;
}
if ( this.country ) {
if (this.country) {
url += `&country=${this.country}`;
}
if ( this.format ) {
if (this.format) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
const {
results,
} = response.data;
let items = [];
return axios
.get(url)
.then((response) => {
const { results } = response.data;
const items = [];
for (let i = 0 ; i < results.length ; i += 1 ) {
for (let i = 0; i < results.length; i += 1) {
const {
id,
title,
@ -129,7 +128,10 @@ Vue.createApp({
this.items = items;
})
.catch((err) => {
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
showToastr(
err.response?.data?.message ||
"Aucun résultat trouvé :/"
);
})
.finally(() => {
this.loading = false;
@ -139,33 +141,39 @@ Vue.createApp({
this.modalIsVisible = !this.modalIsVisible;
},
loadDetails(discogsId) {
axios.get(`/api/v1/search/${discogsId}`)
.then( response => {
const {
data,
} = response;
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");
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)
axios
.post("/api/v1/albums", this.details)
.then(() => {
window.location.href = '/ma-collection';
window.location.href = "/ma-collection";
})
.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) {
return items.sort();
}
}
}).mount('#ajouter-album');
},
},
}).mount("#ajouter-album");

94
javascripts/collection.js
View file

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

37
javascripts/conctact.js
View file

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

102
javascripts/main.js
View file

@ -1,30 +1,30 @@
const {
protocol,
host
} = window.location;
/* 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) {
let x = document.getElementById("toastr");
if ( message ) {
const x = document.getElementById("toastr");
if (message) {
x.getElementsByTagName("SPAN")[0].innerHTML = message;
}
x.className = `${x.className} show`.replace("sucess", "");
if ( success ) {
if (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
*/
function hideToastr() {
let x = document.getElementById("toastr");
const x = document.getElementById("toastr");
x.className = x.className.replace("show", "");
x.getElementsByTagName("SPAN")[0].innerHTML = "";
@ -37,16 +37,16 @@ function hideToastr() {
*
* @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) {
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) == ' ') {
while (c.charAt(0) === " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
@ -61,9 +61,9 @@ function getCookie(cname, defaultValue = 'false') {
*/
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=/";
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${cname}=${cvalue};${expires};path=/`;
}
/**
@ -71,9 +71,9 @@ function setCookie(cname, cvalue, exdays = 30) {
* @param {String} value
*/
function setAriaTheme(value) {
let body = document.body;
if ( value === 'true' ) {
let classesString = body.className || "";
const { body } = document;
if (value === "true") {
const classesString = body.className || "";
if (classesString.indexOf("is-accessible") === -1) {
body.classList.add("is-accessible");
}
@ -86,11 +86,11 @@ function setAriaTheme(value) {
* Fonction de (dé)charger le thème accessible
*/
function switchAriaTheme() {
let body = document.body;
const { body } = document;
body.classList.toggle("is-accessible");
setCookie('ariatheme', body.classList.contains("is-accessible"));
setCookie("ariatheme", body.classList.contains("is-accessible"));
}
/**
@ -98,46 +98,54 @@ function switchAriaTheme() {
* @param {Object} e
*/
function switchTheme(e) {
const theme = e.target.checked ? 'dark' : 'light';
const theme = e.target.checked ? "dark" : "light";
document.documentElement.setAttribute('data-theme', theme);
setCookie('theme', theme);
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);
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;
$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');
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
if ( switchAriaThemeBtn ) {
if (switchAriaThemeBtn) {
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
}
setAriaTheme(getCookie('ariatheme'));
setAriaTheme(getCookie("ariatheme"));
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
if ( toggleSwitch ) {
toggleSwitch.addEventListener('change', switchTheme, false);
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';
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';
switchTheme({ target: { checked: currentThemeIsDark === "dark" } });
if (toggleSwitch) {
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({
data() {
return {
// eslint-disable-next-line no-undef
email,
// eslint-disable-next-line no-undef
username,
oldPassword: '',
password: '',
passwordConfirm: '',
oldPassword: "",
password: "",
passwordConfirm: "",
loading: false,
}
};
},
methods: {
// eslint-disable-next-line no-unused-vars
async updateProfil(event) {
// try {
// if ( this.password !== this.passwordConfirm ) {
@ -21,6 +24,6 @@ if ( typeof email !== 'undefined' && typeof username !== 'undefined' ) {
// showToastr(err);
// }
},
}
}).mount('#mon-compte');
},
}).mount("#mon-compte");
}

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

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

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

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

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

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