feat: correctly add filters from Service JSON

1 files changed, 24 insertions, 9 deletions

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