From 1ad0d1650c887dda3bf0401efb0df9c146f3a12e Mon Sep 17 00:00:00 2001
From: Matija Obreza <matija.obreza@croptrust.org>
Date: Sun, 30 Sep 2018 09:10:50 +0200
Subject: [PATCH] Dashboard supports configurable Filters via `filterComponent`
 property

- Added custom descriptor Filters for dashboard
- Added Descriptor is `used` filter
---
 locales/en/translations.json               |  3 +-
 src/descriptors/ui/DashboardPage.tsx       |  2 +
 src/descriptors/ui/c/Filters.tsx           | 45 +++++++++-------------
 src/ui/catalog/dashboard/MyDataPage.tsx    |  4 +-
 src/ui/catalog/dashboard/c/MyDataTable.tsx |  6 ++-
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/locales/en/translations.json b/locales/en/translations.json
index 8c57739..27a1e91 100644
--- a/locales/en/translations.json
+++ b/locales/en/translations.json
@@ -192,7 +192,8 @@
         "uuid": "Partner"
       },
       "published": "Published",
-      "uom": "UOM"
+      "uom": "UOM",
+      "used": "Used"
     },
     "accessions": {
       "crops": "Crop name",
diff --git a/src/descriptors/ui/DashboardPage.tsx b/src/descriptors/ui/DashboardPage.tsx
index 9cdbeec..6efd852 100644
--- a/src/descriptors/ui/DashboardPage.tsx
+++ b/src/descriptors/ui/DashboardPage.tsx
@@ -8,6 +8,7 @@ import {listMyDescriptors, approveDescriptor, deleteDescriptor, unpublishDescrip
 import {Descriptor} from 'model/descriptor.model';
 import {DescriptorLink} from 'ui/catalog/Links';
 import {PublishState} from 'model/common.model';
+import DashboardDescriptorFilters from './c/DashboardFilters';
 
 
 const renderDataLink =  ({row, children}) => (<DescriptorLink to={ row } edit={ row.state === PublishState.DRAFT && row._permissions.write }>{ children }</DescriptorLink>);
@@ -29,6 +30,7 @@ class DashboardPage extends BaseMyDataPage<Descriptor> {
 const mapStateToProps = (state, ownProps) => ({
     paged: state.descriptors.dashboard.paged,
     tab: 'descriptors',
+    filterComponent: DashboardDescriptorFilters,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
diff --git a/src/descriptors/ui/c/Filters.tsx b/src/descriptors/ui/c/Filters.tsx
index bfad9b4..170c290 100644
--- a/src/descriptors/ui/c/Filters.tsx
+++ b/src/descriptors/ui/c/Filters.tsx
@@ -13,34 +13,25 @@ import {Descriptor} from 'model/descriptor.model';
 import DescriptorListPicker from './DescriptorListPicker';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 
-// <CollapsibleComponentSearch title="Descriptions">
-//     <StringFilter name="title" searchType="contains" label="Descriptor title" placeholder="Title"/>
-//     <StringFilter name="description" searchType="contains" label="Descriptor description" placeholder="Descriptor description"/>
-//     <StringArrFilter name="publisher" label="Publisher" placeholder="Publisher"/>
-//     <StringFilter name="bibliographicCitation" searchType="contains" label="Bibliographic citation" placeholder="1997"/>
-//     <StringFilter name="list.title" searchType="contains" label="Descriptor list" placeholder="Title"/>
-//     <StringFilter name="list.description" searchType="contains" label="Descriptor list description" placeholder=""/>
-// </CollapsibleComponentSearch>
+const DescriptorFilters = ({ handleSubmit, initialize, ...other }) => (
+    <FiltersBlock title="Descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
+        <TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
+        <PartnerFilter name="owner" label="Partner" className="p-20" />
+        <DescriptorListPicker name="list" label="Select descriptor list" className="p-20" />
+        <CollapsibleComponentSearch title="Crop">
+            <CropFilter />
+        </CollapsibleComponentSearch>
+        <CollapsibleComponentSearch title="Descriptor category">
+            <StringArrFilter name="category" options={ Descriptor.CATEGORIES } />
+        </CollapsibleComponentSearch>
 
-
-const DescriptorFilters = ({handleSubmit, initialize, ...other}) => (
-  <FiltersBlock title="Descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
-      <TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
-      <PartnerFilter name="owner" label="Partner" className="p-20" />
-      <DescriptorListPicker name="list" label="Select descriptor list" className="p-20" />
-      <CollapsibleComponentSearch title="Crop">
-          <CropFilter />
-      </CollapsibleComponentSearch>
-      <CollapsibleComponentSearch title="Descriptor category">
-          <StringArrFilter name="category" options={ Descriptor.CATEGORIES } />
-      </CollapsibleComponentSearch>
-
-      <CollapsibleComponentSearch title="Tidbits">
-          <BooleanFilter name="key" label="Key crop descriptor"/>
-          <StringFilter name="columnName" searchType="contains" label="Column name" placeholder="Column name"/>
-          <StringArrFilter name="uom" label="UOM" placeholder="Language"/>
-      </CollapsibleComponentSearch>
-  </FiltersBlock>
+        <CollapsibleComponentSearch title="Tidbits">
+            <BooleanFilter name="used" label="Descriptor is used" />
+            <BooleanFilter name="key" label="Key crop descriptor" />
+            <StringFilter name="columnName" searchType="contains" label="Column name" placeholder="Column name" />
+            <StringArrFilter name="uom" label="UOM" placeholder="Language" />
+        </CollapsibleComponentSearch>
+    </FiltersBlock>
 );
 
 export default reduxForm({
diff --git a/src/ui/catalog/dashboard/MyDataPage.tsx b/src/ui/catalog/dashboard/MyDataPage.tsx
index c11e381..85fe4a5 100644
--- a/src/ui/catalog/dashboard/MyDataPage.tsx
+++ b/src/ui/catalog/dashboard/MyDataPage.tsx
@@ -19,6 +19,7 @@ import DashboardActionsButton from './c/DashboardActionsButton';
 interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
   title: string;
   tab?: string;
+  filterComponent?: any;
   pagination: any;
   paged: Page<any>;
   preFilter?: object;
@@ -135,13 +136,14 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
   }
 
   public render() {
-    const {tab, basePath, pagination, addToEditList, removeFromEditList, isEditMode, setEditMode, editList, paged, renderDataLink } = this.props;
+    const {tab, filterComponent, basePath, pagination, addToEditList, removeFromEditList, isEditMode, setEditMode, editList, paged, renderDataLink } = this.props;
     const actionHandlers = this.getActionHandlers();
 
     return (
       <div>
         <MyDataTable
           tab={ tab }
+          filterComponent={ filterComponent }
           basePath={ basePath }
           onFilter={ this.onFilter }
           renderDataLink={ renderDataLink }
diff --git a/src/ui/catalog/dashboard/c/MyDataTable.tsx b/src/ui/catalog/dashboard/c/MyDataTable.tsx
index c10d67b..cc349db 100644
--- a/src/ui/catalog/dashboard/c/MyDataTable.tsx
+++ b/src/ui/catalog/dashboard/c/MyDataTable.tsx
@@ -29,6 +29,7 @@ const styles = (theme) => ({
 interface IMyDataTableProps extends React.Props<any> {
   classes?: any;
   tab: string;
+  filterComponent?: any;
   basePath: string;
   paged: Page<any>;
   onPaginationChange: (page: number, results: number, sortBy: string, dir?: string) => void;
@@ -59,6 +60,7 @@ const defaultSortOptions = {
 function MyDataTable({
   classes,
   tab,
+  filterComponent,
   basePath,
   paged,
   onPaginationChange,
@@ -107,6 +109,8 @@ function MyDataTable({
   const query = pagination.filterCode ? `?filter=${pagination.filterCode}` : '';
   // console.log(`DF initialValues ${query}`, filter);
 
+  const Filters = filterComponent ? filterComponent : DashboardFilters;
+
   // TODO change `DashboardActionsArea` after merge tu genesys-ui
   return (
     <div>
@@ -126,7 +130,7 @@ function MyDataTable({
       <ScrollToTopOnMount />
       <Grid container spacing={ 0 }>
         <Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
-          <DashboardFilters initialValues={ pagination.filter } onSubmit={ onFilter } />
+          <Filters initialValues={ pagination.filter } onSubmit={ onFilter } />
         </Grid>
         { !paged ? <Loading/> :
           <Grid item xs={ 12 } md={ 9 } lg={ 10 } className="back-gray">
-- 
GitLab