From 2389d7d73123dd31aa4248ea79952c0917639eef Mon Sep 17 00:00:00 2001 From: Damien Broqua Date: Sun, 19 Mar 2023 10:41:59 +0100 Subject: [PATCH] 1.4.2 (#78) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #68 - Unifier les vues pour la liste des albums - #77 - Je suis capable de trier ma collection par date d'ajout - #74 - Lors du changement de page on connait l'ordre de tri - #73 - Savoir sur quelle page on est - #76 - Avoir plus de détails sur le support physique sur la modale d'ajout - #75 - Numérotation de la tracklist Co-authored-by: dbroqua Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/78 --- javascripts/collection.js | 336 +++++++++++------- .../mon-compte/ma-collection/details.js | 12 +- javascripts/mon-compte/ma-collection/index.js | 201 ----------- package.json | 8 +- src/routes/ma-collection.js | 2 +- views/components/filters/artist.ejs | 11 + views/components/filters/format.ejs | 11 + views/components/filters/genre.ejs | 12 + views/components/filters/index.ejs | 18 + views/components/filters/sort.ejs | 15 + views/components/filters/style.ejs | 11 + views/components/filters/year.ejs | 11 + views/pages/ajouter-un-album.ejs | 28 +- views/pages/collection.ejs | 177 +++++---- .../mon-compte/ma-collection/details.ejs | 17 +- .../pages/mon-compte/ma-collection/index.ejs | 201 ----------- 16 files changed, 432 insertions(+), 639 deletions(-) delete mode 100644 javascripts/mon-compte/ma-collection/index.js create mode 100644 views/components/filters/artist.ejs create mode 100644 views/components/filters/format.ejs create mode 100644 views/components/filters/genre.ejs create mode 100644 views/components/filters/index.ejs create mode 100644 views/components/filters/sort.ejs create mode 100644 views/components/filters/style.ejs create mode 100644 views/components/filters/year.ejs delete mode 100644 views/pages/mon-compte/ma-collection/index.ejs 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/details.js b/javascripts/mon-compte/ma-collection/details.js index fe8d079..5486244 100644 --- a/javascripts/mon-compte/ma-collection/details.js +++ b/javascripts/mon-compte/ma-collection/details.js @@ -38,14 +38,21 @@ if (typeof item !== "undefined") { } }, setTrackList() { + this.tracklist = []; 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]; + const { + type_, + title, + position, + duration, + artists, + extraartists, + } = this.item.tracklist[i]; if (type_ === "heading") { if (subTrack.type) { @@ -65,6 +72,7 @@ if (typeof item !== "undefined") { position, duration, extraartists, + artists, }); } } diff --git a/javascripts/mon-compte/ma-collection/index.js b/javascripts/mon-compte/ma-collection/index.js deleted file mode 100644 index 1cfb05e..0000000 --- a/javascripts/mon-compte/ma-collection/index.js +++ /dev/null @@ -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"); -} diff --git a/package.json b/package.json index b3dffed..b5607af 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,13 @@ "scripts": { "start": "node ./dist/bin/www", "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", "uglify": "npx gulp", "prebuild": "rimraf dist", - "build": "babel ./src --out-dir dist --copy-files", + "build": "npx babel ./src --out-dir dist --copy-files", "test": "jest", - "prepare": "husky install" + "prepare": "npx husky install" }, "engines": { "node": "16.x", @@ -78,7 +78,7 @@ "vue": "^3.2.31" }, "nodemonConfig": { - "exec": "yarn run:all", + "exec": "npm run run:all", "watch": [ "src/*", "sass/*", 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/components/filters/artist.ejs b/views/components/filters/artist.ejs new file mode 100644 index 0000000..4d806a5 --- /dev/null +++ b/views/components/filters/artist.ejs @@ -0,0 +1,11 @@ +
+ + +
\ No newline at end of file diff --git a/views/components/filters/format.ejs b/views/components/filters/format.ejs new file mode 100644 index 0000000..19ec703 --- /dev/null +++ b/views/components/filters/format.ejs @@ -0,0 +1,11 @@ +
+ + +
diff --git a/views/components/filters/genre.ejs b/views/components/filters/genre.ejs new file mode 100644 index 0000000..6a8eed9 --- /dev/null +++ b/views/components/filters/genre.ejs @@ -0,0 +1,12 @@ + +
+ + +
\ No newline at end of file diff --git a/views/components/filters/index.ejs b/views/components/filters/index.ejs new file mode 100644 index 0000000..559a47b --- /dev/null +++ b/views/components/filters/index.ejs @@ -0,0 +1,18 @@ +
+ <%- include('./artist') %> + <%- include('./format') %> + <%- include('./sort') %> +
+ +
+ <%- include('./year') %> + <%- include('./genre') %> + <%- include('./style') %> +
+ + + + + + + \ No newline at end of file diff --git a/views/components/filters/sort.ejs b/views/components/filters/sort.ejs new file mode 100644 index 0000000..87588e3 --- /dev/null +++ b/views/components/filters/sort.ejs @@ -0,0 +1,15 @@ +
+ + +
\ No newline at end of file diff --git a/views/components/filters/style.ejs b/views/components/filters/style.ejs new file mode 100644 index 0000000..f62f044 --- /dev/null +++ b/views/components/filters/style.ejs @@ -0,0 +1,11 @@ +
+ + +
\ No newline at end of file diff --git a/views/components/filters/year.ejs b/views/components/filters/year.ejs new file mode 100644 index 0000000..3de4631 --- /dev/null +++ b/views/components/filters/year.ejs @@ -0,0 +1,11 @@ +
+ + +
\ No newline at end of file diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs index f32ea67..2141963 100644 --- a/views/pages/ajouter-un-album.ejs +++ b/views/pages/ajouter-un-album.ejs @@ -1,7 +1,7 @@

Ajouter un album

-
+
@@ -87,7 +87,14 @@
    -
  1. {{ track.title }} ({{track.duration}})
    2. +
  2. + {{ track.title }} ({{track.duration}}) +
      +
    • + {{extra.role}} : {{extra.name}} +
      • +
    +
@@ -129,10 +136,19 @@
Format -
- - {{format.name}} - +
    +
  • + {{format.name}} + + +
    • +
diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs index 3272d8b..51974c8 100644 --- a/views/pages/collection.ejs +++ b/views/pages/collection.ejs @@ -1,103 +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 }} @@ -130,12 +73,12 @@