feat(manager/devices): Add device management features including creation and editing
This commit is contained in:
@@ -1,5 +1,319 @@
|
||||
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 = () => {
|
||||
return <div>ManagerDevicePage</div>;
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user