Merge branch 'main' into feature/#62-crear-layout-contrato-abierto-temporalidad

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/common/hooks/index.ts

@@ -1 +1,2 @@
 export * from './form-field.hook';
+export * from './toogle.hook';

src/common/hooks/toogle.hook.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export const useToggle = (initialState: boolean) => {
+  const [isOpen, setIsOpen] = React.useState(initialState);
+
+  const onToggle = () => setIsOpen(!isOpen);
+
+  return {
+    isOpen,
+    onToggle,
+    setIsOpen,
+  };
+};

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,20 @@
+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],
+};
+
+export const expedientesQueryKeys = {
+  all: ['expedientes'],
+  expedienteCollection: (page?: number, pageSize?: number) => ['expedientes', page, pageSize],
+};
+
+export const certificacionesQueryKeys = {
+  all: ['certificaciones'],
+  certificacionCollection: (page?: number, pageSize?: number) => ['certificaciones', page, pageSize],
+};

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

@@ -0,0 +1 @@
+export * from './table.component';

src/modules/expedientes/editar-certificaciones/components/index.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Pagination, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { Certificacion } from '../editar-certificaciones.vm';
+import * as classes from './table.styles';
+
+interface Props {
+  columns: ColumnDef<Certificacion>[];
+  certificacionCollection: Certificacion[];
+  totalItems: number;
+  currentPage: number;
+  onPageChange: (event: React.ChangeEvent<unknown>, page: number) => void;
+}
+
+export const TableComponent: React.FC<Props> = props => {
+  const { columns, certificacionCollection: data, totalItems, currentPage, onPageChange } = props;
+  const tableInstance = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    rowCount: totalItems,
+  });
+
+  const { getRowModel, getHeaderGroups, getPageCount } = tableInstance;
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table}>
+        <TableHead>
+          {getHeaderGroups().map(headerGroup => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <TableCell key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableHead>
+        <TableBody>
+          {getRowModel().rows.map(row => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Pagination
+        count={getPageCount()}
+        page={currentPage + 1}
+        onChange={onPageChange}
+        className={classes.pagination}
+      />
+    </TableContainer>
+  );
+};

src/modules/expedientes/editar-certificaciones/components/table.component.tsx

@@ -0,0 +1,11 @@
+import { css } from '@emotion/css';
+
+export const table = css`
+  min-width: 1200px;
+`;
+
+export const pagination = css`
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+`;

src/modules/expedientes/editar-certificaciones/components/table.styles.ts

@@ -0,0 +1,32 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Link } from '@tanstack/react-router';
+import { Box } from '@mui/material';
+import { Edit as EditIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
+import { Certificacion } from './editar-certificaciones.vm';
+import * as classes from './editar-certificaciones.styles';
+
+export const useColumns = (): ColumnDef<Certificacion>[] => {
+  return [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'numeroFactura', header: 'Número de factura' },
+    { accessorKey: 'fechaFactura', header: 'Fecha de factura' },
+    { accessorKey: 'periodoGasto', header: 'Periodo de gasto' },
+    { accessorKey: 'importe', header: 'Importe' },
+    { accessorKey: 'fechaCertificacion', header: 'Fecha de certificación' },
+    { accessorKey: 'certifica', header: 'Certifica' },
+    {
+      accessorKey: 'acciones',
+      header: 'Acciones',
+      cell: ({ row }) => (
+        <Box display="flex" alignItems="center" gap={2}>
+          <Link to={`/certificaciones/${row.original.id}`} className={classes.link}>
+            <VisibilityIcon sx={{ color: 'gray' }} />
+          </Link>
+          <Link to={`/editar-certificacion/${row.original.id}`} className={classes.link}>
+            <EditIcon sx={{ color: 'gray' }} />
+          </Link>
+        </Box>
+      ),
+    },
+  ];
+};