feat: organisation request page updated with search function

bcgov · Mar 9, 2021 · 9745493 · 9745493
1 parent 6c26abf
commit 9745493
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 102 deletions.
diff --git a/app/containers/Admin/OrganisationRequestsTable.tsx b/app/containers/Admin/OrganisationRequestsTable.tsx
@@ -1,50 +1,36 @@
-import React, {useEffect} from 'react';
-import {graphql, createRefetchContainer, RelayRefetchProp} from 'react-relay';
+import React from 'react';
+import {graphql, createFragmentContainer} from 'react-relay';
 import {OrganisationRequestsTable_query} from 'OrganisationRequestsTable_query.graphql';
-import SearchTableLayout from 'components/SearchTableLayout';
+import {CiipUserOrganisationStatus} from 'OrganisationRequestsTableRow_userOrganisation.graphql';
 import OrganisationRequestsTableRow from './OrganisationRequestsTableRow';
+import {ISearchOption} from 'components/Search/ISearchOption';
+import {NoHeaderSearchOption} from 'components/Search/NoHeaderSearchOption';
+import {TextSearchOption} from 'components/Search/TextSearchOption';
+import {NumberSearchOption} from 'components/Search/NumberSearchOption';
+import {EnumSearchOption} from 'components/Search/EnumSearchOption';
+import FilterableTableLayoutComponent from 'components/FilterableComponents/FilterableTableLayout';
 interface Props {
   query: OrganisationRequestsTable_query;
-  orderByField?: string;
-  orderByDisplay?: string;
-  searchField?: string;
-  searchValue?: string;
-  direction?: string;
-  searchDisplay?: string;
-  handleEvent: (...args: any[]) => void;
-  relay: RelayRefetchProp;
 }
 export const OrganisationRequestsTableComponent: React.FunctionComponent<Props> = (
   props
 ) => {
-  const {
-    orderByField,
-    searchField,
-    searchValue,
-    direction,
-    handleEvent
-  } = props;
+  const searchOptions: ISearchOption[] = [
+    new NumberSearchOption('User ID', 'user_id'),
+    new TextSearchOption('First Name', 'first_name'),
+    new TextSearchOption('Last Name', 'last_name'),
+    new TextSearchOption('Email', 'email_address'),
+    new TextSearchOption('Operator', 'operator_name'),
+    new EnumSearchOption<CiipUserOrganisationStatus>('Status', 'status', [
+      'APPROVED',
+      'PENDING',
+      'REJECTED'
+    ]),
+    NoHeaderSearchOption
+  ];
 
-  const displayNameToColumnNameMap = {
-    'User ID': 'user_id',
-    'First Name': 'first_name',
-    'Last Name': 'last_name',
-    Email: 'email_address',
-    Operator: 'operator_name',
-    Status: 'status',
-    '': null
-  };
+  const {edges} = props.query.allCiipUserOrganisations;
 
-  const {edges} = props.query.searchCiipUserOrganisation;
-  useEffect(() => {
-    const refetchVariables = {
-      searchField,
-      searchValue,
-      orderByField,
-      direction
-    };
-    props.relay.refetch(refetchVariables);
-  });
   const body = (
     <tbody>
       {edges.map((edge) => (
@@ -56,57 +42,40 @@ export const OrganisationRequestsTableComponent: React.FunctionComponent<Props>
     </tbody>
   );
   return (
-    <SearchTableLayout
-      body={body}
-      displayNameToColumnNameMap={displayNameToColumnNameMap}
-      handleEvent={handleEvent}
-    />
+    <FilterableTableLayoutComponent body={body} searchOptions={searchOptions} />
   );
 };
 
-export default createRefetchContainer(
-  OrganisationRequestsTableComponent,
-  {
-    query: graphql`
-      fragment OrganisationRequestsTable_query on Query
-      @argumentDefinitions(
-        searchField: {type: "String"}
-        searchValue: {type: "String"}
-        orderByField: {type: "String"}
-        direction: {type: "String"}
+export default createFragmentContainer(OrganisationRequestsTableComponent, {
+  query: graphql`
+    fragment OrganisationRequestsTable_query on Query
+    @argumentDefinitions(
+      user_id: {type: "Int"}
+      first_name: {type: "String"}
+      last_name: {type: "String"}
+      email_address: {type: "String"}
+      operator_name: {type: "String"}
+      status: {type: "CiipUserOrganisationStatus"}
+      order_by: {type: "[CiipUserOrganisationsOrderBy!]"}
+    ) {
+      allCiipUserOrganisations(
+        filter: {
+          userId: {equalTo: $user_id}
+          firstName: {includesInsensitive: $first_name}
+          lastName: {includesInsensitive: $last_name}
+          emailAddress: {includesInsensitive: $email_address}
+          operatorName: {includesInsensitive: $operator_name}
+          status: {equalTo: $status}
+        }
+        orderBy: $order_by
       ) {
-        searchCiipUserOrganisation(
-          searchField: $searchField
-          searchValue: $searchValue
-          orderByField: $orderByField
-          direction: $direction
-        ) {
-          edges {
-            node {
-              id
-              ...OrganisationRequestsTableRow_userOrganisation
-            }
+        edges {
+          node {
+            id
+            ...OrganisationRequestsTableRow_userOrganisation
           }
         }
       }
-    `
-  },
-  graphql`
-    query OrganisationRequestsTableRefetchQuery(
-      $searchField: String
-      $searchValue: String
-      $orderByField: String
-      $direction: String
-    ) {
-      query {
-        ...OrganisationRequestsTable_query
-          @arguments(
-            searchField: $searchField
-            searchValue: $searchValue
-            orderByField: $orderByField
-            direction: $direction
-          )
-      }
     }
   `
-);
+});
diff --git a/app/containers/Admin/OrganisationRequestsTableRow.tsx b/app/containers/Admin/OrganisationRequestsTableRow.tsx
@@ -46,10 +46,10 @@ export const OrganisationRequestsTableRowComponent: React.FunctionComponent<Prop
   return (
     <tr>
       <td>{userOrganisation.userId}</td>
-      <td>{userOrganisation.ciipUserByUserId.firstName}</td>
-      <td>{userOrganisation.ciipUserByUserId.lastName}</td>
-      <td>{userOrganisation.ciipUserByUserId.emailAddress}</td>
-      <td>{userOrganisation.organisationByOrganisationId.operatorName}</td>
+      <td>{userOrganisation.firstName}</td>
+      <td>{userOrganisation.lastName}</td>
+      <td>{userOrganisation.emailAddress}</td>
+      <td>{userOrganisation.operatorName}</td>
       <td>
         <Badge
           pill
@@ -96,16 +96,12 @@ export default createFragmentContainer(OrganisationRequestsTableRowComponent, {
   userOrganisation: graphql`
     fragment OrganisationRequestsTableRow_userOrganisation on CiipUserOrganisation {
       id
+      firstName
+      lastName
+      emailAddress
       status
       userId
-      ciipUserByUserId {
-        firstName
-        lastName
-        emailAddress
-      }
-      organisationByOrganisationId {
-        operatorName
-      }
+      operatorName
     }
   `
 });
diff --git a/app/pages/analyst/organisation-requests.tsx b/app/pages/analyst/organisation-requests.tsx
@@ -16,21 +16,27 @@ class OrganisationRequests extends Component<Props> {
   static isAccessProtected = true;
   static query = graphql`
     query organisationRequestsQuery(
-      $orderByField: String
-      $direction: String
-      $searchField: String
-      $searchValue: String
+      $user_id: Int
+      $first_name: String
+      $last_name: String
+      $email_address: String
+      $operator_name: String
+      $status: CiipUserOrganisationStatus
+      $order_by: [CiipUserOrganisationsOrderBy!]
     ) {
       query {
         session {
           ...defaultLayout_session
         }
         ...OrganisationRequestsTable_query
           @arguments(
-            orderByField: $orderByField
-            direction: $direction
-            searchField: $searchField
-            searchValue: $searchValue
+            user_id: $user_id
+            first_name: $first_name
+            last_name: $last_name
+            email_address: $email_address
+            operator_name: $operator_name
+            status: $status
+            order_by: $order_by
           )
       }
     }