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

187 lines
6.3 KiB
JavaScript
Raw Normal View History

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