EmployeeWebClient - CreateFacilityMultiStepForm - create composition

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/BaseInfoStep/index.tsx

@@ -1,36 +1,31 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { ButtonGroup, chakra } from '@chakra-ui/react';
+import { ButtonGroup } from '@chakra-ui/react';
 
 import { List, IndentList, IndentLabel } from 'shared/IndentiationList';
 import { Header, Heading, SubHeading, Divider, ListItem } from 'shared/DescriptionListV2';
 import { useForm, FormProvider } from 'shared/FormV2';
 
+import { CreateFacilityFormDto } from '../../../application/types';
 import { useFacilityFormStore } from '../createFacilityFormStore';
 import { PreviousStepButton } from '../PreviousStepButton';
 import { NextStepButton } from '../NextStepButton';
 import { BaseInfoStepInputs } from './BaseInfoStepInputs';
 import { FormStepHeader } from '../FormStepHeader';
-import { CreateFacilityFormDto } from '../../../application/types';
+import { Form } from '../Form';
 
 const BaseInfoStep = () => {
  const { formatMessage } = useIntl();
  const step = useFacilityFormStore(store => store.step);
  const data = useFacilityFormStore(store => store.data);
- const setData = useFacilityFormStore(store => store.setData);
 
  const methods = useForm<Partial<CreateFacilityFormDto>>({
  defaultValues: data,
  });
 
  return (
- <chakra.form
- id='add-facility-first-step'
- data-testid='add-facility-first-step'
- noValidate
- onSubmit={methods.handleSubmit(model => setData(model))}
- >
- <FormProvider {...methods}>
+ <FormProvider {...methods}>
+ <Form id='add-facility-first-step'>
  <List>
  <ListItem>
  <FormStepHeader>
@@ -67,8 +62,8 @@ const BaseInfoStep = () => {
  </ButtonGroup>
  </IndentLabel>
  </List>
- </FormProvider>
- </chakra.form>
+ </Form>
+ </FormProvider>
  );
 };
 

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/ContactStep/index.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { ButtonGroup, chakra } from '@chakra-ui/react';
+import { ButtonGroup } from '@chakra-ui/react';
 
 import { ContactType } from 'types';
 import { ContactInputs, FormProvider, useForm } from 'shared/FormV2';
 import { IndentLabel, IndentList, List } from 'shared/IndentiationList';
 import { Divider, Header, Heading, ListItem, SubHeading } from 'shared/DescriptionListV2';
 
-import { useFacilityFormStore } from '../createFacilityFormStore';
 import { CreateFacilityFormDto } from '../../../application/types';
+import { useFacilityFormStore } from '../createFacilityFormStore';
 import { FormStepHeader } from '../FormStepHeader';
 import { PreviousStepButton } from '../PreviousStepButton';
 import { NextStepButton } from '../NextStepButton';
 import { ContactPersonInputs } from './ContactPersonInputs';
+import { Form } from '../Form';
 
 const ContactStep = () => {
  const { formatMessage } = useIntl();
  const step = useFacilityFormStore(store => store.step);
  const data = useFacilityFormStore(store => store.data);
- const setData = useFacilityFormStore(store => store.setData);
 
  const methods = useForm<Partial<CreateFacilityFormDto>>({
  defaultValues: {
@@ -40,13 +40,8 @@ const ContactStep = () => {
  });
 
  return (
- <chakra.form
- id='add-facility-third-step'
- data-testid='add-facility-third-step'
- noValidate
- onSubmit={methods.handleSubmit(model => setData(model))}
- >
- <FormProvider {...methods}>
+ <FormProvider {...methods}>
+ <Form id='add-facility-third-step'>
  <List>
  <ListItem>
  <FormStepHeader>
@@ -103,8 +98,8 @@ const ContactStep = () => {
  </ButtonGroup>
  </IndentLabel>
  </List>
- </FormProvider>
- </chakra.form>
+ </Form>
+ </FormProvider>
  );
 };
 

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/CreateFacilityMultiStepForm.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { FacilityFixture } from 'utils';
+
+import { CreateFacilityMultiStepForm } from './index';
+import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
+import { CreateFacilityMapper } from 'modules/facility/application';
+
+export default {
+ title: 'modules/facility/AddFacilityForm/Form',
+ component: CreateFacilityMultiStepForm,
+ decorators: [
+ Story => {
+ useFacilityFormStore.setState({
+ data: CreateFacilityMapper.modelToForm(FacilityFixture.toStructure()),
+ step: FacilityFormStep.Base_info,
+ });
+
+ return <Story />;
+ },
+ ],
+} as ComponentMeta<typeof CreateFacilityMultiStepForm>;
+
+const Template: ComponentStory<typeof CreateFacilityMultiStepForm> = () => {
+ return <CreateFacilityMultiStepForm />;
+};
+
+export const Form = Template.bind({});

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/Form.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+import { chakra } from '@chakra-ui/react';
+
+import { useFormContextSelector } from 'shared/FormV2';
+
+import { useFacilityFormStore } from './createFacilityFormStore';
+
+interface IProps {
+ id: string;
+ children: ReactNode;
+}
+
+const Form = ({ id, children }: IProps) => {
+ const setData = useFacilityFormStore(store => store.setData);
+ const next = useFacilityFormStore(store => store.next);
+ const handleSubmit = useFormContextSelector(state => state.handleSubmit);
+ const getValues = useFormContextSelector(state => state.getValues);
+
+ return (
+ <chakra.form
+ id={id}
+ data-testid={id}
+ noValidate
+ onSubmit={handleSubmit(
+ model => {
+ setData(model);
+ next();
+ },
+ () => {
+ setData(getValues());
+ },
+ )}
+ >
+ {children}
+ </chakra.form>
+ );
+};
+
+export { Form };

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/WorkingDaysAndAddressStep/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { ButtonGroup, chakra } from '@chakra-ui/react';
+import { ButtonGroup } from '@chakra-ui/react';
 
 import { FormProvider, useForm } from 'shared/FormV2';
 import { Divider, Header, Heading, ListItem, SubHeading } from 'shared/DescriptionListV2';
@@ -13,12 +13,12 @@ import { NextStepButton } from '../NextStepButton';
 import { useFacilityFormStore } from '../createFacilityFormStore';
 import { WorkingHoursInputs } from './WorkingHoursInputs';
 import { AddressInputs } from './AddressInputs';
+import { Form } from '../Form';
 
 const WorkingDaysAndAddressStep = () => {
  const { formatMessage } = useIntl();
  const step = useFacilityFormStore(store => store.step);
  const data = useFacilityFormStore(store => store.data);
- const setData = useFacilityFormStore(store => store.setData);
 
  const methods = useForm<Partial<CreateFacilityFormDto>>({
  defaultValues: {
@@ -36,13 +36,8 @@ const WorkingDaysAndAddressStep = () => {
  });
 
  return (
- <chakra.form
- id='add-facility-second-step'
- data-testid='add-facility-second-step'
- noValidate
- onSubmit={methods.handleSubmit(model => setData(model))}
- >
- <FormProvider {...methods}>
+ <FormProvider {...methods}>
+ <Form id='add-facility-second-step'>
  <List>
  <ListItem>
  <FormStepHeader>
@@ -99,8 +94,8 @@ const WorkingDaysAndAddressStep = () => {
  </ButtonGroup>
  </IndentLabel>
  </List>
- </FormProvider>
- </chakra.form>
+ </Form>
+ </FormProvider>
  );
 };
 

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { VStack } from '@chakra-ui/react';
+
+import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
+import { FormStepProgressBar } from './FormStepProgressBar';
+import { BaseInfoStep } from './BaseInfoStep';
+import { WorkingDaysAndAddressStep } from './WorkingDaysAndAddressStep';
+import { ContactStep } from './ContactStep';
+import { SummaryStep } from './SummaryStep';
+
+const CreateFacilityMultiStepForm = () => {
+ const step = useFacilityFormStore(store => store.step);
+
+ return (
+ <VStack display='stretch'>
+ <FormStepProgressBar />
+ {step === FacilityFormStep.Base_info && <BaseInfoStep />}
+ {step === FacilityFormStep.Working_hours && <WorkingDaysAndAddressStep />}
+ {step === FacilityFormStep.Contact && <ContactStep />}
+ {step === FacilityFormStep.Summary && <SummaryStep />}
+ </VStack>
+ );
+};
+
+export { CreateFacilityMultiStepForm };