115 lines
4.2 KiB
TypeScript
115 lines
4.2 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button, Row, Col, App } from 'antd';
|
|
import clsx from 'clsx';
|
|
import { DeleteOutlined } from '@ant-design/icons';
|
|
import type { Application, ApplicationModalRef } from './types';
|
|
import ApplicationModal from './components/ApplicationModal';
|
|
import SearchInput from '@/components/SearchInput'
|
|
import RbCard from '@/components/RbCard/Card'
|
|
import { getApplicationListUrl, deleteApplication } from '@/api/application'
|
|
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
|
|
import { formatDateTime } from '@/utils/format';
|
|
|
|
const ApplicationManagement: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const { modal } = App.useApp();
|
|
const [query, setQuery] = useState({});
|
|
const applicationModalRef = useRef<ApplicationModalRef>(null);
|
|
const scrollListRef = useRef<PageScrollListRef>(null)
|
|
|
|
const refresh = () => {
|
|
scrollListRef.current?.refresh();
|
|
}
|
|
|
|
const handleCreate = () => {
|
|
applicationModalRef.current?.handleOpen();
|
|
}
|
|
const handleEdit = (item: Application) => {
|
|
window.open(`/#/application/config/${item.id}`);
|
|
}
|
|
const handleDelete = (item: Application) => {
|
|
modal.confirm({
|
|
title: t('common.confirmDeleteDesc', { name: item.name }),
|
|
okText: t('common.delete'),
|
|
cancelText: t('common.cancel'),
|
|
okType: 'danger',
|
|
onOk: () => {
|
|
deleteApplication(item.id)
|
|
.then(() => {
|
|
refresh();
|
|
})
|
|
.catch(() => {
|
|
console.error('Failed to delete application');
|
|
});
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<>
|
|
<Row gutter={16} className="rb:mb-[16px]">
|
|
<Col span={12}>
|
|
<SearchInput
|
|
placeholder={t('application.searchPlaceholder')}
|
|
onSearch={(value) => setQuery({ search: value })}
|
|
style={{width: '100%'}}
|
|
/>
|
|
</Col>
|
|
<Col span={12} className="rb:text-right">
|
|
<Button type="primary" onClick={handleCreate}>
|
|
{t('application.createApplication')}
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
|
|
<PageScrollList
|
|
ref={scrollListRef}
|
|
url={getApplicationListUrl}
|
|
query={query}
|
|
renderItem={(item: Application) => (
|
|
<RbCard
|
|
title={item.name}
|
|
avatar={
|
|
<div className="rb:w-[48px] rb:h-[48px] rb:rounded-[8px] rb:mr-[13px] rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
|
|
{item.name[0]}
|
|
</div>
|
|
}
|
|
>
|
|
{['type', 'source', 'created_at'].map((key, index) => (
|
|
<div key={key} className={clsx("rb:flex rb:justify-between rb:gap-[20px] rb:font-regular rb:text-[14px]", {
|
|
'rb:mt-[12px]': index !== 0
|
|
})}>
|
|
<span className="rb:text-[#5B6167]">{t(`application.${key}`)}</span>
|
|
<span className={clsx({
|
|
'rb:text-[#155EEF] rb:font-medium': key === 'type' && item[key] === 'agent',
|
|
'rb:text-[#369F21] rb:font-medium': key === 'type' && item[key] === 'multi_agent',
|
|
})}>
|
|
{key === 'source' && item.is_shared
|
|
? t('application.shared')
|
|
: key === 'source' && !item.is_shared
|
|
? t('application.configuration')
|
|
: key === 'created_at'
|
|
? formatDateTime(item[key as keyof Application], 'YYYY-MM-DD HH:mm:ss')
|
|
: t(`application.${item[key as keyof Application]}`)
|
|
}
|
|
</span>
|
|
</div>
|
|
))}
|
|
|
|
<div className="rb:mt-[20px] rb:flex rb:justify-between rb:gap-[10px]">
|
|
<Button type="primary" ghost className="rb:w-[calc(100%-46px)]" onClick={() => handleEdit(item)}>{t('application.configuration')}</Button>
|
|
<Button icon={<DeleteOutlined />} onClick={() => handleDelete(item)}></Button>
|
|
</div>
|
|
</RbCard>
|
|
)}
|
|
/>
|
|
|
|
<ApplicationModal
|
|
ref={applicationModalRef}
|
|
refresh={refresh}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ApplicationManagement; |