feat(sgw): Add new services and utilities for ship, trip, and photo management
This commit is contained in:
Lê Tuấn Anh
490
src/pages/Slave/SGW/Ship/index.tsx
Normal file
490
src/pages/Slave/SGW/Ship/index.tsx
Normal file
@@ -0,0 +1,490 @@
|
||||
import { DeleteButton, EditButton } from '@/components/shared/Button';
|
||||
import { DEFAULT_PAGE_SIZE } from '@/constants';
|
||||
import {
|
||||
apiAddShip,
|
||||
apiDeleteShip,
|
||||
apiQueryShips,
|
||||
apiUpdateShip,
|
||||
} from '@/services/slave/sgw/ShipController';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||||
import { FooterToolbar } from '@ant-design/pro-layout';
|
||||
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
||||
import { Button, Drawer, message, Typography } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import EditModal from './components/EditModal';
|
||||
import FormAdd from './components/FormAdd';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
type ShipFormValues = Partial<SgwModel.ShipDetail>;
|
||||
|
||||
type ShipFormAdd = Partial<SgwModel.ShipCreateParams>;
|
||||
|
||||
const ManagerShips: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { initialState } = useModel('@@initialState');
|
||||
const { currentUserProfile } = initialState || {};
|
||||
console.log('Current User Profile:', currentUserProfile);
|
||||
const [responsive] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [createModalVisible, handleCreateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [currentRow, setCurrentRow] = useState<SgwModel.ShipDetail | null>(
|
||||
null,
|
||||
);
|
||||
const actionRef = useRef<ActionType | null>(null);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [selectedRowsState, setSelectedRowsState] = useState<
|
||||
SgwModel.ShipDetail[]
|
||||
>([]);
|
||||
const { shipTypes, getShipTypes } = useModel('slave.sgw.useShipTypes');
|
||||
const { homeports, getHomeportsByProvinceCode } = useModel(
|
||||
'slave.sgw.useHomePorts',
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!shipTypes) {
|
||||
getShipTypes();
|
||||
}
|
||||
}, [shipTypes]);
|
||||
useEffect(() => {
|
||||
getHomeportsByProvinceCode();
|
||||
}, [getHomeportsByProvinceCode]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setSelectedRowsState([]);
|
||||
setCurrentRow(null);
|
||||
actionRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAdd = async (fields: ShipFormAdd) => {
|
||||
const key = 'add_ship';
|
||||
const {
|
||||
reg_number,
|
||||
name, // Changed from shipname to name
|
||||
thing_id,
|
||||
ship_type,
|
||||
ship_length,
|
||||
ship_power,
|
||||
ship_group_id,
|
||||
home_port,
|
||||
fishing_license_number,
|
||||
fishing_license_expiry_date,
|
||||
} = fields;
|
||||
console.log('Fields received from form:', fields);
|
||||
|
||||
if (!thing_id || thing_id.length === 0) {
|
||||
message.error('Vui lòng chọn một thiết bị để liên kết.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const newShip = {
|
||||
name: name, // Use name directly
|
||||
reg_number: reg_number,
|
||||
thing_id: thing_id,
|
||||
ship_type: ship_type,
|
||||
home_port: home_port,
|
||||
fishing_license_number: fishing_license_number,
|
||||
fishing_license_expiry_date: fishing_license_expiry_date,
|
||||
ship_length: Number(ship_length),
|
||||
ship_power: Number(ship_power),
|
||||
ship_group_id: ship_group_id,
|
||||
};
|
||||
|
||||
try {
|
||||
messageApi.open({
|
||||
type: 'loading',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.things.creating',
|
||||
defaultMessage: 'creating...',
|
||||
}),
|
||||
duration: 0,
|
||||
key,
|
||||
});
|
||||
|
||||
const id = await apiAddShip({ ...newShip });
|
||||
if (id) {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.things.add.success',
|
||||
defaultMessage: 'Added successfully and will refresh soon',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.things.add.failed',
|
||||
defaultMessage: 'Adding failed, please try again!',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = async (
|
||||
selectedRows: SgwModel.ShipDetail[],
|
||||
): Promise<boolean> => {
|
||||
const key = 'remove_ship';
|
||||
if (!selectedRows) return true;
|
||||
try {
|
||||
messageApi.open({
|
||||
type: 'loading',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.deleting',
|
||||
defaultMessage: 'Deleting...',
|
||||
}),
|
||||
duration: 0,
|
||||
key,
|
||||
});
|
||||
const allDelete = selectedRows.map(async (row) => {
|
||||
if (row.id) await apiDeleteShip(row.id);
|
||||
});
|
||||
await Promise.all(allDelete);
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.delete.success',
|
||||
defaultMessage: 'Deleted successfully and will refresh soon',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return true;
|
||||
} catch (error) {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.delete.failed',
|
||||
defaultMessage: 'Delete failed, please try again!',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (values: ShipFormValues): Promise<boolean> => {
|
||||
const key = 'update_ship';
|
||||
try {
|
||||
messageApi.open({
|
||||
type: 'loading',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.updating',
|
||||
defaultMessage: 'Updating...',
|
||||
}),
|
||||
duration: 0,
|
||||
key,
|
||||
});
|
||||
// Fix: loại bỏ ship_group_id nếu là null
|
||||
const patch = { ...values };
|
||||
if (patch.ship_group_id === null) delete patch.ship_group_id;
|
||||
if (!currentRow?.id) throw new Error('Missing ship id');
|
||||
await apiUpdateShip(currentRow.id, patch as SgwModel.ShipUpdateParams);
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.update.success',
|
||||
defaultMessage: 'Updated successfully and will refresh soon',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return true;
|
||||
} catch (error) {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: intl.formatMessage({
|
||||
id: 'pages.ships.update.failed',
|
||||
defaultMessage: 'Update failed, please try again!',
|
||||
}),
|
||||
key,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ProColumns<SgwModel.ShipDetail, 'text'>[] = [
|
||||
{
|
||||
key: 'reg_number',
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.ships.reg_number"
|
||||
defaultMessage="Registration Number"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'reg_number',
|
||||
render: (_, record) => (
|
||||
<a
|
||||
style={{ color: '#1890ff', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setCurrentRow(record);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
>
|
||||
{record?.reg_number}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
title: (
|
||||
<FormattedMessage id="pages.ships.name" defaultMessage="Ship Name" />
|
||||
),
|
||||
dataIndex: 'name',
|
||||
render: (dom, record) => (
|
||||
<Paragraph
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
verticalAlign: 'middle',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
copyable
|
||||
>
|
||||
{record?.name}
|
||||
</Paragraph>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'ship_type',
|
||||
title: <FormattedMessage id="pages.ships.type" defaultMessage="Type" />,
|
||||
dataIndex: 'ship_type',
|
||||
render: (dom, record) => {
|
||||
const typeObj = Array.isArray(shipTypes)
|
||||
? shipTypes.find((t) => t.id === record?.ship_type)
|
||||
: undefined;
|
||||
return typeObj?.name || record?.ship_type || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'home_port',
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.ships.home_port"
|
||||
defaultMessage="Home Port"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'home_port',
|
||||
hideInSearch: true,
|
||||
render: (dom, record) => {
|
||||
const portObj = Array.isArray(homeports)
|
||||
? homeports.find((p) => p.id === record?.home_port)
|
||||
: undefined;
|
||||
return portObj?.name || record?.home_port || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage id="pages.ships.option" defaultMessage="Operating" />
|
||||
),
|
||||
hideInSearch: true,
|
||||
render: (dom, record) => (
|
||||
<EditButton
|
||||
text={intl.formatMessage({
|
||||
id: 'pages.ships.edit.text',
|
||||
defaultMessage: 'Edit',
|
||||
})}
|
||||
onClick={() => {
|
||||
setCurrentRow(record);
|
||||
handleUpdateModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Định nghĩa tạm detailColumns cho ProDescriptions
|
||||
const detailColumns = [
|
||||
{ title: 'Tên tàu', dataIndex: 'name' },
|
||||
{ title: 'Chiều dài tàu', dataIndex: 'ship_length' },
|
||||
{ title: 'Công suất tàu', dataIndex: 'ship_power' },
|
||||
{ title: 'Đội tàu', dataIndex: 'group_ship' },
|
||||
{ title: 'Ảnh tàu', dataIndex: 'reg_number' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<ProCard
|
||||
split={responsive ? 'horizontal' : 'vertical'}
|
||||
style={{ minHeight: 560 }}
|
||||
>
|
||||
<ProCard colSpan={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24 }}>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
columns={columns}
|
||||
tableLayout="auto"
|
||||
rowKey="id"
|
||||
search={{ layout: 'vertical', defaultCollapsed: false }}
|
||||
dateFormatter="string"
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedRowsState
|
||||
.map((row) => row.id!)
|
||||
.filter(Boolean),
|
||||
onChange: (
|
||||
_: React.Key[],
|
||||
selectedRows: SgwModel.ShipDetail[],
|
||||
) => {
|
||||
setSelectedRowsState(selectedRows);
|
||||
},
|
||||
}}
|
||||
pagination={{ pageSize: DEFAULT_PAGE_SIZE * 2 }}
|
||||
request={async (params = {}) => {
|
||||
const {
|
||||
current = 1,
|
||||
pageSize,
|
||||
name,
|
||||
registration_number,
|
||||
} = params as {
|
||||
current?: number;
|
||||
pageSize?: number;
|
||||
name?: string;
|
||||
registration_number?: string;
|
||||
};
|
||||
const size = pageSize || DEFAULT_PAGE_SIZE * 2;
|
||||
const offset = current === 1 ? 0 : (current - 1) * size;
|
||||
const query: SgwModel.ShipQueryParams = {
|
||||
offset: offset,
|
||||
limit: size,
|
||||
order: 'name',
|
||||
dir: 'asc',
|
||||
name,
|
||||
registration_number,
|
||||
};
|
||||
const resp = await apiQueryShips(query);
|
||||
return {
|
||||
data: resp.ships || [],
|
||||
success: true,
|
||||
total: resp.total || 0,
|
||||
};
|
||||
}}
|
||||
toolBarRender={() => {
|
||||
return [
|
||||
<Button
|
||||
type="primary"
|
||||
key="primary"
|
||||
onClick={() => handleCreateModalVisible(true)}
|
||||
>
|
||||
<PlusOutlined />{' '}
|
||||
<FormattedMessage
|
||||
id="pages.ship.create.text"
|
||||
defaultMessage="New"
|
||||
/>
|
||||
</Button>,
|
||||
];
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
|
||||
<FormAdd
|
||||
visible={createModalVisible}
|
||||
onVisibleChange={handleCreateModalVisible}
|
||||
onSubmit={async (values: ShipFormAdd) => {
|
||||
console.log('index.tsx onSubmit called with values:', values);
|
||||
const success = await handleAdd(values);
|
||||
console.log('index.tsx onSubmit - success:', success);
|
||||
if (success) {
|
||||
handleCreateModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
return success;
|
||||
}}
|
||||
/>
|
||||
|
||||
{currentRow && (
|
||||
<EditModal
|
||||
visible={updateModalVisible}
|
||||
values={currentRow}
|
||||
onVisibleChange={(visible) => {
|
||||
handleUpdateModalVisible(visible);
|
||||
if (!visible) setCurrentRow(null);
|
||||
}}
|
||||
onFinish={async (values: ShipFormValues) => {
|
||||
const success = await handleUpdate(values);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setCurrentRow(null);
|
||||
actionRef.current?.reload();
|
||||
}
|
||||
return success;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="pages.ships.chosen"
|
||||
defaultMessage="Chosen"
|
||||
/>{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
<FormattedMessage id="pages.ships.item" defaultMessage="item" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DeleteButton
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.ships.deletion.title',
|
||||
defaultMessage: 'Are you sure to delete these selected ships?',
|
||||
})}
|
||||
text={intl.formatMessage({
|
||||
id: 'pages.ships.deletion.text',
|
||||
defaultMessage: 'Batch deletion',
|
||||
})}
|
||||
onOk={async () => {
|
||||
const success = await handleRemove(selectedRowsState);
|
||||
if (success) {
|
||||
setSelectedRowsState([]);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<Drawer
|
||||
width={600}
|
||||
visible={showDetail}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="pages.ships.detail"
|
||||
defaultMessage="Ship Detail"
|
||||
/>
|
||||
}
|
||||
onClose={() => {
|
||||
setShowDetail(false);
|
||||
setCurrentRow(null);
|
||||
}}
|
||||
>
|
||||
<ProDescriptions<SgwModel.ShipDetail>
|
||||
column={1}
|
||||
bordered
|
||||
request={async () => ({
|
||||
data: currentRow ? [currentRow] : [],
|
||||
success: true,
|
||||
})}
|
||||
params={{ id: currentRow?.id }}
|
||||
columns={detailColumns}
|
||||
/>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManagerShips;
|
||||
Reference in New Issue
Block a user