Feature/#51 layout editar expediente notas

src/common/components/form/text-field/text-field.component.tsx

@@ -33,6 +33,7 @@ export const TextFieldForm: React.FC<TextFieldProps> = props => {
         },
       }}
       margin="normal"
+
     />
   );
 };

src/modules/expedientes/crear-notas/components/fileUpload/fileUpload.component.tsx

@@ -0,0 +1,36 @@
+import { IconButton, LinearProgress } from "@mui/material"
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useWithTheme } from "#core/theme/theme.hooks.ts";
+import * as innerClasses from './fileUpload.styles';
+
+export const FileUploaded = () => {
+
+  // logica segun si el archivo se ha subido correctamente o no
+  // mostrar nombre del fichero o Upload failed
+  // motivo del error ejemplo: File to large
+  // mostrar de un color u otro según estado
+
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <div className={classes.fileBox}>
+      <div className={classes.fileBoxLeft}>
+        <UploadFileIcon color="primary" />
+        <div>
+          <span>document_file_name.pdf</span>
+          <div className={classes.uploadingState}>
+            <span>100kb</span>
+            <span className={classes.pointSeparation}></span>
+            <span>Cargando</span>
+          </div>
+          <LinearProgress variant="determinate" value={30} />
+        </div>
+      </div>
+      <IconButton aria-label="delete">
+        <DeleteIcon />
+      </IconButton>
+    </div>
+
+  )
+}

src/modules/expedientes/crear-notas/components/fileUpload/fileUpload.styles.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/css';
+
+export const fileBoxLeft = css`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+export const fileBox = css`
+  display: flex;
+  justify-content: space-between;
+`;
+export const uploadingState = css`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  color: gray;
+`;
+export const pointSeparation = css`
+  width: 3px;
+  height: 3px;
+  background-color: gray;
+  border-radius: 50%;
+`;

src/modules/expedientes/crear-notas/crear-notas.component.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Button, createTheme, Dialog, DialogContent, DialogTitle, IconButton, styled, ThemeProvider } from "@mui/material"
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
+import * as innerClasses from './crear-notas.styles';
+import { Form, Formik } from 'formik';
+import { TextFieldForm } from '#common/components/index.ts';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { FileUploaded } from './components/fileUpload/fileUpload.component';
+import CloseIcon from '@mui/icons-material/Close';
+
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  whiteSpace: 'nowrap',
+  width: 1,
+});
+
+const theme = createTheme({
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+        },
+      },
+      variants: [
+        {
+          props: { variant: "text" },
+          style: {
+            borderWidth: "2px",
+            borderStyle: "dashed",
+            borderColor: '#E0E0E0',
+            transition: 'border-color 0.3s ease-in-out',
+            "&:hover": {
+              borderColor: '#1976D2'
+            }
+          }
+        }
+      ],
+    }
+  }
+})
+
+interface Props {
+  isOpen: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const CrearNota: React.FC<Props> = (props) => {
+
+  // Sustituir por useState del contexto
+  // const isOpen = false;
+  const { isOpen, setOpen } = props;
+
+  const classes = useWithTheme(innerClasses);
+  const handleSubmit = () => {
+    // Implementacion
+  }
+
+  return (
+    <Dialog open={isOpen} maxWidth='md' fullWidth>
+      <DialogTitle>
+        <div className={classes.titleBox}>
+          <span>Nueva Nota</span>
+          <IconButton aria-label="close" onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+      </DialogTitle>
+      <DialogContent>
+        <div className={classes.root}>
+          <Formik
+            initialValues={[]}
+            enableReinitialize={true}
+            onSubmit={handleSubmit}
+          >
+            <Form className={classes.form}>
+              <div className={classes.formHeader}>
+                <TextFieldForm name='id' label="ID" />
+                <TextFieldForm name='autor' label="Autor" />
+              </div>
+              <TextFieldForm
+                name='noteContent'
+                label="Contenido de la nota"
+                multiline
+                rows={3}
+              />
+              <ThemeProvider theme={theme}>
+                <Button
+                  component="label"
+                  role={undefined}
+                  variant="text"
+                  tabIndex={-1}
+                  fullWidth
+
+                >
+                  <div className={classes.formAddFile}>
+                    <UploadFileIcon />
+                    <span className={classes.formAddFileTitle}>
+                      <b className={classes.formAddFileTitleStart}>Enlaza</b>
+                      <span> o arrastra y suelta un archivo</span>
+                    </span>
+                    <span className={classes.formAddFileTypes}>
+                      SVG, PNG, JPG o GIF (max. 3MB)
+                    </span>
+                  </div>
+
+                  <VisuallyHiddenInput
+                    type="file"
+                    onChange={(event) => console.log(event.target.files)}
+                    multiple
+                  />
+                </Button>
+              </ThemeProvider>
+            </Form>
+          </Formik>
+          <div className={classes.filesBox}>
+            <FileUploaded />
+            <FileUploaded />
+          </div>
+          <div className={classes.buttonsGroup}>
+            <Button variant='text'>Cancelar</Button>
+            <Button variant='contained'>Guardar</Button>
+          </div>
+
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/modules/expedientes/crear-notas/crear-notas.pod.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CrearNota } from "./crear-notas.component"
+
+interface Props {
+  isOpen: boolean
+  setNewNoteOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const CrearNotaPod: React.FC<Props> = props => {
+
+  const { isOpen, setNewNoteOpen } = props;
+
+  return <CrearNota isOpen={isOpen} setOpen={setNewNoteOpen} />
+}

src/modules/expedientes/crear-notas/crear-notas.styles.ts

@@ -0,0 +1,57 @@
+import { css } from '@emotion/css';
+import { theme } from '#core/theme';
+
+export const root = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const form = () => css`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const formHeader = css`
+  display: flex;
+  gap: ${theme.spacing(4)};
+`;
+
+export const formAddFile = () => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 30px;
+`;
+
+export const formAddFileTitle = () => css`
+  color: black;
+`;
+export const formAddFileTypes = () => css`
+  color: gray;
+`;
+
+export const formAddFileTitleStart = () => css`
+  color: ${theme.palette.primary.main};
+  text-decoration: underline;
+`;
+
+export const filesBox = () => css`
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+export const buttonsGroup = () => css`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 30px;
+`;
+
+export const titleBox = () => css`
+  display: flex;
+  justify-content: space-between;
+`;

src/modules/expedientes/crear-notas/index.ts

@@ -0,0 +1 @@
+export * from './crear-notas.pod';

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

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