Modernizing ui (#73)

Modernizing ui

ui/src/components/table/JobTable.jsx

@@ -1,66 +1,79 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
-import { Table, Button } from 'semantic-ui-react';
-import Switch from 'react-switch';
-
-const emptyTable = () => {
-  return (
-    <Table.Row>
-      <Table.Cell collapsing colSpan={6} style={{ textAlign: 'center' }}>
-        No Data
-      </Table.Cell>
-    </Table.Row>
-  );
-};
-
-const content = (jobs, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight) => {
-  return (
-    <Fragment>
-      {Object.keys(jobs).map((jobKey) => {
-        const job = jobs[jobKey];
-
-        return (
-          <Table.Row key={jobKey}>
-            <Table.Cell collapsing>
-              <Switch onChange={(checked) => onJobStatusChanged(job.id, checked)} checked={job.enabled} />
-            </Table.Cell>
-            <Table.Cell>{job.name}</Table.Cell>
-            <Table.Cell>{job.numberOfFoundListings || 0}</Table.Cell>
-            <Table.Cell>{job.provider.length || 0}</Table.Cell>
-            <Table.Cell>{job.notificationAdapter.length || 0}</Table.Cell>
-            <Table.Cell>
-              <div style={{ float: 'right' }}>
-                <Button circular color="teal" icon="chart line" onClick={() => onJobInsight(job.id)} />
-                <Button circular color="blue" icon="edit" onClick={() => onJobEdit(job.id)} />
-                <Button circular color="red" icon="trash" onClick={() => onJobRemoval(job.id)} />
-              </div>
-            </Table.Cell>
-          </Table.Row>
-        );
-      })}
-    </Fragment>
-  );
-};
+import { Button, Empty, Table, Switch } from '@douyinfe/semi-ui';
+import { IconDelete, IconEdit, IconHistogram } from '@douyinfe/semi-icons';
+import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
+const empty = (
+  <Empty
+    image={<IllustrationNoResult />}
+    darkModeImage={<IllustrationNoResultDark />}
+    description={'No jobs available'}
+  />
+);
 
 export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight } = {}) {
   return (
-    <Table singleLine inverted>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell />
-          <Table.HeaderCell>Job Name</Table.HeaderCell>
-          <Table.HeaderCell>Number of findings</Table.HeaderCell>
-          <Table.HeaderCell>Active provider</Table.HeaderCell>
-          <Table.HeaderCell>Active notification adapter</Table.HeaderCell>
-          <Table.HeaderCell></Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-
-      <Table.Body>
-        {Object.keys(jobs).length === 0
-          ? emptyTable()
-          : content(jobs, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight)}
-      </Table.Body>
-    </Table>
+    <Table
+      pagination={false}
+      empty={empty}
+      columns={[
+        {
+          title: '',
+          dataIndex: '',
+          render: (job) => {
+            return <Switch onChange={(checked) => onJobStatusChanged(job.id, checked)} checked={job.enabled} />;
+          },
+        },
+        {
+          title: 'Job Name',
+          dataIndex: 'name',
+        },
+        {
+          title: 'Number of findings',
+          dataIndex: 'numberOfFoundListings',
+          render: (value) => {
+            return value || 0;
+          },
+        },
+        {
+          title: 'Active provider',
+          dataIndex: 'provider',
+          render: (value) => {
+            return value.length || 0;
+          },
+        },
+        {
+          title: 'Active notification adapter',
+          dataIndex: 'notificationAdapter',
+          render: (value) => {
+            return value.length || 0;
+          },
+        },
+        {
+          title: '',
+          dataIndex: 'tools',
+          render: (_, job) => {
+            return (
+              <div style={{ float: 'right' }}>
+                <Button
+                  type="primary"
+                  icon={<IconHistogram />}
+                  onClick={() => onJobInsight(job.id)}
+                  style={{ marginRight: '1rem' }}
+                />
+                <Button
+                  type="secondary"
+                  icon={<IconEdit />}
+                  onClick={() => onJobEdit(job.id)}
+                  style={{ marginRight: '1rem' }}
+                />
+                <Button type="danger" icon={<IconDelete />} onClick={() => onJobRemoval(job.id)} />
+              </div>
+            );
+          },
+        },
+      ]}
+      dataSource={jobs}
+    />
   );
 }

ui/src/components/table/NotificationAdapterTable.jsx

@@ -1,50 +1,38 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
-import { Table, Button } from 'semantic-ui-react';
-
-const emptyTable = () => {
-  return (
-    <Table.Row>
-      <Table.Cell collapsing colSpan="3" style={{ textAlign: 'center' }}>
-        No Data
-      </Table.Cell>
-    </Table.Row>
-  );
-};
-
-const content = (adapterData, onRemove, onEdit) => {
-  return (
-    <Fragment>
-      {adapterData.map((data) => {
-        return (
-          <Table.Row key={data.id}>
-            <Table.Cell>{data.name}</Table.Cell>
-            <Table.Cell>
-              <div style={{ float: 'right' }}>
-                <Button circular color="blue" icon="edit" onClick={() => onEdit(data.id)} />
-                <Button circular color="red" icon="trash" onClick={() => onRemove(data.id)} />
-              </div>
-            </Table.Cell>
-          </Table.Row>
-        );
-      })}
-    </Fragment>
-  );
-};
+import { Empty, Table, Button } from '@douyinfe/semi-ui';
+import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
 
 export default function NotificationAdapterTable({ notificationAdapter = [], onRemove, onEdit } = {}) {
   return (
-    <Table singleLine inverted>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Notification Adapter Name</Table.HeaderCell>
-          <Table.HeaderCell></Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+    <Table
+      pagination={false}
+      empty={<Empty description="No Data" />}
+      columns={[
+        {
+          title: 'Notification Adapter Name',
+          dataIndex: 'name',
+        },
 
-      <Table.Body>
-        {notificationAdapter.length === 0 ? emptyTable() : content(notificationAdapter, onRemove, onEdit)}
-      </Table.Body>
-    </Table>
+        {
+          title: '',
+          dataIndex: 'tools',
+          render: (_, record) => {
+            return (
+              <div style={{ float: 'right' }}>
+                <Button
+                  type="secondary"
+                  icon={<IconEdit />}
+                  onClick={() => onEdit(record.id)}
+                  style={{ marginRight: '1rem' }}
+                />
+                <Button type="danger" icon={<IconDelete />} onClick={() => onRemove(record.id)} />
+              </div>
+            );
+          },
+        },
+      ]}
+      dataSource={notificationAdapter}
+    />
   );
 }

ui/src/components/table/ProviderTable.jsx

@@ -1,53 +1,42 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
-import { Table, Button } from 'semantic-ui-react';
-
-const emptyTable = () => {
-  return (
-    <Table.Row>
-      <Table.Cell collapsing colSpan="3" style={{ textAlign: 'center' }}>
-        No Data
-      </Table.Cell>
-    </Table.Row>
-  );
-};
-
-const content = (providerData, onRemove) => {
-  return (
-    <Fragment>
-      {providerData.map((data) => {
-        return (
-          <Table.Row key={data.id}>
-            <Table.Cell>{data.name}</Table.Cell>
-            <Table.Cell>
-              <a href={data.url} target="_blank" rel="noopener noreferrer">
-                Visit site
-              </a>
-            </Table.Cell>
-            <Table.Cell>
-              <div style={{ float: 'right' }}>
-                <Button circular color="red" icon="trash" onClick={() => onRemove(data.id)} />
-              </div>
-            </Table.Cell>
-          </Table.Row>
-        );
-      })}
-    </Fragment>
-  );
-};
+import { Empty, Table, Button } from '@douyinfe/semi-ui';
+import { IconDelete } from '@douyinfe/semi-icons';
 
 export default function ProviderTable({ providerData = [], onRemove } = {}) {
   return (
-    <Table singleLine inverted>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Provider Name</Table.HeaderCell>
-          <Table.HeaderCell>Url</Table.HeaderCell>
-          <Table.HeaderCell></Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-
-      <Table.Body>{providerData.length === 0 ? emptyTable() : content(providerData, onRemove)}</Table.Body>
-    </Table>
+    <Table
+      pagination={false}
+      empty={<Empty description="No Provider available" />}
+      columns={[
+        {
+          title: 'Provider Name',
+          dataIndex: 'name',
+        },
+        {
+          title: 'Provider Url',
+          dataIndex: 'url',
+          render: (_, data) => {
+            return (
+              <a href={data.url} target="_blank" rel="noopener noreferrer">
+                Visit site
+              </a>
+            );
+          },
+        },
+        {
+          title: '',
+          dataIndex: 'tools',
+          render: (_, record) => {
+            return (
+              <div style={{ float: 'right' }}>
+                <Button type="danger" icon={<IconDelete />} onClick={() => onRemove(record.id)} />
+              </div>
+            );
+          },
+        },
+      ]}
+      dataSource={providerData}
+    />
   );
 }

ui/src/components/table/UserTable.jsx

@@ -1,49 +1,58 @@
 import React from 'react';
 
-import { Table, Button } from 'semantic-ui-react';
+import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { format } from '../../services/time/timeService';
+import { Table, Button, Empty } from '@douyinfe/semi-ui';
+import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
 
-const emptyTable = () => {
-  return (
-    <Table.Row>
-      <Table.Cell collapsing colSpan={4} style={{ textAlign: 'center' }}>
-        No Data
-      </Table.Cell>
-    </Table.Row>
-  );
-};
-
-const content = (user, onUserRemoval, onUserEdit) => {
-  return user.map((user) => {
-    return (
-      <Table.Row key={user.id}>
-        <Table.Cell>{user.username}</Table.Cell>
-        <Table.Cell>{user.lastLogin == null ? '---' : format(user.lastLogin)}</Table.Cell>
-        <Table.Cell>{user.numberOfJobs}</Table.Cell>
-        <Table.Cell>
-          <div style={{ float: 'right' }}>
-            <Button circular color="red" icon="trash" onClick={() => onUserRemoval(user.id)} />
-            <Button circular color="blue" icon="edit" onClick={() => onUserEdit(user.id)} />
-          </div>
-        </Table.Cell>
-      </Table.Row>
-    );
-  });
-};
+const empty = (
+  <Empty
+    image={<IllustrationNoResult />}
+    darkModeImage={<IllustrationNoResultDark />}
+    description={'No user available'}
+  />
+);
 
 export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {}) {
   return (
-    <Table inverted>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Username</Table.HeaderCell>
-          <Table.HeaderCell>Last login</Table.HeaderCell>
-          <Table.HeaderCell>Number of jobs</Table.HeaderCell>
-          <Table.HeaderCell></Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-
-      <Table.Body>{user.length === 0 ? emptyTable() : content(user, onUserRemoval, onUserEdit)}</Table.Body>
-    </Table>
+    <Table
+      pagination={false}
+      empty={empty}
+      columns={[
+        {
+          title: 'Username',
+          dataIndex: 'username',
+        },
+        {
+          title: 'Last login',
+          dataIndex: 'lastLogin',
+          render: (value) => {
+            return format(value);
+          },
+        },
+        {
+          title: 'Number of jobs',
+          dataIndex: 'numberOfJobs',
+        },
+        {
+          title: '',
+          dataIndex: 'tools',
+          render: (value, user) => {
+            return (
+              <div style={{ float: 'right' }}>
+                <Button
+                  type="danger"
+                  icon={<IconDelete />}
+                  onClick={() => onUserRemoval(user.id)}
+                  style={{ marginRight: '1rem' }}
+                />
+                <Button type="primary" icon={<IconEdit />} onClick={() => onUserEdit(user.id)} />
+              </div>
+            );
+          },
+        },
+      ]}
+      dataSource={user}
+    />
   );
 }