Merge pull request #67 from Lemoncode/feature/#50-layout-editar-expediente-certificaciones

feature/#50 layout editar expediente certificaciones

Author: manudous

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

@@ -8,3 +8,13 @@ export const usersQueryKeys = {
   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/modules/expedientes/editar-certificaciones/components/index.ts

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

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

@@ -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.styles.ts

@@ -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/editar-certificaciones.columns.tsx

@@ -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>
+      ),
+    },
+  ];
+};

src/modules/expedientes/editar-certificaciones/editar-certificaciones.pod.tsx

@@ -1,5 +1,46 @@
 import React from 'react';
+import { Button, MenuItem, TextField } from '@mui/material';
+import { NavigationButton, Spinner } from '#common/components';
+import { usePagination } from './use-pagination-hook';
+import { TableComponent } from './components';
+import { useColumns } from './editar-certificaciones.columns';
+import * as classes from './editar-certificaciones.styles';
 
 export const EditarCertificacionesPod: React.FC = () => {
-  return <h2>Certificaciones</h2>;
+  const { certificacionCollection, currentPage, totalPages, isLoading, onPageChange } = usePagination();
+  const columns = useColumns();
+  const [selectedOption, setSelectedOption] = React.useState('opcion1');
+
+  const handleSelectChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedOption(event.target.value);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Spinner isSpinnerShowing={isLoading} />
+      <div className={classes.header}>
+        <TextField select label="Ordenar" value={selectedOption} onChange={handleSelectChange} variant="outlined">
+          <MenuItem value="opcion1">Fecha de creación</MenuItem>
+        </TextField>
+        <div className="newCertificacionButton">
+          <Button variant="contained" color="primary">
+            Nueva certificación
+          </Button>
+        </div>
+      </div>
+      <TableComponent
+        columns={columns}
+        certificacionCollection={certificacionCollection.data}
+        totalItems={totalPages}
+        currentPage={currentPage}
+        onPageChange={onPageChange}
+      />
+      <section className={classes.buttonContainer}>
+        <NavigationButton path="/expedientes" text="Volver" variant="text" />
+        <Button type="submit" variant="contained">
+          Guardar
+        </Button>
+      </section>
+    </div>
+  );
 };

src/modules/expedientes/editar-certificaciones/editar-certificaciones.query.hook.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { CollectionQuery, createEmptyCollectionQuery } from '#common/models';
+import { certificacionesQueryKeys } from '#core/react-query';
+import { getCertificacionesRepository } from './editar-certificaciones.repository';
+import { CertificacionQueryFilter, Certificacion } from './editar-certificaciones.vm';
+
+interface UseCertificacionesQueryResult {
+  certificacionCollection: CollectionQuery<Certificacion>;
+  isLoading: boolean;
+}
+
+export const useCertificacionesQuery = (
+  certificacionFilter: CertificacionQueryFilter
+): UseCertificacionesQueryResult => {
+  const { page, pageSize } = certificacionFilter;
+
+  const { data: certificacionCollection = createEmptyCollectionQuery(), isLoading } = useQuery({
+    queryKey: certificacionesQueryKeys.certificacionCollection(page, pageSize),
+    queryFn: () => getCertificacionesRepository(),
+  });
+
+  return {
+    certificacionCollection,
+    isLoading,
+  };
+};

src/modules/expedientes/editar-certificaciones/editar-certificaciones.repository.ts

@@ -0,0 +1,28 @@
+import { CollectionQuery } from '#common/models';
+import { Certificacion } from './editar-certificaciones.vm';
+
+export const getCertificacionesRepository = async (): Promise<CollectionQuery<Certificacion>> => ({
+  data: [
+    {
+      id: '002',
+      numeroFactura: '2213AF50',
+      fechaFactura: '30/09/2019',
+      periodoGasto: 'Del 01/09/2019 al 30/09/2019',
+      importe: '15.0585.580 €',
+      fechaCertificacion: '30/09/2019',
+      certifica: 'Jesús Calvo',
+    },
+    {
+      id: '052',
+      numeroFactura: '2213AF51',
+      fechaFactura: '30/09/2019',
+      periodoGasto: 'Del 01/09/2019 al 30/09/2019',
+      importe: '15.0585.580 €',
+      fechaCertificacion: '30/09/2019',
+      certifica: 'Jesús Calvo',
+    },
+  ],
+  pagination: {
+    totalPages: 1,
+  },
+});

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

@@ -0,0 +1,42 @@
+import { css } from '@emotion/css';
+import { theme } from '#core/theme';
+
+export const root = css`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+`;
+
+export const header = css`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 ${theme.spacing(2)};
+`;
+
+export const newCertificacionButton = () => css`
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+  gap: '1rem';
+`;
+
+export const link = css`
+  color: ${theme.palette.common.black};
+  text-decoration: none;
+  cursor: pointer;
+`;
+
+export const buttonContainer = css`
+  position: absolute;
+  bottom: ${theme.spacing(2)};
+  right: ${theme.spacing(2)};
+  display: flex;
+  justify-content: flex-end;
+  gap: ${theme.spacing(4)};
+`;
+
+export const volverButton = css`
+  border-radius: ${theme.shape.borderRadius}px;
+`;

src/modules/expedientes/editar-certificaciones/editar-certificaciones.vm.ts

@@ -0,0 +1,24 @@
+export interface Certificacion {
+  id: string;
+  numeroFactura: string;
+  fechaFactura: string;
+  periodoGasto: string;
+  importe: string;
+  fechaCertificacion: string;
+  certifica: string;
+}
+
+export const createEmptyCertificacion = (): Certificacion => ({
+  id: '',
+  numeroFactura: '',
+  fechaFactura: '',
+  periodoGasto: '',
+  importe: '',
+  fechaCertificacion: '',
+  certifica: '',
+});
+
+export interface CertificacionQueryFilter {
+  page: number;
+  pageSize: number;
+}

src/modules/expedientes/editar-certificaciones/use-pagination-hook.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCertificacionesQuery } from './editar-certificaciones.query.hook';
+
+export const usePagination = (initialPage: number = 0, pageSize: number = 10) => {
+  const [currentPage, setCurrentPage] = React.useState(initialPage);
+  const { certificacionCollection, isLoading } = useCertificacionesQuery({ page: currentPage, pageSize });
+
+  const handleChangePage = (_: React.ChangeEvent<unknown>, newPage: number) => setCurrentPage(newPage - 1);
+
+  return {
+    certificacionCollection,
+    currentPage,
+    totalPages: certificacionCollection.pagination.totalPages,
+    isLoading,
+    onPageChange: handleChangePage,
+  };
+};

src/modules/expedientes/expedientes-keys.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { CollectionQuery, createEmptyCollectionQuery } from '#common/models';
+import { expedientesQueryKeys } from '#core/react-query';
 import { getExpedienteRepository } from './expedientes.repository';
-import { expedientesQueryKeys } from '#modules/expedientes/expedientes-keys.ts';
 import { ExpedienteQueryFilter, Expediente } from './expedientes.vm';
 
 interface UseExpedientesQueryResult {