320 lines
9.8 KiB
TypeScript
320 lines
9.8 KiB
TypeScript
import IconFont from '@/components/IconFont';
|
|
import TreeGroup from '@/components/shared/TreeGroup';
|
|
import { DEFAULT_PAGE_SIZE } from '@/constants';
|
|
import { apiSearchThings } from '@/services/master/ThingController';
|
|
import { EditOutlined, EnvironmentOutlined } from '@ant-design/icons';
|
|
import {
|
|
ActionType,
|
|
ProCard,
|
|
ProColumns,
|
|
ProTable,
|
|
} from '@ant-design/pro-components';
|
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
import { Button, Divider, Grid, Space, Tag, theme } from 'antd';
|
|
import message from 'antd/es/message';
|
|
import Paragraph from 'antd/lib/typography/Paragraph';
|
|
import { useRef, useState } from 'react';
|
|
import CreateDevice from './components/CreateDevice';
|
|
import EditDeviceModal from './components/EditDeviceModal';
|
|
|
|
const ManagerDevicePage = () => {
|
|
const { useBreakpoint } = Grid;
|
|
const intl = useIntl();
|
|
const screens = useBreakpoint();
|
|
const { token } = theme.useToken();
|
|
const actionRef = useRef<ActionType | null>(null);
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
const [selectedRowsState, setSelectedRowsState] = useState<
|
|
MasterModel.Thing[]
|
|
>([]);
|
|
const [groupCheckedKeys, setGroupCheckedKeys] = useState<
|
|
string | string[] | null
|
|
>(null);
|
|
const [isEditModalVisible, setIsEditModalVisible] = useState<boolean>(false);
|
|
const [editingDevice, setEditingDevice] = useState<MasterModel.Thing | null>(
|
|
null,
|
|
);
|
|
|
|
const handleClickAssign = (device: MasterModel.Thing) => {
|
|
console.log('Device ', device);
|
|
};
|
|
|
|
const handleEdit = (device: MasterModel.Thing) => {
|
|
setEditingDevice(device);
|
|
setIsEditModalVisible(true);
|
|
};
|
|
|
|
const handleEditCancel = () => {
|
|
setIsEditModalVisible(false);
|
|
setEditingDevice(null);
|
|
};
|
|
|
|
const handleEditSubmit = async (values: any) => {
|
|
// TODO: call update API here if available. For now just simulate success.
|
|
console.log('Update values for', editingDevice?.id, values);
|
|
messageApi.success('Cập nhật thành công');
|
|
setIsEditModalVisible(false);
|
|
setEditingDevice(null);
|
|
actionRef.current?.reload();
|
|
};
|
|
|
|
const columns: ProColumns<MasterModel.Thing>[] = [
|
|
{
|
|
key: 'name',
|
|
title: (
|
|
<FormattedMessage id="master.devices.name" defaultMessage="Name" />
|
|
),
|
|
tip: intl.formatMessage({
|
|
id: 'master.devices.name.tip',
|
|
defaultMessage: 'The device name',
|
|
}),
|
|
dataIndex: 'name',
|
|
render: (_, record) => (
|
|
<Paragraph
|
|
style={{
|
|
marginBottom: 0,
|
|
verticalAlign: 'middle',
|
|
display: 'inline-block',
|
|
color: token.colorText,
|
|
}}
|
|
copyable
|
|
>
|
|
{record?.name}
|
|
</Paragraph>
|
|
),
|
|
},
|
|
|
|
{
|
|
key: 'external_id',
|
|
title: (
|
|
<FormattedMessage
|
|
id="master.devices.external_id"
|
|
defaultMessage="External ID"
|
|
/>
|
|
),
|
|
tip: intl.formatMessage({
|
|
id: 'master.devices.external_id.tip',
|
|
defaultMessage: 'The external identifier',
|
|
}),
|
|
responsive: ['lg', 'md'],
|
|
dataIndex: ['metadata', 'external_id'],
|
|
render: (_, record) =>
|
|
record?.metadata?.external_id ? (
|
|
<Paragraph
|
|
style={{
|
|
marginBottom: 0,
|
|
verticalAlign: 'middle',
|
|
display: 'inline-block',
|
|
color: token.colorText,
|
|
}}
|
|
copyable
|
|
>
|
|
{record?.metadata?.external_id}
|
|
</Paragraph>
|
|
) : (
|
|
'-'
|
|
),
|
|
},
|
|
|
|
{
|
|
key: 'type',
|
|
hideInSearch: true,
|
|
title: (
|
|
<FormattedMessage id="master.devices.type" defaultMessage="Type" />
|
|
),
|
|
tip: intl.formatMessage({
|
|
id: 'master.devices.type.tip',
|
|
defaultMessage: 'The device type',
|
|
}),
|
|
dataIndex: ['metadata', 'type'],
|
|
render: (_, record) => record?.metadata?.type || '...',
|
|
},
|
|
|
|
{
|
|
key: 'connected',
|
|
hideInSearch: true,
|
|
title: <FormattedMessage id="common.status" defaultMessage="Status" />,
|
|
dataIndex: ['metadata', 'connected'],
|
|
render: (_, record) => (
|
|
<Tag color={record?.metadata?.connected ? 'green' : 'red'}>
|
|
{record?.metadata?.connected
|
|
? intl.formatMessage({
|
|
id: 'master.devices.online',
|
|
defaultMessage: 'Online',
|
|
})
|
|
: intl.formatMessage({
|
|
id: 'master.devices.offline',
|
|
defaultMessage: 'Offline',
|
|
})}
|
|
</Tag>
|
|
),
|
|
},
|
|
|
|
{
|
|
title: (
|
|
<FormattedMessage id="common.actions" defaultMessage="Operating" />
|
|
),
|
|
hideInSearch: true,
|
|
render: (_, device) => {
|
|
return (
|
|
<Space
|
|
size={5}
|
|
split={<Divider type="vertical" style={{ margin: '0 4px' }} />}
|
|
>
|
|
<Button
|
|
shape="default"
|
|
size="small"
|
|
icon={<EditOutlined />}
|
|
onClick={() => handleEdit(device)}
|
|
/>
|
|
<Button
|
|
shape="default"
|
|
size="small"
|
|
icon={<EnvironmentOutlined />}
|
|
// onClick={() => handleClickAssign(device)}
|
|
/>
|
|
<Button
|
|
shape="default"
|
|
size="small"
|
|
icon={<IconFont type="icon-camera" />}
|
|
// onClick={() => handleClickAssign(device)}
|
|
/>
|
|
{device?.metadata?.type === 'gmsv6' && (
|
|
<Button
|
|
shape="default"
|
|
size="small"
|
|
icon={<IconFont type="icon-terminal" />}
|
|
// onClick={() => handleClickAssign(device)}
|
|
/>
|
|
)}
|
|
</Space>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<EditDeviceModal
|
|
visible={isEditModalVisible}
|
|
device={editingDevice}
|
|
onCancel={handleEditCancel}
|
|
onSubmit={handleEditSubmit}
|
|
/>
|
|
{contextHolder}
|
|
<ProCard split={screens.md ? 'vertical' : 'horizontal'}>
|
|
<ProCard colSpan={{ xs: 24, sm: 24, md: 6, lg: 6, xl: 6 }}>
|
|
<TreeGroup
|
|
disable={isLoading}
|
|
multiple={true}
|
|
groupIds={groupCheckedKeys}
|
|
onSelected={(value: string | string[] | null) => {
|
|
setGroupCheckedKeys(value);
|
|
if (actionRef.current) {
|
|
actionRef.current.reload();
|
|
}
|
|
}}
|
|
/>
|
|
</ProCard>
|
|
<ProCard colSpan={{ xs: 24, sm: 24, md: 18, lg: 18, xl: 18 }}>
|
|
<ProTable<MasterModel.Thing>
|
|
columns={columns}
|
|
tableLayout="auto"
|
|
actionRef={actionRef}
|
|
rowKey="id"
|
|
search={{
|
|
layout: 'vertical',
|
|
defaultCollapsed: false,
|
|
}}
|
|
dateFormatter="string"
|
|
rowSelection={{
|
|
selectedRowKeys: selectedRowsState.map((row) => row.id!),
|
|
onChange: (_: React.Key[], selectedRows: MasterModel.Thing[]) => {
|
|
setSelectedRowsState(selectedRows);
|
|
},
|
|
}}
|
|
pagination={{
|
|
defaultPageSize: DEFAULT_PAGE_SIZE * 2,
|
|
showSizeChanger: true,
|
|
pageSizeOptions: ['10', '15', '20'],
|
|
showTotal: (total, range) =>
|
|
`${range[0]}-${range[1]}
|
|
${intl.formatMessage({
|
|
id: 'common.paginations.of',
|
|
defaultMessage: 'of',
|
|
})}
|
|
${total} ${intl.formatMessage({
|
|
id: 'master.devices.table.pagination',
|
|
defaultMessage: 'devices',
|
|
})}`,
|
|
}}
|
|
request={async (params = {}) => {
|
|
const { current = 1, pageSize, name, external_id } = params;
|
|
const size = pageSize || DEFAULT_PAGE_SIZE * 2;
|
|
const offset = current === 1 ? 0 : (current - 1) * size;
|
|
setIsLoading(true);
|
|
|
|
const metadata: Partial<MasterModel.ThingMetadata> = {};
|
|
if (external_id) metadata.external_id = external_id;
|
|
|
|
// Add group filter if groups are selected
|
|
if (groupCheckedKeys && groupCheckedKeys.length > 0) {
|
|
const groupId = Array.isArray(groupCheckedKeys)
|
|
? groupCheckedKeys.join(',')
|
|
: groupCheckedKeys;
|
|
metadata.group_id = groupId;
|
|
}
|
|
|
|
const query: MasterModel.SearchThingPaginationBody = {
|
|
offset: offset,
|
|
limit: size,
|
|
order: 'name',
|
|
dir: 'asc',
|
|
};
|
|
if (name) query.name = name;
|
|
if (Object.keys(metadata).length > 0) query.metadata = metadata;
|
|
|
|
try {
|
|
const response = await apiSearchThings(query);
|
|
setIsLoading(false);
|
|
return {
|
|
data: response.things || [],
|
|
success: true,
|
|
total: response.total || 0,
|
|
};
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
return {
|
|
data: [],
|
|
success: false,
|
|
total: 0,
|
|
};
|
|
}
|
|
}}
|
|
options={{
|
|
search: false,
|
|
setting: false,
|
|
density: false,
|
|
reload: true,
|
|
}}
|
|
toolBarRender={() => [
|
|
<CreateDevice
|
|
message={messageApi}
|
|
onSuccess={(isSuccess) => {
|
|
if (isSuccess) {
|
|
actionRef.current?.reload();
|
|
}
|
|
}}
|
|
key="create-device"
|
|
/>,
|
|
]}
|
|
/>
|
|
</ProCard>
|
|
</ProCard>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ManagerDevicePage;
|