New Feature: Watch Listings (#215)

* adding new feature: watch listings for changes

* adding todo for watch feature

* sort by watch

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

@@ -0,0 +1,45 @@
+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}>{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}>{prov.name}</Select.Option>;
+              })}
+          </Select>
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+  );
+}

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

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

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

@@ -1,21 +1,87 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Popover, Input, Descriptions, Tag, Image, Empty, Button, Card, Toast } from '@douyinfe/semi-ui';
-import { useActions, useSelector } from '../../services/state/store.js';
-import { IconClose, IconDelete, IconSearch, IconTick } from '@douyinfe/semi-icons';
-import * as timeService from '../../services/time/timeService.js';
+import { Table, Popover, Input, Descriptions, Tag, Image, Empty, Button, Toast, Divider } 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';
 import debounce from 'lodash/debounce';
-import no_image from '../../assets/no_image.jpg';
+import no_image from '../../../assets/no_image.jpg';
 
 import './ListingsTable.less';
-import { format } from '../../services/time/timeService.js';
+import { format } from '../../../services/time/timeService.js';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
-import { xhrDelete } from '../../services/xhr.js';
+import { xhrDelete, xhrPost } from '../../../services/xhr.js';
+import ListingsFilter from './ListingsFilter.jsx';
 
 const columns = [
   {
     title: '#',
+    width: 100,
+    dataIndex: 'isWatched',
+    sorter: true,
+    render: (id, row) => {
+      return (
+        <div>
+          <Popover
+            style={{
+              padding: '.4rem',
+              color: 'var(--semi-color-white)',
+            }}
+            content={row.isWatched === 1 ? 'Unwatch Listing' : 'Watch Listing'}
+          >
+            <Button
+              icon={
+                row.isWatched === 1 ? (
+                  <IconStar style={{ color: 'rgba(var(--semi-green-5), 1)' }} />
+                ) : (
+                  <IconStarStroked />
+                )
+              }
+              theme="borderless"
+              size="small"
+              onClick={async () => {
+                try {
+                  await xhrPost('/api/listings/watch', { listingId: row.id });
+                  Toast.success(row.isWatched === 1 ? 'Listing removed from Watchlist' : 'Listing added to Watchlist');
+                  row.reloadTable();
+                } catch (e) {
+                  console.error(e);
+                  Toast.error('Failed to operate Watchlist');
+                }
+              }}
+            />
+          </Popover>
+          <Divider layout="vertical" margin="4px" />
+          <Popover
+            style={{
+              padding: '.4rem',
+              color: 'var(--semi-color-white)',
+            }}
+            content="Delete Listing"
+          >
+            <Button
+              icon={<IconDelete />}
+              theme="borderless"
+              size="small"
+              type="danger"
+              onClick={async () => {
+                try {
+                  await xhrDelete('/api/listings/', { ids: [id] });
+                  Toast.success('Listing(s) successfully removed');
+                  row.reloadTable();
+                } catch (error) {
+                  Toast.error(error);
+                }
+              }}
+            />
+          </Popover>
+        </div>
+      );
+    },
+  },
+  {
+    title: 'State',
     dataIndex: 'is_active',
-    width: 58,
+    width: 84,
     sorter: true,
     render: (value) => {
       return value ? (
@@ -25,7 +91,7 @@ const columns = [
               padding: '.4rem',
               color: 'var(--semi-color-white)',
             }}
-            content="Listing still online"
+            content="Listing is still active"
           >
             <IconTick />
           </Popover>
@@ -37,7 +103,7 @@ const columns = [
               padding: '.4rem',
               color: 'var(--semi-color-white)',
             }}
-            content="Listing not online anymore"
+            content="Listing is inactive"
           >
             <IconClose />
           </Popover>
@@ -48,15 +114,16 @@ const columns = [
   {
     title: 'Job-Name',
     sorter: true,
+    ellipsis: true,
     dataIndex: 'job_name',
-    width: 170,
+    width: 150,
   },
   {
     title: 'Listing date',
     width: 130,
     dataIndex: 'created_at',
     sorter: true,
-    render: (text) => timeService.format(text),
+    render: (text) => timeService.format(text, false),
   },
   {
     title: 'Provider',
@@ -107,8 +174,11 @@ export default function ListingsTable() {
   const [page, setPage] = useState(1);
   const pageSize = 10;
   const [sortData, setSortData] = useState({});
-  const [filter, setFilter] = useState(null);
-  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [freeTextFilter, setFreeTextFilter] = useState(null);
+  const [watchListFilter, setWatchListFilter] = useState(null);
+  const [jobNameFilter, setJobNameFilter] = useState(null);
+  const [activityFilter, setActivityFilter] = useState(null);
+  const [providerFilter, setProviderFilter] = useState(null);
 
   const handlePageChange = (_page) => {
     setPage(_page);
@@ -122,20 +192,21 @@ export default function ListingsTable() {
       sortfield = sortData.field;
       sortdir = sortData.direction;
     }
-    actions.listingsTable.getListingsTable({ page, pageSize, sortfield, sortdir, filter });
+    actions.listingsTable.getListingsTable({
+      page,
+      pageSize,
+      sortfield,
+      sortdir,
+      freeTextFilter,
+      filter: { watchListFilter, jobNameFilter, activityFilter, providerFilter },
+    });
   };
 
   useEffect(() => {
     loadTable();
-  }, [page, sortData, filter]);
+  }, [page, sortData, freeTextFilter, providerFilter, activityFilter, jobNameFilter, watchListFilter]);
 
-  const handleFilterChange = useMemo(() => debounce((value) => setFilter(value), 500), []);
-
-  const rowSelection = {
-    onChange: (selectedRowKeys) => {
-      setSelectedKeys(selectedRowKeys);
-    },
-  };
+  const handleFilterChange = useMemo(() => debounce((value) => setFreeTextFilter(value), 500), []);
 
   const expandRowRender = (record) => {
     return (
@@ -169,20 +240,14 @@ export default function ListingsTable() {
     );
   };
 
-  const onRemoveSelectedListings = async () => {
-    if (selectedKeys != null && selectedKeys.length > 0) {
-      try {
-        await xhrDelete('/api/listings/', { ids: selectedKeys });
-        Toast.success('Listing(s) successfully removed');
-        loadTable();
-      } catch (error) {
-        Toast.error(error);
-      }
-    }
-  };
-
   return (
     <div>
+      <ListingsFilter
+        onActivityFilter={setActivityFilter}
+        onWatchListFilter={setWatchListFilter}
+        onJobNameFilter={setJobNameFilter}
+        onProviderFilter={setProviderFilter}
+      />
       <Input
         prefix={<IconSearch />}
         showClear
@@ -190,22 +255,19 @@ export default function ListingsTable() {
         placeholder="Search"
         onChange={handleFilterChange}
       />
-      {selectedKeys != null && selectedKeys.length > 0 && (
-        <Card className="listingsTable__toolbar">
-          <Button type="danger" icon={<IconDelete />} onClick={() => onRemoveSelectedListings()}>
-            Remove selected Listings
-          </Button>
-        </Card>
-      )}
       <Table
         rowKey="id"
         empty={empty}
         hideExpandedColumn={false}
         sticky={{ top: 5 }}
         columns={columns}
-        rowSelection={rowSelection}
         expandedRowRender={expandRowRender}
-        dataSource={tableData?.result || []}
+        dataSource={(tableData?.result || []).map((row) => {
+          return {
+            ...row,
+            reloadTable: loadTable,
+          };
+        })}
         onChange={(changeSet) => {
           if (changeSet?.extra?.changeType === 'sorter') {
             setSortData({

ui/src/services/state/store.js

@@ -132,14 +132,22 @@ export const useFredyState = create(
           },
         },
         listingsTable: {
-          async getListingsTable({ page = 1, pageSize = 20, filter = null, sortfield = null, sortdir = 'asc' }) {
+          async getListingsTable({
+            page = 1,
+            pageSize = 20,
+            freeTextFilter = null,
+            sortfield = null,
+            sortdir = 'asc',
+            filter,
+          }) {
             try {
               const qryString = queryString.stringify({
                 page,
                 pageSize,
-                filter,
+                freeTextFilter,
                 sortfield,
                 sortdir,
+                ...filter,
               });
               const response = await xhrGet(`/api/listings/table?${qryString}`);
               set((state) => ({

ui/src/services/time/timeService.js

@@ -1,11 +1,12 @@
-export function format(ts) {
+export function format(ts, showSeconds = true) {
   return new Intl.DateTimeFormat('default', {
     year: 'numeric',
     month: 'numeric',
     day: 'numeric',
     hour: 'numeric',
     minute: 'numeric',
-    second: 'numeric',
+    ...(showSeconds ? { second: 'numeric' } : {}),
   }).format(ts);
 }
+
 export const roundToHour = (ts) => Math.ceil(ts / (1000 * 60 * 60)) * (1000 * 60 * 60);

ui/src/views/listings/Listings.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ListingsTable from '../../components/table/ListingsTable.jsx';
+import ListingsTable from '../../components/table/listings/ListingsTable.jsx';
 
 export default function Listings() {
   return (