Client - init users administration

fittrackee_client/src/components/Administration/AdminMenu.vue

@@ -24,14 +24,18 @@
               </span>
             </dd>
             <dt>
-              <router-link to="/admin/SPORTS">
+              <router-link to="/admin/sports">
                 {{ capitalize($t('workouts.SPORT', 0)) }}
               </router-link>
             </dt>
             <dd>
               {{ $t('admin.ENABLE_DISABLE_SPORTS') }}
             </dd>
-            <dt>{{ capitalize($t('admin.USER', 0)) }}</dt>
+            <dt>
+              <router-link to="/admin/users">
+                {{ capitalize($t('admin.USER', 0)) }}
+              </router-link>
+            </dt>
             <dd>
               {{ $t('admin.ADMIN_RIGHTS_DELETE_USER_ACCOUNT') }}
             </dd>

fittrackee_client/src/components/Administration/AdminSports.vue

@@ -17,7 +17,7 @@
                 </th>
                 <th>{{ $t('admin.SPORTS.TABLE.ACTIVE') }}</th>
                 <th class="text-left sport-action">
-                  {{ $t('admin.SPORTS.TABLE.ACTION') }}
+                  {{ $t('admin.ACTION') }}
                 </th>
                 <th />
               </tr>
@@ -123,9 +123,6 @@
         font-size: 1.1em;
       }
     }
-    .center-text {
-      text-align: center;
-    }
     .sport-img {
       height: 35px;
       width: 35px;

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="admin-users" class="admin-card">
+    <Card>
+      <template #title>{{ capitalize($t('admin.USER', 0)) }}</template>
+      <template #content>
+        <button class="top-button" @click.prevent="$router.push('/admin')">
+          {{ $t('admin.BACK_TO_ADMIN') }}
+        </button>
+        <div class="responsive-table">
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th class="left-text">{{ $t('user.USERNAME') }}</th>
+                <th class="left-text">{{ $t('user.EMAIL') }}</th>
+                <th class="left-text">
+                  {{ $t('user.PROFILE.REGISTRATION_DATE') }}
+                </th>
+                <th>
+                  {{ capitalize($t('workouts.WORKOUT', 0)) }}
+                </th>
+                <th>{{ $t('user.ADMIN') }}</th>
+                <th>{{ $t('admin.ACTION') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="user in users" :key="user.username">
+                <td></td>
+                <td>
+                  <span class="cell-heading">
+                    {{ $t('user.USERNAME') }}
+                  </span>
+                  {{ user.username }}
+                </td>
+                <td>
+                  <span class="cell-heading">
+                    {{ $t('user.EMAIL') }}
+                  </span>
+                  {{ user.email }}
+                </td>
+                <td>
+                  <span class="cell-heading">
+                    {{ $t('user.PROFILE.REGISTRATION_DATE') }}
+                  </span>
+                  {{ user.created_at }}
+                </td>
+                <td class="center-text">
+                  <span class="cell-heading">
+                    {{ capitalize($t('workouts.WORKOUT', 0)) }}
+                  </span>
+                  {{ user.nb_workouts }}
+                </td>
+                <td class="center-text">
+                  <span class="cell-heading">
+                    {{ $t('user.ADMIN') }}
+                  </span>
+                  <i
+                    :class="`fa fa${user.admin ? '-check' : ''}-square-o`"
+                    aria-hidden="true"
+                  />
+                </td>
+                <td class="center-text">
+                  <span class="cell-heading">
+                    {{ $t('admin.ACTION') }}
+                  </span>
+                  <button :class="{ danger: user.admin }">
+                    {{
+                      $t(
+                        `admin.USERS.TABLE.${
+                          user.admin ? 'REMOVE' : 'ADD'
+                        }_ADMIN_RIGHTS`
+                      )
+                    }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <Pagination
+            v-if="pagination.page"
+            path="/admin/users"
+            :pagination="pagination"
+            :query="query"
+          />
+          <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+          <button @click.prevent="$router.push('/admin')">
+            {{ $t('admin.BACK_TO_ADMIN') }}
+          </button>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    computed,
+    defineComponent,
+    watch,
+    capitalize,
+    onBeforeMount,
+  } from 'vue'
+  import { useRoute, LocationQuery } from 'vue-router'
+
+  import Pagination from '@/components/Common/Pagination.vue'
+  import { ROOT_STORE, USERS_STORE } from '@/store/constants'
+  import { IPagination, IPaginationPayload } from '@/types/api'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'AdminUsers',
+    components: {
+      Pagination,
+    },
+    setup() {
+      const store = useStore()
+      const route = useRoute()
+
+      const orders: string[] = ['asc', 'desc']
+      const order_types: string[] = [
+        'admin',
+        'created_at',
+        'username',
+        'workouts_count',
+      ]
+      let query: IPaginationPayload = getQuery(route.query)
+
+      const users: ComputedRef<IUserProfile[]> = computed(
+        () => store.getters[USERS_STORE.GETTERS.USERS]
+      )
+      const pagination: ComputedRef<IPagination> = computed(
+        () => store.getters[USERS_STORE.GETTERS.USERS_PAGINATION]
+      )
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+
+      function loadUsers(queryParams: IPaginationPayload) {
+        store.dispatch(USERS_STORE.ACTIONS.GET_USERS, queryParams)
+      }
+      function getPage(page: string | (string | null)[] | null): number {
+        return page && typeof page === 'string' && +page > 0 ? +page : 1
+      }
+      function getPerPage(perPage: string | (string | null)[] | null): number {
+        return perPage && typeof perPage === 'string' && +perPage > 0
+          ? +perPage
+          : 10
+      }
+      function getOrder(order: string | (string | null)[] | null): string {
+        return order && typeof order === 'string' && orders.includes(order)
+          ? order
+          : 'asc'
+      }
+      function getOrderBy(order_by: string | (string | null)[] | null): string {
+        return order_by &&
+          typeof order_by === 'string' &&
+          order_types.includes(order_by)
+          ? order_by
+          : 'created_at'
+      }
+      function getQuery(query: LocationQuery): IPaginationPayload {
+        return {
+          page: getPage(query.page),
+          per_page: getPerPage(query.per_page),
+          order: getOrder(query.order),
+          order_by: getOrderBy(query.order_by),
+        }
+      }
+
+      onBeforeMount(() => loadUsers(query))
+
+      watch(
+        () => route.query,
+        (newQuery) => {
+          query = getQuery(newQuery)
+          loadUsers(getQuery(newQuery))
+        }
+      )
+
+      return { errorMessages, pagination, query, users, capitalize }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  #admin-users {
+    .top-button {
+      display: none;
+    }
+    table {
+      td {
+        font-size: 1.1em;
+      }
+    }
+    .left-text {
+      text-align: left;
+    }
+
+    @media screen and (max-width: $small-limit) {
+      .top-button {
+        display: block;
+        margin-bottom: $default-margin * 2;
+      }
+    }
+  }
+</style>