From c843b490ceef1d31e01cc3059c340143cca3e0c3 Mon Sep 17 00:00:00 2001 From: William Wills Date: Thu, 9 May 2024 12:28:04 -0400 Subject: [PATCH 1/3] feat: added red required asterisk to project modal forms --- .../blocks/forms/CoBenifetsForm.tsx | 14 +- .../blocks/forms/EstimationsForm.tsx | 17 +- .../components/blocks/forms/IssuancesForm.tsx | 16 +- .../components/blocks/forms/LabelsForm.tsx | 225 ++++++++++-------- .../components/blocks/forms/ProjectForm.tsx | 19 +- .../blocks/forms/ProjectLocationsForm.tsx | 19 +- .../components/blocks/forms/RatingsForm.tsx | 20 +- .../blocks/forms/RelatedProjectsForm.tsx | 14 +- src/renderer/components/form/Field.tsx | 9 +- 9 files changed, 221 insertions(+), 132 deletions(-) diff --git a/src/renderer/components/blocks/forms/CoBenifetsForm.tsx b/src/renderer/components/blocks/forms/CoBenifetsForm.tsx index 90132272..7388793f 100644 --- a/src/renderer/components/blocks/forms/CoBenifetsForm.tsx +++ b/src/renderer/components/blocks/forms/CoBenifetsForm.tsx @@ -1,10 +1,10 @@ -import { useRef, forwardRef, useImperativeHandle } from 'react'; -import { Formik, Form, FormikProps } from 'formik'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; +import { Form, Formik, 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, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ cobenefits: yup.array().of( @@ -29,7 +29,12 @@ const CoBenefitsForm = forwardRef( const formikRef = useRef>(null); useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'coBenefits'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'coBenefits'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); return ( @@ -58,6 +63,7 @@ const CoBenefitsForm = forwardRef( freeform={true} options={picklistOptions?.coBenefits} readonly={readonly} + required={true} initialValue={coBenefit.cobenefit} /> diff --git a/src/renderer/components/blocks/forms/EstimationsForm.tsx b/src/renderer/components/blocks/forms/EstimationsForm.tsx index 849ae047..87e69dee 100644 --- a/src/renderer/components/blocks/forms/EstimationsForm.tsx +++ b/src/renderer/components/blocks/forms/EstimationsForm.tsx @@ -3,7 +3,7 @@ import { Form, Formik, FormikProps } from 'formik'; import { Field, Repeater } from '@/components'; import { Estimation } from '@/schemas/Estimation.schema'; import * as yup from 'yup'; -import { validateAndSubmitFieldArrayForm, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ estimations: yup.array().of( @@ -27,12 +27,16 @@ export interface EstimationsFormRef { submitForm: () => Promise; } -const EstimationsForm = forwardRef( - ({ readonly = false, data, }, ref) => { - const formikRef = useRef>(null); +const EstimationsForm = forwardRef(({ readonly = false, data }, ref) => { + const formikRef = useRef>(null); useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'estimations'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'estimations'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); return ( @@ -64,6 +68,7 @@ const EstimationsForm = forwardRef( label="Crediting Period Start" type="date" readonly={readonly} + required={true} initialValue={estimation.creditingPeriodStart} /> ( label="Crediting Period End" type="date" readonly={readonly} + required={true} initialValue={estimation.creditingPeriodEnd} /> ( label="Unit Count" type="number" readonly={readonly} + required={true} initialValue={estimation.unitCount} /> diff --git a/src/renderer/components/blocks/forms/IssuancesForm.tsx b/src/renderer/components/blocks/forms/IssuancesForm.tsx index f0641a05..15700a7f 100644 --- a/src/renderer/components/blocks/forms/IssuancesForm.tsx +++ b/src/renderer/components/blocks/forms/IssuancesForm.tsx @@ -1,10 +1,10 @@ -import { forwardRef, useRef, useImperativeHandle } from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { Form, Formik, FormikProps } from 'formik'; import * as yup from 'yup'; import { Field, Repeater, UnitSummary } from '@/components'; import { Issuance } from '@/schemas/Issuance.schema'; import { PickList } from '@/schemas/PickList.schema'; -import { validateAndSubmitFieldArrayForm, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ issuances: yup.array().of( @@ -39,7 +39,12 @@ const IssuancesForm = forwardRef( const formikRef = useRef>(null); useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'issuances'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'issuances'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); return ( @@ -73,6 +78,7 @@ const IssuancesForm = forwardRef( label="Start Date" type="date" readonly={readonly} + required={true} initialValue={issuance.startDate} /> ( label="End Date" type="date" readonly={readonly} + required={true} initialValue={issuance.endDate} /> ( label="Verification Approach" type="text" readonly={readonly} + required={true} initialValue={issuance.verificationApproach} /> ( freeform={true} options={picklistOptions?.verificationBody} readonly={readonly} + required={true} initialValue={issuance.verificationBody || ''} /> ( label="Verification Report Date" type="date" readonly={readonly} + required={true} initialValue={issuance.verificationReportDate || null} /> diff --git a/src/renderer/components/blocks/forms/LabelsForm.tsx b/src/renderer/components/blocks/forms/LabelsForm.tsx index 52bf6aa4..a3926962 100644 --- a/src/renderer/components/blocks/forms/LabelsForm.tsx +++ b/src/renderer/components/blocks/forms/LabelsForm.tsx @@ -1,10 +1,10 @@ -import { forwardRef, useRef, useImperativeHandle } from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { Form, Formik, FormikProps } from 'formik'; import { Field, Repeater } from '@/components'; import * as yup from 'yup'; import { Label } from '@/schemas/Label.schema'; import { PickList } from '@/schemas/PickList.schema'; -import { validateAndSubmitFieldArrayForm, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ labels: yup.array().of( @@ -13,14 +13,22 @@ const validationSchema = yup.object({ labelType: yup.string().required('Label type is required'), labelLink: yup.string().url('Must be a valid URL').nullable(), validityPeriodStartDate: yup.date().nullable(), - validityPeriodEndDate: yup.date().nullable() + validityPeriodEndDate: yup + .date() + .nullable() .when('validityPeriodStartDate', (validityPeriodStartDate, schema) => - validityPeriodStartDate ? schema.min(validityPeriodStartDate, 'Validity Period End Date must be after the start date') : schema + validityPeriodStartDate + ? schema.min(validityPeriodStartDate, 'Validity Period End Date must be after the start date') + : schema, ), creditingPeriodStartDate: yup.date().nullable(), - creditingPeriodEndDate: yup.date().nullable() + creditingPeriodEndDate: yup + .date() + .nullable() .when('creditingPeriodStartDate', (creditingPeriodStartDate, schema) => - creditingPeriodStartDate ? schema.min(creditingPeriodStartDate, 'Crediting Period End Date must be after the start date') : schema + creditingPeriodStartDate + ? schema.min(creditingPeriodStartDate, 'Crediting Period End Date must be after the start date') + : schema, ), unitQuantity: yup .number() @@ -41,103 +49,116 @@ export interface LabelsFormRef { submitForm: () => Promise; } -const LabelsForm = forwardRef( - ({ readonly = false, data, picklistOptions }, ref) => { - const formikRef = useRef>(null); +const LabelsForm = forwardRef(({ readonly = false, data, picklistOptions }, ref) => { + const formikRef = useRef>(null); - useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'labels'), ['orgUid', 'warehouseProjectId', 'warehouseUnitId', 'timeStaged']), - })); + useImperativeHandle(ref, () => ({ + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'labels'), [ + 'orgUid', + 'warehouseProjectId', + 'warehouseUnitId', + 'timeStaged', + ]), + })); - return ( - console.log(values)} - > - {() => ( -
- - name="labels" - maxNumber={100} - minNumber={0} - readonly={readonly} - initialValue={data || []} - itemTemplate={{ - label: null, - labelType: null, - labelLink: null, - validityPeriodStartDate: null, - validityPeriodEndDate: null, - creditingPeriodStartDate: null, - creditingPeriodEndDate: null, - unitQuantity: null - }} - > - {(label: Label, index: number, name: string) => ( - <> -
- - - - - - - - -
- - )} - - - )} -
- ); - }, -); + return ( + console.log(values)} + > + {() => ( +
+ + name="labels" + maxNumber={100} + minNumber={0} + readonly={readonly} + initialValue={data || []} + itemTemplate={{ + label: null, + labelType: null, + labelLink: null, + validityPeriodStartDate: null, + validityPeriodEndDate: null, + creditingPeriodStartDate: null, + creditingPeriodEndDate: null, + unitQuantity: null, + }} + > + {(label: Label, index: number, name: string) => ( + <> +
+ + + + + + + + +
+ + )} + + + )} +
+ ); +}); export { LabelsForm }; diff --git a/src/renderer/components/blocks/forms/ProjectForm.tsx b/src/renderer/components/blocks/forms/ProjectForm.tsx index 930e2e84..b253c49b 100644 --- a/src/renderer/components/blocks/forms/ProjectForm.tsx +++ b/src/renderer/components/blocks/forms/ProjectForm.tsx @@ -83,9 +83,7 @@ const ProjectForm: React.FC = forwardRef ({ ...acc, [key]: true }), {}) - ); + formik.setTouched(Object.keys(errors).reduce((acc, key) => ({ ...acc, [key]: true }), {})); return [errors, formik.values]; } @@ -110,6 +108,7 @@ const ProjectForm: React.FC = forwardRef = forwardRef = forwardRef = forwardRef @@ -151,6 +153,7 @@ const ProjectForm: React.FC = forwardRef = forwardRef = forwardRef = forwardRef @@ -187,6 +193,7 @@ const ProjectForm: React.FC = forwardRef = forwardRef = forwardRef = forwardRef = forwardRef @@ -231,6 +242,7 @@ const ProjectForm: React.FC = forwardRef = forwardRef >(null); useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'projectLocations'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'projectLocations'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); return ( @@ -54,7 +59,7 @@ const ProjectLocationsForm = forwardRef {(location, index, name) => ( @@ -65,6 +70,7 @@ const ProjectLocationsForm = forwardRef @@ -95,7 +104,7 @@ const ProjectLocationsForm = forwardRef ); - } + }, ); export { ProjectLocationsForm }; diff --git a/src/renderer/components/blocks/forms/RatingsForm.tsx b/src/renderer/components/blocks/forms/RatingsForm.tsx index 7367c06f..433e66ff 100644 --- a/src/renderer/components/blocks/forms/RatingsForm.tsx +++ b/src/renderer/components/blocks/forms/RatingsForm.tsx @@ -1,10 +1,10 @@ -import { forwardRef, useRef, useImperativeHandle } from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { Form, Formik, FormikProps } from 'formik'; import { Field, Repeater } from '@/components'; import * as yup from 'yup'; import { Rating } from '@/schemas/Rating.schema'; import { PickList } from '@/schemas/PickList.schema'; -import { validateAndSubmitFieldArrayForm, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ ratings: yup.array().of( @@ -28,12 +28,16 @@ export interface RatingsFormRef { submitForm: () => Promise; } -const RatingsForm = forwardRef( - ({ readonly = false, data, picklistOptions }, ref) => { - const formikRef = useRef>(null); +const RatingsForm = forwardRef(({ readonly = false, data, picklistOptions }, ref) => { + const formikRef = useRef>(null); useImperativeHandle(ref, () => ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'projectRatings'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'projectRatings'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); return ( @@ -68,6 +72,7 @@ const RatingsForm = forwardRef( type="picklist" options={picklistOptions?.ratingType} readonly={readonly} + required={true} initialValue={rating.ratingType} /> ( label="Rating Lowest" type="text" readonly={readonly} + required={true} initialValue={rating.ratingRangeLowest} /> ( label="Rating Highest" type="text" readonly={readonly} + required={true} initialValue={rating.ratingRangeHighest} /> ( label="Rating" type="text" readonly={readonly} + required={true} initialValue={rating.rating} /> ({ - submitForm: async () => deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'relatedProjects'), ['orgUid', 'warehouseProjectId', 'timeStaged']), + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'relatedProjects'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), })); const { projects: projectOptions, isLoading } = useGetProjectOptionsList(orgUid); @@ -68,6 +73,7 @@ const RelatedProjectsForm = forwardRef diff --git a/src/renderer/components/form/Field.tsx b/src/renderer/components/form/Field.tsx index 7fc8b085..674d53cb 100644 --- a/src/renderer/components/form/Field.tsx +++ b/src/renderer/components/form/Field.tsx @@ -13,6 +13,7 @@ interface FieldProps { options?: SelectOption[]; freeform?: boolean; readonly?: boolean; + required?: boolean; initialValue?: any; disabled?: boolean; } @@ -45,6 +46,7 @@ const Field: React.FC = ({ type, options, readonly, + required, initialValue, disabled = false, freeform = false, @@ -147,7 +149,12 @@ const Field: React.FC = ({ return (
- {label && } + {label && ( +
+ {!readonly && required &&

*

} + +
+ )} {renderField()} {touched[name] &&

{get(errors, name)}

}
From 968cf0ebf7b77d61808d725b1aacd31e8a640fcc Mon Sep 17 00:00:00 2001 From: William Wills Date: Thu, 9 May 2024 12:33:51 -0400 Subject: [PATCH 2/3] feat: added red required asterisk to unit form --- src/renderer/components/blocks/forms/UnitForm.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/renderer/components/blocks/forms/UnitForm.tsx b/src/renderer/components/blocks/forms/UnitForm.tsx index 46164bc8..a5b45917 100644 --- a/src/renderer/components/blocks/forms/UnitForm.tsx +++ b/src/renderer/components/blocks/forms/UnitForm.tsx @@ -147,6 +147,7 @@ const UnitForm = forwardRef(({ readonly = false, dat label="Unit Owner" type="text" readonly={readonly} + required={true} initialValue={unit?.unitOwner} /> (({ readonly = false, dat label="Unit Block Start" type="text" readonly={readonly} + required={true} initialValue={unit?.unitBlockStart} /> @@ -162,6 +164,7 @@ const UnitForm = forwardRef(({ readonly = false, dat label="Unit Block End" type="text" readonly={readonly} + required={true} initialValue={unit?.unitBlockEnd} /> @@ -170,6 +173,7 @@ const UnitForm = forwardRef(({ readonly = false, dat label="Unit Count" type="number" readonly={readonly} + required={true} initialValue={unit?.unitCount} /> @@ -179,6 +183,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.countries} readonly={readonly} + required={true} initialValue={unit?.countryJurisdictionOfOwner} /> @@ -188,6 +193,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.countries} readonly={readonly} + required={true} initialValue={unit?.inCountryJurisdictionOfOwner} /> @@ -197,6 +203,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.unitType} readonly={readonly} + required={true} initialValue={unit?.unitType} /> @@ -206,6 +213,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.unitStatus} readonly={readonly} + required={true} initialValue={unit?.unitStatus} /> @@ -214,6 +222,7 @@ const UnitForm = forwardRef(({ readonly = false, dat label="Unit Status Reason" type="text" readonly={readonly} + required={true} initialValue={unit?.unitStatusReason} /> @@ -222,6 +231,7 @@ const UnitForm = forwardRef(({ readonly = false, dat label="Vintage Year" type="number" readonly={readonly} + required={true} initialValue={unit?.vintageYear} /> @@ -267,6 +277,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.correspondingAdjustmentStatus} readonly={readonly} + required={true} initialValue={unit?.correspondingAdjustmentStatus} /> @@ -276,6 +287,7 @@ const UnitForm = forwardRef(({ readonly = false, dat type="picklist" options={picklistOptions?.correspondingAdjustmentDeclaration} readonly={readonly} + required={true} initialValue={unit?.correspondingAdjustmentDeclaration} /> From c44167a1ee9212d4ebc46f7cc53df9b0b03fd3aa Mon Sep 17 00:00:00 2001 From: William Wills Date: Thu, 9 May 2024 12:40:57 -0400 Subject: [PATCH 3/3] feat: added red required asterisk to split unit form --- .../components/blocks/forms/SplitUnitForm.tsx | 159 +++++++++--------- 1 file changed, 81 insertions(+), 78 deletions(-) diff --git a/src/renderer/components/blocks/forms/SplitUnitForm.tsx b/src/renderer/components/blocks/forms/SplitUnitForm.tsx index 96190ab5..92770a2b 100644 --- a/src/renderer/components/blocks/forms/SplitUnitForm.tsx +++ b/src/renderer/components/blocks/forms/SplitUnitForm.tsx @@ -1,10 +1,10 @@ -import { forwardRef, useRef, useImperativeHandle } from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { Form, Formik, FormikProps } from 'formik'; import { Field, Repeater } from '@/components'; import * as yup from 'yup'; import { UnitSplit } from '@/schemas/Unit.schema'; import { PickList } from '@/schemas/PickList.schema'; -import { validateAndSubmitFieldArrayForm, deepOmit } from '@/utils/formik-utils'; +import { deepOmit, validateAndSubmitFieldArrayForm } from '@/utils/formik-utils'; const validationSchema = yup.object({ units: yup.array().of( @@ -27,89 +27,92 @@ export interface SplitUnitFormRef { submitForm: () => Promise; } -const SplitUnitForm = forwardRef( - ({ picklistOptions }, ref) => { - const formikRef = useRef>(null); +const SplitUnitForm = forwardRef(({ picklistOptions }, ref) => { + const formikRef = useRef>(null); - useImperativeHandle(ref, () => ({ - submitForm: async () => - deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'units'), [ - 'orgUid', - 'warehouseProjectId', - 'timeStaged', - ]), - })); + useImperativeHandle(ref, () => ({ + submitForm: async () => + deepOmit(await validateAndSubmitFieldArrayForm(formikRef, 'units'), [ + 'orgUid', + 'warehouseProjectId', + 'timeStaged', + ]), + })); - return ( - console.log(values)} - > - {() => ( -
- - name="units" - maxNumber={5} - minNumber={3} - readonly={false} - initialValue={[ - { - unitCount: 0, - unitOwner: null, - unitBlockStart: null, - unitBlockEnd: null, - countryJurisdictionOfOwner: null, - inCountryJurisdictionOfOwner: null, - }, - { - unitCount: 0, - unitOwner: null, - unitBlockStart: null, - unitBlockEnd: null, - countryJurisdictionOfOwner: null, - inCountryJurisdictionOfOwner: null, - }, - ]} - itemTemplate={{ + return ( + console.log(values)} + > + {() => ( + + + name="units" + maxNumber={5} + minNumber={3} + readonly={false} + initialValue={[ + { unitCount: 0, unitOwner: null, unitBlockStart: null, unitBlockEnd: null, countryJurisdictionOfOwner: null, inCountryJurisdictionOfOwner: null, - }} - > - {(_, index, name) => ( - <> -
- Record {index} - - - - - - -
- - )} - - - )} - - ); - }, -); + }, + { + unitCount: 0, + unitOwner: null, + unitBlockStart: null, + unitBlockEnd: null, + countryJurisdictionOfOwner: null, + inCountryJurisdictionOfOwner: null, + }, + ]} + itemTemplate={{ + unitCount: 0, + unitOwner: null, + unitBlockStart: null, + unitBlockEnd: null, + countryJurisdictionOfOwner: null, + inCountryJurisdictionOfOwner: null, + }} + > + {(_, index, name) => ( + <> +
+ Record {index} + + + + + + +
+ + )} + + + )} +
+ ); +}); export { SplitUnitForm };