feat: add Filters to Page

5 files changed, 40 insertions, 14 deletions

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index a8a6f31..086093c 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -24,4 +24,5 @@ const InputBase: React.FC<Props> = ({ label, ...props }) => {
 
 const Input: React.FC<Props> = props => <Field {...props} as={InputBase} />;
 
+export { InputBase };
 export default Input;
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 6b04e20..e65f8c4 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -34,4 +34,5 @@ const SelectBase: React.FC<Props> = ({ label, options, ...props }) => {
 
 const Select: React.FC<Props> = props => <Field {...props} as={SelectBase} />;
 
+export { SelectBase };
 export default Select;
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index ae9e231..2fe54fa 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,28 +1,37 @@
 import React from 'react';
 import Paper from '../components/Paper';
 import Button from '../components/Button';
-import { Action } from '../lib/ServiceContext';
+import { Action, Filter } from '../lib/ServiceContext';
+import { SelectBase } from '../components/Select';
 
 interface Props {
   title?: string;
   actions?: Action[];
+  filters?: Filter[];
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, className, children }) => (
-  <Paper className="xl:m-5">
-    <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
-      <span className="text-2xl font-bold">{title}</span>
-      <div>
-        {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
+const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => {
+  return (
+    <Paper className="xl:m-5">
+      <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
+        <span className="text-2xl font-bold">{title}</span>
+        <div className="flex">
+          <div className="mr-6">
+            {filters?.map(filter => (<SelectBase key={filter.field} options={filter.options} />))}
+          </div>
+          <div>
+            {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
+          </div>
+        </div>
       </div>
-    </div>
-    <div className={className}>
-      {children}
-    </div>
-  </Paper>
-);
+      <div className={className}>
+        {children}
+      </div>
+    </Paper>
+  );
+};
 
 export default Page;
diff --git a/src/lib/ServiceContext.tsx b/src/lib/ServiceContext.tsx
index f7170d1..ec76106 100644
--- a/src/lib/ServiceContext.tsx
+++ b/src/lib/ServiceContext.tsx
@@ -2,11 +2,17 @@ import React from 'react';
 import { FormikProps } from 'formik';
 import { Props as ButtonProps } from '../components/Button';
 import { Field } from '../components/ListTable';
+import { Option } from '../components/Select';
 
 export interface Action extends ButtonProps {
   name: string;
 }
 
+export interface Filter {
+  field: string;
+  options: Option[];
+}
+
 export interface PanelProps<T> {
   item: T;
   mutate: (item: T) => void;
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index e7015ae..a3c9842 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -16,6 +16,15 @@ const ServiceList: React.FC = () => {
     route: `/${service.route}/add${location.search}`,
   }];
 
+  const filters = [{
+    field: '_id',
+    options: [
+      { key: 'a', label: 'a' },
+      { key: 'b', label: 'b' },
+      { key: 'c', label: 'c' },
+    ],
+  }];
+
   const handleRowClick = (item: any) => {
     const route = service.rowLink
       ? service.rowLink(item)
@@ -25,7 +34,7 @@ const ServiceList: React.FC = () => {
   };
 
   return (
-    <Page title={service.name} actions={actions}>
+    <Page title={service.name} actions={actions} filters={filters}>
       <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
     </Page>
   );