Skip to content

Commit e8f9f19

Browse files
manudousmanudous
authored
Merge pull request #59 from Lemoncode/feature/#49-layout-editar-expediente
Feature/#49 layout editar expediente
2 parents f8f361a + 5ef71bd commit e8f9f19

14 files changed

+261
-5
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Typography } from '@mui/material';
3+
import { TextFieldForm } from '#common/components';
4+
import { useWithTheme } from '#core/theme';
5+
import { MontosIvaForm } from './montos-iva-form.component';
6+
import * as innerClasses from './adjudicacion-form.styles';
7+
8+
export const AdjudicacionForm: React.FC = () => {
9+
const classes = useWithTheme(innerClasses);
10+
11+
return (
12+
<section>
13+
<Typography variant="h6">Adjudicación</Typography>
14+
<MontosIvaForm prefix="adj" />
15+
<div className={classes.adjudicatarioContainer}>
16+
<TextFieldForm name="adjudicatario" label="Adjudicatario" />
17+
<TextFieldForm name="cif" label="CIF" />
18+
</div>
19+
</section>
20+
);
21+
};

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Theme } from '@mui/material';
2+
import { css } from '@emotion/css';
3+
4+
export const adjudicatarioContainer = (theme: Theme) => css`
5+
display: flex;
6+
gap: ${theme.spacing(2)};
7+
8+
@media (max-width: 768px) {
9+
flex-direction: column;
10+
}
11+
`;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './montos-iva-form.component';
2+
export * from './adjudicacion-form.component';
3+
export * from './presupuesto-base-form.component';
4+
export * from './listado-anualidad.component';

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { Button, Card, CardContent, IconButton, Typography } from '@mui/material';
3+
import DeleteIcon from '@mui/icons-material/Delete';
4+
import FolderIcon from '@mui/icons-material/Folder';
5+
import { useWithTheme } from '#core/theme';
6+
import { Anualidad } from '../editar-expediente.vm';
7+
import * as innerClasses from './listado-anualidad.styles';
8+
9+
const AnualidadItem: React.FC<Anualidad> = ({ ano: year, monto: amount, iva, simbolo: symbol }) => {
10+
const classes = useWithTheme(innerClasses);
11+
12+
return (
13+
<div className={classes.ListItemContainer}>
14+
<span>{year}</span>
15+
<span>{`${amount.toLocaleString()}${symbol}`}</span>
16+
<span>{`${iva.toLocaleString()}${symbol}`}</span>
17+
<IconButton>
18+
<DeleteIcon />
19+
</IconButton>
20+
</div>
21+
);
22+
};
23+
24+
interface Props {
25+
rows: Anualidad[];
26+
}
27+
28+
export const ListadoAnualidad: React.FC<Props> = props => {
29+
const { rows } = props;
30+
const classes = useWithTheme(innerClasses);
31+
return (
32+
<Card sx={{ mt: 2 }}>
33+
<CardContent>
34+
<div className={classes.tableHeader}>
35+
<Typography variant="caption" fontWeight="bold">
36+
Anualidades
37+
</Typography>
38+
<Button variant="outlined" className={classes.newButton}>
39+
<FolderIcon />
40+
<span>Nueva</span>
41+
</Button>
42+
</div>
43+
44+
<div className={classes.TableBody}>
45+
<Typography variant="caption" fontWeight={'bold'}>
46+
Ejercicio
47+
</Typography>
48+
</div>
49+
{rows.map(row => (
50+
<AnualidadItem key={row.id} {...row} />
51+
))}
52+
</CardContent>
53+
</Card>
54+
);
55+
};

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Theme } from '@mui/material';
2+
import { css } from '@emotion/css';
3+
4+
export const tableHeader = (theme: Theme) => css`
5+
display: flex;
6+
justify-content: space-between;
7+
align-items: center;
8+
margin-bottom: ${theme.spacing(2)};
9+
10+
@media (max-width: 768px) {
11+
flex-direction: column;
12+
}
13+
`;
14+
15+
export const newButton = (theme: Theme) => css`
16+
display: flex;
17+
gap: ${theme.spacing(1)};
18+
`;
19+
20+
export const ListItemContainer = (theme: Theme) => css`
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
padding-bottom: ${theme.spacing(1)};
25+
padding-top: ${theme.spacing(1)};
26+
border-bottom: 1px solid #ddd;
27+
`;
28+
29+
export const TableBody = css`
30+
padding-bottom: 8px;
31+
border-bottom: 1px solid #ddd;
32+
`;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { TextFieldForm } from '#common/components';
3+
import { useWithTheme } from '#core/theme';
4+
import * as innerClasses from './montos-iva-form.styles';
5+
6+
export const MontosIvaForm: React.FC<{ prefix: string }> = ({ prefix }) => {
7+
const classes = useWithTheme(innerClasses);
8+
return (
9+
<section className={classes.container}>
10+
<TextFieldForm name={`${prefix}-importe-sin-iva`} label="Importe sin IVA" />
11+
<TextFieldForm name={`${prefix}-iva`} label="% IVA" value={21} disabled />
12+
<TextFieldForm name={`${prefix}-importe-iva`} label="Importe IVA" />
13+
<TextFieldForm name={`${prefix}-importe-con-iva`} label="Importe con IVA" />
14+
</section>
15+
);
16+
};

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Theme } from '@mui/material';
2+
import { css } from '@emotion/css';
3+
4+
export const container = (theme: Theme) => css`
5+
display: grid;
6+
grid-template-columns: repeat(4, 1fr);
7+
gap: ${theme.spacing(2)};
8+
9+
@media (max-width: 768px) {
10+
grid-template-columns: 1fr;
11+
}
12+
`;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Typography } from '@mui/material';
3+
import { ListadoAnualidad } from './listado-anualidad.component';
4+
import { MontosIvaForm } from './montos-iva-form.component';
5+
import { Anualidad } from '../editar-expediente.vm';
6+
7+
export const PresupuestoBaseForm: React.FC<{ rows: Anualidad[] }> = props => {
8+
const { rows } = props;
9+
10+
return (
11+
<section>
12+
<Typography variant="h6">Presupuesto base</Typography>
13+
<MontosIvaForm prefix="base" />
14+
<ListadoAnualidad rows={rows} />
15+
</section>
16+
);
17+
};

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import React from 'react';
2+
import { Anualidad } from './editar-expediente.vm';
3+
import { EditarInformacionFinanciera } from './editar-informacion-financiera.component';
24

35
export const EditarDatosEconomicosPod: React.FC = () => {
4-
return <h2>Datos Económicos</h2>;
6+
// TODO: quitar luego de su implementacion
7+
const listadoAnualidades: Anualidad[] = [
8+
{ ano: 2022, monto: 1234, iva: 1111, id: 1, simbolo: '€' },
9+
{ ano: 2023, monto: 5678, iva: 2222, id: 2, simbolo: '€' },
10+
{ ano: 2024, monto: 9123, iva: 3333, id: 3, simbolo: '€' },
11+
];
12+
return <EditarInformacionFinanciera onSubmit={() => {}} listadoAnualidades={listadoAnualidades} />;
513
};

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

Whitespace-only changes.

0 commit comments

Comments
 (0)