feat: add UI for selecting a reporting year

app/components/SearchTable.tsx

@@ -5,14 +5,16 @@ interface Props {
   defaultOrderByField: string;
   defaultOrderByDisplay: string;
   children: (props) => JSX.Element;
+  defaultReportingYear?: number;
 }
 class SearchTableComponent extends Component<Props> {
   state = {
     orderByField: this.props.defaultOrderByField,
     direction: 'ASC',
     searchField: null,
     searchValue: null,
-    searchDisplay: 'Search by: '
+    searchDisplay: 'Search by: ',
+    selectedReportingYear: this.props.defaultReportingYear
   };
 
   toggleDirection = () => {
@@ -42,6 +44,12 @@ class SearchTableComponent extends Component<Props> {
     }
   };
 
+  selectReportingYear = (year) => {
+    this.setState({
+      selectedReportingYear: year
+    });
+  };
+
   handleEvent = (action, value, column) => {
     this[action](value, column);
   };
@@ -57,7 +65,8 @@ class SearchTableComponent extends Component<Props> {
       searchField: this.state.searchField,
       searchValue: this.state.searchValue,
       searchDisplay: this.state.searchDisplay,
-      handleEvent: this.handleEvent
+      handleEvent: this.handleEvent,
+      selectedReportingYear: this.state.selectedReportingYear
     });
   }
 }

app/components/SearchTableLayout.tsx

@@ -2,13 +2,21 @@ import React from 'react';
 import {Container, Row, Col, Table, Alert} from 'react-bootstrap';
 import SortableTableHeader from 'components/SortableTableHeader';
 import SearchBox from 'components/SearchBox';
+import SelectReportingYearDropDown from 'components/SelectReportingYearDropdown';
+
 interface Props {
-  handleEvent: (action: string, value?: string, column?: string) => any;
+  handleEvent: (
+    action: string,
+    value?: string | number,
+    column?: string
+  ) => any;
   handleSelectAll?: (...args: any[]) => void;
   allSelected?: boolean;
   displayNameToColumnNameMap: any;
   body: JSX.Element;
   isLoading?: boolean;
+  selectableReportingYears?: number[];
+  selectedReportingYear?: number;
 }
 export const SearchTableLayoutComponent: React.FunctionComponent<Props> = (
   props
@@ -19,7 +27,9 @@ export const SearchTableLayoutComponent: React.FunctionComponent<Props> = (
     allSelected = false,
     displayNameToColumnNameMap,
     body,
-    isLoading
+    isLoading,
+    selectableReportingYears,
+    selectedReportingYear
   } = props;
 
   const noSearchResults =
@@ -34,7 +44,16 @@ export const SearchTableLayoutComponent: React.FunctionComponent<Props> = (
     <>
       <Container>
         <Row>
-          <Col md={{span: 12}} className="no-pad">
+          <Col md={{offset: 2, span: 2}}>
+            {selectableReportingYears && (
+              <SelectReportingYearDropDown
+                selectableReportingYears={selectableReportingYears}
+                handleEvent={handleEvent}
+                selectedReportingYear={selectedReportingYear}
+              />
+            )}
+          </Col>
+          <Col md={{span: 8}} className="no-pad">
             <SearchBox
               dropdownSortItems={Object.keys(displayNameToColumnNameMap)}
               handleEvent={handleEvent}

app/components/SelectReportingYearDropdown.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import JsonSchemaForm, {IChangeEvent} from 'react-jsonschema-form';
+import {JSONSchema6} from 'json-schema';
+import FormFieldTemplate from 'containers/Forms/FormFieldTemplate';
+import FormObjectFieldTemplate from 'containers/Forms/FormObjectFieldTemplate';
+
+interface Props {
+  selectableReportingYears: number[];
+  handleEvent: (
+    action: string,
+    value?: string | number,
+    column?: string
+  ) => any;
+  selectedReportingYear: number;
+}
+
+const SelectReportingYearDropDownComponent: React.FunctionComponent<Props> = ({
+  selectableReportingYears,
+  handleEvent,
+  selectedReportingYear
+}) => {
+  console.log(selectedReportingYear);
+  const yearSchema: JSONSchema6 = {
+    type: 'object',
+    properties: {
+      reportingYear: {
+        title: 'Reporting Period:',
+        type: 'number',
+        enum: selectableReportingYears,
+        default: selectedReportingYear
+      }
+    }
+  };
+
+  const yearUISchema = {
+    reportingYear: {
+      'ui:col-md': 12
+    }
+  };
+
+  const handleChange = (e: IChangeEvent) => {
+    handleEvent('selectReportingYear', e.formData.reportingYear);
+  };
+
+  return (
+    <JsonSchemaForm
+      schema={yearSchema}
+      uiSchema={yearUISchema}
+      showErrorList={false}
+      FieldTemplate={FormFieldTemplate}
+      ObjectFieldTemplate={FormObjectFieldTemplate}
+      onChange={handleChange}
+    >
+      <div />
+    </JsonSchemaForm>
+  );
+};
+
+export default SelectReportingYearDropDownComponent;

app/containers/Facilities/FacilitiesListContainer.tsx

@@ -12,6 +12,7 @@ interface Props {
   searchValue: string;
   offsetValue: number;
   handleEvent: (...args: any[]) => void;
+  selectedReportingYear: number;
   query: FacilitiesListContainer_query;
   relay: RelayRefetchProp;
 }
@@ -22,14 +23,21 @@ export const FacilitiesList: React.FunctionComponent<Props> = ({
   searchField,
   searchValue,
   handleEvent,
+  selectedReportingYear,
   relay,
   query
 }) => {
+  const reportingYears = query.allReportingYears.edges;
+  const nextReportingYear = query.nextReportingYear.reportingYear;
+  const selectableReportingYears = [];
+  reportingYears.forEach(({node}) => {
+    if (node.reportingYear < nextReportingYear)
+      selectableReportingYears.push(node.reportingYear);
+  });
   const {edges} = query.searchAllFacilities;
   const [offsetValue, setOffset] = useState(0);
   const [activePage, setActivePage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
-  const reportingYear = 2019;
   const maxResultsPerPage = 10;
   useEffect(() => {
     const refetchVariables = {
@@ -39,13 +47,21 @@ export const FacilitiesList: React.FunctionComponent<Props> = ({
       direction,
       maxResultsPerPage,
       offsetValue,
-      reportingYear
+      reportingYear: selectedReportingYear
     };
     setIsLoading(true);
     relay.refetch(refetchVariables, undefined, () => {
       setIsLoading(false);
     });
-  }, [searchField, searchValue, orderByField, direction, offsetValue, relay]);
+  }, [
+    searchField,
+    searchValue,
+    orderByField,
+    direction,
+    offsetValue,
+    relay,
+    selectedReportingYear
+  ]);
 
   const displayNameToColumnNameMap = {
     'Organisation Name': 'organisation_name',
@@ -79,6 +95,8 @@ export const FacilitiesList: React.FunctionComponent<Props> = ({
         displayNameToColumnNameMap={displayNameToColumnNameMap}
         handleEvent={handleEvent}
         isLoading={isLoading}
+        selectableReportingYears={selectableReportingYears}
+        selectedReportingYear={selectedReportingYear}
       />
       <PaginationBar
         setOffset={setOffset}
@@ -128,6 +146,16 @@ export default createRefetchContainer(
             }
           }
         }
+        allReportingYears {
+          edges {
+            node {
+              reportingYear
+            }
+          }
+        }
+        nextReportingYear {
+          reportingYear
+        }
       }
     `
   },

app/pages/reporter/facilities.tsx

@@ -42,6 +42,9 @@ class FacilitiesList extends Component<Props> {
         session {
           ...defaultLayout_session
         }
+        nextReportingYear {
+          reportingYear
+        }
       }
     }
   `;
@@ -53,19 +56,22 @@ class FacilitiesList extends Component<Props> {
         direction: 'ASC',
         offsetValue: 0,
         maxResultsPerPage: 10,
-        reportingYear: 2019
+        reportingYear: 2018
       }
     };
   }
 
   render() {
     const {session} = this.props.query;
+    const defaultReportingYear =
+      this.props.query.nextReportingYear.reportingYear - 1;
     return (
       <DefaultLayout showSubheader session={session} title="Facilities">
         <SearchTable
           query={this.props.query}
           defaultOrderByField="facility_name"
           defaultOrderByDisplay="Facility Name"
+          defaultReportingYear={defaultReportingYear}
         >
           {(props) => <FacilitiesListContainer {...props} />}
         </SearchTable>