Listing management (#223)

* upgrading dependencies, fixing image placeholder

* improving processing times label and hide when screen width is too low

* aligning run now button

* renaming settings -> general settings

* smaller security and memory improvements

* improving footer

* preparing listing management

* improve filtering for listings

* preparing new settings page

* preparing new settings page

* storing settings in db

* next release version

ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx

@@ -54,6 +54,8 @@ function spreadPrefilledAdapterWithValues(prefilled, fields) {
 }
 
 export default function NotificationAdapterMutator({
+  title,
+  description,
   onVisibilityChanged,
   visible = false,
   selected = [],
@@ -172,7 +174,7 @@ export default function NotificationAdapterMutator({
 
   return (
     <Modal
-      title="Adding a new Notification Adapter"
+      title={title != null ? title : 'Adding a new Notification Adapter'}
       visible={visible}
       style={{ width: isMobile ? '95%' : '50rem' }}
       onCancel={() => onSubmit(false)}
@@ -211,11 +213,15 @@ export default function NotificationAdapterMutator({
         />
       )}
 
-      <p>
-        When Fredy finds new listings, we like to report them to you. To do so, the notification adapter can be
-        configured. <br />
-        There are multiple ways Fredy can send new listings to you. Choose your weapon...
-      </p>
+      {description != null ? (
+        <p>{description}</p>
+      ) : (
+        <p>
+          When Fredy finds new listings, we like to report them to you. To do so, notification adapter can be
+          configured. <br />
+          There are multiple ways how Fredy can send new listings to you. Chose your weapon...
+        </p>
+      )}
 
       <Select
         filter

ui/src/views/listings/Listings.jsx

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

ui/src/views/listings/management/WatchlistManagement.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { IconHorn } from '@douyinfe/semi-icons';
+import { SegmentPart } from '../../../components/segment/SegmentPart.jsx';
+import { Banner, Button, Checkbox, Space } from '@douyinfe/semi-ui';
+import NotificationAdapterMutator from '../../jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx';
+import Headline from '../../../components/headline/Headline.jsx';
+
+export default function WatchlistManagement() {
+  const [notificationChooserVisible, setNotificationChooserVisible] = useState(false);
+  const [notificationAdapterData, setNotificationAdapterData] = useState([]);
+  //TODO: Set default
+  const [activityChanges, setActivityChanges] = useState(false);
+  const [priceChanges, setPriceChanges] = useState(false);
+  return (
+    <div>
+      <SegmentPart
+        name="Notification for Watch List"
+        helpText="You can get notified for changes on listings from your watch list."
+        Icon={IconHorn}
+      >
+        <Banner
+          fullMode={false}
+          type="info"
+          closeIcon={null}
+          title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>Note</div>}
+          description="You’ll receive notifications only for listings that are on your watch list. To add listings to it, open the 'Listings' section and tag the ones you want to follow."
+        />
+        <Space />
+        <Headline size={5} text="Notify me when:" style={{ marginTop: '1rem' }} />
+
+        <Checkbox checked={activityChanges} onChange={(e) => setActivityChanges(e.target.checked)}>
+          Listing state changes (e.g. listing becomes inactive)
+        </Checkbox>
+        <Checkbox checked={priceChanges} onChange={(e) => setPriceChanges(e.target.checked)}>
+          Listing price changes
+        </Checkbox>
+
+        <Space />
+        <Headline size={5} text="Notify me with:" style={{ marginTop: '1rem' }} />
+        <Button onClick={() => setNotificationChooserVisible(true)}>Select notification method</Button>
+
+        <NotificationAdapterMutator
+          title="Add notification method"
+          description="When something has changed, Fredy will notify you using the selected notification adapter. Note, some adapter like SqLite are not available here."
+          visible={notificationChooserVisible}
+          onVisibilityChanged={(visible) => {
+            setNotificationChooserVisible(visible);
+          }}
+          selected={notificationAdapterData}
+          editNotificationAdapter={null}
+          onData={(data) => {
+            const oldData = [...notificationAdapterData].filter((o) => o.id !== data.id);
+            setNotificationAdapterData([...oldData, data]);
+          }}
+        />
+      </SegmentPart>
+    </div>
+  );
+}