feat(core): sgw-device-ui

src/pages/Trip/components/HaulTable.tsx

@@ -0,0 +1,183 @@
+import { EditOutlined, EyeOutlined } from '@ant-design/icons';
+import { ProColumns, ProTable } from '@ant-design/pro-components';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Flex, message } from 'antd';
+import React, { useState } from 'react';
+import CreateOrUpdateFishingLog from './CreateOrUpdateFishingLog';
+import HaulFishList from './HaulFishList';
+
+export interface HaulTableProps {
+  hauls: API.FishingLog[];
+  trip?: API.Trip;
+  onReload?: (isTrue: boolean) => void;
+}
+const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
+  const [editOpen, setEditOpen] = useState(false);
+  const [editFishingLogOpen, setEditFishingLogOpen] = useState(false);
+  const [currentRow, setCurrentRow] = useState<API.FishingLogInfo[]>([]);
+  const [currentFishingLog, setCurrentFishingLog] =
+    useState<API.FishingLog | null>(null);
+  const intl = useIntl();
+  const { getApi } = useModel('getTrip');
+  console.log('HaulTable received hauls:', hauls);
+
+  const fishing_logs_columns: ProColumns<API.FishingLog>[] = [
+    {
+      title: <div style={{ textAlign: 'center' }}>STT</div>,
+      dataIndex: 'fishing_log_id',
+      align: 'center',
+      render: (_, __, index, action) => {
+        return `Mẻ ${hauls.length - index}`;
+      },
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Trạng Thái</div>,
+      dataIndex: ['status'], // 👈 lấy từ status 1: đang
+      align: 'center',
+      valueEnum: {
+        0: {
+          text: intl.formatMessage({
+            id: 'pages.trips.status.fishing',
+            defaultMessage: 'Đang đánh bắt',
+          }),
+          status: 'Processing',
+        },
+        1: {
+          text: intl.formatMessage({
+            id: 'pages.trips.status.end_fishing',
+            defaultMessage: 'Đã hoàn thành',
+          }),
+          status: 'Success',
+        },
+        2: {
+          text: intl.formatMessage({
+            id: 'pages.trips.status.cancel_fishing',
+            defaultMessage: 'Đã huỷ',
+          }),
+          status: 'default',
+        },
+      },
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Thời tiết</div>,
+      dataIndex: ['weather_description'], // 👈 lấy từ weather
+      align: 'center',
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Thời điểm bắt đầu</div>,
+      dataIndex: ['start_at'], // birth_date là date of birth
+      align: 'center',
+      render: (start_at: any) => {
+        if (!start_at) return '-';
+        const date = new Date(start_at);
+        return date.toLocaleString('vi-VN', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false,
+        });
+      },
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Thời điểm kết thúc</div>,
+      dataIndex: ['end_at'], // birth_date là date of birth
+      align: 'center',
+      render: (end_at: any) => {
+        // console.log('End at value:', end_at);
+        if (end_at == '0001-01-01T00:00:00Z') return '-';
+        const date = new Date(end_at);
+        return date.toLocaleString('vi-VN', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false,
+        });
+      },
+    },
+    {
+      title: 'Thao tác',
+      align: 'center',
+      hideInSearch: true,
+      render: (_, record) => {
+        console.log('Rendering action column for record:', record);
+        return (
+          <Flex align="center" justify="center" gap={5}>
+            {/* Nút Edit */}
+            <Button
+              shape="default"
+              size="small"
+              icon={<EyeOutlined />}
+              onClick={() => {
+                if (record.info) {
+                  setCurrentRow(record.info!); // record là dòng hiện tại trong table
+                  setEditOpen(true);
+                } else {
+                  message.warning('Không có dữ liệu cá trong mẻ lưới này');
+                }
+              }}
+            />
+            {editOpen && currentRow && (
+              <HaulFishList
+                fishList={currentRow} // truyền luôn cả record nếu cần
+                open={editOpen}
+                onOpenChange={setEditOpen}
+              />
+            )}
+            <Button
+              shape="default"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => {
+                setCurrentFishingLog(record);
+                setEditFishingLogOpen(true);
+              }}
+            />
+          </Flex>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<API.FishingLog>
+        style={{ width: '90%' }}
+        columns={fishing_logs_columns}
+        dataSource={hauls.slice().reverse()} // đảo ngược thứ tự hiển thị
+        search={false}
+        pagination={{
+          pageSize: 10,
+          showSizeChanger: true,
+          showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
+        }}
+        options={false}
+        bordered
+        size="middle"
+        scroll={{ x: 600 }}
+      />
+      <CreateOrUpdateFishingLog
+        trip={trip!}
+        isFinished={currentFishingLog?.status === 0 ? false : true}
+        fishingLogs={currentFishingLog || undefined}
+        isOpen={editFishingLogOpen}
+        onOpenChange={setEditFishingLogOpen}
+        onFinished={(success) => {
+          if (success) {
+            message.success('Cập nhật mẻ lưới thành công');
+            getApi();
+          } else {
+            message.error('Cập nhật mẻ lưới thất bại');
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default HaulTable;