Client - refactoring users admin selects

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -6,10 +6,11 @@
         <button class="top-button" @click.prevent="$router.push('/admin')">
           {{ $t('admin.BACK_TO_ADMIN') }}
         </button>
-        <AdminUsersSelects
+        <FilterSelects
           :sort="sortList"
           :order_by="orderByList"
           :query="query"
+          message="admin.USERS.SELECTS.ORDER_BY"
           @updateSelect="reloadUsers"
         />
         <div class="responsive-table">
@@ -128,7 +129,7 @@
   } from 'vue'
   import { LocationQuery, useRoute, useRouter } from 'vue-router'
 
-  import AdminUsersSelects from '@/components/Administration/AdminUsersSelects.vue'
+  import FilterSelects from '@/components/Common/FilterSelects.vue'
   import Pagination from '@/components/Common/Pagination.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
   import { ROOT_STORE, USER_STORE, USERS_STORE } from '@/store/constants'
@@ -141,7 +142,7 @@
   export default defineComponent({
     name: 'AdminUsers',
     components: {
-      AdminUsersSelects,
+      FilterSelects,
       Pagination,
       UserPicture,
     },

fittrackee_client/src/components/Common/FilterSelects.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-selects">
     <label>
-      {{ $t('admin.USERS.SELECTS.ORDER_BY.LABEL') }}:
+      {{ $t('common.SELECTS.ORDER_BY.LABEL') }}:
       <select
         name="order_by"
         id="order_by"
@@ -9,12 +9,12 @@
         @change="onSelectUpdate"
       >
         <option v-for="order in order_by" :value="order" :key="order">
-          {{ $t(`admin.USERS.SELECTS.ORDER_BY.${order}`) }}
+          {{ $t(`${message}.${order}`) }}
         </option>
       </select>
     </label>
     <label>
-      {{ $t('admin.USERS.SELECTS.ORDER.LABEL') }}:
+      {{ $t('common.SELECTS.ORDER.LABEL') }}:
       <select
         name="order"
         id="order"
@@ -22,12 +22,12 @@
         @change="onSelectUpdate"
       >
         <option v-for="order in sort" :value="order" :key="order">
-          {{ $t(`admin.USERS.SELECTS.ORDER.${order.toUpperCase()}`) }}
+          {{ $t(`common.SELECTS.ORDER.${order.toUpperCase()}`) }}
         </option>
       </select>
     </label>
     <label>
-      {{ $t('admin.USERS.SELECTS.PER_PAGE.LABEL') }}:
+      {{ $t('common.SELECTS.PER_PAGE.LABEL') }}:
       <select
         name="per_page"
         id="per_page"
@@ -48,7 +48,7 @@
   import { TPaginationPayload } from '@/types/api'
 
   export default defineComponent({
-    name: 'AdminUsersSelects',
+    name: 'FilterSelects',
     props: {
       order_by: {
         type: Object as PropType<string[]>,
@@ -62,6 +62,10 @@
         type: Object as PropType<string[]>,
         required: true,
       },
+      message: {
+        type: String,
+        required: true,
+      },
     },
     emits: ['updateSelect'],
     setup(props, { emit }) {
@@ -70,7 +74,7 @@
       }
 
       return {
-        per_page: [10, 50, 100],
+        per_page: [10, 25, 50, 100],
         onSelectUpdate,
       }
     },

fittrackee_client/src/locales/en/administration.json

@@ -36,19 +36,10 @@
     },
     "SELECTS": {
       "ORDER_BY": {
-        "LABEL": "order by",
         "admin": "admin status",
         "created_at": "registration date",
         "username": "username",
         "workouts_count": "workout count"
-      },
-      "ORDER": {
-        "LABEL": "sort",
-        "ASC": "ascending",
-        "DESC": "descending"
-      },
-      "PER_PAGE": {
-        "LABEL": "par page"
       }
     }
   }

fittrackee_client/src/locales/en/common.json

@@ -2,5 +2,18 @@
   "CONFIRMATION": "Confirmation",
   "DAY": "day | days",
   "HOME": "Home",
-  "HERE": "here"
+  "HERE": "here",
+  "SELECTS": {
+    "ORDER_BY": {
+      "LABEL": "order by"
+    },
+    "ORDER": {
+      "LABEL": "sort",
+      "ASC": "ascending",
+      "DESC": "descending"
+    },
+    "PER_PAGE": {
+      "LABEL": "par page"
+    }
+  }
 }

fittrackee_client/src/locales/fr/administration.json

@@ -36,19 +36,10 @@
     },
     "SELECTS": {
       "ORDER_BY": {
-        "LABEL": "trier par ",
         "admin": "status administrateur",
         "created_at": "date d'inscription",
         "username": "nom d'utilisateur",
         "workouts_count": "nombre de séances"
-      },
-      "ORDER": {
-        "LABEL": "tri",
-        "ASC": "ascendant",
-        "DESC": "descendant"
-      },
-      "PER_PAGE": {
-        "LABEL": "par page"
       }
     }
   }

fittrackee_client/src/locales/fr/common.json

@@ -2,5 +2,18 @@
   "CONFIRMATION": "Confirmation",
   "DAY": "jour | jours",
   "HOME": "Accueil",
-  "HERE": "ici"
+  "HERE": "ici",
+  "SELECTS": {
+    "ORDER_BY": {
+      "LABEL": "trier par "
+    },
+    "ORDER": {
+      "LABEL": "tri",
+      "ASC": "ascendant",
+      "DESC": "descendant"
+    },
+    "PER_PAGE": {
+      "LABEL": "par page"
+    }
+  }
 }