From 5fc23bdb07444bd7252119aa27723f7b66e385ee Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Wed, 2 Nov 2022 14:54:02 -0400
Subject: [PATCH] finished process instance list filter w/ burnettk

---
 spiffworkflow-frontend/package-lock.json      |  1 +
 spiffworkflow-frontend/package.json           |  1 +
 .../src/routes/HomePage.tsx                   | 23 ++++++---
 .../src/routes/ProcessInstanceList.tsx        | 49 ++++++++++++++-----
 4 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json
index faba49ba..a72fc406 100644
--- a/spiffworkflow-frontend/package-lock.json
+++ b/spiffworkflow-frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@babel/core": "^7.18.10",
         "@babel/plugin-transform-react-jsx": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
+        "@carbon/icons-react": "^11.10.0",
         "@carbon/react": "^1.16.0",
         "@carbon/styles": "^1.16.0",
         "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json
index c3364a12..c9127d7c 100644
--- a/spiffworkflow-frontend/package.json
+++ b/spiffworkflow-frontend/package.json
@@ -6,6 +6,7 @@
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-react-jsx": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@carbon/icons-react": "^11.10.0",
     "@carbon/react": "^1.16.0",
     "@carbon/styles": "^1.16.0",
     "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
diff --git a/spiffworkflow-frontend/src/routes/HomePage.tsx b/spiffworkflow-frontend/src/routes/HomePage.tsx
index a66ded5c..2cfc0078 100644
--- a/spiffworkflow-frontend/src/routes/HomePage.tsx
+++ b/spiffworkflow-frontend/src/routes/HomePage.tsx
@@ -5,14 +5,14 @@ import { Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import { getPageInfoFromSearchParams } from '../helpers';
 import HttpService from '../services/HttpService';
-import { RecentProcessModel } from '../interfaces';
+import { PaginationObject, RecentProcessModel } from '../interfaces';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 
 export default function HomePage() {
   const [searchParams] = useSearchParams();
   const [tasks, setTasks] = useState([]);
-  const [pagination, setPagination] = useState(null);
+  const [pagination, setPagination] = useState<PaginationObject | null>(null);
 
   useEffect(() => {
     const { page, perPage } = getPageInfoFromSearchParams(
@@ -126,10 +126,10 @@ export default function HomePage() {
     );
   };
 
-  const relevantProcessModelSection =
-    recentProcessModels.length > 0 && buildRecentProcessModelSection();
-
-  if (pagination) {
+  const tasksWaitingForMeComponent = () => {
+    if (pagination && pagination.total < 1) {
+      return null;
+    }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
       PER_PAGE_FOR_TASKS_ON_HOME_PAGE
@@ -145,6 +145,17 @@ export default function HomePage() {
           tableToDisplay={buildTable()}
           path="/tasks"
         />
+      </>
+    );
+  };
+
+  const relevantProcessModelSection =
+    recentProcessModels.length > 0 && buildRecentProcessModelSection();
+
+  if (pagination) {
+    return (
+      <>
+        {tasksWaitingForMeComponent()}
         {relevantProcessModelSection}
       </>
     );
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
index 63ee7a2f..5be2c3c7 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
@@ -6,6 +6,8 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
+// @ts-ignore
+import { Filter } from '@carbon/icons-react';
 import {
   Button,
   ButtonSet,
@@ -57,6 +59,7 @@ export default function ProcessInstanceList() {
   const [startTo, setStartTo] = useState<string>('');
   const [endFrom, setEndFrom] = useState<string>('');
   const [endTo, setEndTo] = useState<string>('');
+  const [showFilterOptions, setShowFilterOptions] = useState<boolean>(false);
 
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
@@ -352,7 +355,9 @@ export default function ProcessInstanceList() {
   };
 
   const filterOptions = () => {
-    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    if (!showFilterOptions) {
+      return null;
+    }
     return (
       <>
         <Grid fullWidth className="with-bottom-margin">
@@ -394,18 +399,6 @@ export default function ProcessInstanceList() {
             </ButtonSet>
           </Column>
         </Grid>
-        <Grid fullWidth>
-          <Column lg={16}>
-            <PaginationForTable
-              page={page}
-              perPage={perPage}
-              pagination={pagination}
-              tableToDisplay={buildTable()}
-              queryParamString={getSearchParamsAsQueryString()}
-              path="/admin/process-instances"
-            />
-          </Column>
-        </Grid>
       </>
     );
   };
@@ -480,12 +473,42 @@ export default function ProcessInstanceList() {
     );
   };
 
+  const toggleShowFilterOptions = () => {
+    setShowFilterOptions(!showFilterOptions);
+  };
+
   if (pagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <>
         {processInstanceTitleElement()}
+        <Grid fullWidth>
+          <Column lg={15} />
+          <Column lg={1}>
+            <Button
+              kind="ghost"
+              renderIcon={Filter}
+              iconDescription="Filter Options"
+              hasIconOnly
+              size="lg"
+              onClick={toggleShowFilterOptions}
+            />
+          </Column>
+        </Grid>
         {filterOptions()}
+        <br />
+        <Grid fullWidth>
+          <Column lg={16}>
+            <PaginationForTable
+              page={page}
+              perPage={perPage}
+              pagination={pagination}
+              tableToDisplay={buildTable()}
+              queryParamString={getSearchParamsAsQueryString()}
+              path="/admin/process-instances"
+            />
+          </Column>
+        </Grid>
       </>
     );
   }