Client - filter on username in administration

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -6,6 +6,7 @@
         <button class="top-button" @click.prevent="$router.push('/admin')">
           {{ $t('admin.BACK_TO_ADMIN') }}
         </button>
+        <UsersNameFilter @filterOnUsername="searchUsers" />
         <FilterSelects
           :sort="sortList"
           :order_by="orderByList"
@@ -13,7 +14,10 @@
           message="admin.USERS.SELECTS.ORDER_BY"
           @updateSelect="reloadUsers"
         />
-        <div class="responsive-table">
+        <div class="no-users" v-if="users.length === 0">
+          {{ $t('user.NO_USERS_FOUND') }}
+        </div>
+        <div class="responsive-table" v-else>
           <table>
             <thead>
               <tr>
@@ -119,6 +123,7 @@
   import { format } from 'date-fns'
   import {
     ComputedRef,
+    Ref,
     computed,
     reactive,
     watch,
@@ -131,6 +136,7 @@
   import FilterSelects from '@/components/Common/FilterSelects.vue'
   import Pagination from '@/components/Common/Pagination.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
+  import UsersNameFilter from '@/components/Users/UsersNameFilter.vue'
   import { AUTH_USER_STORE, ROOT_STORE, USERS_STORE } from '@/store/constants'
   import { IPagination, TPaginationPayload } from '@/types/api'
   import { IAuthUserProfile, IUserProfile } from '@/types/user'
@@ -170,6 +176,10 @@
   function loadUsers(queryParams: TPaginationPayload) {
     store.dispatch(USERS_STORE.ACTIONS.GET_USERS, queryParams)
   }
+  function searchUsers(username: Ref<string>) {
+    reloadUsers('q', username.value)
+  }
+
   function updateUser(username: string, admin: boolean) {
     store.dispatch(USERS_STORE.ACTIONS.UPDATE_USER, {
       username,
@@ -203,6 +213,14 @@
     .top-button {
       display: none;
     }
+
+    .no-users {
+      display: flex;
+      justify-content: center;
+      padding: $default-padding * 2 0;
+      font-weight: bold;
+    }
+
     table {
       td {
         font-size: 1.1em;