Merge pull request #54 from Lemoncode/feature/create-modal-for-records

Feature/create modal for records

Author: brauliodiez

src/modules/records/core/providers/create-record/create-record.context.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Record } from './create-record.vm';
+
+interface CreateRecordContextProps {
+  formData: Record;
+  activeStep: number;
+  isOpen: boolean;
+  onOpen: () => void;
+  onNextStep: <K extends keyof Record>(step: K, value: Record[K]) => void;
+  onPreviousStep: () => void;
+  onCancel: () => void;
+}
+
+export const CreateRecordContext = React.createContext<CreateRecordContextProps | undefined>(undefined);
+
+export const useCreateRecordContext = () => {
+  const context = React.useContext(CreateRecordContext);
+  if (!context) {
+    throw new Error('useCreateRecordContext must be used within a CreateRecordProvider');
+  }
+  return context;
+};

src/modules/records/core/providers/create-record/create-record.provider.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { CreateRecordContext } from './create-record.context';
+import { createEmptyRecordFormData, Record, Steps } from './create-record.vm';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const CreateRecordProvider: React.FC<Props> = props => {
+  const { children } = props;
+
+  const [formData, setFormData] = React.useState<Record>(createEmptyRecordFormData);
+  const [activeStep, setActiveStep] = React.useState<number>(Steps.generalData);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const reset = () => {
+    setFormData(createEmptyRecordFormData());
+    setActiveStep(Steps.generalData);
+  };
+
+  const updateStepData = <K extends keyof Record>(step: K, data: Record[K]) =>
+    setFormData(prev => ({ ...prev, [step]: data }));
+
+  const toggleModal = () => setIsOpen(!isOpen);
+  const isLastStep = activeStep === Steps.temporality;
+
+  const handleSubmitAll = async (data: Record) => {
+    console.log('Formulario enviado:', data);
+    toggleModal();
+    alert('Formulario enviado con éxito');
+  };
+
+  const handleNextStep = <K extends keyof Record>(step: K, value: Record[K]) => {
+    updateStepData(step, value);
+    if (!isLastStep) {
+      setActiveStep(prev => prev + 1);
+    } else {
+      handleSubmitAll({ ...formData, [step]: value });
+    }
+  };
+
+  const handlePreviusStep = () => setActiveStep(prev => prev - 1);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <CreateRecordContext.Provider
+      value={{
+        formData,
+        activeStep,
+        isOpen,
+        onOpen: toggleModal,
+        onNextStep: handleNextStep,
+        onPreviousStep: handlePreviusStep,
+        onCancel: toggleModal,
+      }}
+    >
+      {children}
+    </CreateRecordContext.Provider>
+  );
+};

src/modules/records/core/providers/create-record/create-record.vm.ts

@@ -0,0 +1,35 @@
+export interface GeneralData {
+  name: string;
+}
+
+export interface Budget {
+  amount: number;
+}
+
+export interface Temporality {
+  description: string;
+}
+
+export interface Record {
+  generalData: GeneralData;
+  budget: Budget;
+  temporality: Temporality;
+}
+
+export const createEmptyRecordFormData = (): Record => ({
+  generalData: {
+    name: '',
+  },
+  budget: {
+    amount: 0,
+  },
+  temporality: {
+    description: '',
+  },
+});
+
+export enum Steps {
+  generalData = 1,
+  budget = 2,
+  temporality = 3,
+}

src/modules/records/core/providers/create-record/index.ts

@@ -0,0 +1,3 @@
+export * from './create-record.context';
+export * from './create-record.provider';
+export * from './create-record.vm';

src/modules/records/core/providers/index.ts

@@ -0,0 +1 @@
+export * from './create-record';

src/modules/records/create/components/index.ts

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

src/modules/records/create/components/step-navigation.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
+import { Steps, useCreateRecordContext } from '#modules/records/core/providers';
+import * as innerClasses from './step-navigation.styles';
+
+export const StepNavigation: React.FC = () => {
+  const { activeStep, onCancel, onPreviousStep } = useCreateRecordContext();
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <div className={classes.buttonContainer}>
+      <Button onClick={onCancel}>Cancelar</Button>
+      <div className={classes.buttonGroup}>
+        {activeStep !== Steps.generalData && (
+          <Button variant="outlined" onClick={onPreviousStep}>
+            Anterior
+          </Button>
+        )}
+        <Button type="submit" variant="contained">
+          {activeStep === Steps.temporality ? 'Guardar' : 'Siguiente'}
+        </Button>
+      </div>
+    </div>
+  );
+};

src/modules/records/create/components/step-navigation.styles.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const buttonContainer = (theme: Theme) => css`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: ${theme.spacing(2)};
+`;
+
+export const buttonGroup = (theme: Theme) => css`
+  display: flex;
+  gap: ${theme.spacing(1)};
+`;

src/modules/records/create/components/steps/budget-step.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { TextFieldForm } from '#common/components';
+import { useCreateRecordContext, Budget } from '#modules/records/core/providers';
+import { StepNavigation } from '../step-navigation.component';
+import { budgetValidation } from '../validations';
+import * as classes from './steps.styles';
+
+export const BudgetStep: React.FC = () => {
+  const { formData, onNextStep } = useCreateRecordContext();
+
+  const handleSubmit = (values: Budget) => {
+    onNextStep('budget', values);
+  };
+
+  return (
+    <Formik
+      initialValues={formData.budget}
+      enableReinitialize={true}
+      onSubmit={handleSubmit}
+      validate={budgetValidation.validateForm}
+    >
+      {() => (
+        <Form className={classes.form}>
+          <TextFieldForm type="number" name="amount" label="Cantidad" />
+          <StepNavigation />
+        </Form>
+      )}
+    </Formik>
+  );
+};

src/modules/records/create/components/steps/general-data-step.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { TextFieldForm } from '#common/components';
+import { GeneralData, useCreateRecordContext } from '#modules/records/core/providers';
+import { generalDataValidation } from '../validations';
+import { StepNavigation } from '../step-navigation.component';
+import * as classes from './steps.styles';
+
+export const GeneralDataStep: React.FC = () => {
+  const { formData, onNextStep } = useCreateRecordContext();
+
+  const handleSubmit = (values: GeneralData) => {
+    onNextStep('generalData', values);
+  };
+
+  return (
+    <Formik
+      initialValues={formData.generalData}
+      enableReinitialize={true}
+      onSubmit={handleSubmit}
+      validate={generalDataValidation.validateForm}
+    >
+      {() => (
+        <Form className={classes.form}>
+          <TextFieldForm name="name" label="Nombre" />
+          <StepNavigation />
+        </Form>
+      )}
+    </Formik>
+  );
+};

src/modules/records/create/components/steps/index.ts

@@ -0,0 +1,3 @@
+export * from './general-data-step.component';
+export * from './budget-step.component';
+export * from './temporality-step.component';

src/modules/records/create/components/steps/steps.styles.ts

@@ -0,0 +1,5 @@
+import { css } from '@emotion/css';
+
+export const form = css`
+  width: 100%;
+`;

src/modules/records/create/components/steps/temporality-step.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { TextFieldForm } from '#common/components';
+import { useCreateRecordContext, Temporality } from '#modules/records/core/providers';
+import { StepNavigation } from '../step-navigation.component';
+import { temporalityValidation } from '../validations';
+import * as classes from './steps.styles';
+
+export const TemporalityStep: React.FC = () => {
+  const { formData, onNextStep } = useCreateRecordContext();
+
+  const handleSubmit = (values: Temporality) => {
+    onNextStep('temporality', values);
+  };
+
+  return (
+    <Formik
+      initialValues={formData.temporality}
+      enableReinitialize={true}
+      onSubmit={handleSubmit}
+      validate={temporalityValidation.validateForm}
+    >
+      {() => (
+        <Form className={classes.form}>
+          <TextFieldForm name="description" label="Descripcion" />
+          <StepNavigation />
+        </Form>
+      )}
+    </Formik>
+  );
+};

src/modules/records/create/components/validations/budget-step.validations.ts

@@ -0,0 +1,10 @@
+import { Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+
+const validationSchema = {
+  field: {
+    amount: [Validators.required],
+  },
+};
+
+export const budgetValidation = createFormikValidation(validationSchema);

src/modules/records/create/components/validations/general-data-step.validations.ts

@@ -0,0 +1,10 @@
+import { Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+
+const validationSchema = {
+  field: {
+    name: [Validators.required],
+  },
+};
+
+export const generalDataValidation = createFormikValidation(validationSchema);

src/modules/records/create/components/validations/index.ts

@@ -0,0 +1,3 @@
+export * from './general-data-step.validations';
+export * from './budget-step.validations';
+export * from './temporality-step.validations';

src/modules/records/create/components/validations/temporality-step.validations.ts

@@ -0,0 +1,10 @@
+import { Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+
+const validationSchema = {
+  field: {
+    description: [Validators.required],
+  },
+};
+
+export const temporalityValidation = createFormikValidation(validationSchema);

src/modules/records/create/create-record.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogTitle, Step, StepLabel, Stepper } from '@mui/material';
+import { useWithTheme } from '#core/theme';
+import { BudgetStep, GeneralDataStep, TemporalityStep } from './components';
+import * as innerClasses from './create-record.styles';
+import { useCreateRecordContext } from '../core/providers';
+
+export const CreateRecord: React.FC = () => {
+  const { activeStep, isOpen, onCancel } = useCreateRecordContext();
+  const classes = useWithTheme(innerClasses);
+
+  const steps = ['Datos generales', 'Presupuesto base', 'Temporalidad'];
+
+  const stepComponent = (activeStep: number) => {
+    switch (activeStep) {
+      case 1:
+        return <GeneralDataStep />;
+      case 2:
+        return <BudgetStep />;
+      case 3:
+        return <TemporalityStep />;
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onCancel} maxWidth="md" fullWidth>
+      <DialogTitle>Crear nuevo expediente</DialogTitle>
+      <DialogContent>
+        <div className={classes.root}>
+          <Stepper activeStep={activeStep} className={classes.stepperContainer}>
+            {steps.map(step => (
+              <Step key={step}>
+                <StepLabel>{step}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+          {stepComponent(activeStep)}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/modules/records/create/create-record.pod.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CreateRecord } from './create-record.component';
+
+export const CreateRecordPod: React.FC = () => {
+  return <CreateRecord />;
+};

src/modules/records/create/create-record.styles.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const root = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${theme.spacing(4)};
+`;
+
+export const stepperContainer = css`
+  max-width: 602px;
+  width: 100%;
+`;

src/modules/records/create/index.ts

@@ -0,0 +1 @@
+export * from './create-record.pod';