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/Administration/AdminUsersSelects.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="table-selects">
-    <label>
-      {{ $t('admin.USERS.SELECTS.ORDER_BY.LABEL') }}:
-      <select
-        name="order_by"
-        id="order_by"
-        :value="query.order_by"
-        @change="onSelectUpdate"
-      >
-        <option v-for="order in order_by" :value="order" :key="order">
-          {{ $t(`admin.USERS.SELECTS.ORDER_BY.${order}`) }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('admin.USERS.SELECTS.ORDER.LABEL') }}:
-      <select
-        name="order"
-        id="order"
-        :value="query.order"
-        @change="onSelectUpdate"
-      >
-        <option v-for="order in sort" :value="order" :key="order">
-          {{ $t(`admin.USERS.SELECTS.ORDER.${order.toUpperCase()}`) }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('admin.USERS.SELECTS.PER_PAGE.LABEL') }}:
-      <select
-        name="per_page"
-        id="per_page"
-        :value="query.per_page"
-        @change="onSelectUpdate"
-      >
-        <option v-for="nb in per_page" :value="nb" :key="nb">
-          {{ nb }}
-        </option>
-      </select>
-    </label>
-  </div>
-</template>
-
-<script lang="ts">
-  import { PropType, defineComponent } from 'vue'
-
-  import { TPaginationPayload } from '@/types/api'
-
-  export default defineComponent({
-    name: 'AdminUsersSelects',
-    props: {
-      order_by: {
-        type: Object as PropType<string[]>,
-        required: true,
-      },
-      query: {
-        type: Object as PropType<TPaginationPayload>,
-        required: true,
-      },
-      sort: {
-        type: Object as PropType<string[]>,
-        required: true,
-      },
-    },
-    emits: ['updateSelect'],
-    setup(props, { emit }) {
-      function onSelectUpdate(event: Event & { target: HTMLInputElement }) {
-        emit('updateSelect', event.target.id, event.target.value)
-      }
-
-      return {
-        per_page: [10, 50, 100],
-        onSelectUpdate,
-      }
-    },
-  })
-</script>
-
-<style lang="scss" scoped>
-  @import '~@/scss/base.scss';
-
-  .table-selects {
-    display: flex;
-    justify-content: space-between;
-    margin: $default-margin 0;
-
-    label {
-      select {
-        margin-left: $default-margin;
-        padding: $default-padding * 0.5;
-      }
-    }
-
-    @media screen and (max-width: $small-limit) {
-      flex-wrap: wrap;
-      label {
-        margin-bottom: $default-margin;
-        select {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-</style>