diff --git a/components/tripInfo/NetListTable.tsx b/components/tripInfo/NetListTable.tsx index e2d0df4..d64bf2d 100644 --- a/components/tripInfo/NetListTable.tsx +++ b/components/tripInfo/NetListTable.tsx @@ -1,191 +1,18 @@ import { IconSymbol } from "@/components/ui/icon-symbol"; +import { useTrip } from "@/state/use-trip"; import React, { useRef, useState } from "react"; import { Animated, Text, TouchableOpacity, View } from "react-native"; import NetDetailModal from "./modal/NetDetailModal/NetDetailModal"; import styles from "./style/NetListTable.styles"; -// --------------------------- -// 🧩 Interface -// --------------------------- -interface FishCatch { - fish_species_id: number; - fish_name: string; - catch_number: number; - catch_unit: string; - fish_size: number; - fish_rarity: number; - fish_condition: string; - gear_usage: string; -} - -interface NetItem { - id: string; - stt: string; - trangThai: string; - thoiGianBatDau?: string; - thoiGianKetThuc?: string; - viTriHaThu?: string; - viTriThuLuoi?: string; - doSauHaThu?: string; - doSauThuLuoi?: string; - catchList?: FishCatch[]; - ghiChu?: string; -} - -// --------------------------- -// 🧵 Dữ liệu mẫu -// --------------------------- -const data: NetItem[] = [ - { - id: "1", - stt: "Mẻ 3", - trangThai: "Đã hoàn thành", - thoiGianBatDau: "08:00 - 01/11/2025", - thoiGianKetThuc: "12:30 - 01/11/2025", - viTriHaThu: "16°12'34\"N 107°56'12\"E", - viTriThuLuoi: "16°13'45\"N 107°57'23\"E", - doSauHaThu: "45m", - doSauThuLuoi: "48m", - catchList: [ - { - fish_species_id: 3, - fish_name: "Cá chim trắng", - catch_number: 978, - catch_unit: "kg", - fish_size: 111, - fish_rarity: 2, - fish_condition: "Chết", - gear_usage: "", - }, - { - fish_species_id: 13, - fish_name: "Cá song đỏ", - catch_number: 1061, - catch_unit: "kg", - fish_size: 154, - fish_rarity: 2, - fish_condition: "Còn sống", - gear_usage: "", - }, - { - fish_species_id: 15, - fish_name: "Cá hồng", - catch_number: 613, - catch_unit: "kg", - fish_size: 199, - fish_rarity: 2, - fish_condition: "Còn sống", - gear_usage: "", - }, - ], - ghiChu: "Thời tiết tốt, sản lượng cao", - }, - { - id: "2", - stt: "Mẻ 2", - trangThai: "Đã hoàn thành", - thoiGianBatDau: "14:00 - 31/10/2025", - thoiGianKetThuc: "18:45 - 31/10/2025", - viTriHaThu: "16°10'20\"N 107°54'30\"E", - viTriThuLuoi: "16°11'30\"N 107°55'40\"E", - doSauHaThu: "40m", - doSauThuLuoi: "42m", - catchList: [ - { - fish_species_id: 2, - fish_name: "Cá nục", - catch_number: 1102, - catch_unit: "kg", - fish_size: 12, - fish_rarity: 1, - fish_condition: "Bị thương", - gear_usage: "", - }, - { - fish_species_id: 11, - fish_name: "Cá ngừ đại dương", - catch_number: 828, - catch_unit: "kg", - fish_size: 120, - fish_rarity: 1, - fish_condition: "Chết", - gear_usage: "", - }, - ], - ghiChu: "Biển động nhẹ", - }, - { - id: "3", - stt: "Mẻ 1", - trangThai: "Đã hoàn thành", - thoiGianBatDau: "06:30 - 31/10/2025", - thoiGianKetThuc: "11:00 - 31/10/2025", - viTriHaThu: "16°08'15\"N 107°52'45\"E", - viTriThuLuoi: "16°09'25\"N 107°53'55\"E", - doSauHaThu: "35m", - doSauThuLuoi: "38m", - catchList: [ - { - fish_species_id: 6, - fish_name: "Cá mú trắng", - catch_number: 1620, - catch_unit: "kg", - fish_size: 75, - fish_rarity: 2, - fish_condition: "Chết", - gear_usage: "", - }, - { - fish_species_id: 8, - fish_name: "Cá hồng phớn", - catch_number: 648, - catch_unit: "kg", - fish_size: 25, - fish_rarity: 3, - fish_condition: "Còn sống", - gear_usage: "Lưới rê", - }, - { - fish_species_id: 9, - fish_name: "Cá hổ Napoleon", - catch_number: 1111, - catch_unit: "kg", - fish_size: 86, - fish_rarity: 4, - fish_condition: "Bị thương", - gear_usage: "Lưới rê", - }, - { - fish_species_id: 17, - fish_name: "Cá nược", - catch_number: 1081, - catch_unit: "kg", - fish_size: 195, - fish_rarity: 1, - fish_condition: "Chết", - gear_usage: "", - }, - { - fish_species_id: 18, - fish_name: "Cá đuối quạt", - catch_number: 1198, - catch_unit: "kg", - fish_size: 21, - fish_rarity: 4, - fish_condition: "Chết", - gear_usage: "Câu tay", - }, - ], - ghiChu: "Mẻ lưới đầu tiên, sản lượng tốt", - }, -]; - const NetListTable: React.FC = () => { const [collapsed, setCollapsed] = useState(true); const [contentHeight, setContentHeight] = useState(0); const animatedHeight = useRef(new Animated.Value(0)).current; const [modalVisible, setModalVisible] = useState(false); - const [selectedNet, setSelectedNet] = useState(null); + const [selectedNet, setSelectedNet] = useState(null); + const { trip } = useTrip(); + const data: Model.FishingLog[] = trip?.fishing_logs ?? []; const tongSoMe = data.length; const handleToggle = () => { @@ -199,7 +26,7 @@ const NetListTable: React.FC = () => { }; const handleStatusPress = (id: string) => { - const net = data.find((item) => item.id === id); + const net = data.find((item) => item.fishing_log_id === id); if (net) { setSelectedNet(net); setModalVisible(true); @@ -240,16 +67,20 @@ const NetListTable: React.FC = () => { {/* Body */} - {data.map((item) => ( - + {data.map((item, index) => ( + {/* Cột STT */} - {item.stt} + Mẻ {index + 1} {/* Cột Trạng thái */} - handleStatusPress(item.id)}> - {item.trangThai} + handleStatusPress(item.fishing_log_id)} + > + + {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"} + @@ -265,16 +96,20 @@ const NetListTable: React.FC = () => { {/* Body */} - {data.map((item) => ( - + {data.map((item, index) => ( + {/* Cột STT */} - {item.stt} + Mẻ {index + 1} {/* Cột Trạng thái */} - handleStatusPress(item.id)}> - {item.trangThai} + handleStatusPress(item.fishing_log_id)} + > + + {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"} + @@ -289,6 +124,13 @@ const NetListTable: React.FC = () => { setModalVisible(false); }} netData={selectedNet} + stt={ + selectedNet + ? data.findIndex( + (item) => item.fishing_log_id === selectedNet.fishing_log_id + ) + 1 + : undefined + } /> ); diff --git a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx b/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx index ceaf2f0..dd5719d 100644 --- a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx +++ b/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx @@ -14,38 +14,11 @@ import { FishCardList } from "./components/FishCardList"; import { InfoSection } from "./components/InfoSection"; import { NotesSection } from "./components/NotesSection"; -// --------------------------- -// 🧩 Interface -// --------------------------- -interface FishCatch { - fish_species_id: number; - fish_name: string; - catch_number: number; - catch_unit: string; - fish_size: number; - fish_rarity: number; - fish_condition: string; - gear_usage: string; -} - -interface NetDetail { - id: string; - stt: string; - trangThai: string; - thoiGianBatDau?: string; - thoiGianKetThuc?: string; - viTriHaThu?: string; - viTriThuLuoi?: string; - doSauHaThu?: string; - doSauThuLuoi?: string; - catchList?: FishCatch[]; - ghiChu?: string; -} - interface NetDetailModalProps { visible: boolean; onClose: () => void; - netData: NetDetail | null; + netData: Model.FishingLog | null; + stt?: number; } // --------------------------- @@ -55,9 +28,12 @@ const NetDetailModal: React.FC = ({ visible, onClose, netData, + stt, }) => { const [isEditing, setIsEditing] = useState(false); - const [editableCatchList, setEditableCatchList] = useState([]); + const [editableCatchList, setEditableCatchList] = useState< + Model.FishingLogInfo[] + >([]); const [selectedFishIndex, setSelectedFishIndex] = useState( null ); @@ -74,8 +50,8 @@ const NetDetailModal: React.FC = ({ // Khởi tạo dữ liệu khi netData thay đổi React.useEffect(() => { - if (netData?.catchList) { - setEditableCatchList(netData.catchList); + if (netData?.info) { + setEditableCatchList(netData.info); } }, [netData]); @@ -93,7 +69,7 @@ const NetDetailModal: React.FC = ({ // if (!netData) return null; - const isCompleted = netData?.trangThai === "Đã hoàn thành"; + const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành // Danh sách tên cá có sẵn const fishNameOptions = [ @@ -210,7 +186,7 @@ const NetDetailModal: React.FC = ({ const handleCancel = () => { setIsEditing(false); - setEditableCatchList(netData?.catchList || []); + setEditableCatchList(netData?.info || []); }; const handleToggleExpanded = (index: number) => { @@ -221,7 +197,7 @@ const NetDetailModal: React.FC = ({ const updateCatchItem = ( index: number, - field: keyof FishCatch, + field: keyof Model.FishingLogInfo, value: string | number ) => { setEditableCatchList((prev) => @@ -245,7 +221,7 @@ const NetDetailModal: React.FC = ({ }; const handleAddNewFish = () => { - const newFish: FishCatch = { + const newFish: Model.FishingLogInfo = { fish_species_id: 0, fish_name: "", catch_number: 0, @@ -289,7 +265,8 @@ const NetDetailModal: React.FC = ({ // Chỉ tính tổng số lượng cá có đơn vị là 'kg' const totalCatch = editableCatchList.reduce( - (sum, item) => (item.catch_unit === "kg" ? sum + item.catch_number : sum), + (sum, item) => + item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum, 0 ); @@ -346,6 +323,7 @@ const NetDetailModal: React.FC = ({ {/* Danh sách cá bắt được */} @@ -375,7 +353,7 @@ const NetDetailModal: React.FC = ({ /> {/* Ghi chú */} - + diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx index 3ccd479..61e52bf 100644 --- a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx +++ b/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx @@ -3,19 +3,8 @@ import { Text, TextInput, View } from "react-native"; import styles from "../../style/NetDetailModal.styles"; import { FishSelectDropdown } from "./FishSelectDropdown"; -interface FishCatch { - fish_species_id: number; - fish_name: string; - catch_number: number; - catch_unit: string; - fish_size: number; - fish_rarity: number; - fish_condition: string; - gear_usage: string; -} - interface FishCardFormProps { - fish: FishCatch; + fish: Model.FishingLogInfo; index: number; isEditing: boolean; fishNameOptions: string[]; @@ -32,7 +21,7 @@ interface FishCardFormProps { // setSelectedGearIndex: (index: number | null) => void; onUpdateCatchItem: ( index: number, - field: keyof FishCatch, + field: keyof Model.FishingLogInfo, value: string | number ) => void; } @@ -65,7 +54,7 @@ export const FishCardForm: React.FC = ({ {isEditing ? ( setSelectedFishIndex(selectedFishIndex === index ? null : index) @@ -110,7 +99,7 @@ export const FishCardForm: React.FC = ({ {isEditing ? ( setSelectedUnitIndex(selectedUnitIndex === index ? null : index) diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx index af0d6c9..4391153 100644 --- a/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx +++ b/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx @@ -2,19 +2,8 @@ import React from "react"; import { Text, View } from "react-native"; import styles from "../../style/NetDetailModal.styles"; -interface FishCatch { - fish_species_id: number; - fish_name: string; - catch_number: number; - catch_unit: string; - fish_size: number; - fish_rarity: number; - fish_condition: string; - gear_usage: string; -} - interface FishCardHeaderProps { - fish: FishCatch; + fish: Model.FishingLogInfo; } export const FishCardHeader: React.FC = ({ fish }) => { diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx index 780c8ab..1015ffb 100644 --- a/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx +++ b/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx @@ -5,19 +5,8 @@ import styles from "../../style/NetDetailModal.styles"; import { FishCardForm } from "./FishCardForm"; import { FishCardHeader } from "./FishCardHeader"; -interface FishCatch { - fish_species_id: number; - fish_name: string; - catch_number: number; - catch_unit: string; - fish_size: number; - fish_rarity: number; - fish_condition: string; - gear_usage: string; -} - interface FishCardListProps { - catchList: FishCatch[]; + catchList: Model.FishingLogInfo[]; isEditing: boolean; expandedFishIndex: number[]; selectedFishIndex: number | null; @@ -31,7 +20,7 @@ interface FishCardListProps { onToggleExpanded: (index: number) => void; onUpdateCatchItem: ( index: number, - field: keyof FishCatch, + field: keyof Model.FishingLogInfo, value: string | number ) => void; setSelectedFishIndex: (index: number | null) => void; diff --git a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx b/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx index d53430d..f04d6f5 100644 --- a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx +++ b/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx @@ -17,31 +17,37 @@ interface NetDetail { } interface InfoSectionProps { - netData?: NetDetail; + netData?: Model.FishingLog; isCompleted: boolean; + stt?: number; } export const InfoSection: React.FC = ({ netData, isCompleted, + stt, }) => { if (!netData) { return null; } const infoItems = [ - { label: "Số thứ tự", value: netData.stt }, + { label: "Số thứ tự", value: `Mẻ ${stt}` }, { label: "Trạng thái", - value: netData.trangThai, + value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành", isStatus: true, }, { label: "Thời gian bắt đầu", - value: netData.thoiGianBatDau || "Chưa cập nhật", + value: netData.start_at + ? new Date(netData.start_at).toLocaleString() + : "Chưa cập nhật", }, { label: "Thời gian kết thúc", - value: netData.thoiGianKetThuc || "Chưa cập nhật", + value: netData.start_at + ? new Date(netData.end_at).toLocaleString() + : "Chưa cập nhật", }, { label: "Vị trí hạ thu", @@ -70,7 +76,7 @@ export const InfoSection: React.FC = ({ = ({