Merge pull request #59 from Lemoncode/feature/#49-layout-editar-expediente

Feature/#49 layout editar expediente

Author: manudous

src/modules/expedientes/editar-datos-economicos/components/adjudicacion-form.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { TextFieldForm } from '#common/components';
+import { useWithTheme } from '#core/theme';
+import { MontosIvaForm } from './montos-iva-form.component';
+import * as innerClasses from './adjudicacion-form.styles';
+
+export const AdjudicacionForm: React.FC = () => {
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <section>
+      <Typography variant="h6">Adjudicación</Typography>
+      <MontosIvaForm prefix="adj" />
+      <div className={classes.adjudicatarioContainer}>
+        <TextFieldForm name="adjudicatario" label="Adjudicatario" />
+        <TextFieldForm name="cif" label="CIF" />
+      </div>
+    </section>
+  );
+};

src/modules/expedientes/editar-datos-economicos/components/adjudicacion-form.styles.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@mui/material';
+import { css } from '@emotion/css';
+
+export const adjudicatarioContainer = (theme: Theme) => css`
+  display: flex;
+  gap: ${theme.spacing(2)};
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;

src/modules/expedientes/editar-datos-economicos/components/index.tsx

@@ -0,0 +1,4 @@
+export * from './montos-iva-form.component';
+export * from './adjudicacion-form.component';
+export * from './presupuesto-base-form.component';
+export * from './listado-anualidad.component';

src/modules/expedientes/editar-datos-economicos/components/listado-anualidad.component.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button, Card, CardContent, IconButton, Typography } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderIcon from '@mui/icons-material/Folder';
+import { useWithTheme } from '#core/theme';
+import { Anualidad } from '../editar-expediente.vm';
+import * as innerClasses from './listado-anualidad.styles';
+
+const AnualidadItem: React.FC<Anualidad> = ({ ano: year, monto: amount, iva, simbolo: symbol }) => {
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <div className={classes.ListItemContainer}>
+      <span>{year}</span>
+      <span>{`${amount.toLocaleString()}${symbol}`}</span>
+      <span>{`${iva.toLocaleString()}${symbol}`}</span>
+      <IconButton>
+        <DeleteIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+interface Props {
+  rows: Anualidad[];
+}
+
+export const ListadoAnualidad: React.FC<Props> = props => {
+  const { rows } = props;
+  const classes = useWithTheme(innerClasses);
+  return (
+    <Card sx={{ mt: 2 }}>
+      <CardContent>
+        <div className={classes.tableHeader}>
+          <Typography variant="caption" fontWeight="bold">
+            Anualidades
+          </Typography>
+          <Button variant="outlined" className={classes.newButton}>
+            <FolderIcon />
+            <span>Nueva</span>
+          </Button>
+        </div>
+
+        <div className={classes.TableBody}>
+          <Typography variant="caption" fontWeight={'bold'}>
+            Ejercicio
+          </Typography>
+        </div>
+        {rows.map(row => (
+          <AnualidadItem key={row.id} {...row} />
+        ))}
+      </CardContent>
+    </Card>
+  );
+};

src/modules/expedientes/editar-datos-economicos/components/listado-anualidad.styles.ts

@@ -0,0 +1,32 @@
+import { Theme } from '@mui/material';
+import { css } from '@emotion/css';
+
+export const tableHeader = (theme: Theme) => css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${theme.spacing(2)};
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+export const newButton = (theme: Theme) => css`
+  display: flex;
+  gap: ${theme.spacing(1)};
+`;
+
+export const ListItemContainer = (theme: Theme) => css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: ${theme.spacing(1)};
+  padding-top: ${theme.spacing(1)};
+  border-bottom: 1px solid #ddd;
+`;
+
+export const TableBody = css`
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ddd;
+`;

src/modules/expedientes/editar-datos-economicos/components/montos-iva-form.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextFieldForm } from '#common/components';
+import { useWithTheme } from '#core/theme';
+import * as innerClasses from './montos-iva-form.styles';
+
+export const MontosIvaForm: React.FC<{ prefix: string }> = ({ prefix }) => {
+  const classes = useWithTheme(innerClasses);
+  return (
+    <section className={classes.container}>
+      <TextFieldForm name={`${prefix}-importe-sin-iva`} label="Importe sin IVA" />
+      <TextFieldForm name={`${prefix}-iva`} label="% IVA" value={21} disabled />
+      <TextFieldForm name={`${prefix}-importe-iva`} label="Importe IVA" />
+      <TextFieldForm name={`${prefix}-importe-con-iva`} label="Importe con IVA" />
+    </section>
+  );
+};

src/modules/expedientes/editar-datos-economicos/components/montos-iva-form.styles.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@mui/material';
+import { css } from '@emotion/css';
+
+export const container = (theme: Theme) => css`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ${theme.spacing(2)};
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;

src/modules/expedientes/editar-datos-economicos/components/presupuesto-base-form.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { ListadoAnualidad } from './listado-anualidad.component';
+import { MontosIvaForm } from './montos-iva-form.component';
+import { Anualidad } from '../editar-expediente.vm';
+
+export const PresupuestoBaseForm: React.FC<{ rows: Anualidad[] }> = props => {
+  const { rows } = props;
+
+  return (
+    <section>
+      <Typography variant="h6">Presupuesto base</Typography>
+      <MontosIvaForm prefix="base" />
+      <ListadoAnualidad rows={rows} />
+    </section>
+  );
+};

src/modules/expedientes/editar-datos-economicos/editar-datos-economicos.pod.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
+import { Anualidad } from './editar-expediente.vm';
+import { EditarInformacionFinanciera } from './editar-informacion-financiera.component';
 
 export const EditarDatosEconomicosPod: React.FC = () => {
-  return <h2>Datos Económicos</h2>;
+  // TODO: quitar luego de su implementacion
+  const listadoAnualidades: Anualidad[] = [
+    { ano: 2022, monto: 1234, iva: 1111, id: 1, simbolo: '€' },
+    { ano: 2023, monto: 5678, iva: 2222, id: 2, simbolo: '€' },
+    { ano: 2024, monto: 9123, iva: 3333, id: 3, simbolo: '€' },
+  ];
+  return <EditarInformacionFinanciera onSubmit={() => {}} listadoAnualidades={listadoAnualidades} />;
 };

src/modules/expedientes/editar-datos-economicos/editar-expediente.type.ts

@@ -0,0 +1,13 @@
+export interface Expediente {
+  id: number;
+}
+
+export interface Anualidad {
+  id: number;
+  ano: number;
+  monto: number;
+  iva: number;
+  simbolo: string;
+}
+
+export const createEmptyExpediente = (): Expediente => ({ id: 0 });

src/modules/expedientes/editar-datos-economicos/editar-expediente.vm.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { Form, Formik } from 'formik';
+import { NavigationButton } from '#common/components';
+import { useWithTheme } from '#core/theme';
+import { AdjudicacionForm, PresupuestoBaseForm } from './components';
+import { Anualidad, Expediente, createEmptyExpediente } from './editar-expediente.vm';
+import * as innerClasses from './editar-informacion-financiera.styles';
+
+interface Props {
+  onSubmit: (values: Expediente) => void;
+  listadoAnualidades: Anualidad[];
+}
+
+export const EditarInformacionFinanciera: React.FC<Props> = props => {
+  const { onSubmit, listadoAnualidades } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <section className={classes.root}>
+      <Formik initialValues={createEmptyExpediente()} enableReinitialize={true} onSubmit={onSubmit}>
+        <Form className={classes.form}>
+          <PresupuestoBaseForm rows={listadoAnualidades} />
+          <AdjudicacionForm />
+          <section className={classes.buttonContainer}>
+            <NavigationButton path="/expedientes" text="Volver" variant="text" />
+            <Button type="submit" variant="contained">
+              Guardar
+            </Button>
+          </section>
+        </Form>
+      </Formik>
+    </section>
+  );
+};

src/modules/expedientes/editar-datos-economicos/editar-informacion-financiera.component.tsx

@@ -0,0 +1,30 @@
+import { Theme } from '@mui/material';
+import { css } from '@emotion/css';
+
+export const root = (theme: Theme) => css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(4)};
+`;
+
+export const form = (theme: Theme) => css`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: ${theme.spacing(4)};
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const buttonContainer = (theme: Theme) => css`
+  grid-column: 1 / 3;
+  display: flex;
+  justify-content: flex-end;
+  gap: ${theme.spacing(4)};
+
+  @media (max-width: 768px) {
+    grid-column: 1 / 2;
+    place-self: center;
+  }
+`;

src/modules/expedientes/editar-datos-economicos/editar-informacion-financiera.styles.ts

@@ -1,10 +1,12 @@
+import * as innerClasses from './expedientes.styles';
+
+import { Box, Chip } from '@mui/material';
+import { Delete as DeleteIcon, Edit as EditIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
+
 import { ColumnDef } from '@tanstack/react-table';
+import { Expediente } from './expedientes.vm';
 import { Link } from '@tanstack/react-router';
-import { Chip, Box } from '@mui/material';
-import { Edit as EditIcon, Delete as DeleteIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
 import { useWithTheme } from '#core/theme';
-import { Expediente } from './expedientes.vm';
-import * as innerClasses from './expedientes.styles';
 
 export const useColumns = (): ColumnDef<Expediente>[] => {
   const classes = useWithTheme(innerClasses);