feat: collapsible report

bcgov · Jun 17, 2022 · ca4a205 · ca4a205
1 parent bd40529
commit ca4a205
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 33 deletions.
diff --git a/app/components/Form/ProjectQuarterlyReportForm.tsx b/app/components/Form/ProjectQuarterlyReportForm.tsx
@@ -24,6 +24,7 @@ import {
 } from "./reportingRequirementFormChangeFunctions";
 import SavingIndicator from "./SavingIndicator";
 import UndoChangesButton from "./UndoChangesButton";
+import CollapsibleReport from "components/ReportingRequirement/CollapsibleReport";
 
 interface Props {
   onSubmit: () => void;
@@ -154,9 +155,8 @@ const ProjectQuarterlyReportForm: React.FC<Props> = (props) => {
 
         {sortedQuarterlyReports.map((quarterlyReport, index) => {
           return (
-            <div key={quarterlyReport.id} className="reportContainer">
-              <header className="reportHeader">
-                <h3>Quarterly Report {index + 1}</h3>
+            <div key={quarterlyReport.id}>
+              <CollapsibleReport title={`Quarterly Report ${index + 1}`}>
                 <Button
                   variant="secondary"
                   size="small"
@@ -168,31 +168,32 @@ const ProjectQuarterlyReportForm: React.FC<Props> = (props) => {
                       formRefs
                     )
                   }
+                  className="removeButton"
                 >
                   Remove
                 </Button>
-              </header>
-              <FormBase
-                id={`form-${quarterlyReport.id}`}
-                validateOnMount={quarterlyReport.changeStatus === "staged"}
-                idPrefix={`form-${quarterlyReport.id}`}
-                ref={(el) => (formRefs.current[quarterlyReport.id] = el)}
-                formData={quarterlyReport.newFormData}
-                onChange={(change) => {
-                  updateReportFormChange(
-                    applyUpdateFormChangeMutation,
-                    "Quarterly",
-                    { ...quarterlyReport, changeStatus: "pending" },
-                    change.formData
-                  );
-                }}
-                schema={projectReportingRequirementSchema as JSONSchema7}
-                uiSchema={quarterlyReportUiSchema}
-                ObjectFieldTemplate={EmptyObjectFieldTemplate}
-                formContext={{
-                  dueDate: quarterlyReport.newFormData?.reportDueDate,
-                }}
-              />
+                <FormBase
+                  id={`form-${quarterlyReport.id}`}
+                  validateOnMount={quarterlyReport.changeStatus === "staged"}
+                  idPrefix={`form-${quarterlyReport.id}`}
+                  ref={(el) => (formRefs.current[quarterlyReport.id] = el)}
+                  formData={quarterlyReport.newFormData}
+                  onChange={(change) => {
+                    updateReportFormChange(
+                      applyUpdateFormChangeMutation,
+                      "Quarterly",
+                      { ...quarterlyReport, changeStatus: "pending" },
+                      change.formData
+                    );
+                  }}
+                  schema={projectReportingRequirementSchema as JSONSchema7}
+                  uiSchema={quarterlyReportUiSchema}
+                  ObjectFieldTemplate={EmptyObjectFieldTemplate}
+                  formContext={{
+                    dueDate: quarterlyReport.newFormData?.reportDueDate,
+                  }}
+                />
+              </CollapsibleReport>
             </div>
           );
         })}
@@ -218,17 +219,11 @@ const ProjectQuarterlyReportForm: React.FC<Props> = (props) => {
           margin-left: 0.4em;
           margin-right: 0em;
         }
-        div.reportContainer {
-          border-top: 1px solid black;
-          padding-top: 1em;
-        }
         div :global(button.addButton) {
           margin-bottom: 1em;
         }
-        header.reportHeader {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
+        div :global(button.removeButton) {
+          float: right;
         }
       `}</style>
     </div>

diff --git a/app/components/ReportingRequirement/CollapsibleReport.tsx b/app/components/ReportingRequirement/CollapsibleReport.tsx
@@ -0,0 +1,51 @@
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+
+interface Props {
+  title: string;
+  startOpen?: boolean;
+}
+
+const CollapsibleReport: React.FC<Props> = ({
+  title,
+  startOpen = false,
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(startOpen);
+
+  return (
+    <>
+      <div className="reportContainer">
+        <header className="reportHeader" onClick={() => setIsOpen(!isOpen)}>
+          <h3>{title}</h3>
+          <div className="toggleIcon">
+            <FontAwesomeIcon icon={isOpen ? faChevronUp : faChevronDown} />
+          </div>
+        </header>
+        <div className={!isOpen && "closed"}>{children}</div>
+      </div>
+      <style jsx>
+        {`
+          .closed {
+            display: none;
+          }
+          .reportContainer {
+            border-top: 1px solid black;
+          }
+          .reportHeader {
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+            padding-top: 1em;
+          }
+          .toggleIcon {
+            margin-left: auto;
+          }
+        `}
+      </style>
+    </>
+  );
+};
+
+export default CollapsibleReport;