Added pagination size

javascripts/collection.js

@@ -7,8 +7,8 @@ Vue.createApp({
             total: 0,
             // eslint-disable-next-line no-undef
             page: query.page || 1,
+            limit: 16,
             totalPages: 1,
-            limit: 24,
             artist: "",
             format: "",
             year: "",
@@ -69,7 +69,7 @@ Vue.createApp({
 
             this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`;
 
-            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+            let url = `/api/v1/albums?page=${this.page}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
                 url += `&artist=${this.formatParams(this.artist)}`;
             }
@@ -94,6 +94,7 @@ Vue.createApp({
                 .get(url)
                 .then((response) => {
                     this.items = response.data.rows;
+                    this.limit = response.data.limit;
                     this.total = response.data.count || 0;
                     this.totalPages =
                         parseInt(response.data.count / this.limit, 10) +

javascripts/mon-compte/index.js

@@ -11,6 +11,8 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
                     password: "",
                     passwordConfirm: "",
                     // eslint-disable-next-line no-undef
+                    pagination,
+                    // eslint-disable-next-line no-undef
                     mastodon: mastodon || {
                         publish: false,
                         url: "",
@@ -56,7 +58,7 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
             // eslint-disable-next-line no-unused-vars
             async updateProfil() {
                 this.errors = [];
-                const { oldPassword, password, passwordConfirm, mastodon } =
+                const { oldPassword, password, passwordConfirm, mastodon, pagination } =
                     this.formData;
 
                 if (password && !oldPassword) {
@@ -82,6 +84,8 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
                     data.oldPassword = oldPassword;
                 }
 
+                data.pagination = pagination;
+
                 try {
                     await axios.patch(`/api/v1/me`, data);
 

sass/box.scss

@@ -5,15 +5,19 @@
     color: var(--font-color);
     display: block;
     padding: 1.25rem;
-    width: calc(100% - 2rem);
+
-    margin: auto;
     @include transition() {}
 
-    @include respond-to("small-up") {
+    &.mini {
-       width: 65%;
+        margin: auto;
-    }
+        width: calc(100% - 2rem);
-    @include respond-to("medium-up") {
+
-       width: 35%;
+        @include respond-to("small-up") {
+           width: 65%;
+        }
+        @include respond-to("medium-up") {
+           width: 35%;
+        }
     }
 
     h1 {

src/middleware/Albums.js

@@ -192,7 +192,6 @@ Publié automatiquement via #musictopus`;
     async getAll() {
         const {
             page,
-            limit,
             exportFormat = "json",
             sort = "artists_sort",
             order = "asc",
@@ -206,6 +205,8 @@ Publié automatiquement via #musictopus`;
             discogsId,
         } = this.req.query;
 
+        const limit = this.req.user?.pagination || 16;
+
         let userId = this.req.user?._id;
 
         const where = {};
@@ -303,6 +304,7 @@ Publié automatiquement via #musictopus`;
             default:
                 return {
                     rows,
+                    limit,
                     count,
                 };
         }

src/middleware/Me.js

@@ -16,6 +16,7 @@ class Me extends Pages {
         const { _id } = this.req.user;
 
         const schema = Joi.object({
+            pagination: Joi.number(),
             isPublicCollection: Joi.boolean(),
             oldPassword: Joi.string(),
             password: Joi.string(),
@@ -45,6 +46,10 @@ class Me extends Pages {
             user.salt = value.password;
         }
 
+        if (value.pagination) {
+            user.pagination = value.pagination;
+        }
+
         if (value.isPublicCollection !== undefined) {
             user.isPublicCollection = value.isPublicCollection;
         }

src/models/users.js

@@ -25,6 +25,10 @@ const UserSchema = new mongoose.Schema(
         },
         hash: String,
         salt: String,
+        pagination: {
+            type: Number,
+            default: 16,
+        },
         isPublicCollection: {
             type: Boolean,
             default: false,

views/pages/composants.ejs

@@ -238,7 +238,7 @@
     </div>
 
     <h2 id="boites">Les boites</h2>
-    <div class="box">
+    <div class="box mini">
         <form method="POST">
             <h1>
                 Connexion

views/pages/connexion.ejs

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box mini">
     <form method="POST">
         <h1>
             Connexion

views/pages/inscription/index.ejs

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box mini">
     <form method="POST">
         <h1>
             Inscription

views/pages/mon-compte/index.ejs

@@ -5,7 +5,7 @@
 
     <form method="POST" @submit.prevent="updateProfil">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-            <div>
+            <div class="box">
                 <h2>Mes données personnelles</h2>
                 <div>
                     <div class="field">
@@ -68,7 +68,7 @@
                     </div>
                 </div>
             </div>
-            <div>
+            <div class="box">
                 <h2>Mon activité</h2>
                 <div>
                     <div class="field">
@@ -126,6 +126,22 @@
                     </button>
                 </div>
             </div>
+            <div class="box">
+                <h2>Mes préférences</h2>
+                <div>
+                    <div class="field">
+                        <label for="pagination">Pagination</label>
+                        <select id="pagination" v-model="formData.pagination">
+                            <option value="16">16 albums/page</option>
+                            <option value="24">24 albums/page</option>
+                            <option value="32">32 albums/page</option>
+                            <option value="48">48 albums/page</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div></div>
 
             <button type="submit" class="button is-primary mt-10" :disabled="loading">
                 <span v-if="!loading">Mettre à jour</span>
@@ -139,5 +155,6 @@
 <script>
     const email = '<%= user.email %>';
     const username = '<%= user.username %>';
+    const pagination = "<%= user.pagination || 16 %>";
     const mastodon = <%- JSON.stringify(user.mastodon || {publish: false, url: '', token: '', message: ''}) %>;
 </script>

views/pages/nous-contacter.ejs

@@ -1,4 +1,4 @@
-<section class="box" id="contact">
+<section class="box mini" id="contact">
     <h1>Nous contacter</h1>
     <form @submit="send" <% if (config.mailMethod === 'formspree' ) { %> id="contact" method="POST" action="https://formspree.io/f/<%= config.formspreeId %>" <% } %>>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">