Version 1.4 (#67)
Co-authored-by: dbroqua <contact@darkou.fr> Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/67
This commit is contained in:
Damien Broqua
parent
d03394bee7
commit
1d59ee3b71
22 changed files with 1067 additions and 934 deletions
29
javascripts/mon-compte/index.js
Normal file
29
javascripts/mon-compte/index.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
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: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
async updateProfil(event) {
|
||||
// try {
|
||||
// if ( this.password !== this.passwordConfirm ) {
|
||||
// throw "La confirnation du mot de passe ne correspond pas";
|
||||
// }
|
||||
// } catch(err) {
|
||||
// event.preventDefault();
|
||||
// showToastr(err);
|
||||
// }
|
||||
},
|
||||
},
|
||||
}).mount("#mon-compte");
|
||||
}
|
||||
186
javascripts/mon-compte/ma-collection/details.js
Normal file
186
javascripts/mon-compte/ma-collection/details.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
16
javascripts/mon-compte/ma-collection/exporter.js
Normal file
16
javascripts/mon-compte/ma-collection/exporter.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
format: "xml",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
exportCollection(event) {
|
||||
event.preventDefault();
|
||||
|
||||
window.open(`/api/v1/albums?exportFormat=${this.format}`, "_blank");
|
||||
},
|
||||
},
|
||||
}).mount("#exporter");
|
||||
201
javascripts/mon-compte/ma-collection/index.js
Normal file
201
javascripts/mon-compte/ma-collection/index.js
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
if (typeof isPublicCollection !== "undefined") {
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
moreFilters: false,
|
||||
items: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
limit: 16,
|
||||
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();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.loading = true;
|
||||
this.total = 0;
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const entries = urlParams.entries();
|
||||
|
||||
// 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[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.format) {
|
||||
url += `&format=${this.format.replace("&", "%26")}`;
|
||||
}
|
||||
if (this.year) {
|
||||
url += `&year=${this.year}`;
|
||||
}
|
||||
if (this.genre) {
|
||||
url += `&genre=${this.genre.replace("&", "%26")}`;
|
||||
}
|
||||
if (this.style) {
|
||||
url += `&style=${this.style.replace("&", "%26")}`;
|
||||
}
|
||||
|
||||
axios
|
||||
.get(url)
|
||||
.then((response) => {
|
||||
this.items = response.data.rows;
|
||||
this.total = response.data.count || 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"
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
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.format) {
|
||||
url += `&format=${this.format.replace("&", "%26")}`;
|
||||
}
|
||||
if (this.year) {
|
||||
url += `&year=${this.year}`;
|
||||
}
|
||||
if (this.genre) {
|
||||
url += `&genre=${this.genre.replace("&", "%26")}`;
|
||||
}
|
||||
if (this.style) {
|
||||
url += `&style=${this.style.replace("&", "%26")}`;
|
||||
}
|
||||
|
||||
window.location.href = url;
|
||||
},
|
||||
next(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page += 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
previous(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page -= 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
goTo(page) {
|
||||
this.page = page;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
changeSort() {
|
||||
const [sort, order] = this.sortOrder.split("-");
|
||||
this.sort = sort;
|
||||
this.order = order;
|
||||
this.page = 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
changeFilter() {
|
||||
this.page = 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
showMoreFilters() {
|
||||
this.moreFilters = !this.moreFilters;
|
||||
},
|
||||
toggleModal() {
|
||||
this.showModalDelete = !this.showModalDelete;
|
||||
},
|
||||
toggleModalShare() {
|
||||
this.showModalShare = !this.showModalShare;
|
||||
},
|
||||
showConfirmDelete(itemId) {
|
||||
this.itemId = itemId;
|
||||
this.toggleModal();
|
||||
},
|
||||
deleteItem() {
|
||||
axios
|
||||
.delete(`/api/v1/albums/${this.itemId}`)
|
||||
.then(() => {
|
||||
this.fetch();
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de supprimer cet album"
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.toggleModal();
|
||||
});
|
||||
},
|
||||
shareCollection() {
|
||||
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
|
||||
);
|
||||
} else {
|
||||
showToastr(
|
||||
"Votre collection n'est plus partagée",
|
||||
true
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de supprimer cet album"
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.toggleModalShare();
|
||||
});
|
||||
},
|
||||
},
|
||||
}).mount("#ma-collection");
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue