Add pending flows page

UN-OCHA · Jun 27, 2022 · d6443f5 · d6443f5
1 parent a3c29c7
commit d6443f5
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 3 deletions.
diff --git a/apps/hpc-ftsadmin/src/app/app.tsx b/apps/hpc-ftsadmin/src/app/app.tsx
@@ -18,6 +18,7 @@ import { Z_INDEX } from './layout';
 import PageNotFound from './pages/not-found';
 import PageNotLoggedIn from './pages/not-logged-in';
 import PageFlowsList from './pages/flows-list';
+import PagePendingFlowsList from './pages/pending-flows-list';
 import * as paths from './paths';
 
 const environmentWarning = (env: Environment, lang: LanguageKey) => {
@@ -124,6 +125,10 @@ export const App = () => {
                             label: t.t(lang, (s) => s.navigation.flows),
                             path: paths.flows(),
                           },
+                          {
+                            label: t.t(lang, (s) => s.navigation.pendingFlows),
+                            path: paths.pendingFlows(),
+                          },
                         ]}
                         className={CLASSES.CONTAINER.FULL}
                       />
@@ -136,6 +141,11 @@ export const App = () => {
                           exact
                           component={PageFlowsList}
                         />
+                        <Route
+                          path={paths.pendingFlows()}
+                          exact
+                          component={PagePendingFlowsList}
+                        />
                         <Route component={PageNotFound} />
                       </Switch>
                     </LoggedInContainer>

diff --git a/apps/hpc-ftsadmin/src/app/components/flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/flows-table.tsx
@@ -27,6 +27,7 @@ import { AppContext, getEnv } from '../context';
 
 type HeaderId =
   | 'flow.id'
+  | 'flow.versionID'
   | 'flow.updatedAt'
   | 'externalReference.systemID'
   | 'flow.amountUSD'
@@ -43,6 +44,7 @@ export interface FlowsTableProps {
     sortable?: boolean;
     label: keyof Strings['components']['flowsTable']['headers'];
   }[];
+  flowList: flows.FlowList;
 }
 
 export default function FlowsTable(props: FlowsTableProps) {
@@ -75,6 +77,7 @@ export default function FlowsTable(props: FlowsTableProps) {
         includeChildrenOfParkedFlows: true,
         orderBy: query.orderBy,
         orderDir: query.orderDir,
+        flowList: props.flowList,
       },
     })
   );
@@ -227,6 +230,20 @@ export default function FlowsTable(props: FlowsTableProps) {
                                 {row.id} v{row.versionID}
                               </TableCell>
                             );
+                          case 'flow.versionID':
+                            return (
+                              <TableCell
+                                component="th"
+                                scope="row"
+                                data-test="flows-table-status"
+                              >
+                                {t.t(lang, (s) =>
+                                  row.versionID > 1
+                                    ? s.components.flowsTable.update
+                                    : s.components.flowsTable.new
+                                )}
+                              </TableCell>
+                            );
                           case 'flow.updatedAt':
                             return (
                               <TableCell data-test="flows-table-updated">

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/flows-list.tsx
@@ -61,6 +61,7 @@ export default (props: Props) => {
         label: 'details',
       },
     ],
+    flowList: 'all',
   };
 
   return (
@@ -71,7 +72,7 @@ export default (props: Props) => {
         >
           <PageMeta title={[t.t(lang, (s) => s.routes.flows.title)]} />
           <C.PageTitle>{t.t(lang, (s) => s.routes.flows.title)}</C.PageTitle>
-          <FlowsTable headers={flowsTableProps.headers} />
+          <FlowsTable {...flowsTableProps} />
         </div>
       )}
     </AppContext.Consumer>

diff --git a/apps/hpc-ftsadmin/src/app/pages/pending-flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/pending-flows-list.tsx
@@ -0,0 +1,87 @@
+import { C, CLASSES, combineClasses } from '@unocha/hpc-ui';
+import { t } from '../../i18n';
+import FlowsTable, { FlowsTableProps } from '../components/flows-table';
+import PageMeta from '../components/page-meta';
+import { AppContext } from '../context';
+
+interface Props {
+  className?: string;
+}
+
+export default (props: Props) => {
+  const flowsTableProps: FlowsTableProps = {
+    headers: [
+      {
+        id: 'flow.id',
+        sortable: true,
+        label: 'id',
+      },
+      {
+        id: 'flow.versionID',
+        sortable: true,
+        label: 'status',
+      },
+      {
+        id: 'flow.updatedAt',
+        sortable: true,
+        label: 'updatedCreated',
+      },
+      {
+        id: 'externalReference.systemID',
+        sortable: true,
+        label: 'dataProvider',
+      },
+      {
+        id: 'flow.amountUSD',
+        sortable: true,
+        label: 'amountUSD',
+      },
+      {
+        id: 'source.organization.name',
+        sortable: true,
+        label: 'sourceOrganization',
+      },
+      {
+        id: 'destination.organization.name',
+        sortable: true,
+        label: 'destinationOrganization',
+      },
+      {
+        id: 'destination.planVersion.name',
+        sortable: true,
+        label: 'destinationPlan',
+      },
+      {
+        id: 'destination.location.name',
+        sortable: true,
+        label: 'destinationCountry',
+      },
+      {
+        id: 'destination.usageYear.year',
+        sortable: true,
+        label: 'destinationYear',
+      },
+      {
+        id: 'details',
+        label: 'details',
+      },
+    ],
+    flowList: 'pending',
+  };
+
+  return (
+    <AppContext.Consumer>
+      {({ lang }) => (
+        <div
+          className={combineClasses(CLASSES.CONTAINER.FULL, props.className)}
+        >
+          <PageMeta title={[t.t(lang, (s) => s.routes.pendingFlows.title)]} />
+          <C.PageTitle>
+            {t.t(lang, (s) => s.routes.pendingFlows.title)}
+          </C.PageTitle>
+          <FlowsTable {...flowsTableProps} />
+        </div>
+      )}
+    </AppContext.Consumer>
+  );
+};
diff --git a/apps/hpc-ftsadmin/src/app/paths.ts b/apps/hpc-ftsadmin/src/app/paths.ts
@@ -1,5 +1,6 @@
 const HOME = '/';
 const FLOWS = '/flows';
+const PENDING_FLOWS = '/pending-flows';
 
 const replacePlaceholders = (
   path: string,
@@ -14,3 +15,5 @@ const replacePlaceholders = (
 export const home = () => replacePlaceholders(HOME, {});
 
 export const flows = () => replacePlaceholders(FLOWS, {});
+
+export const pendingFlows = () => replacePlaceholders(PENDING_FLOWS, {});
diff --git a/apps/hpc-ftsadmin/src/i18n/langs/en.json b/apps/hpc-ftsadmin/src/i18n/langs/en.json
@@ -46,6 +46,7 @@
     "flowsTable": {
       "headers": {
         "id": "ID",
+        "status": "Status",
         "updatedCreated": "Updated/Created",
         "dataProvider": "Data Provider",
         "amountUSD": "Amount USD",
@@ -56,6 +57,8 @@
         "destinationYear": "Destination Year",
         "details": "Details"
       },
+      "update": "Update",
+      "new": "New",
       "restricted": "restricted",
       "inactive": "inactive",
       "child": "child",
@@ -69,11 +72,15 @@
     }
   },
   "navigation": {
-    "flows": "Flows"
+    "flows": "Flows",
+    "pendingFlows": "Pending Flows"
   },
   "routes": {
     "flows": {
       "title": "Search funding flows"
+    },
+    "pendingFlows": {
+      "title": "Search pending flows"
     }
   }
 }
diff --git a/apps/hpc-ftsadmin/src/i18n/langs/fr.json b/apps/hpc-ftsadmin/src/i18n/langs/fr.json
@@ -46,6 +46,7 @@
     "flowsTable": {
       "headers": {
         "id": "ID",
+        "status": "Statut",
         "updatedCreated": "Mise à jour/Création",
         "dataProvider": "Fournisseur de données",
         "amountUSD": "Montant USD",
@@ -56,6 +57,8 @@
         "destinationYear": "Année de destination",
         "details": "Détails"
       },
+      "update": "Mise à jour de",
+      "new": "Nouveau",
       "restricted": "restreint",
       "inactive": "inactif",
       "child": "enfant",
@@ -69,11 +72,15 @@
     }
   },
   "navigation": {
-    "flows": "Flux"
+    "flows": "Flux",
+    "pendingFlows": "Flux en attente"
   },
   "routes": {
     "flows": {
       "title": "Rechercher des flux de financement"
+    },
+    "pendingFlows": {
+      "title": "Recherche de flux en attente"
     }
   }
 }
diff --git a/libs/hpc-data/src/lib/flows.ts b/libs/hpc-data/src/lib/flows.ts
@@ -13,6 +13,8 @@ const FLOW_LIST = t.keyof({
   search: null,
 });
 
+export type FlowList = t.TypeOf<typeof FLOW_LIST>;
+
 const FLOW_OBJECT = t.type({
   objectID: t.number,
   refDirection: FLOW_REF_DIRECTION,