add create time series fields api structure on submit

unicef · Jul 15, 2024 · b59209c · b59209c
1 parent 91f0027
commit b59209c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 44 deletions.
diff --git a/frontend/src/components/programs/CreateProgram/PartnersStep.tsx b/frontend/src/components/programs/CreateProgram/PartnersStep.tsx
@@ -132,17 +132,17 @@ export const PartnersStep: React.FC<PartnersStepProps> = ({
           />
         </>
       )}
-      <Box display="flex" justifyContent="flex-end">
+      <Box display="flex" justifyContent="space-between">
+        <Box mr={2}>
+          <Button
+            data-cy="button-cancel"
+            component={Link}
+            to={`/${baseUrl}/list`}
+          >
+            {t('Cancel')}
+          </Button>
+        </Box>
         <Box display="flex">
-          <Box mr={2}>
-            <Button
-              data-cy="button-cancel"
-              component={Link}
-              to={`/${baseUrl}/list`}
-            >
-              {t('Cancel')}
-            </Button>
-          </Box>
           <Box mr={2}>
             <Button
               data-cy="button-back"

diff --git a/frontend/src/components/programs/CreateProgram/ProgramFieldSeriesStep.tsx b/frontend/src/components/programs/CreateProgram/ProgramFieldSeriesStep.tsx
@@ -11,18 +11,29 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 
 interface ProgramFieldSeriesStepProps {
   values: {
-    timeSeriesFields: Array<{
+    pduFields: Array<{
       fieldName: string;
       dataType: string;
-      numberOfExpectedRounds: string | number;
+      numberOfRounds: string | number;
+      pduData: {
+        dataType: string;
+        numberOfRounds: string | number;
+        rounds: Array<{
+          roundValue: string;
+        }>;
+      };
     }>;
   };
   handleNext?: () => Promise<void>;
+  setStep: (step: number) => void;
+  step: number;
 }
 
 export const ProgramFieldSeriesStep = ({
   values,
   handleNext,
+  setStep,
+  step,
 }: ProgramFieldSeriesStepProps) => {
   const { t } = useTranslation();
   const { baseUrl } = useBaseUrl();
@@ -36,16 +47,16 @@ export const ProgramFieldSeriesStep = ({
   return (
     <>
       <FieldArray
-        name="timeSeriesFields"
+        name="pduFields"
         render={(arrayHelpers) => (
           <div>
-            {values.timeSeriesFields && values.timeSeriesFields.length > 0
-              ? values.timeSeriesFields.map((_field, index) => (
+            {values.pduFields && values.pduFields.length > 0
+              ? values.pduFields.map((_field, index) => (
                   <Box key={index} pt={3} pb={3}>
                     <Grid container spacing={3} alignItems="center">
                       <Grid item xs={3}>
                         <Field
-                          name={`timeSeriesFields.${index}.fieldName`}
+                          name={`pduFields.${index}.name`}
                           fullWidth
                           variant="outlined"
                           label={t('Time Series Field Name')}
@@ -54,7 +65,7 @@ export const ProgramFieldSeriesStep = ({
                       </Grid>
                       <Grid item xs={3}>
                         <Field
-                          name={`timeSeriesFields.${index}.dataType`}
+                          name={`pduFields.${index}.pduData.subtype`}
                           fullWidth
                           variant="outlined"
                           label={t('Data Type')}
@@ -67,7 +78,7 @@ export const ProgramFieldSeriesStep = ({
                       </Grid>
                       <Grid item xs={3}>
                         <Field
-                          name={`timeSeriesFields.${index}.numberOfExpectedRounds`}
+                          name={`pduFields.${index}.pduData.numberOfRounds`}
                           fullWidth
                           variant="outlined"
                           label={t('Number of Expected Rounds')}
@@ -78,11 +89,27 @@ export const ProgramFieldSeriesStep = ({
                           }))}
                         />
                       </Grid>
+                      {_field.pduData.numberOfRounds &&
+                        [
+                          ...Array(
+                            Number(_field.pduData.numberOfRounds),
+                          ).keys(),
+                        ].map((round) => (
+                          <Grid item xs={12} key={round}>
+                            <Field
+                              name={`pduFields.${index}.pduData.roundsNames.${round}`}
+                              fullWidth
+                              variant="outlined"
+                              label={`${t('Round')} ${round + 1} ${t('Name')}`}
+                              component={FormikTextField}
+                            />
+                          </Grid>
+                        ))}
                       {!(
-                        values.timeSeriesFields.length === 1 ||
+                        values.pduFields.length === 1 ||
                         (!_field.fieldName &&
                           !_field.dataType &&
-                          !_field.numberOfExpectedRounds)
+                          !_field.numberOfRounds)
                       ) && (
                         <Grid item xs={1}>
                           <IconButton
@@ -93,10 +120,8 @@ export const ProgramFieldSeriesStep = ({
                         </Grid>
                       )}
                     </Grid>
-                    {values.timeSeriesFields.length > 1 &&
-                      index < values.timeSeriesFields.length - 1 && (
-                        <DividerLine />
-                      )}
+                    {values.pduFields.length > 1 &&
+                      index < values.pduFields.length - 1 && <DividerLine />}
                   </Box>
                 ))
               : null}
@@ -106,9 +131,12 @@ export const ProgramFieldSeriesStep = ({
                 color="primary"
                 onClick={() =>
                   arrayHelpers.push({
-                    fieldName: '',
-                    dataType: '',
-                    numberOfExpectedRounds: '',
+                    name: '',
+                    pduData: {
+                      subtype: '',
+                      numberOfRounds: null,
+                      roundsNames: [],
+                    },
                   })
                 }
                 endIcon={<AddIcon />}
@@ -127,14 +155,25 @@ export const ProgramFieldSeriesStep = ({
         >
           {t('Cancel')}
         </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          data-cy="button-next"
-          onClick={handleNextClick}
-        >
-          {t('Next')}
-        </Button>
+        <Box display="flex">
+          <Box mr={2}>
+            <Button
+              data-cy="button-back"
+              variant="outlined"
+              onClick={() => setStep(step - 1)}
+            >
+              {t('Back')}
+            </Button>
+          </Box>
+          <Button
+            variant="contained"
+            color="primary"
+            data-cy="button-next"
+            onClick={handleNextClick}
+          >
+            {t('Next')}
+          </Button>
+        </Box>
       </Box>
     </>
   );

diff --git a/frontend/src/containers/pages/program/CreateProgramPage.tsx b/frontend/src/containers/pages/program/CreateProgramPage.tsx
@@ -108,11 +108,14 @@ export const CreateProgramPage = (): ReactElement => {
     frequencyOfPayments: 'REGULAR',
     partners: [],
     partnerAccess: ProgramPartnerAccess.AllPartnersAccess,
-    timeSeriesFields: [
+    pduFields: [
       {
-        fieldName: '',
-        dataType: '',
-        numberOfExpectedRounds: '',
+        name: '',
+        pduData: {
+          subtype: '',
+          numberOfRounds: null,
+          roundsNames: [],
+        },
       },
     ],
   };
@@ -152,12 +155,14 @@ export const CreateProgramPage = (): ReactElement => {
     <Formik
       initialValues={initialValues}
       onSubmit={(values) => {
+        console.log('values', values);
         handleSubmit(values);
       }}
       initialTouched={{
         programmeCode: true,
       }}
-      validationSchema={programValidationSchema(t)}
+      //TODO MS: Uncomment when validation is ready
+      // validationSchema={programValidationSchema(t)}
     >
       {({
         submitForm,
@@ -243,6 +248,8 @@ export const CreateProgramPage = (): ReactElement => {
                   <ProgramFieldSeriesStep
                     values={values}
                     handleNext={handleNextStep}
+                    step={step}
+                    setStep={setStep}
                   />
                 )}
                 {step === 2 && (

diff --git a/frontend/src/containers/pages/program/DuplicateProgramPage.tsx b/frontend/src/containers/pages/program/DuplicateProgramPage.tsx
@@ -131,8 +131,8 @@ export const DuplicateProgramPage = (): ReactElement => {
         areaAccess: partner.areaAccess,
       })),
     partnerAccess,
-    //TODO MS: add timeSeriesFields
-    timeSeriesFields: [
+    //TODO MS: add pduFields
+    pduFields: [
       {
         fieldName: '',
         dataType: '',
@@ -263,6 +263,8 @@ export const DuplicateProgramPage = (): ReactElement => {
                   <ProgramFieldSeriesStep
                     values={values}
                     handleNext={handleNextStep}
+                    step={step}
+                    setStep={setStep}
                   />
                 )}
                 {step === 2 && (

diff --git a/frontend/src/containers/pages/program/EditProgramPage.tsx b/frontend/src/containers/pages/program/EditProgramPage.tsx
@@ -143,8 +143,8 @@ export const EditProgramPage = (): ReactElement => {
         areaAccess: partner.areaAccess,
       })),
     partnerAccess,
-    //TODO MS: add timeSeriesFields
-    timeSeriesFields: [
+    //TODO MS: add pduFields
+    pduFields: [
       {
         fieldName: '',
         dataType: '',
@@ -277,6 +277,8 @@ export const EditProgramPage = (): ReactElement => {
                   <ProgramFieldSeriesStep
                     values={values}
                     handleNext={handleNextStep}
+                    step={step}
+                    setStep={setStep}
                   />
                 )}
                 {step === 2 && (