Merge pull request #70 from Lemoncode/feature/#62-crear-layout-contrato-abierto-temporalidad

Created open contract layout temporality

Author: manudous

src/modules/expedientes/crear/components/steps/steps.styles.ts

@@ -2,4 +2,33 @@ import { css } from '@emotion/css';
 
 export const form = css`
   width: 100%;
+  .MuiOutlinedInput-root {
+    padding: 0;
+  }
+`;
+
+export const headerFormGrid = css`
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr) 1rem 1fr;
+    place-items: center;
+    gap: 16px;
+  }
+`;
+
+export const footerFormGrid = css`
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    place-items: center;
+    gap: 16px;
+    & > div:last-child {
+      grid-column: 1 / 3;
+    }
+  }
+`;
+
+export const selectForm = css`
+  width: 10rem;
+  margin: 0;
 `;

src/modules/expedientes/crear/components/steps/temporalidad-step.component.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Form, Formik } from 'formik';
-import { TextFieldForm } from '#common/components';
 import { useCreateExpedienteContext, Temporalidad } from '#modules/expedientes/core/providers';
 import { StepNavigation } from '../step-navigation.component';
 import { temporalidadValidations } from '../validations';
+import { SelectForm, TextFieldForm } from '#common/components/index.ts';
+import { Typography } from '@mui/material';
 import * as classes from './steps.styles';
 
 export const TemporalityStep: React.FC = () => {
@@ -22,7 +23,99 @@ export const TemporalityStep: React.FC = () => {
     >
       {() => (
         <Form className={classes.form}>
-          <TextFieldForm name="description" label="Descripcion" />
+          <div className={classes.headerFormGrid}>
+            <TextFieldForm
+              name="periodo-de-ejecucion"
+              label="Periodo de ejecución"
+              type="text"
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                },
+                input: {
+                  endAdornment: (
+                    <SelectForm
+                      name="unidad"
+                      label="Meses"
+                      options={[
+                        { id: '1', nombre: 'Días' },
+                        { id: '2', nombre: 'Meses' },
+                        { id: '3', nombre: 'Años' },
+                      ]}
+                      className={classes.selectForm}
+                    />
+                  ),
+                },
+              }}
+            />
+            <TextFieldForm
+              name="date"
+              label="Fecha de inicio"
+              type="date"
+              required
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                },
+              }}
+            />
+            <span>-</span>
+            <TextFieldForm
+              name="date3"
+              label="Fecha fin"
+              type="date"
+              required
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                },
+              }}
+            />
+            <SelectForm
+              label="Prorogable"
+              name="prorogable"
+              options={[
+                { id: '1', nombre: 'Si' },
+                { id: '2', nombre: 'No' },
+              ]}
+              required
+            />
+
+            <TextFieldForm
+              name="duracion-maxima-prorroga"
+              label="Duración máxima prórroga"
+              type="text"
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                },
+                input: {
+                  endAdornment: (
+                    <SelectForm
+                      name="unidad"
+                      label="Meses"
+                      options={[
+                        { id: '1', nombre: 'Días' },
+                        { id: '2', nombre: 'Meses' },
+                        { id: '3', nombre: 'Años' },
+                      ]}
+                      className={classes.selectForm}
+                    />
+                  ),
+                },
+              }}
+            />
+          </div>
+          <Typography variant="h6" fontWeight={600} marginTop={2} marginBottom={2}>
+            ADJUDICACIÓN
+          </Typography>
+          <div className={classes.footerFormGrid}>
+            <TextFieldForm type="number" name="importeSinIva" label="Importe Sin IVA" required />
+            <TextFieldForm type="number" name="tipoIva" label="Tipo de IVA" required />
+            <TextFieldForm type="number" name="importeIva" label="Importe IVA" required />
+            <TextFieldForm type="number" name="importeConIva" label="Importe con IVA" required />
+            <TextFieldForm type="number" name="numero" label="Num.Sorolla2" />
+          </div>
           <StepNavigation />
         </Form>
       )}