feat: start Connector page

This commit is contained in:
Maël Gangloff 2024-07-29 19:37:17 +02:00
parent 01c3ce7d3c
commit 1e280637f4
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
5 changed files with 116 additions and 9 deletions

View File

@ -0,0 +1,8 @@
import {FormInstance} from "antd";
import React from "react";
import {Connector} from "../../utils/api/connectors";
export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
return <>
</>
}

View File

@ -0,0 +1,28 @@
import {Card, Divider, Popconfirm, Typography} from "antd";
import {t} from "ttag";
import {DeleteFilled} from "@ant-design/icons";
import React from "react";
import {Connector, deleteConnector} from "../../utils/api/connectors";
type ConnectorElement = Connector & { id: string }
export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorElement[], onDelete: () => void }) {
return <>
{connectors.map(connector =>
<>
<Card title={t`Connector ${connector.id}`} extra={<Popconfirm
title={t`Delete the Connector`}
description={t`Are you sure to delete this Connector?`}
onConfirm={() => deleteConnector(connector.id).then(onDelete)}
okText={t`Yes`}
cancelText={t`No`}
><DeleteFilled/> </Popconfirm>}>
<Typography.Paragraph>
{t`Provider`} : {connector.provider}
</Typography.Paragraph>
</Card>
<Divider/>
</>
)}
</>
}

View File

@ -1,7 +1,45 @@
import React from "react";
import React, {useEffect, useState} from "react";
import {Card, Flex, Form, message, Skeleton} from "antd";
import {t} from "ttag";
import {Connector, getConnectors} from "../../utils/api/connectors";
import {ConnectorForm} from "../../components/tracking/ConnectorForm";
import {AxiosError} from "axios";
import {ConnectorsList} from "../../components/tracking/ConnectorsList";
type ConnectorElement = Connector & { id: string }
export default function ConnectorsPage() {
return <p>
Not implemented
</p>
const [form] = Form.useForm()
const [messageApi, contextHolder] = message.useMessage()
const [connectors, setConnectors] = useState<ConnectorElement[] | null>()
const refreshConnectors = () => getConnectors().then(c => {
setConnectors(c['hydra:member'])
}).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string }
messageApi.error(data.detail ?? t`An error occurred`)
setConnectors(undefined)
})
useEffect(() => {
refreshConnectors()
}, [])
return <Flex gap="middle" align="center" justify="center" vertical>
<Card title={t`Create a Connector`} style={{width: '100%'}} loading={true}>
{contextHolder}
<ConnectorForm form={form} onCreate={() => {
}}/>
</Card>
<Skeleton loading={connectors === undefined} active>
{connectors && connectors.length > 0 && <Card title={t`My Connectors`} style={{width: '100%'}}>
<ConnectorsList connectors={connectors} onDelete={refreshConnectors}/>
</Card>
}
</Skeleton>
</Flex>
}

View File

@ -29,14 +29,18 @@ export default function WatchlistPage() {
const refreshWatchlists = () => getWatchlists().then(w => {
setWatchlists(w['hydra:member'])
}).catch(() => setWatchlists(undefined))
}).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string }
messageApi.error(data.detail ?? t`An error occurred`)
setWatchlists(undefined)
})
useEffect(() => {
refreshWatchlists()
}, [])
return <Flex gap="middle" align="center" justify="center" vertical>
<Card title={t`Create a watchlist`} style={{width: '100%'}}>
<Card title={t`Create a Watchlist`} style={{width: '100%'}}>
{contextHolder}
<WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist}/>
</Card>

View File

@ -203,10 +203,12 @@ msgstr ""
msgid "Are you sure to delete this Watchlist?"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:17
#: assets/components/tracking/WatchlistsList.tsx:18
msgid "Yes"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:18
#: assets/components/tracking/WatchlistsList.tsx:19
msgid "No"
msgstr ""
@ -215,12 +217,31 @@ msgstr ""
msgid "Domain triggers"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:13
#, javascript-format
msgid "Connector ${ connector.id }"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:14
msgid "Delete the Connector"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:15
msgid "Are you sure to delete this Connector?"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:21
msgid "Provider"
msgstr ""
#: assets/pages/search/DomainSearchPage.tsx:19
msgid "Found !"
msgstr ""
#: assets/pages/search/DomainSearchPage.tsx:23
#: assets/pages/tracking/ConnectorsPage.tsx:21
#: assets/pages/tracking/WatchlistPage.tsx:26
#: assets/pages/tracking/WatchlistPage.tsx:34
msgid "An error occurred"
msgstr ""
@ -334,16 +355,24 @@ msgstr ""
msgid "Roles"
msgstr ""
#: assets/pages/tracking/ConnectorsPage.tsx:31
msgid "Create a Connector"
msgstr ""
#: assets/pages/tracking/ConnectorsPage.tsx:39
msgid "My Connectors"
msgstr ""
#: assets/pages/tracking/WatchlistPage.tsx:23
msgid "Watchlist created !"
msgstr ""
#: assets/pages/tracking/WatchlistPage.tsx:39
msgid "Create a watchlist"
#: assets/pages/tracking/WatchlistPage.tsx:43
msgid "Create a Watchlist"
msgstr ""
#: assets/App.tsx:136
#: assets/pages/tracking/WatchlistPage.tsx:46
#: assets/pages/tracking/WatchlistPage.tsx:50
msgid "My Watchlists"
msgstr ""