1.4.2 #78
16 changed files with 432 additions and 639 deletions
|
|
@ -1,141 +1,219 @@
|
||||||
if (typeof userId !== "undefined") {
|
Vue.createApp({
|
||||||
Vue.createApp({
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
loading: false,
|
||||||
loading: false,
|
moreFilters: false,
|
||||||
moreFilters: false,
|
items: [],
|
||||||
items: [],
|
total: 0,
|
||||||
total: 0,
|
// eslint-disable-next-line no-undef
|
||||||
page: 1,
|
page: query.page || 1,
|
||||||
totalPages: 1,
|
totalPages: 1,
|
||||||
limit: 16,
|
limit: 16,
|
||||||
artist: "",
|
artist: "",
|
||||||
format: "",
|
format: "",
|
||||||
year: "",
|
year: "",
|
||||||
genre: "",
|
genre: "",
|
||||||
style: "",
|
style: "",
|
||||||
sortOrder: "artists_sort-asc",
|
sortOrder: "artists_sort-asc",
|
||||||
|
sort: "artists_sort",
|
||||||
|
order: "asc",
|
||||||
|
itemId: null,
|
||||||
|
showModalDelete: false,
|
||||||
|
showModalShare: false,
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
shareLink: `${protocol}//${host}/collection/${userId}`,
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
isPublicCollection,
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
query,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
|
||||||
|
const sortOrder = {
|
||||||
sort: "artists_sort",
|
sort: "artists_sort",
|
||||||
order: "asc",
|
order: "asc",
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
userId,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 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:
|
||||||
|
if (["order", "sort"].indexOf(key) !== -1) {
|
||||||
|
sortOrder[key] = value;
|
||||||
|
}
|
||||||
|
this[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`;
|
||||||
|
|
||||||
|
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;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
created() {
|
changeUrl() {
|
||||||
this.fetch();
|
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;
|
||||||
},
|
},
|
||||||
methods: {
|
next(event) {
|
||||||
fetch() {
|
event.preventDefault();
|
||||||
this.loading = true;
|
|
||||||
this.total = 0;
|
|
||||||
|
|
||||||
const queryString = window.location.search;
|
this.page += 1;
|
||||||
const urlParams = new URLSearchParams(queryString);
|
|
||||||
const entries = urlParams.entries();
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
this.changeUrl();
|
||||||
for (const entry of entries) {
|
},
|
||||||
const [key, value] = entry;
|
previous(event) {
|
||||||
switch (key) {
|
event.preventDefault();
|
||||||
case "artists_sort":
|
|
||||||
this.artist = value;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this[key] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
this.page -= 1;
|
||||||
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
|
this.changeUrl();
|
||||||
.get(url)
|
},
|
||||||
.then((response) => {
|
goTo(page) {
|
||||||
this.items = response.data.rows;
|
this.page = page;
|
||||||
this.total = response.data.count || 0;
|
|
||||||
this.totalPages =
|
this.changeUrl();
|
||||||
parseInt(response.data.count / this.limit, 10) +
|
},
|
||||||
(response.data.count % this.limit > 0 ? 1 : 0);
|
changeSort() {
|
||||||
})
|
const [sort, order] = this.sortOrder.split("-");
|
||||||
.catch((err) => {
|
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() {
|
||||||
|
if ( vueType === 'private' ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
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() {
|
||||||
|
if ( vueType === 'private' ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
axios
|
||||||
|
.patch(`/api/v1/me`, {
|
||||||
|
isPublicCollection: !this.isPublicCollection,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.isPublicCollection = res.data.isPublicCollection;
|
||||||
|
|
||||||
|
if (this.isPublicCollection) {
|
||||||
showToastr(
|
showToastr(
|
||||||
err.response?.data?.message ||
|
"Votre collection est désormais publique",
|
||||||
"Impossible de charger cette collection"
|
true
|
||||||
);
|
);
|
||||||
})
|
} else {
|
||||||
.finally(() => {
|
showToastr(
|
||||||
this.loading = false;
|
"Votre collection n'est plus partagée",
|
||||||
});
|
true
|
||||||
},
|
);
|
||||||
changeUrl() {
|
}
|
||||||
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
})
|
||||||
if (this.artist) {
|
.catch((err) => {
|
||||||
url += `&artists_sort=${this.artist.replace("&", "%26")}`;
|
showToastr(
|
||||||
}
|
err.response?.data?.message ||
|
||||||
if (this.format) {
|
"Impossible de supprimer cet album"
|
||||||
url += `&format=${this.format.replace("&", "%26")}`;
|
);
|
||||||
}
|
})
|
||||||
if (this.year) {
|
.finally(() => {
|
||||||
url += `&year=${this.year}`;
|
this.toggleModalShare();
|
||||||
}
|
});
|
||||||
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;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}).mount("#collection-publique");
|
},
|
||||||
}
|
}).mount("#collection");
|
||||||
|
|
@ -38,14 +38,21 @@ if (typeof item !== "undefined") {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setTrackList() {
|
setTrackList() {
|
||||||
|
this.tracklist = [];
|
||||||
let subTrack = {
|
let subTrack = {
|
||||||
type: null,
|
type: null,
|
||||||
title: null,
|
title: null,
|
||||||
tracks: [],
|
tracks: [],
|
||||||
};
|
};
|
||||||
for (let i = 0; i < this.item.tracklist.length; i += 1) {
|
for (let i = 0; i < this.item.tracklist.length; i += 1) {
|
||||||
const { type_, title, position, duration, extraartists } =
|
const {
|
||||||
this.item.tracklist[i];
|
type_,
|
||||||
|
title,
|
||||||
|
position,
|
||||||
|
duration,
|
||||||
|
artists,
|
||||||
|
extraartists,
|
||||||
|
} = this.item.tracklist[i];
|
||||||
|
|
||||||
if (type_ === "heading") {
|
if (type_ === "heading") {
|
||||||
if (subTrack.type) {
|
if (subTrack.type) {
|
||||||
|
|
@ -65,6 +72,7 @@ if (typeof item !== "undefined") {
|
||||||
position,
|
position,
|
||||||
duration,
|
duration,
|
||||||
extraartists,
|
extraartists,
|
||||||
|
artists,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,201 +0,0 @@
|
||||||
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/${userId}`,
|
|
||||||
// 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");
|
|
||||||
}
|
|
||||||
|
|
@ -5,13 +5,13 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node ./dist/bin/www",
|
"start": "node ./dist/bin/www",
|
||||||
"run:all": "npm-run-all build sass uglify start",
|
"run:all": "npm-run-all build sass uglify start",
|
||||||
"watch": "nodemon -e js,scss",
|
"watch": "npx nodemon -e js,scss",
|
||||||
"sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
|
"sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
|
||||||
"uglify": "npx gulp",
|
"uglify": "npx gulp",
|
||||||
"prebuild": "rimraf dist",
|
"prebuild": "rimraf dist",
|
||||||
"build": "babel ./src --out-dir dist --copy-files",
|
"build": "npx babel ./src --out-dir dist --copy-files",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
"prepare": "husky install"
|
"prepare": "npx husky install"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "16.x",
|
"node": "16.x",
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
"vue": "^3.2.31"
|
"vue": "^3.2.31"
|
||||||
},
|
},
|
||||||
"nodemonConfig": {
|
"nodemonConfig": {
|
||||||
"exec": "yarn run:all",
|
"exec": "npm run run:all",
|
||||||
"watch": [
|
"watch": [
|
||||||
"src/*",
|
"src/*",
|
||||||
"sass/*",
|
"sass/*",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ const router = express.Router();
|
||||||
|
|
||||||
router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||||
try {
|
try {
|
||||||
const page = new Albums(req, "mon-compte/ma-collection/index");
|
const page = new Albums(req, "collection");
|
||||||
|
|
||||||
await page.loadMyCollection();
|
await page.loadMyCollection();
|
||||||
|
|
||||||
|
|
|
||||||
11
views/components/filters/artist.ejs
Normal file
11
views/components/filters/artist.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="artist">Artiste</label>
|
||||||
|
<select id="artist" v-model="artist" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.artists.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
11
views/components/filters/format.ejs
Normal file
11
views/components/filters/format.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="format">Format</label>
|
||||||
|
<select id="format" v-model="format" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.formats.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
12
views/components/filters/genre.ejs
Normal file
12
views/components/filters/genre.ejs
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="genre">Genre</label>
|
||||||
|
<select id="genre" v-model="genre" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.genres.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
18
views/components/filters/index.ejs
Normal file
18
views/components/filters/index.ejs
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div class="filters">
|
||||||
|
<%- include('./artist') %>
|
||||||
|
<%- include('./format') %>
|
||||||
|
<%- include('./sort') %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filters" v-if="moreFilters">
|
||||||
|
<%- include('./year') %>
|
||||||
|
<%- include('./genre') %>
|
||||||
|
<%- include('./style') %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span @click="showMoreFilters" class="showMoreFilters">
|
||||||
|
<template v-if="!moreFilters">Voir plus de filtres</template>
|
||||||
|
<template v-if="moreFilters">Voir moins de filtres</template>
|
||||||
|
<i class="icon-left-open down" v-if="!moreFilters"></i>
|
||||||
|
<i class="icon-left-open up" v-if="moreFilters"></i>
|
||||||
|
</span>
|
||||||
15
views/components/filters/sort.ejs
Normal file
15
views/components/filters/sort.ejs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="sortOrder">Trier par</label>
|
||||||
|
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
||||||
|
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
||||||
|
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
||||||
|
<option value="year-asc">Année (1-9)</option>
|
||||||
|
<option value="year-desc">Année (9-1)</option>
|
||||||
|
<option value="country-asc">Pays (A-Z)</option>
|
||||||
|
<option value="country-desc">Pays (Z-A)</option>
|
||||||
|
<option value="formats.name-asc">Format (A-Z)</option>
|
||||||
|
<option value="formats.name-desc">Format (Z-A)</option>
|
||||||
|
<option value="createdAt-asc">Date d'ajout (1-9)</option>
|
||||||
|
<option value="createdAt-desc">Date d'ajout (9-1)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
11
views/components/filters/style.ejs
Normal file
11
views/components/filters/style.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="style">Style</label>
|
||||||
|
<select id="style" v-model="style" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.styles.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
11
views/components/filters/year.ejs
Normal file
11
views/components/filters/year.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="format">Année</label>
|
||||||
|
<select id="format" v-model="year" @change="changeFilter">
|
||||||
|
<option value="">Toutes</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.years.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<main class="layout-maxed ajouter-un-album" id="ajouter-album">
|
<main class="layout-maxed ajouter-un-album" id="ajouter-album">
|
||||||
<h1>Ajouter un album</h1>
|
<h1>Ajouter un album</h1>
|
||||||
<form @submit="search">
|
<form @submit="search">
|
||||||
<div class="grid sm:grid-cols-2">
|
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<label for="q">Nom de l'album ou code barre</label>
|
<label for="q">Nom de l'album ou code barre</label>
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
|
|
@ -87,7 +87,14 @@
|
||||||
<hr />
|
<hr />
|
||||||
</div>
|
</div>
|
||||||
<ol class="ml-4">
|
<ol class="ml-4">
|
||||||
<li v-for="track in details.tracklist">{{ track.title }} ({{track.duration}})</li>
|
<li v-for="track in details.tracklist">
|
||||||
|
{{ track.title }} ({{track.duration}})
|
||||||
|
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
|
||||||
|
<li v-for="extra in track.artists" class=" ml-4">
|
||||||
|
<small>{{extra.role}} : {{extra.name}}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -129,10 +136,19 @@
|
||||||
<div class="grid grid-cols-2 gap-10">
|
<div class="grid grid-cols-2 gap-10">
|
||||||
<div>
|
<div>
|
||||||
<strong>Format</strong>
|
<strong>Format</strong>
|
||||||
<br />
|
<ul class="ml-4">
|
||||||
<span v-for="(format, index) in details.formats">
|
<li v-for="(format) in details.formats">
|
||||||
{{format.name}}<template v-if="index < details.formats.length - 1">, </template>
|
{{format.name}}
|
||||||
</span>
|
<template v-if="format.text">
|
||||||
|
- <i>{{format.text}}</i>
|
||||||
|
</template>
|
||||||
|
<template v-if="format.descriptions && format.descriptions.length > 0">
|
||||||
|
(<span v-for="(description, index) in format.descriptions">
|
||||||
|
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
||||||
|
</span>)
|
||||||
|
</template>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,46 @@
|
||||||
<main class="layout-maxed collection" id="collection-publique">
|
<%
|
||||||
|
const pageType = page.username ? 'public' : 'private';
|
||||||
|
%>
|
||||||
|
|
||||||
|
<main class="layout-maxed collection" id="collection">
|
||||||
<h1>
|
<h1>
|
||||||
Collection de <%= page.username %>
|
<% if ( pageType === 'private' ) {
|
||||||
|
__append('Ma collection <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>');
|
||||||
|
} else {
|
||||||
|
__append(`Collection de ${page.username}`);
|
||||||
|
} %>
|
||||||
</h1>
|
</h1>
|
||||||
|
<% if ( pageType === 'private' ) { %>
|
||||||
|
<a :href="shareLink" v-if="isPublicCollection" target="_blank">
|
||||||
|
<i class="icon-share"></i> Voir ma collection partagée
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
<div class="filters">
|
<%- include('../components/filters/index') %>
|
||||||
<div class="field">
|
|
||||||
<label for="artist">Artiste</label>
|
|
||||||
<select id="artist" v-model="artist" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.artists.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="format">Format</label>
|
|
||||||
<select id="format" v-model="format" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.formats.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="sortOrder">Trier par</label>
|
|
||||||
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
|
||||||
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
|
||||||
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
|
||||||
<option value="year-asc">Année (A-Z)</option>
|
|
||||||
<option value="year-desc">Année (Z-A)</option>
|
|
||||||
<option value="country-asc">Pays (A-Z)</option>
|
|
||||||
<option value="country-desc">Pays (Z-A)</option>
|
|
||||||
<option value="formats.name-asc">Format (A-Z)</option>
|
|
||||||
<option value="formats.name-desc">Format (Z-A)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filters" v-if="moreFilters">
|
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
<div class="field">
|
|
||||||
<label for="format">Année</label>
|
|
||||||
<select id="format" v-model="year" @change="changeFilter">
|
|
||||||
<option value="">Toutes</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.years.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="genre">Genre</label>
|
|
||||||
<select id="genre" v-model="genre" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.genres.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="style">Style</label>
|
|
||||||
<select id="style" v-model="style" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.styles.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span @click="showMoreFilters" class="showMoreFilters">
|
|
||||||
<template v-if="!moreFilters">Voir plus de filtres</template>
|
|
||||||
<template v-if="moreFilters">Voir moins de filtres</template>
|
|
||||||
<i class="icon-left-open down" v-if="!moreFilters"></i>
|
|
||||||
<i class="icon-left-open up" v-if="moreFilters"></i>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
|
||||||
<div class="loader" v-if="loading">
|
<div class="loader" v-if="loading">
|
||||||
<div class="animation"></div>
|
<div class="animation"></div>
|
||||||
<div>
|
<div>
|
||||||
Chargement des données en cours…
|
Chargement des données en cours…
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
{{ item.artists_sort}} - {{ item.title }}
|
<% if ( pageType === 'private' ) { %>
|
||||||
|
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
|
||||||
|
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|
||||||
|
<% } else { %>
|
||||||
|
{{ item.artists_sort}} - {{ item.title }}
|
||||||
|
<% } %>
|
||||||
</span>
|
</span>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
<div>
|
<div>
|
||||||
<img :src="item.thumb" :alt="item.title" />
|
<% if ( pageType === 'private' ) { %>
|
||||||
|
<a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
|
||||||
|
<% } else { %>
|
||||||
|
<img :src="item.thumb" :alt="item.title" />
|
||||||
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-3">
|
<div class="md:col-span-3">
|
||||||
<span><strong>Année :</strong> {{ item.year }}</span>
|
<span><strong>Année :</strong> {{ item.year }}</span>
|
||||||
|
|
@ -130,12 +73,12 @@
|
||||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
||||||
<ul class="pagination-list">
|
<ul class="pagination-list">
|
||||||
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
||||||
<template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
|
<template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
|
||||||
<li>
|
<li>
|
||||||
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
|
<a class="pagination-link" :class="{'is-current': p === Number(page)}" @click="goTo(p)" :aria-label="'Aller à la page '+p">{{ p }}</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
|
<template v-if="(Number(page) - 3 === p && Number(page) - 2 > 1) || (Number(page) + 2 === p && Number(page) + 2 < totalPages - 1)">
|
||||||
<li>
|
<li>
|
||||||
<a class="pagination-link is-disabled">…</a>
|
<a class="pagination-link is-disabled">…</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -143,8 +86,64 @@
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<% if ( pageType === 'private' ) { %>
|
||||||
|
<div class="modal" :class="{'is-visible': showModalDelete}">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header></header>
|
||||||
|
<section>
|
||||||
|
Êtes-vous sûr de vouloir supprimer cet album ?
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<button class="button is-primary" @click="deleteItem">Supprimer</button>
|
||||||
|
<button class="button" @click="toggleModal">Annuler</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal" :class="{'is-visible': showModalShare}">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header>
|
||||||
|
Partager ma collection
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<template v-if="!isPublicCollection">
|
||||||
|
Votre collection sera visible de toute personne disposant du lien suivant :
|
||||||
|
<br />
|
||||||
|
<a :href="shareLink" target="_blank">{{shareLink}}</a>
|
||||||
|
<br />
|
||||||
|
Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
|
||||||
|
<br />
|
||||||
|
Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
|
||||||
|
</template>
|
||||||
|
<template v-if="isPublicCollection">
|
||||||
|
Vous êtes sur le point de rendre votre collection privée.
|
||||||
|
<br />
|
||||||
|
Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
|
||||||
|
<br />
|
||||||
|
Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
|
||||||
|
</template>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
|
||||||
|
<button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
|
||||||
|
<button class="button" @click="toggleModalShare">Annuler</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const vueType = "<%= pageType %>";
|
||||||
|
const query = <%- JSON.stringify(query) %>;
|
||||||
|
<% if ( pageType === 'private' ) { %>
|
||||||
|
const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
|
||||||
|
const userId = "<%= user._id %>";
|
||||||
|
<% } else { %>
|
||||||
const userId = "<%= params.userId %>";
|
const userId = "<%= params.userId %>";
|
||||||
|
const isPublicCollection = false;
|
||||||
|
<% } %>
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -20,16 +20,21 @@
|
||||||
<div>
|
<div>
|
||||||
<template v-for="album in tracklist">
|
<template v-for="album in tracklist">
|
||||||
<strong v-if="album.title">{{album.title}}</strong>
|
<strong v-if="album.title">{{album.title}}</strong>
|
||||||
<ol class="ml-4">
|
<ul>
|
||||||
<li v-for="track in album.tracks">
|
<li v-for="(track, index) in album.tracks" class="ml-4">
|
||||||
{{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
|
{{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
|
||||||
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden ml-4">
|
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
|
||||||
<li v-for="extra in track.extraartists">
|
<li v-for="extra in track.artists" class=" ml-4">
|
||||||
|
<small>{{extra.name}}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden">
|
||||||
|
<li v-for="extra in track.extraartists" class=" ml-4">
|
||||||
<small>{{extra.role}} : {{extra.name}}</small>
|
<small>{{extra.role}} : {{extra.name}}</small>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
|
|
|
||||||
|
|
@ -1,201 +0,0 @@
|
||||||
<main class="layout-maxed collection" id="ma-collection">
|
|
||||||
<h1>
|
|
||||||
Ma collection
|
|
||||||
<i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
|
|
||||||
</h1>
|
|
||||||
<a :href="shareLink" v-if="isPublicCollection" target="_blank">
|
|
||||||
<i class="icon-share"></i> Voir ma collection partagée
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="filters">
|
|
||||||
<div class="field">
|
|
||||||
<label for="artist">Artiste</label>
|
|
||||||
<select id="artist" v-model="artist" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.artists.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="format">Format</label>
|
|
||||||
<select id="format" v-model="format" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.formats.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="sortOrder">Trier par</label>
|
|
||||||
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
|
||||||
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
|
||||||
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
|
||||||
<option value="year-asc">Année (A-Z)</option>
|
|
||||||
<option value="year-desc">Année (Z-A)</option>
|
|
||||||
<option value="country-asc">Pays (A-Z)</option>
|
|
||||||
<option value="country-desc">Pays (Z-A)</option>
|
|
||||||
<option value="formats.name-asc">Format (A-Z)</option>
|
|
||||||
<option value="formats.name-desc">Format (Z-A)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filters" v-if="moreFilters">
|
|
||||||
<div class="field">
|
|
||||||
<label for="format">Année</label>
|
|
||||||
<select id="format" v-model="year" @change="changeFilter">
|
|
||||||
<option value="">Toutes</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.years.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="genre">Genre</label>
|
|
||||||
<select id="genre" v-model="genre" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.genres.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="style">Style</label>
|
|
||||||
<select id="style" v-model="style" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.styles.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span @click="showMoreFilters" class="showMoreFilters">
|
|
||||||
<template v-if="!moreFilters">Voir plus de filtres</template>
|
|
||||||
<template v-if="moreFilters">Voir moins de filtres</template>
|
|
||||||
<i class="icon-left-open down" v-if="!moreFilters"></i>
|
|
||||||
<i class="icon-left-open up" v-if="moreFilters"></i>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
|
||||||
<div class="loader" v-if="loading">
|
|
||||||
<div class="animation"></div>
|
|
||||||
<div>
|
|
||||||
Chargement des données en cours…
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
|
||||||
<span class="title">
|
|
||||||
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
|
|
||||||
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|
|
||||||
</span>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
|
||||||
<div>
|
|
||||||
<a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
|
|
||||||
</div>
|
|
||||||
<div class="md:col-span-3">
|
|
||||||
<span><strong>Année :</strong> {{ item.year }}</span>
|
|
||||||
<br />
|
|
||||||
<span><strong>Pays :</strong> {{ item.country }}</span>
|
|
||||||
<br />
|
|
||||||
<span>
|
|
||||||
<strong>Format : </strong>
|
|
||||||
<span v-for="(format, index) in item.formats">
|
|
||||||
{{ format.name }}
|
|
||||||
<template v-if="format.descriptions">
|
|
||||||
(<template v-for="(description, j) in format.descriptions">
|
|
||||||
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
|
|
||||||
</template>)
|
|
||||||
</template>
|
|
||||||
<template v-if="index < item.formats.length - 1">, </template>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<br />
|
|
||||||
<span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
|
|
||||||
<br />
|
|
||||||
<span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="total">
|
|
||||||
<strong>Nombre total d'éléments : </strong>{{total}}
|
|
||||||
</div>
|
|
||||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
|
||||||
<ul class="pagination-list">
|
|
||||||
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
|
||||||
<template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
<template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link is-disabled">…</a>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="modal" :class="{'is-visible': showModalDelete}">
|
|
||||||
<div class="modal-background"></div>
|
|
||||||
<div class="modal-card">
|
|
||||||
<header></header>
|
|
||||||
<section>
|
|
||||||
Êtes-vous sûr de vouloir supprimer cet album ?
|
|
||||||
</section>
|
|
||||||
<footer>
|
|
||||||
<button class="button is-primary" @click="deleteItem">Supprimer</button>
|
|
||||||
<button class="button" @click="toggleModal">Annuler</button>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal" :class="{'is-visible': showModalShare}">
|
|
||||||
<div class="modal-background"></div>
|
|
||||||
<div class="modal-card">
|
|
||||||
<header>
|
|
||||||
Partager ma collection
|
|
||||||
</header>
|
|
||||||
<section>
|
|
||||||
<template v-if="!isPublicCollection">
|
|
||||||
Votre collection sera visible de toute personne disposant du lien suivant :
|
|
||||||
<br />
|
|
||||||
<a :href="shareLink" target="_blank">{{shareLink}}</a>
|
|
||||||
<br />
|
|
||||||
Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
|
|
||||||
<br />
|
|
||||||
Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
|
|
||||||
</template>
|
|
||||||
<template v-if="isPublicCollection">
|
|
||||||
Vous êtes sur le point de rendre votre collection privée.
|
|
||||||
<br />
|
|
||||||
Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
|
|
||||||
<br />
|
|
||||||
Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
|
|
||||||
</template>
|
|
||||||
</section>
|
|
||||||
<footer>
|
|
||||||
<button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
|
|
||||||
<button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
|
|
||||||
<button class="button" @click="toggleModalShare">Annuler</button>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
|
|
||||||
const userId = "<%= user._id %>";
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in a new issue