diff --git a/javascripts/collection.js b/javascripts/collection.js index beed2c6..d9a24e0 100644 --- a/javascripts/collection.js +++ b/javascripts/collection.js @@ -1,141 +1,219 @@ -if (typeof userId !== "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", +Vue.createApp({ + data() { + return { + loading: false, + moreFilters: false, + items: [], + total: 0, + // eslint-disable-next-line no-undef + page: query.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, + // 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", 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() { - this.fetch(); + 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; }, - methods: { - fetch() { - this.loading = true; - this.total = 0; + next(event) { + event.preventDefault(); - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const entries = urlParams.entries(); + this.page += 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[key] = value; - } - } + this.changeUrl(); + }, + previous(event) { + event.preventDefault(); - let url = `/api/v1/albums?userId=${this.userId}&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")}`; - } + this.page -= 1; - 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) => { + 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() { + 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( - err.response?.data?.message || - "Impossible de charger cette collection" + "Votre collection est désormais publique", + true ); - }) - .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; - }, + } 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("#collection-publique"); -} + }, +}).mount("#collection"); \ No newline at end of file diff --git a/javascripts/mon-compte/ma-collection/index.js b/javascripts/mon-compte/ma-collection/index.js deleted file mode 100644 index 40d263f..0000000 --- a/javascripts/mon-compte/ma-collection/index.js +++ /dev/null @@ -1,215 +0,0 @@ -if (typeof isPublicCollection !== "undefined") { - Vue.createApp({ - data() { - return { - loading: false, - moreFilters: false, - items: [], - total: 0, - // eslint-disable-next-line no-undef - page: query.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, - // 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", - order: "asc", - }; - - // 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; - }); - }, - 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"); -} diff --git a/src/routes/ma-collection.js b/src/routes/ma-collection.js index 9c217bf..ddf5527 100644 --- a/src/routes/ma-collection.js +++ b/src/routes/ma-collection.js @@ -10,7 +10,7 @@ const router = express.Router(); router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => { try { - const page = new Albums(req, "mon-compte/ma-collection/index"); + const page = new Albums(req, "collection"); await page.loadMyCollection(); diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs index ec2e051..51974c8 100644 --- a/views/pages/collection.ejs +++ b/views/pages/collection.ejs @@ -1,24 +1,46 @@ -
+<% + const pageType = page.username ? 'public' : 'private'; +%> + +

- Collection de <%= page.username %> + <% if ( pageType === 'private' ) { + __append('Ma collection '); + } else { + __append(`Collection de ${page.username}`); + } %>

+ <% if ( pageType === 'private' ) { %> + + Voir ma collection partagée + + <% } %> <%- include('../components/filters/index') %> -
+
Chargement des données en cours…
-
+
- {{ item.artists_sort}} - {{ item.title }} + <% if ( pageType === 'private' ) { %> + {{ item.artists_sort}} - {{ item.title }} + + <% } else { %> + {{ item.artists_sort}} - {{ item.title }} + <% } %>
- + <% if ( pageType === 'private' ) { %> + + <% } else { %> + + <% } %>
Année : {{ item.year }} @@ -51,12 +73,12 @@