Refactor/create edit project form stepper

package.json

@@ -24,6 +24,9 @@
     "electron:package:linux": "npm run clean && npm run build && electron-builder -l -c.extraMetadata.main=build/main.js"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.15",
     "@reduxjs/toolkit": "^2.2.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
@@ -63,7 +66,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.2.2",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -84,7 +87,7 @@
     "standard-version": "^9.5.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.8",
+    "vite": "^5.2.9",
     "wait-on": "^7.2.0"
   },
   "standard-version": {

src/renderer/api/cadt/v1/organizations/organizations.api.ts

@@ -25,6 +25,18 @@ const organizationsApi = cadtApi.injectEndpoints({
       },
     }),
 
+    getHomeOrg: builder.query<Organization | undefined, void | null>({
+        query: () => ({
+          url: `/v1/organizations`,
+          method: 'GET',
+        }),
+        providesTags: [organizationsTag],
+        transformResponse(baseQueryReturnValue: BaseQueryResult<Organization[]>): Organization | undefined {
+          const organizations: Organization[] =  Object.values(baseQueryReturnValue);
+          return organizations.find(org => org.isHome);
+        },
+    }),
+
     getOrganizationsMap: builder.query<GetOrgnaizationsMapResponse, void | null>({
       query: () => ({
         url: `/v1/organizations`,
@@ -93,4 +105,5 @@ export const {
   useImportOrganizationMutation,
   useDeleteOrganizationMutation,
   useEditOrganizationMutation,
+  useGetHomeOrgQuery
 } = organizationsApi;

src/renderer/api/cadt/v1/projects/projects.api.ts

@@ -1,11 +1,11 @@
-import { cadtApi, projectsTag } from '../';
+import { cadtApi, projectsTag, stagedProjectsTag } from '../';
 import { Project } from '@/schemas/Project.schema';
 
 interface GetProjectsParams {
   page: number;
-  orgUid?: string;
-  search?: string;
-  order?: string;
+  orgUid?: string | null;
+  search?: string | null;
+  order?: string | null;
 }
 
 interface GetProjectParams {
@@ -47,6 +47,7 @@ const projectsApi = cadtApi.injectEndpoints({
           method: 'GET',
         };
       },
+      // @ts-ignore
       providesTags: (_response, _error, { orgUid }) => [{ type: projectsTag, id: orgUid }],
     }),
 
@@ -68,7 +69,17 @@ const projectsApi = cadtApi.injectEndpoints({
       }),
       invalidatesTags: (_response, _error, { warehouseProjectId }) => [{ type: projectsTag, id: warehouseProjectId }],
     }),
+
+    stageProject: builder.mutation<any, Project>({
+      query: (project) => ({
+        url: `/v1/projects`,
+        method: 'POST',
+        body: project,
+      }),
+      invalidatesTags: [stagedProjectsTag],
+    }),
   }),
 });
 
-export const { useGetProjectsQuery, useGetProjectQuery, useDeleteProjectMutation } = projectsApi;
+export const { useGetProjectsQuery, useGetProjectQuery, useDeleteProjectMutation, useStageProjectMutation } =
+  projectsApi;

src/renderer/api/cadt/v1/units/units.api.ts

@@ -1,4 +1,4 @@
-import { cadtApi, unitsTag } from '../';
+import { cadtApi, unitsTag, stagedUnitsTag } from '../';
 import { Unit } from '@/schemas/Unit.schema';
 
 interface GetUnitsParams {
@@ -73,6 +73,15 @@ const unitsApi = cadtApi.injectEndpoints({
       }),
       invalidatesTags: (_response, _error, { warehouseUnitId }) => [{ type: unitsTag, id: warehouseUnitId }],
     }),
+
+    stageUnit: builder.mutation<any, Unit>({
+      query: (unit) => ({
+        url: `/v1/units`,
+        method: 'POST',
+        body: unit,
+      }),
+      invalidatesTags: [stagedUnitsTag],
+    }),
   }),
 });
 

src/renderer/components/blocks/forms/CoBenifetForm.tsx

@@ -1,58 +1,72 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Formik, Form, FormikProps } from 'formik';
 import { Field, Repeater } from '@/components';
 import * as yup from 'yup';
 import { CoBenefit } from '@/schemas/CoBenefit.schema';
 import { PickList } from '@/schemas/PickList.schema';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
-  cobenifets: yup.array().of(
+  cobenefits: yup.array().of(
     yup.object({
       cobenefit: yup.string().required('Co-Benefit is required'),
     }),
   ),
 });
 
-interface CoBenefitFormFormProps {
-  onSubmit: (values: any) => Promise<any>;
+interface CoBenefitFormProps {
   readonly?: boolean;
   data?: CoBenefit[];
-  picklistOptions: PickList | undefined;
+  picklistOptions?: PickList;
 }
 
-const CoBenefitForm: React.FC<CoBenefitFormFormProps> = ({ readonly = false, data, picklistOptions }) => {
-  return (
-    <Formik
-      initialValues={{ cobenifets: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {() => (
-        <Form>
-          <Repeater<CoBenefit>
-            name="cobenifets"
-            maxNumber={100}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(coBenefit: CoBenefit) => (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="cobenefit"
-                  label="Co-Benefit"
-                  type="picklist"
-                  options={picklistOptions?.coBenefits}
-                  readonly={readonly}
-                  initialValue={coBenefit.cobenefit}
-                />
-              </div>
-            )}
-          </Repeater>
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface CoBenefitFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const CoBenefitForm = forwardRef<CoBenefitFormRef, CoBenefitFormProps>(
+  ({ readonly = false, data, picklistOptions }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'coBenefits'),
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ coBenefits: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={(values) => console.log(values)}
+      >
+        {() => (
+          <Form>
+            <Repeater<CoBenefit>
+              name="coBenefits"
+              maxNumber={100}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{ cobenefit: '' }}  // Assuming default template needed
+            >
+              {(coBenefit, index, name) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name={`${name}[${index}].cobenefit`}
+                    label="Co-Benefit"
+                    type="picklist"
+                    options={picklistOptions?.coBenefits}
+                    readonly={readonly}
+                    initialValue={coBenefit.cobenefit}
+                  />
+                </div>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+);
 
 export { CoBenefitForm };

src/renderer/components/blocks/forms/EstimationForm.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { Formik, Form } from 'formik';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Formik, Form, FormikProps } from 'formik';
 import { Repeater, Field } from '@/components';
 import { Estimation } from '@/schemas/Estimation.schema';
 import * as yup from 'yup';
+import { validateAndSubmitFieldArrayForm } from '@/utils/formik-utils';
 
 const validationSchema = yup.object({
   estimations: yup.array().of(
@@ -19,63 +20,75 @@ const validationSchema = yup.object({
 });
 
 interface EstimationFormProps {
-  onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: Estimation[];
 }
 
-const EstimationForm: React.FC<EstimationFormProps> = ({ readonly = false, data, onSubmit }) => {
-  return (
-    <Formik
-      initialValues={{ estimations: data || [] }}
-      validationSchema={validationSchema}
-      onSubmit={onSubmit}
-      enableReinitialize={true}
-    >
-      {({ isSubmitting }) => (
-        <Form>
-          <Repeater<Estimation>
-            name="estimations"
-            maxNumber={10}
-            minNumber={1}
-            readonly={readonly}
-            initialValue={data || []}
-          >
-            {(estimation: Estimation) => (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
-                <Field
-                  name="creditingPeriodStart"
-                  label="Crediting Period Start"
-                  type="date"
-                  readonly={readonly}
-                  initialValue={estimation.creditingPeriodEnd}
-                />
-                <Field
-                  name="creditingPeriodEnd"
-                  label="Crediting Period End"
-                  type="date"
-                  readonly={readonly}
-                  initialValue={estimation.creditingPeriodEnd}
-                />
-                <Field
-                  name="unitCount"
-                  label="Unit Count"
-                  type="number"
-                  readonly={readonly}
-                  initialValue={estimation.unitCount}
-                />
-              </div>
-            )}
-          </Repeater>
-          {!readonly && (
-            <button type="submit" disabled={isSubmitting} className="mt-4 bg-blue-500 text-white p-2 rounded">
-              Save Estimations
-            </button>
-          )}
-        </Form>
-      )}
-    </Formik>
-  );
-};
+export interface EstimationFormRef {
+  submitForm: () => Promise<any>;
+}
+
+const EstimationForm = forwardRef<EstimationFormRef, EstimationFormProps>(
+  ({ readonly = false, data, }, ref) => {
+    const formikRef = useRef<FormikProps<any>>(null);
+
+    useImperativeHandle(ref, () => ({
+      submitForm: () => validateAndSubmitFieldArrayForm(formikRef, 'estimations'),
+    }));
+
+    return (
+      <Formik
+        innerRef={formikRef}
+        initialValues={{ estimations: data || [] }}
+        validationSchema={validationSchema}
+        onSubmit={() => {}}
+        enableReinitialize={true}
+      >
+        {() => (
+          <Form>
+            <Repeater<Estimation>
+              name="estimations"
+              maxNumber={10}
+              minNumber={0}
+              readonly={readonly}
+              initialValue={data || []}
+              itemTemplate={{
+                creditingPeriodStart: null,
+                creditingPeriodEnd: null,
+                unitCount: 0
+              }}
+            >
+              {(estimation, index, name) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name={`${name}[${index}].creditingPeriodStart`}
+                    label="Crediting Period Start"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={estimation.creditingPeriodStart}
+                  />
+                  <Field
+                    name={`${name}[${index}].creditingPeriodEnd`}
+                    label="Crediting Period End"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={estimation.creditingPeriodEnd}
+                  />
+                  <Field
+                    name={`${name}[${index}].unitCount`}
+                    label="Unit Count"
+                    type="number"
+                    readonly={readonly}
+                    initialValue={estimation.unitCount}
+                  />
+                </div>
+              )}
+            </Repeater>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+);
 
 export { EstimationForm };