Client - add/remove admin rights

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -63,7 +63,11 @@
                   <span class="cell-heading">
                     {{ $t('admin.ACTION') }}
                   </span>
-                  <button :class="{ danger: user.admin }">
+                  <button
+                    :class="{ danger: user.admin }"
+                    :disabled="user.username === authUser.username"
+                    @click="updateUser(user.username, !user.admin)"
+                  >
                     {{
                       $t(
                         `admin.USERS.TABLE.${
@@ -104,7 +108,7 @@
   import { useRoute, LocationQuery } from 'vue-router'
 
   import Pagination from '@/components/Common/Pagination.vue'
-  import { ROOT_STORE, USERS_STORE } from '@/store/constants'
+  import { ROOT_STORE, USER_STORE, USERS_STORE } from '@/store/constants'
   import { IPagination, IPaginationPayload } from '@/types/api'
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
@@ -127,6 +131,9 @@
       ]
       let query: IPaginationPayload = getQuery(route.query)
 
+      const authUser: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
       const users: ComputedRef<IUserProfile[]> = computed(
         () => store.getters[USERS_STORE.GETTERS.USERS]
       )
@@ -168,6 +175,12 @@
           order_by: getOrderBy(query.order_by),
         }
       }
+      function updateUser(username: string, admin: boolean) {
+        store.dispatch(USERS_STORE.ACTIONS.UPDATE_USER, {
+          username,
+          admin,
+        })
+      }
 
       onBeforeMount(() => loadUsers(query))
 
@@ -179,7 +192,15 @@
         }
       )
 
-      return { errorMessages, pagination, query, users, capitalize }
+      return {
+        authUser,
+        errorMessages,
+        pagination,
+        query,
+        users,
+        capitalize,
+        updateUser,
+      }
     },
   })
 </script>

fittrackee_client/src/scss/base.scss

@@ -91,6 +91,11 @@ button {
       background: var(--button-danger-hover-bg-color);
       color: var(--button-danger-hover-color);
     }
+    &:disabled {
+      background: var(--disabled-background-color);
+      border-color: var(--disabled-color);
+      color: var(--disabled-color);
+    }
   }
 }
 

fittrackee_client/src/store/modules/users/actions.ts

@@ -5,6 +5,7 @@ import { ROOT_STORE, USERS_STORE } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
 import { IUsersActions, IUsersState } from '@/store/modules/users/types'
 import { IPaginationPayload } from '@/types/api'
+import { IAdminUserPayload } from '@/types/user'
 import { handleError } from '@/utils'
 
 export const actions: ActionTree<IUsersState, IRootState> & IUsersActions = {
@@ -35,4 +36,27 @@ export const actions: ActionTree<IUsersState, IRootState> & IUsersActions = {
         context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING, false)
       )
   },
+  [USERS_STORE.ACTIONS.UPDATE_USER](
+    context: ActionContext<IUsersState, IRootState>,
+    payload: IAdminUserPayload
+  ): void {
+    console.log('payload', payload)
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    authApi
+      .patch(`users/${payload.username}`, { admin: payload.admin })
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(
+            USERS_STORE.MUTATIONS.UPDATE_USER,
+            res.data.data.users[0]
+          )
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING, false)
+      )
+  },
 }

fittrackee_client/src/store/modules/users/enums.ts

@@ -1,5 +1,6 @@
 export enum UsersActions {
   GET_USERS = 'GET_USERS',
+  UPDATE_USER = 'UPDATE_USER',
 }
 
 export enum UsersGetters {
@@ -9,6 +10,7 @@ export enum UsersGetters {
 }
 
 export enum UsersMutations {
+  UPDATE_USER = 'UPDATE_USER',
   UPDATE_USERS = 'UPDATE_USERS',
   UPDATE_USERS_LOADING = 'UPDATE_USERS_LOADING',
   UPDATE_USERS_PAGINATION = 'UPDATE_USERS_PAGINATION',

fittrackee_client/src/store/modules/users/mutations.ts

@@ -6,6 +6,17 @@ import { IPagination } from '@/types/api'
 import { IUserProfile } from '@/types/user'
 
 export const mutations: MutationTree<IUsersState> & TUsersMutations = {
+  [USERS_STORE.MUTATIONS.UPDATE_USER](
+    state: IUsersState,
+    updatedUser: IUserProfile
+  ) {
+    state.users = state.users.map((user) => {
+      if (user.username === updatedUser.username) {
+        return updatedUser
+      }
+      return user
+    })
+  },
   [USERS_STORE.MUTATIONS.UPDATE_USERS](
     state: IUsersState,
     users: IUserProfile[]

fittrackee_client/src/store/modules/users/types.ts

@@ -8,7 +8,7 @@ import {
 import { USERS_STORE } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
 import { IPagination, IPaginationPayload } from '@/types/api'
-import { IUserProfile } from '@/types/user'
+import { IAdminUserPayload, IUserProfile } from '@/types/user'
 
 export interface IUsersState {
   users: IUserProfile[]
@@ -21,6 +21,10 @@ export interface IUsersActions {
     context: ActionContext<IUsersState, IRootState>,
     payload: IPaginationPayload
   ): void
+  [USERS_STORE.ACTIONS.UPDATE_USER](
+    context: ActionContext<IUsersState, IRootState>,
+    payload: IAdminUserPayload
+  ): void
 }
 
 export interface IUsersGetters {
@@ -30,6 +34,7 @@ export interface IUsersGetters {
 }
 
 export type TUsersMutations<S = IUsersState> = {
+  [USERS_STORE.MUTATIONS.UPDATE_USER](state: S, updatedUser: IUserProfile): void
   [USERS_STORE.MUTATIONS.UPDATE_USERS](state: S, users: IUserProfile[]): void
   [USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING](state: S, loading: boolean): void
   [USERS_STORE.MUTATIONS.UPDATE_USERS_PAGINATION](

fittrackee_client/src/types/user.ts

@@ -32,6 +32,11 @@ export interface IUserPayload {
   password_conf: string
 }
 
+export interface IAdminUserPayload {
+  username: string
+  admin: boolean
+}
+
 export interface IUserPreferencesPayload {
   language: string
   timezone: string