Version 1.4 (#67)

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/67

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

@@ -0,0 +1,186 @@
+if (typeof item !== "undefined") {
+    Vue.createApp({
+        data() {
+            return {
+                // eslint-disable-next-line no-undef
+                item,
+                tracklist: [],
+                identifiers: [],
+                modalIsVisible: false,
+                identifiersMode: "preview",
+                identifiersPreviewLength: 16,
+                preview: null,
+                index: null,
+                showModalDelete: false,
+            };
+        },
+        created() {
+            this.setTrackList();
+            this.setIdentifiers();
+
+            window.addEventListener("keydown", this.changeImage);
+        },
+        destroyed() {
+            window.removeEventListener("keydown", this.changeImage);
+        },
+        methods: {
+            setIdentifiers() {
+                this.identifiers = [];
+
+                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) {
+                    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];
+
+                    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,
+                        });
+                    }
+                }
+                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 { index } = item.dataset;
+
+                this.index = Number(index);
+                this.modalIsVisible = true;
+
+                this.setImage();
+            },
+            toggleModal() {
+                this.modalIsVisible = !this.modalIsVisible;
+            },
+            previous() {
+                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.setImage();
+            },
+            changeImage(event) {
+                const direction = event.code;
+
+                if (
+                    this.modalIsVisible &&
+                    ["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !==
+                        -1
+                ) {
+                    switch (direction) {
+                        case "ArrowRight":
+                            return this.next();
+                        case "ArrowLeft":
+                            return this.previous();
+                        default:
+                            this.modalIsVisible = false;
+                            return true;
+                    }
+                }
+
+                return true;
+            },
+            showAllIdentifiers() {
+                this.identifiersMode = "all";
+                this.setIdentifiers();
+            },
+            showLessIdentifiers() {
+                this.identifiersMode = "preview";
+                this.setIdentifiers();
+
+                document
+                    .querySelector("#identifiers")
+                    .scrollIntoView({ behavior: "smooth" });
+            },
+            showConfirmDelete() {
+                this.toggleModalDelete();
+            },
+            toggleModalDelete() {
+                this.showModalDelete = !this.showModalDelete;
+            },
+            updateItem() {
+                showToastr("Mise à jour en cours…", true);
+                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) => {
+                        showToastr(
+                            err.response?.data?.message ||
+                                "Impossible de mettre à jour cet album",
+                            false
+                        );
+                    });
+            },
+            deleteItem() {
+                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"
+                        );
+                    })
+                    .finally(() => {
+                        this.toggleModalDelete();
+                    });
+            },
+            goToArtist() {
+                return "";
+            },
+        },
+    }).mount("#ma-collection-details");
+}