improve filtering for listings

ui/src/components/table/listings/ListingsFilter.jsx

@@ -1,53 +0,0 @@
-import { Card, Checkbox, Descriptions, Divider, Select } from '@douyinfe/semi-ui';
-import React from 'react';
-import { useSelector } from '../../../services/state/store.js';
-import { Typography } from '@douyinfe/semi-ui';
-
-import './ListingsFilter.less';
-
-export default function ListingsFilter({ onWatchListFilter, onActivityFilter, onJobNameFilter, onProviderFilter }) {
-  const jobs = useSelector((state) => state.jobs.jobs);
-  const provider = useSelector((state) => state.provider);
-  const { Title } = Typography;
-  return (
-    <Card className="listingsFilter">
-      <Title heading={6}>Filter by:</Title>
-      <Divider />
-      <br />
-      <Descriptions row>
-        <Descriptions.Item itemKey="Watch List">
-          <Checkbox onChange={(e) => onWatchListFilter(e.target.checked)}>Only Watch List</Checkbox>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Activity status">
-          <Checkbox onChange={(e) => onActivityFilter(e.target.checked)}>Only Active Listings</Checkbox>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Job Name">
-          <Select showClear placeholder="Select Job to Filter" onChange={(val) => onJobNameFilter(val)}>
-            {jobs != null &&
-              jobs.length > 0 &&
-              jobs.map((job) => {
-                return (
-                  <Select.Option value={job.id} key={job.id}>
-                    {job.name}
-                  </Select.Option>
-                );
-              })}
-          </Select>
-        </Descriptions.Item>
-        <Descriptions.Item itemKey="Provider">
-          <Select showClear placeholder="Select Provider to Filter" onChange={(val) => onProviderFilter(val)}>
-            {provider != null &&
-              provider.length > 0 &&
-              provider.map((prov) => {
-                return (
-                  <Select.Option value={prov.id} key={prov.id}>
-                    {prov.name}
-                  </Select.Option>
-                );
-              })}
-          </Select>
-        </Descriptions.Item>
-      </Descriptions>
-    </Card>
-  );
-}

ui/src/components/table/listings/ListingsFilter.less

@@ -1,4 +0,0 @@
-.listingsFilter {
-  margin-bottom: 1rem;
-  background: rgb(53, 54, 60);
-}

ui/src/components/table/listings/ListingsTable.jsx

@@ -1,5 +1,18 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Popover, Input, Descriptions, Tag, Image, Empty, Button, Toast, Divider } from '@douyinfe/semi-ui';
+import {
+  Table,
+  Popover,
+  Input,
+  Descriptions,
+  Tag,
+  Image,
+  Empty,
+  Button,
+  Toast,
+  Divider,
+  Space,
+  Select,
+} from '@douyinfe/semi-ui';
 import { useActions, useSelector } from '../../../services/state/store.js';
 import { IconClose, IconDelete, IconSearch, IconStar, IconStarStroked, IconTick } from '@douyinfe/semi-icons';
 import * as timeService from '../../../services/time/timeService.js';
@@ -10,14 +23,20 @@ import './ListingsTable.less';
 import { format } from '../../../services/time/timeService.js';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
-import ListingsFilter from './ListingsFilter.jsx';
 
-const columns = [
+const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
+  return [
     {
       title: 'Watchlist',
-    width: 110,
+      width: 133,
       dataIndex: 'isWatched',
       sorter: true,
+      filters: [
+        {
+          text: 'Show only watched listings',
+          value: 'watchList',
+        },
+      ],
       render: (id, row) => {
         return (
           <div>
@@ -41,7 +60,9 @@ const columns = [
                 onClick={async () => {
                   try {
                     await xhrPost('/api/listings/watch', { listingId: row.id });
-                  Toast.success(row.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist');
+                    Toast.success(
+                      row.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist',
+                    );
                     row.reloadTable();
                   } catch (e) {
                     console.error(e);
@@ -81,8 +102,14 @@ const columns = [
     {
       title: 'State',
       dataIndex: 'is_active',
-    width: 84,
+      width: 105,
       sorter: true,
+      filters: [
+        {
+          text: 'Show only active listings',
+          value: 'activityStatus',
+        },
+      ],
       render: (value) => {
         return value ? (
           <div style={{ color: 'rgba(var(--semi-green-6), 1)' }}>
@@ -117,6 +144,24 @@ const columns = [
       ellipsis: true,
       dataIndex: 'job_name',
       width: 150,
+      onFilter: () => true,
+      renderFilterDropdown: () => {
+        return (
+          <Space vertical style={{ padding: 8 }}>
+            <Select showClear placeholder="Select Job to Filter" onChange={(val) => setJobNameFilter(val)}>
+              {jobs != null &&
+                jobs.length > 0 &&
+                jobs.map((job) => {
+                  return (
+                    <Select.Option value={job.id} key={job.id}>
+                      {job.name}
+                    </Select.Option>
+                  );
+                })}
+            </Select>
+          </Space>
+        );
+      },
     },
     {
       title: 'Listing date',
@@ -131,6 +176,24 @@ const columns = [
       dataIndex: 'provider',
       sorter: true,
       render: (text) => text.charAt(0).toUpperCase() + text.slice(1),
+      onFilter: () => true,
+      renderFilterDropdown: () => {
+        return (
+          <Space vertical style={{ padding: 8 }}>
+            <Select showClear placeholder="Select Provider to Filter" onChange={(val) => setProviderFilter(val)}>
+              {provider != null &&
+                provider.length > 0 &&
+                provider.map((prov) => {
+                  return (
+                    <Select.Option value={prov.id} key={prov.id}>
+                      {prov.name}
+                    </Select.Option>
+                  );
+                })}
+            </Select>
+          </Space>
+        );
+      },
     },
     {
       title: 'Price',
@@ -158,18 +221,22 @@ const columns = [
         );
       },
     },
-];
+  ];
+};
 
 const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description="No listings available."
+    description="No listings found."
   />
 );
 
 export default function ListingsTable() {
   const tableData = useSelector((state) => state.listingsTable);
+  const provider = useSelector((state) => state.provider);
+  const jobs = useSelector((state) => state.jobs.jobs);
+
   const actions = useActions();
   const [page, setPage] = useState(1);
   const pageSize = 10;
@@ -179,12 +246,14 @@ export default function ListingsTable() {
   const [jobNameFilter, setJobNameFilter] = useState(null);
   const [activityFilter, setActivityFilter] = useState(null);
   const [providerFilter, setProviderFilter] = useState(null);
+  const [allFilters, setAllFilters] = useState([]);
 
   const [imageWidth, setImageWidth] = useState('100%');
   const handlePageChange = (_page) => {
     setPage(_page);
   };
 
+  const columns = getColumns(provider, setProviderFilter, jobs, setJobNameFilter);
   const loadTable = () => {
     let sortfield = null;
     let sortdir = null;
@@ -209,6 +278,20 @@ export default function ListingsTable() {
 
   const handleFilterChange = useMemo(() => debounce((value) => setFreeTextFilter(value), 500), []);
 
+  const diffArrays = (primary, secondary) => {
+    const result = {};
+
+    for (const item of secondary) {
+      if (!primary.includes(item)) result[item] = true;
+    }
+
+    for (const item of primary) {
+      if (!secondary.includes(item)) result[item] = false;
+    }
+
+    return [result];
+  };
+
   useEffect(() => {
     return () => {
       // cleanup debounced handler to avoid memory leaks
@@ -258,12 +341,6 @@ export default function ListingsTable() {
 
   return (
     <div>
-      <ListingsFilter
-        onActivityFilter={setActivityFilter}
-        onWatchListFilter={setWatchListFilter}
-        onJobNameFilter={setJobNameFilter}
-        onProviderFilter={setProviderFilter}
-      />
       <Input
         prefix={<IconSearch />}
         showClear
@@ -285,7 +362,23 @@ export default function ListingsTable() {
           };
         })}
         onChange={(changeSet) => {
-          if (changeSet?.extra?.changeType === 'sorter') {
+          if (changeSet?.extra?.changeType === 'filter') {
+            const transformed = changeSet.filters.map((f) => f.dataIndex);
+            const diff = diffArrays(allFilters, transformed);
+            setAllFilters(transformed);
+            diff.forEach((filter) => {
+              switch (Object.keys(filter)[0]) {
+                case 'isWatched':
+                  setWatchListFilter(Object.values(filter)[0]);
+                  break;
+                case 'is_active':
+                  setActivityFilter(Object.values(filter)[0]);
+                  break;
+                default:
+                  console.error('Unknown filter: ', filter.dataIndex);
+              }
+            });
+          } else if (changeSet?.extra?.changeType === 'sorter') {
             setSortData({
               field: changeSet.sorter.dataIndex,
               direction: changeSet.sorter.sortOrder === 'ascend' ? 'asc' : 'desc',