@@ -84,6 +82,7 @@ export default function FredyApp() {
;
}
diff --git a/ui/src/components/menu/Menu.jsx b/ui/src/components/menu/Menu.jsx
index 1f4cc74..f49f9a8 100644
--- a/ui/src/components/menu/Menu.jsx
+++ b/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 }) {
}
/>
+
+ {
+ return value ? (
+
+
+
+
+ ) : (
+
+
+
+
+ );
+ },
+ },
+ {
+ 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 (
+
+ {text}
+
+ );
+ },
+ },
+];
+
+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 (
+
+
+ );
+ };
+
+ return (
+
+ {record.image_url == null ? (
+
+
+
+
+
+ {record.is_active ? 'Yes' : 'No'}
+
+
+
+
+ Link to Listing
+
+
+ {format(record.created_at)}
+ {record.price} €
+
+ {record.title}
+
+ {record.description == null ? 'No description available' : record.description}
+
+ }
+ showClear
+ className="listingsTable__search"
+ placeholder="Search"
+ onChange={handleFilterChange}
+ />
+ {
+ 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,
+ }}
+ />
+
+ );
+}
diff --git a/ui/src/components/table/ListingsTable.less b/ui/src/components/table/ListingsTable.less
new file mode 100644
index 0000000..015e85e
--- /dev/null
+++ b/ui/src/components/table/ListingsTable.less
@@ -0,0 +1,10 @@
+.listingsTable {
+ &__search {
+ margin-bottom: 1rem !important;
+ }
+
+ &__expanded {
+ display: flex;
+ gap: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/ui/src/services/state/store.js b/ui/src/services/state/store.js
index 6706096..60275ff 100644
--- a/ui/src/services/state/store.js
+++ b/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 },
diff --git a/ui/src/views/listings/Listings.jsx b/ui/src/views/listings/Listings.jsx
new file mode 100644
index 0000000..308484d
--- /dev/null
+++ b/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 (
+