feat: add picklist support

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

@@ -1,48 +1,56 @@
-import { cadtApi } from '../';
-// @ts-ignore
-import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
-
-interface BaseQueryResult {
-  [key: string]: string[];
-}
-
-interface DescriptionItem {
-  header: string;
-  definition: string;
-}
-
-interface GlossaryItem {
-  term: string;
-  description: DescriptionItem[];
-}
-
-const governanceApi = cadtApi.injectEndpoints({
-  endpoints: (builder) => ({
-    getGlossary: builder.query<GlossaryItem[], void>({
-      query: () => ({
-        url: `/v1/governance/meta/glossary`,
-        method: 'GET',
-      }),
-      transformResponse: (baseQueryReturnValue: BaseQueryResult): GlossaryItem[] => {
-        return Object.entries(baseQueryReturnValue).map(([key, valueArray]) => {
-          // Map each value in the value array to a DescriptionItem by splitting by ";" to separate header and definition
-          const description: DescriptionItem[] = valueArray.map((item) => {
-            const [header, definition] = item.split(';').map((part) => part.trim());
-            return { header, definition };
-          });
-
-          return { term: key, description };
-        });
-      },
-    }),
-
-    getDefaultOrgList: builder.query<{ orgUid: string }[], void>({
-      query: () => ({
-        url: `/v1/governance/meta/orgList`,
-        method: 'GET',
-      }),
-    }),
-  }),
-});
-
-export const { useGetGlossaryQuery, useGetDefaultOrgListQuery } = governanceApi;
+import { cadtApi } from '../';
+// @ts-ignore
+import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
+import { PickList } from '@/schemas/PickList.schema';
+
+interface BaseQueryResult {
+  [key: string]: string[];
+}
+
+interface DescriptionItem {
+  header: string;
+  definition: string;
+}
+
+interface GlossaryItem {
+  term: string;
+  description: DescriptionItem[];
+}
+
+const governanceApi = cadtApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getGlossary: builder.query<GlossaryItem[], void>({
+      query: () => ({
+        url: `/v1/governance/meta/glossary`,
+        method: 'GET',
+      }),
+      transformResponse: (baseQueryReturnValue: BaseQueryResult): GlossaryItem[] => {
+        return Object.entries(baseQueryReturnValue).map(([key, valueArray]) => {
+          // Map each value in the value array to a DescriptionItem by splitting by ";" to separate header and definition
+          const description: DescriptionItem[] = valueArray.map((item) => {
+            const [header, definition] = item.split(';').map((part) => part.trim());
+            return { header, definition };
+          });
+
+          return { term: key, description };
+        });
+      },
+    }),
+
+    getDefaultOrgList: builder.query<{ orgUid: string }[], void>({
+      query: () => ({
+        url: `/v1/governance/meta/orgList`,
+        method: 'GET',
+      }),
+    }),
+
+    getPickLists: builder.query<PickList, void>({
+      query: () => ({
+        url: `/v1/governance/meta/pickList`,
+        method: 'GET',
+      }),
+    }),
+  }),
+});
+
+export const { useGetGlossaryQuery, useGetDefaultOrgListQuery, useGetPickListsQuery } = governanceApi;

src/renderer/api/index.ts

@@ -2,4 +2,5 @@ export * from './cadt/v1/organizations';
 export * from './cadt/v1/units';
 export * from './cadt/v1/projects';
 export * from './cadt/v1/audit';
-export * from './cadt/v1/issuances';
+export * from './cadt/v1/issuances';
+export * from './cadt/v1/governance';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { Field, Repeater } from '@/components';
+import * as yup from 'yup';
+import { CoBenefit } from '@/schemas/CoBenefit.schema';
+import { PickList } from '@/schemas/PickList.schema';
+
+const validationSchema = yup.object({
+  cobenifets: yup.array().of(
+    yup.object({
+      country: yup.string().required('Country is required'),
+      geographicIdentifier: yup.mixed().required('Geographic Identifier is required'),
+      inCountryRegion: yup.string(),
+      timeStaged: yup.date().nullable(),
+      fileId: yup.string(),
+    }),
+  ),
+});
+
+interface CoBenefitFormFormProps {
+  onSubmit: (values: any) => Promise<any>;
+  readonly?: boolean;
+  data?: CoBenefit[];
+  picklistOptions: PickList | undefined;
+}
+
+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 { CoBenefitForm };

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

@@ -14,13 +14,13 @@ const validationSchema = yup.object({
   ),
 });
 
-interface EstimationsFormProps {
+interface EstimationFormProps {
   onSubmit: (values: any) => Promise<any>;
   readonly?: boolean;
   data?: Estimation[];
 }
 
-const EstimationsForm: React.FC<EstimationsFormProps> = ({ readonly = false, data, onSubmit }) => {
+const EstimationForm: React.FC<EstimationFormProps> = ({ readonly = false, data, onSubmit }) => {
   return (
     <Formik
       initialValues={{ estimations: data || [] }}
@@ -74,4 +74,4 @@ const EstimationsForm: React.FC<EstimationsFormProps> = ({ readonly = false, dat
   );
 };
 
-export { EstimationsForm };
+export { EstimationForm };

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

@@ -3,6 +3,7 @@ import { Form, Formik } 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';
 
 const validationSchema = yup.object({
   issuances: yup.array().of(
@@ -21,9 +22,10 @@ interface IssuanceFormProps {
   readonly?: boolean;
   data?: Issuance[] | undefined;
   showUnits?: boolean;
+  picklistOptions: PickList | undefined;
 }
 
-const IssuanceForm: React.FC<IssuanceFormProps> = ({ readonly = false, data, showUnits = false }) => {
+const IssuanceForm: React.FC<IssuanceFormProps> = ({ readonly = false, data, showUnits = false, picklistOptions }) => {
   return (
     <Formik
       initialValues={{ issuances: data }}
@@ -66,7 +68,8 @@ const IssuanceForm: React.FC<IssuanceFormProps> = ({ readonly = false, data, sho
                   <Field
                     name="verificationBody"
                     label="Verification Body"
-                    type="text"
+                    type="picklist"
+                    options={picklistOptions?.verificationBody}
                     readonly={readonly}
                     initialValue={issuance.verificationBody}
                   />

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { Field, Repeater } from '@/components';
+import * as yup from 'yup';
+import { Label } from '@/schemas/Label.schema';
+import { PickList } from '@/schemas/PickList.schema';
+
+const validationSchema = yup.object({
+  labels: yup.array().of(
+    yup.object({
+      label: yup.string().required('Label is required'),
+      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(),
+      creditingPeriodStartDate: yup.date().nullable(),
+      creditingPeriodEndDate: yup.date().nullable(),
+      unitQuantity: yup
+        .number()
+        .positive('Unit Quantity must be positive')
+        .integer('Must be an integer')
+        .required('Unit Quantity is required'),
+    }),
+  ),
+});
+
+interface LabelFormFormProps {
+  onSubmit: (values: any) => Promise<any>;
+  readonly?: boolean;
+  data?: Label[];
+  picklistOptions: PickList | undefined | null;
+}
+
+const LabelForm: React.FC<LabelFormFormProps> = ({ readonly = false, data, picklistOptions }) => {
+  return (
+    <Formik
+      initialValues={{ labels: data || [] }}
+      validationSchema={validationSchema}
+      onSubmit={(values) => console.log(values)}
+    >
+      {() => (
+        <Form>
+          <Repeater<Label> name="locations" maxNumber={100} minNumber={1} readonly={readonly} initialValue={data || []}>
+            {(label: Label) => (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field name="label" label="Label" type="text" readonly={readonly} initialValue={label.label} />
+                  <Field
+                    name="labelType"
+                    label="Label Type"
+                    type="picklist"
+                    options={picklistOptions?.labelType}
+                    readonly={readonly}
+                    initialValue={label.labelType}
+                  />
+                </div>
+                <div>
+                  <Field
+                    name="labelLink"
+                    label="Label Link"
+                    type="link"
+                    readonly={readonly}
+                    initialValue={label.labelLink}
+                  />
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+                  <Field
+                    name="validityPeriodStartDate"
+                    label="Validity Period Start Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={label.validityPeriodStartDate}
+                  />
+                  <Field
+                    name="validityPeriodEndDate"
+                    label="Validity Period End Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={label.validityPeriodEndDate}
+                  />
+                  <Field
+                    name="creditingPeriodStartDate"
+                    label="Crediting Period End Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={label.creditingPeriodStartDate}
+                  />
+                  <Field
+                    name="creditingPeriodEndDate"
+                    label="Crediting Period End Date"
+                    type="date"
+                    readonly={readonly}
+                    initialValue={label.creditingPeriodEndDate}
+                  />
+                  <Field
+                    name="unitQuantity"
+                    label="Unit Quantity"
+                    type="number"
+                    readonly={readonly}
+                    initialValue={label.unitQuantity}
+                  />
+                </div>
+              </>
+            )}
+          </Repeater>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export { LabelForm };