Skip to content

Commit

Permalink
Merge pull request #1212 from Chia-Network/refactor/create-edit-proje…
Browse files Browse the repository at this point in the history
…ct-form-stepper

Refactor/create edit project form stepper
  • Loading branch information
MichaelTaylor3D authored Apr 23, 2024
2 parents 8ba1452 + 9bdd18e commit 68c96c9
Show file tree
Hide file tree
Showing 38 changed files with 2,021 additions and 1,028 deletions.
770 changes: 637 additions & 133 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
13 changes: 13 additions & 0 deletions src/renderer/api/cadt/v1/organizations/organizations.api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down Expand Up @@ -93,4 +105,5 @@ export const {
useImportOrganizationMutation,
useDeleteOrganizationMutation,
useEditOrganizationMutation,
useGetHomeOrgQuery
} = organizationsApi;
21 changes: 16 additions & 5 deletions src/renderer/api/cadt/v1/projects/projects.api.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -47,6 +47,7 @@ const projectsApi = cadtApi.injectEndpoints({
method: 'GET',
};
},
// @ts-ignore
providesTags: (_response, _error, { orgUid }) => [{ type: projectsTag, id: orgUid }],
}),

Expand All @@ -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;
11 changes: 10 additions & 1 deletion src/renderer/api/cadt/v1/units/units.api.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { cadtApi, unitsTag } from '../';
import { cadtApi, unitsTag, stagedUnitsTag } from '../';
import { Unit } from '@/schemas/Unit.schema';

interface GetUnitsParams {
Expand Down Expand Up @@ -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],
}),
}),
});

Expand Down
94 changes: 54 additions & 40 deletions src/renderer/components/blocks/forms/CoBenifetForm.tsx
Original file line number Diff line number Diff line change
@@ -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 };
125 changes: 69 additions & 56 deletions src/renderer/components/blocks/forms/EstimationForm.tsx
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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 };
Loading

0 comments on commit 68c96c9

Please sign in to comment.