From b4bf598816afe829088ce68c877ef04a1b553cd7 Mon Sep 17 00:00:00 2001
From: Brianna Cerkiewicz <brianna@button.is>
Date: Fri, 5 Aug 2022 14:48:02 -0700
Subject: [PATCH] feat: add score and project type fields to project overview
 form

---
 app/components/Form/ProjectForm.tsx           | 28 +++++++
 .../Form/SelectProjectTypeWidget.tsx          | 73 +++++++++++++++++++
 app/data/jsonSchemaForm/projectSchema.ts      |  5 ++
 app/lib/theme/FormWithTheme.tsx               |  2 +
 app/lib/theme/ReadOnlyTheme.tsx               |  1 +
 app/lib/theme/widgets/DecimalWidget.tsx       | 48 ++++++++++++
 6 files changed, 157 insertions(+)
 create mode 100644 app/components/Form/SelectProjectTypeWidget.tsx
 create mode 100644 app/lib/theme/widgets/DecimalWidget.tsx

diff --git a/app/components/Form/ProjectForm.tsx b/app/components/Form/ProjectForm.tsx
index 8e82b74080..fb23d22a68 100644
--- a/app/components/Form/ProjectForm.tsx
+++ b/app/components/Form/ProjectForm.tsx
@@ -31,8 +31,10 @@ export const createProjectUiSchema = (
       "operatorId",
       "operatorTradeName",
       "proposalReference",
+      "score",
       "projectName",
       "summary",
+      "projectType",
       "totalFundingRequest",
       "projectStatus",
       "projectStatusId",
@@ -49,6 +51,10 @@ export const createProjectUiSchema = (
     summary: {
       "ui:widget": "TextAreaWidget",
     },
+    projectType: {
+      "ui:placeholder": "Select a Project Type",
+      "ui:widget": "SearchWidget",
+    },
     operatorId: {
       "ui:placeholder": "Select an Operator",
       "ui:widget": "SearchWidget",
@@ -80,6 +86,10 @@ export const createProjectUiSchema = (
     additionalSectorInformation: {
       "ui:widget": "TextAreaWidget",
     },
+    score: {
+      "ui:widget": "DecimalWidget",
+      decimals: 3,
+    },
     comments: {
       "ui:widget": "TextAreaWidget",
     },
@@ -126,6 +136,13 @@ const ProjectForm: React.FC<Props> = (props) => {
             }
           }
         }
+        allProjectTypes {
+          edges {
+            node {
+              name
+            }
+          }
+        }
         ...SelectRfpWidget_query
         ...SelectProjectStatusWidget_query
       }
@@ -225,6 +242,17 @@ const ProjectForm: React.FC<Props> = (props) => {
             };
           }),
         },
+        projectType: {
+          ...projectSchema.properties.projectType,
+          anyOf: query.allProjectTypes.edges.map(({ node }) => {
+            return {
+              type: "string",
+              title: node.name,
+              enum: [node.name],
+              value: node.name,
+            };
+          }),
+        },
       },
     };
     return initialSchema as JSONSchema7;
diff --git a/app/components/Form/SelectProjectTypeWidget.tsx b/app/components/Form/SelectProjectTypeWidget.tsx
new file mode 100644
index 0000000000..6e8c1aed02
--- /dev/null
+++ b/app/components/Form/SelectProjectTypeWidget.tsx
@@ -0,0 +1,73 @@
+import { WidgetProps } from "@rjsf/core";
+import { useMemo } from "react";
+import { graphql, useFragment } from "react-relay";
+import Dropdown from "@button-inc/bcgov-theme/Dropdown";
+
+const SelectProjectType: React.FunctionComponent<WidgetProps> = (props) => {
+  const { id, onChange, placeholder, required, uiSchema, value, formContext } =
+    props;
+
+  const { allProjectTypes } = useFragment(
+    graphql`
+      fragment SelectProjectTypeWidget_query on Query {
+        allProjectTypes {
+          edges {
+            node {
+              name
+            }
+          }
+        }
+      }
+    `,
+    formContext.query
+  );
+
+  console.log("formContext.form", formContext.form);
+  const { projectType } = formContext.form || {};
+
+  const projectTypeList = useMemo(() => {
+    return allProjectTypes.edges
+      .filter((edge) => {
+        return edge.node.name == projectType;
+      })
+      .map((edge) => edge.node.projectStatusByProjectStatusId);
+  }, [allProjectTypes, projectType]);
+
+  return (
+    <div>
+      <Dropdown
+        id={id}
+        onChange={(e) => onChange(e.target.value || undefined)}
+        placeholder={placeholder}
+        size={(uiSchema && uiSchema["bcgov:size"]) || "large"}
+        required={required}
+        value={value}
+      >
+        <option key={`option-placeholder-${id}`} value={undefined}>
+          {placeholder}
+        </option>
+        {projectTypeList.map((type) => {
+          return (
+            <option key={type.rowId} value={type.rowId}>
+              {type.name}
+            </option>
+          );
+        })}
+      </Dropdown>
+      <style jsx>
+        {`
+          div :global(input) {
+            width: 100%;
+          }
+          div :global(.pg-select-wrapper) {
+            padding: 9px 20px 9px 2px;
+            margin-bottom: 5px;
+            margin-top: 2px;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default SelectProjectType;
diff --git a/app/data/jsonSchemaForm/projectSchema.ts b/app/data/jsonSchemaForm/projectSchema.ts
index 81f8e28f86..f32a4f3e69 100644
--- a/app/data/jsonSchemaForm/projectSchema.ts
+++ b/app/data/jsonSchemaForm/projectSchema.ts
@@ -23,6 +23,11 @@ const projectSchema = {
       default: undefined,
     },
     summary: { type: "string", title: "Project Description" },
+    projectType: { type: "string", title: "Project Type" },
+    score: {
+      type: "number",
+      title: "Score",
+    },
     operatorId: {
       type: "number",
       title: "Legal Operator Name and BC Registry ID",
diff --git a/app/lib/theme/FormWithTheme.tsx b/app/lib/theme/FormWithTheme.tsx
index 5a8066ab52..5c6c3ecea9 100644
--- a/app/lib/theme/FormWithTheme.tsx
+++ b/app/lib/theme/FormWithTheme.tsx
@@ -12,6 +12,7 @@ import MoneyWidget from "lib/theme/widgets/MoneyWidget";
 import PhoneNumberWidget from "lib/theme/widgets/PhoneNumberWidget";
 import DueDateWidget from "lib/theme/widgets/DueDateWidget";
 import DateWidget from "./widgets/DateWidget";
+import DecimalWidget from "./widgets/DecimalWidget";
 import { AdjustableCalculatedValueWidget } from "./widgets/AdjustableCalculatedValueWidget";
 import ReadOnlyCalculatedValueWidget from "./widgets/ReadOnlyCalculatedValueWidget";
 import PercentageWidget from "./widgets/PercentageWidget";
@@ -36,6 +37,7 @@ const formTheme: ThemeProps = {
     AdjustableCalculatedValueWidget,
     ReadOnlyCalculatedValueWidget,
     PercentageWidget: PercentageWidget,
+    DecimalWidget,
   },
   ObjectFieldTemplate: ObjectFieldTemplate,
   FieldTemplate: FieldTemplate,
diff --git a/app/lib/theme/ReadOnlyTheme.tsx b/app/lib/theme/ReadOnlyTheme.tsx
index 8c87880e51..408f705676 100644
--- a/app/lib/theme/ReadOnlyTheme.tsx
+++ b/app/lib/theme/ReadOnlyTheme.tsx
@@ -30,6 +30,7 @@ const readOnlyTheme: ThemeProps = {
     AdjustableCalculatedValueWidget: ReadOnlyAdjustableCalculatedValueWidget,
     ReadOnlyCalculatedValueWidget,
     PercentageWidget: ReadOnlyPercentageWidget,
+    DecimalWidget: ReadOnlyWidget,
   },
   ObjectFieldTemplate: ReadOnlyObjectFieldTemplate,
   FieldTemplate: ReadOnlyFieldTemplate,
diff --git a/app/lib/theme/widgets/DecimalWidget.tsx b/app/lib/theme/widgets/DecimalWidget.tsx
new file mode 100644
index 0000000000..6292588f49
--- /dev/null
+++ b/app/lib/theme/widgets/DecimalWidget.tsx
@@ -0,0 +1,48 @@
+import { WidgetProps } from "@rjsf/core";
+import NumberFormat from "react-number-format";
+
+export const DecimalWidget: React.FC<WidgetProps> = ({
+  schema,
+  id,
+  disabled,
+  uiSchema,
+  value,
+  label,
+  onChange,
+}) => {
+  return (
+    <div>
+      <NumberFormat
+        fixedDecimalScale={uiSchema.decimals}
+        id={id}
+        disabled={disabled}
+        className="decmial"
+        decimalScale={uiSchema.decimals}
+        defaultValue={(schema as any).defaultValue}
+        value={value}
+        onChange={(e) => onChange(e.target.value || undefined)}
+        style={{
+          border: "2px solid #606060",
+          borderRadius: "0.25em",
+          padding: "0.5em",
+        }}
+        aria-label={label}
+      />
+      <style jsx>
+        {`
+          div :global(input) {
+            width: 100%;
+          }
+          div :global(.decimal:focus) {
+            outline-style: solid;
+            outline-width: 4px;
+            outline-color: #3b99fc;
+            outline-offset: 1px;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default DecimalWidget;