New Listings view (#192)

* completing found listings

---------

Co-authored-by: Christian Kellner <Christian.Kellner1@ibm.com>

ui/src/App.jsx

@@ -19,6 +19,7 @@ import './App.less';
 import TrackingModal from './components/tracking/TrackingModal.jsx';
 import { Banner } from '@douyinfe/semi-ui';
 import VersionBanner from './components/version/VersionBanner.jsx';
+import Listings from './views/listings/Listings.jsx';
 
 export default function FredyApp() {
   const actions = useActions();
@@ -50,14 +51,11 @@ export default function FredyApp() {
 
   const isAdmin = () => currentUser != null && currentUser.isAdmin;
 
-  const login = () => (
+  return loading ? null : needsLogin() ? (
     <Routes>
       <Route path="/login" element={<Login />} />
       <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
-  );
-  return loading ? null : needsLogin() ? (
-    login()
   ) : (
     <div className="app">
       <div className="app__container">
@@ -84,6 +82,7 @@ export default function FredyApp() {
           <Route path="/jobs/edit/:jobId" element={<JobMutation />} />
           <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
           <Route path="/jobs" element={<Jobs />} />
+          <Route path="/listings" element={<Listings />} />
 
           {/* Permission-aware routes */}
           <Route

ui/src/components/logo/Logo.jsx

@@ -5,5 +5,5 @@ import logoWhite from '../../assets/logo_white.png';
 import './Logo.less';
 
 export default function Logo({ width = 350, white = false } = {}) {
-  return <img src={white ? logoWhite : logo} width={width} className="logo" />;
+  return <img src={white ? logoWhite : logo} width={width} className="logo" alt="Fredy Logo" />;
 }

ui/src/components/menu/Menu.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
 import { useLocation } from 'react-router-dom';
-import { IconUser, IconTerminal, IconSetting } from '@douyinfe/semi-icons';
+import { IconUser, IconTerminal, IconSetting, IconArchive } from '@douyinfe/semi-icons';
 import './Menu.less';
 
 function parsePathName(name) {
@@ -25,6 +25,15 @@ const TopMenu = function TopMenu({ isAdmin }) {
           </span>
         }
       />
+      <TabPane
+        itemKey="/listings"
+        tab={
+          <span>
+            <IconArchive />
+            Found listings
+          </span>
+        }
+      />
 
       {isAdmin && (
         <TabPane

ui/src/components/table/ListingsTable.jsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Table, Popover, Input, Descriptions, Tag, Image } from '@douyinfe/semi-ui';
+import { useActions, useSelector } from '../../services/state/store.js';
+import { IconClose, IconSearch, 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 './ListingsTable.less';
+import { format } from '../../services/time/timeService.js';
+
+const columns = [
+  {
+    title: '#',
+    dataIndex: 'is_active',
+    width: 58,
+    sorter: true,
+    render: (value) => {
+      return value ? (
+        <div style={{ color: 'rgba(var(--semi-green-6), 1)' }}>
+          <Popover
+            style={{
+              padding: '.4rem',
+              color: 'var(--semi-color-white)',
+            }}
+            content="Listing still online"
+          >
+            <IconTick />
+          </Popover>
+        </div>
+      ) : (
+        <div style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
+          <Popover
+            style={{
+              padding: '.4rem',
+              color: 'var(--semi-color-white)',
+            }}
+            content="Listing not online anymore"
+          >
+            <IconClose />
+          </Popover>
+        </div>
+      );
+    },
+  },
+  {
+    title: 'Job-Name',
+    sorter: true,
+    dataIndex: 'job_name',
+    width: 170,
+  },
+  {
+    title: 'Listing date',
+    width: 130,
+    dataIndex: 'created_at',
+    sorter: true,
+    render: (text) => timeService.format(text),
+  },
+  {
+    title: 'Provider',
+    width: 130,
+    dataIndex: 'provider',
+    sorter: true,
+    render: (text) => text.charAt(0).toUpperCase() + text.slice(1),
+  },
+  {
+    title: 'Price',
+    width: 100,
+    dataIndex: 'price',
+    sorter: true,
+    render: (text) => text + ' €',
+  },
+  {
+    title: 'Address',
+    width: 150,
+    dataIndex: 'address',
+    sorter: true,
+  },
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    sorter: true,
+    render: (text, row) => {
+      return (
+        <a href={row.url} target="_blank" rel="noopener noreferrer">
+          {text}
+        </a>
+      );
+    },
+  },
+];
+
+export default function ListingsTable() {
+  const tableData = useSelector((state) => state.listingsTable);
+  const actions = useActions();
+  const [page, setPage] = useState(1);
+  const pageSize = 15;
+  const [sortData, setSortData] = useState({});
+  const [filter, setFilter] = useState(null);
+
+  const handlePageChange = (_page) => {
+    setPage(_page);
+  };
+
+  useEffect(() => {
+    let sortfield = null;
+    let sortdir = null;
+
+    if (sortData != null && Object.keys(sortData).length > 0) {
+      sortfield = sortData.field;
+      sortdir = sortData.direction;
+    }
+    actions.listingsTable.getListingsTable({ page, pageSize, sortfield, sortdir, filter });
+  }, [page, sortData, filter]);
+
+  const handleFilterChange = useMemo(() => debounce((value) => setFilter(value), 500), []);
+
+  const expandRowRender = (record) => {
+    return (
+      <div className="listingsTable__expanded">
+        <div>
+          {record.image_url == null ? (
+            <Image height={200} src={no_image} />
+          ) : (
+            <Image height={200} src={record.image_url} />
+          )}
+        </div>
+        <div>
+          <Descriptions align="justify">
+            <Descriptions.Item itemKey="Listing still online">
+              <Tag size="small" shape="circle" color={record.is_active ? 'green' : 'red'}>
+                {record.is_active ? 'Yes' : 'No'}
+              </Tag>
+            </Descriptions.Item>
+            <Descriptions.Item itemKey="Link">
+              <a href={record.link} target="_blank" rel="noreferrer">
+                Link to Listing
+              </a>
+            </Descriptions.Item>
+            <Descriptions.Item itemKey="Listing date">{format(record.created_at)}</Descriptions.Item>
+            <Descriptions.Item itemKey="Price">{record.price} €</Descriptions.Item>
+          </Descriptions>
+          <b>{record.title}</b>
+          <p>{record.description == null ? 'No description available' : record.description}</p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <Input
+        prefix={<IconSearch />}
+        showClear
+        className="listingsTable__search"
+        placeholder="Search"
+        onChange={handleFilterChange}
+      />
+      <Table
+        rowKey="id"
+        hideExpandedColumn={false}
+        sticky={{ top: 5 }}
+        columns={columns}
+        expandedRowRender={expandRowRender}
+        dataSource={tableData?.result || []}
+        onChange={(changeSet) => {
+          if (changeSet?.extra?.changeType === 'sorter') {
+            setSortData({
+              field: changeSet.sorter.dataIndex,
+              direction: changeSet.sorter.sortOrder === 'ascend' ? 'asc' : 'desc',
+            });
+          }
+        }}
+        pagination={{
+          currentPage: page,
+          //for now fixed
+          pageSize,
+          total: tableData?.totalNumber || 0,
+          onPageChange: handlePageChange,
+        }}
+      />
+    </div>
+  );
+}

ui/src/components/table/ListingsTable.less

@@ -0,0 +1,10 @@
+.listingsTable {
+  &__search {
+    margin-bottom: 1rem !important;
+  }
+
+  &__expanded {
+    display: flex;
+    gap: 1rem;
+  }
+}

ui/src/services/state/store.js

@@ -4,6 +4,7 @@
 import { create } from 'zustand';
 import { shallow } from 'zustand/shallow';
 import { xhrGet } from '../xhr.js';
+import queryString from 'query-string';
 
 const logger = (config) => (set, get, api) =>
   config(
@@ -130,11 +131,35 @@ export const useFredyState = create(
             }
           },
         },
+        listingsTable: {
+          async getListingsTable({ page = 1, pageSize = 20, filter = null, sortfield = null, sortdir = 'asc' }) {
+            try {
+              const qryString = queryString.stringify({
+                page,
+                pageSize,
+                filter,
+                sortfield,
+                sortdir,
+              });
+              const response = await xhrGet(`/api/listings/table?${qryString}`);
+              set((state) => ({
+                listingsTable: { ...state.listingsTable, ...response.json },
+              }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/listings. Error:', Exception);
+            }
+          },
+        },
       };
 
       // Initial state
       const initial = {
         notificationAdapter: [],
+        listingsTable: {
+          totalNumber: 0,
+          page: 1,
+          result: [],
+        },
         generalSettings: { settings: {} },
         demoMode: { demoMode: false },
         versionUpdate: {},
@@ -149,6 +174,7 @@ export const useFredyState = create(
         generalSettings: { ...effects.generalSettings },
         demoMode: { ...effects.demoMode },
         versionUpdate: { ...effects.versionUpdate },
+        listingsTable: { ...effects.listingsTable },
         provider: { ...effects.provider },
         jobs: { ...effects.jobs },
         user: { ...effects.user },

ui/src/views/listings/Listings.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import ListingsTable from '../../components/table/ListingsTable.jsx';
+
+export default function Listings() {
+  return (
+    <div>
+      <ListingsTable />
+    </div>
+  );
+}