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

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,65 +21,65 @@ 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]);
}
},
setTrackList() {
let subTrack = {
type: null,
title: null,
tracks: [],
};
for (let i = 0 ; i < this.item.tracklist.length ; i += 1 ) {
const {
type_,
title,
position,
duration,
extraartists,
} = this.item.tracklist[i];
type: null,
title: null,
tracks: [],
};
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 ) {
this.tracklist.push(subTrack);
subTrack = {
type: null,
title: null,
tracks: [],
};
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,
});
}
subTrack.type = type_;
subTrack.title = title;
} else {
subTrack.tracks.push({
title,
position,
duration,
extraartists
});
}
}
this.tracklist.push(subTrack);
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 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");
}

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");

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`, {
isPublicCollection: !this.isPublicCollection,
})
.then( (res) => {
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);
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");
}