feat: correctly add filters from Service JSON

5 files changed, 36 insertions, 19 deletions

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 2fe54fa..d659510 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import Paper from '../components/Paper';
 import Button from '../components/Button';
-import { Action, Filter } from '../lib/ServiceContext';
-import { SelectBase } from '../components/Select';
+import { Action } from '../lib/ServiceContext';
+import { Option, SelectBase } from '../components/Select';
+import { Field } from '../components/ListTable';
+
+export interface Filter extends Field {
+  options?: Option[];
+}
 
 interface Props {
   title?: string;
@@ -19,8 +24,8 @@ const Page: React.FC<Props> = ({ title, actions, filters, className, children })
       <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 className="mr-6 flex">
+            {filters?.map(filter => (<SelectBase key={filter.key} options={filter.options || []} />))}
           </div>
           <div>
             {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
diff --git a/src/lib/ServiceContext.tsx b/src/lib/ServiceContext.tsx
index ec76106..67f3756 100644
--- a/src/lib/ServiceContext.tsx
+++ b/src/lib/ServiceContext.tsx
@@ -2,17 +2,11 @@ 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;
@@ -26,6 +20,7 @@ export interface ServiceParams<T = any> {
   default?: Partial<T>;
   routes?: Record<string, React.FC>;
   actions?: Action[];
+  filters?: string[];
   rowLink?: (item: T) => string;
   Form?: React.FC<FormikProps<T>>;
   Panel?: React.FC<PanelProps<T>>;
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index a3c9842..9b12d6b 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -1,10 +1,16 @@
 import React, { useContext } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import _ from 'lodash';
 import Page from '../containers/Page';
-import ListTable from '../components/ListTable';
+import ListTable, { Field } from '../components/ListTable';
 import hooks from '../hooks/useAPIClient';
 import ServiceContext from './ServiceContext';
 
+const getItemField = (item: any, field: Field) => {
+  const value = _.get(item, field.key);
+  return field.transform ? field.transform(value) : value;
+};
+
 const ServiceList: React.FC = () => {
   const service = useContext(ServiceContext);
   const history = useHistory();
@@ -16,14 +22,23 @@ 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 filters = service.filters?.map(key => {
+    const field = _.find(service.tableFields, { key });
+    if (!field) return { key: '-', label: '-', options: [] };
+
+    const options = data?.map((item: any) => ({
+      key: _.get(item, field.key),
+      label: getItemField(item, field),
+    }));
+
+    // Add default option
+    options?.unshift({
+      key: '-',
+      label: field.label,
+    });
+
+    return { ...field, options };
+  });
 
   const handleRowClick = (item: any) => {
     const route = service.rowLink
diff --git a/src/services/transfers/index.ts b/src/services/transfers/index.ts
index 1782103..3feb6e2 100644
--- a/src/services/transfers/index.ts
+++ b/src/services/transfers/index.ts
@@ -15,6 +15,7 @@ const service: ServiceParams<Transfer> = {
     { key: 'operation', label: 'Операция', transform: transformOperation },
     { key: 'amount', label: 'Сумма' },
   ],
+  filters: ['operation', 'contractor.name'],
   actions: [
     {
       name: 'Загрузить выписку',
diff --git a/src/services/waybills/index.ts b/src/services/waybills/index.ts
index a26318b..ae1c8d3 100644
--- a/src/services/waybills/index.ts
+++ b/src/services/waybills/index.ts
@@ -14,6 +14,7 @@ const service: ServiceParams<Waybill> = {
     { key: 'total', label: 'Сумма' },
     { key: 'contractor.name', label: 'Контрагент' },
   ],
+  filters: ['status', 'operation', 'contractor.name'],
   default: {
     operation: 'in',
     records: [],