Client - refactoring users admin selects

fittrackee_client/src/components/Common/FilterSelects.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="table-selects">
+    <label>
+      {{ $t('common.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(`${message}.${order}`) }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('common.SELECTS.ORDER.LABEL') }}:
+      <select
+        name="order"
+        id="order"
+        :value="query.order"
+        @change="onSelectUpdate"
+      >
+        <option v-for="order in sort" :value="order" :key="order">
+          {{ $t(`common.SELECTS.ORDER.${order.toUpperCase()}`) }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('common.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: 'FilterSelects',
+    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,
+      },
+      message: {
+        type: 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, 25, 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>