Client - add link to users in admin

2021-10-31 18:11:18 +01:00 · 2021-10-31 18:11:18 +01:00 · fca417d9ad
commit fca417d9ad
parent 332983d9ea
15 changed files with 218 additions and 5 deletions
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/fittrackee_client/src/components/Administration/AdminUsers.vue
@ -41,7 +41,9 @@
                  <span class="cell-heading">
                    {{ $t('user.USERNAME') }}
                  </span>
-                  {{ user.username }}
+                  <router-link :to="`/users/${user.username}`">
+                    {{ user.username }}
+                  </router-link>
                </td>
                <td>
                  <span class="cell-heading">
@ -116,6 +118,7 @@
    watch,
    capitalize,
    onBeforeMount,
+    onUnmounted,
  } from 'vue'
  import { LocationQuery, useRoute, useRouter } from 'vue-router'

@ -217,6 +220,10 @@
        }
      )

+      onUnmounted(() => {
+        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USERS)
+      })
+
      return {
        authUser,
        errorMessages,
--- a/fittrackee_client/src/components/Common/Modal.vue
+++ b/fittrackee_client/src/components/Common/Modal.vue
@ -6,7 +6,12 @@
          {{ title }}
        </template>
        <template #content>
-          <div class="modal-message">{{ message }}</div>
+          <div class="modal-message" v-if="strongMessage">
+            <i18n-t :keypath="message">
+              <span>{{ strongMessage }}</span>
+            </i18n-t>
+          </div>
+          <div class="modal-message" v-else>{{ message }}</div>
          <ErrorMessage :message="errorMessages" v-if="errorMessages" />
          <div class="modal-buttons">
            <button class="confirm" @click="emit('confirmAction')">
@ -39,6 +44,10 @@
        type: String,
        required: true,
      },
+      strongMessage: {
+        type: String || null,
+        default: null,
+      },
    },
    emits: ['cancelAction', 'confirmAction'],
    setup(props, { emit }) {
@ -90,6 +99,9 @@

          .modal-message {
            padding: $default-padding;
+            span {
+              font-weight: bold;
+            }
          }

          .modal-buttons {
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
@ -1,5 +1,13 @@
 <template>
  <div id="user-infos" class="description-list">
+    <Modal
+      v-if="displayModal"
+      :title="$t('common.CONFIRMATION')"
+      message="admin.CONFIRM_USER_ACCOUNT_DELETION"
+      :strongMessage="user.username"
+      @confirmAction="deleteUserAccount(user.username)"
+      @cancelAction="updateDisplayModal(false)"
+    />
    <dl>
      <dt>{{ $t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
      <dd>{{ registrationDate }}</dd>
@ -16,7 +24,17 @@
        {{ user.bio }}
      </dd>
    </dl>
-    <div class="profile-buttons">
+    <div class="profile-buttons" v-if="fromAdmin">
+      <button
+        class="danger"
+        v-if="authUser.username !== user.username"
+        @click.prevent="updateDisplayModal(true)"
+      >
+        {{ $t('admin.DELETE_USER') }}
+      </button>
+      <button @click="$router.go(-1)">{{ $t('buttons.BACK') }}</button>
+    </div>
+    <div class="profile-buttons" v-else>
      <button @click="$router.push('/profile/edit')">
        {{ $t('user.PROFILE.EDIT') }}
      </button>
@ -27,9 +45,18 @@

 <script lang="ts">
  import { format } from 'date-fns'
-  import { PropType, computed, defineComponent } from 'vue'
+  import {
+    ComputedRef,
+    PropType,
+    Ref,
+    computed,
+    defineComponent,
+    ref,
+  } from 'vue'

+  import { USER_STORE } from '@/store/constants'
  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'

  export default defineComponent({
    name: 'UserInfos',
@ -38,8 +65,16 @@
        type: Object as PropType<IUserProfile>,
        required: true,
      },
+      fromAdmin: {
+        type: Boolean,
+        default: false,
+      },
    },
    setup(props) {
+      const store = useStore()
+      const authUser: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
      const registrationDate = computed(() =>
        props.user.created_at
          ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
@ -50,7 +85,23 @@
          ? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
          : ''
      )
-      return { birthDate, registrationDate }
+      let displayModal: Ref<boolean> = ref(false)
+
+      function updateDisplayModal(value: boolean) {
+        displayModal.value = value
+      }
+      function deleteUserAccount(username: string) {
+        store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
+      }
+
+      return {
+        authUser,
+        birthDate,
+        displayModal,
+        registrationDate,
+        deleteUserAccount,
+        updateDisplayModal,
+      }
    },
  })
 </script>
--- a/fittrackee_client/src/locales/en/administration.json
+++ b/fittrackee_client/src/locales/en/administration.json
@ -13,6 +13,8 @@
    "ZIP_UPLOAD_MAX_SIZE_LABEL": "Max. size of zip archive (in Mb)"
  },
  "BACK_TO_ADMIN": "Back to admin",
+  "CONFIRM_USER_ACCOUNT_DELETION": "Are you sure you want to delete {0} account? All data will be deleted, this cannot be undone.",
+  "DELETE_USER": "Delete user",
  "ENABLE_DISABLE_SPORTS": "Enable/disable sports.",
  "REGISTRATION_DISABLED": "Registration is currently disabled.",
  "REGISTRATION_ENABLED": "Registration is currently enabled.",
--- a/fittrackee_client/src/locales/en/buttons.json
+++ b/fittrackee_client/src/locales/en/buttons.json
@ -1,4 +1,5 @@
 {
+  "BACK": "Back",
  "CANCEL": "Cancel",
  "DELETE_MY_ACCOUNT": "Delete my account",
  "DISABLE": "Disable",
--- a/fittrackee_client/src/locales/fr/administration.json
+++ b/fittrackee_client/src/locales/fr/administration.json
@ -13,6 +13,8 @@
    "ZIP_UPLOAD_MAX_SIZE_LABEL": "Nombre max. de fichiers dans une archive zip "
  },
  "BACK_TO_ADMIN": "Revenir à l'admin",
+  "CONFIRM_USER_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer le compte de {0} ? Toutes les données seront définitivement.",
+  "DELETE_USER": "Supprimer l'utilisateur",
  "ENABLE_DISABLE_SPORTS": "Activer/désactiver des sports.",
  "REGISTRATION_DISABLED": "Les inscriptions sont actuellement désactivées.",
  "REGISTRATION_ENABLED": "Les inscriptions sont actuellement activées.",
--- a/fittrackee_client/src/locales/fr/buttons.json
+++ b/fittrackee_client/src/locales/fr/buttons.json
@ -1,4 +1,5 @@
 {
+  "BACK": "Précédent",
  "CANCEL": "Annuler",
  "DELETE_MY_ACCOUNT": "Supprimer mon compte",
  "DISABLE": "Désactiver",
--- a/fittrackee_client/src/router/index.ts
+++ b/fittrackee_client/src/router/index.ts
@ -128,6 +128,12 @@ const routes: Array<RouteRecordRaw> = [
    component: () =>
      import(/* webpackChunkName: 'main' */ '@/views/StatisticsView.vue'),
  },
+  {
+    path: '/users/:username',
+    name: 'User',
+    component: () =>
+      import(/* webpackChunkName: 'profile' */ '@/views/UserView.vue'),
+  },
  {
    path: '/workouts',
    name: 'Workouts',
--- a/fittrackee_client/src/store/modules/users/actions.ts
+++ b/fittrackee_client/src/store/modules/users/actions.ts
@ -9,6 +9,42 @@ import { IAdminUserPayload } from '@/types/user'
 import { handleError } from '@/utils'

 export const actions: ActionTree<IUsersState, IRootState> & IUsersActions = {
+  [USERS_STORE.ACTIONS.EMPTY_USER](
+    context: ActionContext<IUsersState, IRootState>
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USERS_STORE.MUTATIONS.UPDATE_USER, {})
+  },
+  [USERS_STORE.ACTIONS.EMPTY_USERS](
+    context: ActionContext<IUsersState, IRootState>
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS, [])
+    context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_PAGINATION, {})
+  },
+  [USERS_STORE.ACTIONS.GET_USER](
+    context: ActionContext<IUsersState, IRootState>,
+    username: string
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING, true)
+    authApi
+      .get(`users/${username}`)
+      .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)
+      )
+  },
  [USERS_STORE.ACTIONS.GET_USERS](
    context: ActionContext<IUsersState, IRootState>,
    payload: TPaginationPayload
--- a/fittrackee_client/src/store/modules/users/enums.ts
+++ b/fittrackee_client/src/store/modules/users/enums.ts
@ -1,15 +1,20 @@
 export enum UsersActions {
+  EMPTY_USER = 'EMPTY_USER',
+  EMPTY_USERS = 'EMPTY_USERS',
+  GET_USER = 'GET_USER',
  GET_USERS = 'GET_USERS',
  UPDATE_USER = 'UPDATE_USER',
 }

 export enum UsersGetters {
+  USER = 'USER',
  USERS = 'USERS',
  USERS_LOADING = 'USERS_LOADING',
  USERS_PAGINATION = 'USERS_PAGINATION',
 }

 export enum UsersMutations {
+  UPDATE_USER = 'UPDATE_USER',
  UPDATE_USER_IN_USERS = 'UPDATE_USER_IN_USERS',
  UPDATE_USERS = 'UPDATE_USERS',
  UPDATE_USERS_LOADING = 'UPDATE_USERS_LOADING',
--- a/fittrackee_client/src/store/modules/users/getters.ts
+++ b/fittrackee_client/src/store/modules/users/getters.ts
@ -5,6 +5,9 @@ import { IRootState } from '@/store/modules/root/types'
 import { IUsersGetters, IUsersState } from '@/store/modules/users/types'

 export const getters: GetterTree<IUsersState, IRootState> & IUsersGetters = {
+  [USERS_STORE.GETTERS.USER]: (state: IUsersState) => {
+    return state.user
+  },
  [USERS_STORE.GETTERS.USERS]: (state: IUsersState) => {
    return state.users
  },
--- a/fittrackee_client/src/store/modules/users/mutations.ts
+++ b/fittrackee_client/src/store/modules/users/mutations.ts
@ -6,6 +6,9 @@ import { IPagination } from '@/types/api'
 import { IUserProfile } from '@/types/user'

 export const mutations: MutationTree<IUsersState> & TUsersMutations = {
+  [USERS_STORE.MUTATIONS.UPDATE_USER](state: IUsersState, user: IUserProfile) {
+    state.user = user
+  },
  [USERS_STORE.MUTATIONS.UPDATE_USER_IN_USERS](
    state: IUsersState,
    updatedUser: IUserProfile
--- a/fittrackee_client/src/store/modules/users/state.ts
+++ b/fittrackee_client/src/store/modules/users/state.ts
@ -1,7 +1,9 @@
 import { IUsersState } from '@/store/modules/users/types'
 import { IPagination } from '@/types/api'
+import { IUserProfile } from '@/types/user'

 export const usersState: IUsersState = {
+  user: <IUserProfile>{},
  users: [],
  loading: false,
  pagination: <IPagination>{},
--- a/fittrackee_client/src/store/modules/users/types.ts
+++ b/fittrackee_client/src/store/modules/users/types.ts
@ -11,12 +11,23 @@ import { IPagination, TPaginationPayload } from '@/types/api'
 import { IAdminUserPayload, IUserProfile } from '@/types/user'

 export interface IUsersState {
+  user: IUserProfile
  users: IUserProfile[]
  loading: boolean
  pagination: IPagination
 }

 export interface IUsersActions {
+  [USERS_STORE.ACTIONS.EMPTY_USER](
+    context: ActionContext<IUsersState, IRootState>
+  ): void
+  [USERS_STORE.ACTIONS.EMPTY_USERS](
+    context: ActionContext<IUsersState, IRootState>
+  ): void
+  [USERS_STORE.ACTIONS.GET_USER](
+    context: ActionContext<IUsersState, IRootState>,
+    username: string
+  ): void
  [USERS_STORE.ACTIONS.GET_USERS](
    context: ActionContext<IUsersState, IRootState>,
    payload: TPaginationPayload
@ -28,12 +39,14 @@ export interface IUsersActions {
 }

 export interface IUsersGetters {
+  [USERS_STORE.GETTERS.USER](state: IUsersState): IUserProfile
  [USERS_STORE.GETTERS.USERS](state: IUsersState): IUserProfile[]
  [USERS_STORE.GETTERS.USERS_LOADING](state: IUsersState): boolean
  [USERS_STORE.GETTERS.USERS_PAGINATION](state: IUsersState): IPagination
 }

 export type TUsersMutations<S = IUsersState> = {
+  [USERS_STORE.MUTATIONS.UPDATE_USER](state: S, user: IUserProfile): void
  [USERS_STORE.MUTATIONS.UPDATE_USER_IN_USERS](
    state: S,
    updatedUser: IUserProfile
--- a/fittrackee_client/src/views/UserView.vue
+++ b/fittrackee_client/src/views/UserView.vue
@ -0,0 +1,69 @@
+<template>
+  <div id="user" v-if="user.username">
+    <UserHeader :user="user" />
+    <div class="box">
+      <UserInfos :user="user" :from-admin="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    computed,
+    defineComponent,
+    onBeforeMount,
+    onBeforeUnmount,
+  } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
+  import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
+  import { USERS_STORE } from '@/store/constants'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserView',
+    components: {
+      UserHeader,
+      UserInfos,
+    },
+    setup() {
+      const route = useRoute()
+      const store = useStore()
+
+      const user: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USERS_STORE.GETTERS.USER]
+      )
+
+      onBeforeMount(() => {
+        if (
+          route.params.username &&
+          typeof route.params.username === 'string'
+        ) {
+          store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
+        }
+      })
+
+      onBeforeUnmount(() => {
+        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
+      })
+
+      return { user }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user {
+    margin: auto;
+    width: 700px;
+    @media screen and (max-width: $medium-limit) {
+      width: 100%;
+      margin: 0 auto 50px auto;
+    }
+  }
+</style>