Merge pull request #69 from Lemoncode/feature/#68--Front-End]-Funcionalidad-editar-Usuario

Feature/#68  front end] funcionalidad editar usuario

Author: manudous

mock-server/.env.example

@@ -1,3 +1,3 @@
 NODE_ENV=development
 PORT=3000
-SIMULATED_DELAY=2000
+SIMULATED_DELAY=2000

mock-server/src/dals/mock.data.ts

@@ -11,7 +11,7 @@ export interface DB {
 export const db: DB = {
   users: [
     {
-      _id: new ObjectId(),
+      _id: new ObjectId('67e29f6498ec8fa00c141af1'),
       nombre: 'Carlos',
       apellido: 'González Pérez',
       email: '[email protected]',
@@ -33,7 +33,7 @@ export const db: DB = {
       },
     },
     {
-      _id: new ObjectId(),
+      _id: new ObjectId('67e2a2a01faec0c33a18c24a'),
       nombre: 'María',
       apellido: 'Martínez López',
       email: '[email protected]',
@@ -55,7 +55,7 @@ export const db: DB = {
       },
     },
     {
-      _id: new ObjectId(),
+      _id: new ObjectId('67e2a2a9bdf6ec804964701e'),
       nombre: 'Juan',
       apellido: 'Rodríguez Sánchez',
       email: '[email protected]',
@@ -77,7 +77,7 @@ export const db: DB = {
       },
     },
     {
-      _id: new ObjectId(),
+      _id: new ObjectId('67e2a2b17f7177a8b57ceed7'),
       nombre: 'Laura',
       apellido: 'García Ruiz',
       email: '[email protected]',
@@ -99,7 +99,7 @@ export const db: DB = {
       },
     },
     {
-      _id: new ObjectId(),
+      _id: new ObjectId('67e2a2bb61e3836ad14d746e'),
       nombre: 'Miguel',
       apellido: 'Fernández Gómez',
       email: '[email protected]',

mock-server/src/dals/user/user.model.ts

@@ -13,6 +13,6 @@ export interface Usuario {
   esProponente?: boolean;
   esAutorizante?: boolean;
   esContraseñaTemporal?: boolean;
-  contraseña: string;
+  contraseña?: string;
   unidad: Lookup;
 }

mock-server/src/dals/user/user.repository.ts

@@ -19,4 +19,12 @@ export const userRepository = {
     db.users.push(newUser);
     return true;
   },
+  getUserById: async (id: string): Promise<model.Usuario> => db.users.find(user => user._id.toHexString() === id),
+  actualizarUsuario: async (id: string, usuarioActualizado: model.Usuario): Promise<boolean> => {
+    const index = db.users.findIndex(user => user._id.toHexString() === id);
+    if (index !== -1) {
+      db.users[index] = { ...db.users[index], ...usuarioActualizado };
+    }
+    return index !== -1;
+  },
 };

mock-server/src/pods/user/index.ts

@@ -1 +1 @@
-export * from './user.api.js';
+export * from './user.rest-api.js';

mock-server/src/pods/user/user.api-model.ts

@@ -13,3 +13,25 @@ export interface Usuario {
   contraseña?: string;
   unidad: string;
 }
+
+export interface UsuarioSummary {
+  id: string;
+  nombre: string;
+  apellido: string;
+  email: string;
+  unidad: string;
+}
+
+export interface UsuarioActualizado {
+  _id: string;
+  nombre: string;
+  apellido: string;
+  email: string;
+  telefono?: string;
+  movil?: string;
+  rol: string;
+  esResponsable?: boolean;
+  esProponente?: boolean;
+  esAutorizante?: boolean;
+  unidad: string;
+}

mock-server/src/pods/user/user.mappers.ts

@@ -6,6 +6,20 @@ import * as model from '#dals/user/user.model.js';
 import * as apiModel from './user.api-model.js';
 
 export const mapUserFromModelToApi = (user: model.Usuario): apiModel.Usuario => ({
+  id: mapObjectIdToString(user._id),
+  nombre: user.nombre,
+  apellido: user.apellido,
+  email: user.email,
+  unidad: user.unidad.id,
+  esAutorizante: user.esAutorizante,
+  esProponente: user.esProponente,
+  esResponsable: user.esResponsable,
+  rol: user.rol.id,
+  movil: user.movil,
+  telefono: user.telefono,
+});
+
+export const mapUserSummaryFromModelToApi = (user: model.Usuario): apiModel.UsuarioSummary => ({
   id: mapObjectIdToString(user._id),
   nombre: user.nombre,
   apellido: user.apellido,
@@ -16,7 +30,7 @@ export const mapUserFromModelToApi = (user: model.Usuario): apiModel.Usuario =>
 export const mapUserListFromModelToApi = (
   userList: CollectionQuery<model.Usuario>
 ): CollectionQuery<apiModel.Usuario> => ({
-  data: mapToCollection(userList.data, mapUserFromModelToApi),
+  data: mapToCollection(userList.data, mapUserSummaryFromModelToApi),
   pagination: {
     totalPages: userList.pagination.totalPages,
   },
@@ -42,3 +56,22 @@ export const mapUserFromApiToModel = (user: apiModel.Usuario): model.Usuario =>
     esAutorizante: user.esAutorizante,
   };
 };
+
+export const mapUserFromApiToModelUpdate = (user: apiModel.UsuarioActualizado): model.Usuario => {
+  const role = db.roles.find(role => role.id === user.rol);
+  const unit = db.unidadProponentes.find(unit => unit.id === user.unidad);
+
+  return {
+    _id: new ObjectId(),
+    nombre: user.nombre,
+    apellido: user.apellido,
+    telefono: user.telefono,
+    movil: user.movil,
+    email: user.email,
+    rol: role,
+    unidad: unit,
+    esResponsable: user.esResponsable,
+    esProponente: user.esProponente,
+    esAutorizante: user.esAutorizante,
+  };
+};

mock-server/src/pods/user/user.api.ts renamed to mock-server/src/pods/user/user.rest-api.ts

@@ -1,7 +1,12 @@
 import { Router } from 'express';
 import { userRepository } from '#dals/user/user.repository.js';
-import { mapUserFromApiToModel, mapUserListFromModelToApi } from './user.mappers.js';
-import { Usuario } from './user.api-model.js';
+import {
+  mapUserFromModelToApi,
+  mapUserListFromModelToApi,
+  mapUserFromApiToModel,
+  mapUserFromApiToModelUpdate,
+} from './user.mappers.js';
+import { Usuario, UsuarioActualizado } from './user.api-model.js';
 
 export const userApi = Router();
 
@@ -25,6 +30,7 @@ userApi
       next(error);
     }
   })
+
   .post('/', async (req, res, next) => {
     try {
       const newUser: Usuario = req.body;
@@ -36,4 +42,25 @@ userApi
     } catch (error) {
       next(error);
     }
+  })
+  .get('/:id', async (req, res, next) => {
+    try {
+      const { id } = req.params;
+      const user = await userRepository.getUserById(id);
+      res.send(mapUserFromModelToApi(user));
+    } catch (error) {
+      next(error);
+    }
+  })
+  .put('/:id', async (req, res, next) => {
+    try {
+      const { id } = req.params;
+      const usuarioActualizado: UsuarioActualizado = req.body;
+      const modelUser = mapUserFromApiToModelUpdate(usuarioActualizado);
+      const estaActualizado = await userRepository.actualizarUsuario(id, modelUser);
+
+      res.status(201).send(estaActualizado);
+    } catch (error) {
+      next(error);
+    }
   });

src/core/react-query/common-query-keys.ts

@@ -1,2 +1,2 @@
 export * from './query';
-export * from './common-query-keys';
+export * from './query-keys';

src/core/react-query/index.ts

@@ -0,0 +1,10 @@
+export const commonQueryKeys = {
+  all: ['common'],
+  unidadRolList: () => ['common', 'unidadRolList'],
+};
+
+export const usersQueryKeys = {
+  all: ['users'],
+  userCollection: (page?: number, pageSize?: number) => ['users', page, pageSize],
+  user: (id: string) => ['user', id],
+};

src/core/react-query/query-keys.ts

@@ -1,2 +1,3 @@
 export * from './theme-provider.component';
 export * from './theme.hooks';
+export * from './theme';

src/core/theme/index.ts

@@ -1,9 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { queryClient } from '#core/react-query';
+import { queryClient, usersQueryKeys } from '#core/react-query';
 import { saveUserRepository } from './create.repository';
 import { Usuario } from './create.vm';
-import { usersQueryKeys } from '../users-keys';
 
 interface UseSaveUserMutationResult {
   saveUser: (user: Usuario) => void;

src/modules/users/create/create.query.hook.ts

@@ -0,0 +1,13 @@
+export interface Usuario {
+  id: string;
+  nombre: string;
+  apellido: string;
+  email?: string;
+  telefono?: string;
+  movil?: string;
+  unidad: string;
+  rol?: string;
+  esResponsable?: boolean;
+  esProponente?: boolean;
+  esAutorizante?: boolean;
+}

src/modules/users/edit-user-sheet/api/edit-user-sheet-api-model.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+import { Usuario } from './edit-user-sheet-api-model';
+
+export const getUserById = async (id: string): Promise<Usuario> => {
+  const response = await axios.get<Usuario>(`/api/user/${id}`);
+
+  return response.data;
+};
+
+export const updateUser = async (usuario: Usuario): Promise<boolean> => {
+  const response = await axios.put<boolean>(`/api/user/${usuario.id}`, usuario);
+
+  return response.data;
+};

src/modules/users/edit-user-sheet/api/edit-user-sheet-api.ts

@@ -0,0 +1,2 @@
+export * from './edit-user-sheet-api';
+export * from './edit-user-sheet-api-model';

src/modules/users/edit-user-sheet/api/index.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Typography } from '@mui/material';
 import { CheckboxForm } from '#common/components';
 import { useWithTheme } from '#core/theme';
-import * as innerClasses from '../edit.styles';
+import * as innerClasses from '../edit-user-sheet.styles';
 
 export const AditionalPermissions: React.FC = () => {
   const classes = useWithTheme(innerClasses);

src/modules/users/edit-user-sheet/components/aditional-permissions.component.tsx

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { SelectForm, TextFieldForm } from '#common/components';
 import { useWithTheme } from '#core/theme';
 import { UnidadRolList } from '#core/api/lookups/unidad-rol';
-import * as innerClasses from '../edit.styles';
+import * as innerClasses from '../edit-user-sheet.styles';
 
 interface Props {
   unidadRolList: UnidadRolList;
@@ -27,7 +27,6 @@ export const UserDetails: React.FC<Props> = props => {
       <div className={classes.row}>
         <TextFieldForm name="telefono" label="Teléfono fijo" />
         <TextFieldForm name="movil" label="Teléfono móvil" />
-        <TextFieldForm name="institucional" label="Teléfono Institucional" />
         <SelectForm label="Unidad" name="unidad" options={unidadRolList.unidades} />
         <SelectForm label="Rol" name="rol" options={unidadRolList.roles} />
       </div>

src/modules/users/edit-user-sheet/components/user-details.component.tsx

@@ -1,34 +1,33 @@
 import React from 'react';
-
 import { Form, Formik } from 'formik';
-import { useWithTheme } from '#core/theme';
-import { UnidadRolList } from '#core/api/lookups/unidad-rol';
-import { Usuario, createEmptyUsuario } from './edit.vm';
 import { Button } from '@mui/material';
-import { AditionalPermissions, UserDetails } from './components';
 import { NavigationButton } from '#common/components';
-import * as innerClasses from './edit.styles';
+import { UnidadRolList } from '#core/api/lookups/unidad-rol';
+import { Usuario } from './edit-user-sheet.vm';
+import { AditionalPermissions, UserDetails } from './components';
+import { formValidation } from './validations';
+import * as classes from './edit-user-sheet.styles';
 
 interface Props {
+  usuario: Usuario;
   unidadRolList: UnidadRolList;
-  onSubmit: (values: Usuario) => void;
+  onSubmit: (usuario: Usuario) => void;
 }
 
 export const EditUser: React.FC<Props> = (props: Props) => {
-  const { unidadRolList, onSubmit } = props;
-  const classes = useWithTheme(innerClasses);
+  const { unidadRolList, onSubmit, usuario } = props;
   return (
     <>
       <div className={classes.root}>
         <Formik
-          initialValues={createEmptyUsuario()}
+          initialValues={usuario}
           enableReinitialize={true}
-          /* TODO: implement Formik form Validation in the next steps */
-          onSubmit={onSubmit}
+          validate={formValidation.validateForm}
+          onSubmit={usuario => onSubmit(usuario)}
         >
-          {({ values }) => (
+          {() => (
             <Form className={classes.form}>
-              <UserDetails unidadRolList={unidadRolList} contraseña={values.contraseña} />
+              <UserDetails unidadRolList={unidadRolList} contraseña={'admin'} />
               <AditionalPermissions />
               <div className={classes.buttonContainer}>
                 <Button type="submit" variant="contained">