feat: complete filtering logic

4 files changed, 23 insertions, 5 deletions

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 467e458..458bf15 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -8,12 +8,17 @@ interface Props {
   title?: string;
   actions?: Action[];
   filters?: Filter[];
+  applyFilter?: (key: string, value: string) => void;
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => {
+const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, className, children }) => {
+  const handleFilterChange = (key: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (applyFilter) applyFilter(key, event.target.value);
+  };
+
   return (
     <Paper className="xl:m-5">
       <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
@@ -21,7 +26,12 @@ const Page: React.FC<Props> = ({ title, actions, filters, className, children })
         <div className="flex">
           <div className="mr-6 flex">
             {filters?.map(filter => (
-              <SelectBase key={filter.key} options={filter.options || []} value={filter.value} />
+              <SelectBase
+                key={filter.key}
+                options={filter.options || []}
+                value={filter.value}
+                onChange={handleFilterChange(filter.key)}
+              />
             ))}
           </div>
           <div>
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index 5abae6b..6316ea1 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -52,8 +52,16 @@ const ServiceList: React.FC = () => {
     history.push(route);
   };
 
+  const applyFilter = (key: string, value: string) => {
+    const updatedQuery = { ...query, [key]: value };
+    if (value === '-') delete updatedQuery[key];
+
+    const queryString = new URLSearchParams(updatedQuery);
+    history.push(`${service.route}?${queryString}`);
+  };
+
   return (
-    <Page title={service.name} actions={actions} filters={filters}>
+    <Page title={service.name} actions={actions} filters={filters} applyFilter={applyFilter}>
       <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
     </Page>
   );
diff --git a/src/services/transfers/index.ts b/src/services/transfers/index.ts
index de75d53..ece8dae 100644
--- a/src/services/transfers/index.ts
+++ b/src/services/transfers/index.ts
@@ -17,7 +17,7 @@ const service: ServiceParams<Transfer> = {
   ],
   filters: [
     { key: 'operation', label: 'Операция', transform: transformOperation },
-    { key: 'contractor._id', label: 'Контрагент', as: 'contractor.name' },
+    { key: 'contractorId', label: 'Контрагент', as: 'contractor.name' },
   ],
   actions: [
     {
diff --git a/src/services/waybills/index.ts b/src/services/waybills/index.ts
index 08f43fc..0b24876 100644
--- a/src/services/waybills/index.ts
+++ b/src/services/waybills/index.ts
@@ -17,7 +17,7 @@ const service: ServiceParams<Waybill> = {
   filters: [
     { key: 'status', label: 'Статус', transform: transformStatus },
     { key: 'operation', label: 'Операция', transform: transformOperation },
-    { key: 'contractor._id', label: 'Контрагент', as: 'contractor.name' },
+    { key: 'contractorId', label: 'Контрагент', as: 'contractor.name' },
   ],
   default: {
     operation: 'in',