update NetDetailModal
This commit is contained in:
@@ -128,7 +128,7 @@ const CrewListTable: React.FC = () => {
|
|||||||
<Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
|
<Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
|
||||||
)}
|
)}
|
||||||
<IconSymbol
|
<IconSymbol
|
||||||
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||||
size={16}
|
size={16}
|
||||||
color="#000"
|
color="#000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const FishingToolsTable: React.FC = () => {
|
|||||||
<Text style={styles.title}>Danh sách ngư cụ</Text>
|
<Text style={styles.title}>Danh sách ngư cụ</Text>
|
||||||
{collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
|
{collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
|
||||||
<IconSymbol
|
<IconSymbol
|
||||||
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||||
size={16}
|
size={16}
|
||||||
color="#000"
|
color="#000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
||||||
import NetDetailModal from "./modal/NetDetailModal";
|
import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
|
||||||
import styles from "./style/NetListTable.styles";
|
import styles from "./style/NetListTable.styles";
|
||||||
|
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
@@ -217,7 +217,7 @@ const NetListTable: React.FC = () => {
|
|||||||
<Text style={styles.title}>Danh sách mẻ lưới</Text>
|
<Text style={styles.title}>Danh sách mẻ lưới</Text>
|
||||||
{collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
|
{collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
|
||||||
<IconSymbol
|
<IconSymbol
|
||||||
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||||
size={16}
|
size={16}
|
||||||
color="#000"
|
color="#000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ const TripCostTable: React.FC = () => {
|
|||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
<IconSymbol
|
<IconSymbol
|
||||||
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||||
size={15}
|
size={15}
|
||||||
color="#000000"
|
color="#000000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,515 +0,0 @@
|
|||||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
Modal,
|
|
||||||
ScrollView,
|
|
||||||
Text,
|
|
||||||
TextInput,
|
|
||||||
TouchableOpacity,
|
|
||||||
View,
|
|
||||||
} from "react-native";
|
|
||||||
import styles from "./style/NetDetailModal.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 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------
|
|
||||||
// 🧵 Component Modal
|
|
||||||
// ---------------------------
|
|
||||||
const NetDetailModal: React.FC<NetDetailModalProps> = ({
|
|
||||||
visible,
|
|
||||||
onClose,
|
|
||||||
netData,
|
|
||||||
}) => {
|
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
|
||||||
const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
|
|
||||||
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [selectedConditionIndex, setSelectedConditionIndex] = useState<
|
|
||||||
number | null
|
|
||||||
>(null);
|
|
||||||
|
|
||||||
// Khởi tạo dữ liệu khi netData thay đổi
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (netData?.catchList) {
|
|
||||||
setEditableCatchList(netData.catchList);
|
|
||||||
}
|
|
||||||
}, [netData]);
|
|
||||||
|
|
||||||
if (!netData) return null;
|
|
||||||
|
|
||||||
const isCompleted = netData.trangThai === "Đã hoàn thành";
|
|
||||||
|
|
||||||
// Danh sách tên cá có sẵn
|
|
||||||
const fishNameOptions = [
|
|
||||||
"Cá chim trắng",
|
|
||||||
"Cá song đỏ",
|
|
||||||
"Cá hồng",
|
|
||||||
"Cá nục",
|
|
||||||
"Cá ngừ đại dương",
|
|
||||||
"Cá mú trắng",
|
|
||||||
"Cá hồng phớn",
|
|
||||||
"Cá hổ Napoleon",
|
|
||||||
"Cá nược",
|
|
||||||
"Cá đuối quạt",
|
|
||||||
];
|
|
||||||
|
|
||||||
// Danh sách đơn vị
|
|
||||||
const unitOptions = ["kg", "con", "tấn"];
|
|
||||||
|
|
||||||
// Danh sách tình trạng
|
|
||||||
const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
setIsEditing(!isEditing);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
setIsEditing(false);
|
|
||||||
// TODO: Save data to backend
|
|
||||||
console.log("Saved catch list:", editableCatchList);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
setIsEditing(false);
|
|
||||||
setEditableCatchList(netData.catchList || []);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateCatchItem = (
|
|
||||||
index: number,
|
|
||||||
field: keyof FishCatch,
|
|
||||||
value: string | number
|
|
||||||
) => {
|
|
||||||
setEditableCatchList((prev) =>
|
|
||||||
prev.map((item, i) => {
|
|
||||||
if (i === index) {
|
|
||||||
const updatedItem = { ...item };
|
|
||||||
if (
|
|
||||||
field === "catch_number" ||
|
|
||||||
field === "fish_size" ||
|
|
||||||
field === "fish_rarity"
|
|
||||||
) {
|
|
||||||
updatedItem[field] = Number(value) || 0;
|
|
||||||
} else {
|
|
||||||
updatedItem[field] = value as never;
|
|
||||||
}
|
|
||||||
return updatedItem;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const totalCatch = editableCatchList.reduce(
|
|
||||||
(sum, item) => sum + item.catch_number,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
const infoItems = [
|
|
||||||
{ label: "Số thứ tự", value: netData.stt },
|
|
||||||
{
|
|
||||||
label: "Trạng thái",
|
|
||||||
value: netData.trangThai,
|
|
||||||
isStatus: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Thời gian bắt đầu",
|
|
||||||
value: netData.thoiGianBatDau || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Thời gian kết thúc",
|
|
||||||
value: netData.thoiGianKetThuc || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Vị trí hạ thu",
|
|
||||||
value: netData.viTriHaThu || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Vị trí thu lưới",
|
|
||||||
value: netData.viTriThuLuoi || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Độ sâu hạ thu",
|
|
||||||
value: netData.doSauHaThu || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Độ sâu thu lưới",
|
|
||||||
value: netData.doSauThuLuoi || "Chưa cập nhật",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
visible={visible}
|
|
||||||
animationType="slide"
|
|
||||||
presentationStyle="pageSheet"
|
|
||||||
onRequestClose={onClose}
|
|
||||||
>
|
|
||||||
<View style={styles.container}>
|
|
||||||
{/* Header */}
|
|
||||||
<View style={styles.header}>
|
|
||||||
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
|
|
||||||
<View style={styles.headerButtons}>
|
|
||||||
{isEditing ? (
|
|
||||||
<>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={handleCancel}
|
|
||||||
style={styles.cancelButton}
|
|
||||||
>
|
|
||||||
<Text style={styles.cancelButtonText}>Hủy</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={handleSave}
|
|
||||||
style={styles.saveButton}
|
|
||||||
>
|
|
||||||
<Text style={styles.saveButtonText}>Lưu</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
|
|
||||||
<View style={styles.editIconButton}>
|
|
||||||
<IconSymbol
|
|
||||||
name="pencil"
|
|
||||||
size={28}
|
|
||||||
color="#fff"
|
|
||||||
weight="heavy"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)}
|
|
||||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
||||||
<View style={styles.closeIconButton}>
|
|
||||||
<IconSymbol name="xmark" size={28} color="#fff" />
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<ScrollView style={styles.content}>
|
|
||||||
{/* Thông tin chung */}
|
|
||||||
<View style={styles.infoCard}>
|
|
||||||
{infoItems.map((item, index) => (
|
|
||||||
<View key={index} style={styles.infoRow}>
|
|
||||||
<Text style={styles.infoLabel}>{item.label}</Text>
|
|
||||||
{item.isStatus ? (
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.statusBadge,
|
|
||||||
isCompleted
|
|
||||||
? styles.statusBadgeCompleted
|
|
||||||
: styles.statusBadgeInProgress,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.statusBadgeText,
|
|
||||||
isCompleted
|
|
||||||
? styles.statusBadgeTextCompleted
|
|
||||||
: styles.statusBadgeTextInProgress,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{item.value}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{item.value}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Danh sách cá bắt được */}
|
|
||||||
<View style={styles.sectionHeader}>
|
|
||||||
<Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
|
|
||||||
<Text style={styles.totalCatchText}>
|
|
||||||
Tổng: {totalCatch.toLocaleString()} kg
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{editableCatchList.map((fish, index) => (
|
|
||||||
<View key={index} style={styles.fishCard}>
|
|
||||||
{/* Tên cá - Select */}
|
|
||||||
<View style={[styles.fieldGroup, { zIndex: 1000 - index }]}>
|
|
||||||
<Text style={styles.label}>Tên cá</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<View style={{ zIndex: 1000 - index }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.selectButton}
|
|
||||||
onPress={() =>
|
|
||||||
setSelectedFishIndex(
|
|
||||||
selectedFishIndex === index ? null : index
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Text style={styles.selectButtonText}>
|
|
||||||
{fish.fish_name}
|
|
||||||
</Text>
|
|
||||||
<IconSymbol
|
|
||||||
name={
|
|
||||||
selectedFishIndex === index
|
|
||||||
? "chevron.up"
|
|
||||||
: "chevron.down"
|
|
||||||
}
|
|
||||||
size={16}
|
|
||||||
color="#666"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{selectedFishIndex === index && (
|
|
||||||
<ScrollView
|
|
||||||
style={styles.optionsList}
|
|
||||||
nestedScrollEnabled={true}
|
|
||||||
>
|
|
||||||
{fishNameOptions.map((option, optIndex) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={optIndex}
|
|
||||||
style={styles.optionItem}
|
|
||||||
onPress={() => {
|
|
||||||
updateCatchItem(index, "fish_name", option);
|
|
||||||
setSelectedFishIndex(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={styles.optionText}>{option}</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</ScrollView>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_name}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Số lượng & Đơn vị */}
|
|
||||||
<View style={styles.rowGroup}>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
|
||||||
<Text style={styles.label}>Số lượng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.catch_number)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
updateCatchItem(index, "catch_number", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="0"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.catch_number}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.fieldGroup,
|
|
||||||
{ flex: 1, marginLeft: 8, zIndex: 900 - index },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Text style={styles.label}>Đơn vị</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<View style={{ zIndex: 900 - index }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.selectButton}
|
|
||||||
onPress={() =>
|
|
||||||
setSelectedUnitIndex(
|
|
||||||
selectedUnitIndex === index ? null : index
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Text style={styles.selectButtonText}>
|
|
||||||
{fish.catch_unit}
|
|
||||||
</Text>
|
|
||||||
<IconSymbol
|
|
||||||
name={
|
|
||||||
selectedUnitIndex === index
|
|
||||||
? "chevron.up"
|
|
||||||
: "chevron.down"
|
|
||||||
}
|
|
||||||
size={16}
|
|
||||||
color="#666"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{selectedUnitIndex === index && (
|
|
||||||
<ScrollView
|
|
||||||
style={styles.optionsList}
|
|
||||||
nestedScrollEnabled={true}
|
|
||||||
>
|
|
||||||
{unitOptions.map((option, optIndex) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={optIndex}
|
|
||||||
style={styles.optionItem}
|
|
||||||
onPress={() => {
|
|
||||||
updateCatchItem(index, "catch_unit", option);
|
|
||||||
setSelectedUnitIndex(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={styles.optionText}>{option}</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</ScrollView>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.catch_unit}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Kích thước & Độ hiếm */}
|
|
||||||
<View style={styles.rowGroup}>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
|
||||||
<Text style={styles.label}>Kích thước (cm)</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.fish_size)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
updateCatchItem(index, "fish_size", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="0"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_size} cm</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
|
|
||||||
<Text style={styles.label}>Độ hiếm</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.fish_rarity)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
updateCatchItem(index, "fish_rarity", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="1-5"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_rarity}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Tình trạng */}
|
|
||||||
<View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
|
|
||||||
<Text style={styles.label}>Tình trạng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<View style={{ zIndex: 800 - index }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.selectButton}
|
|
||||||
onPress={() =>
|
|
||||||
setSelectedConditionIndex(
|
|
||||||
selectedConditionIndex === index ? null : index
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Text style={styles.selectButtonText}>
|
|
||||||
{fish.fish_condition}
|
|
||||||
</Text>
|
|
||||||
<IconSymbol
|
|
||||||
name={
|
|
||||||
selectedConditionIndex === index
|
|
||||||
? "chevron.up"
|
|
||||||
: "chevron.down"
|
|
||||||
}
|
|
||||||
size={16}
|
|
||||||
color="#666"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{selectedConditionIndex === index && (
|
|
||||||
<ScrollView
|
|
||||||
style={styles.optionsStatusFishList}
|
|
||||||
nestedScrollEnabled={true}
|
|
||||||
>
|
|
||||||
{conditionOptions.map((option, optIndex) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={optIndex}
|
|
||||||
style={styles.optionItem}
|
|
||||||
onPress={() => {
|
|
||||||
updateCatchItem(index, "fish_condition", option);
|
|
||||||
setSelectedConditionIndex(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={styles.optionText}>{option}</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</ScrollView>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_condition}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Ngư cụ sử dụng */}
|
|
||||||
<View style={styles.fieldGroup}>
|
|
||||||
<Text style={styles.label}>Ngư cụ sử dụng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={fish.gear_usage}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
updateCatchItem(index, "gear_usage", value)
|
|
||||||
}
|
|
||||||
placeholder="Nhập ngư cụ..."
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>
|
|
||||||
{fish.gear_usage || "Không có"}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Ghi chú */}
|
|
||||||
{netData.ghiChu && (
|
|
||||||
<View style={styles.infoCard}>
|
|
||||||
<View style={styles.infoRow}>
|
|
||||||
<Text style={styles.infoLabel}>Ghi chú</Text>
|
|
||||||
<Text style={styles.infoValue}>{netData.ghiChu}</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NetDetailModal;
|
|
||||||
238
components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
Normal file
238
components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||||
|
import styles from "../style/NetDetailModal.styles";
|
||||||
|
import { CatchSectionHeader } from "./components/CatchSectionHeader";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// 🧵 Component Modal
|
||||||
|
// ---------------------------
|
||||||
|
const NetDetailModal: React.FC<NetDetailModalProps> = ({
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
netData,
|
||||||
|
}) => {
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
|
||||||
|
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const [selectedConditionIndex, setSelectedConditionIndex] = useState<
|
||||||
|
number | null
|
||||||
|
>(null);
|
||||||
|
const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
|
||||||
|
|
||||||
|
// Khởi tạo dữ liệu khi netData thay đổi
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (netData?.catchList) {
|
||||||
|
setEditableCatchList(netData.catchList);
|
||||||
|
}
|
||||||
|
}, [netData]);
|
||||||
|
|
||||||
|
// Reset state khi modal đóng
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!visible) {
|
||||||
|
setExpandedFishIndices([]);
|
||||||
|
setSelectedFishIndex(null);
|
||||||
|
setSelectedUnitIndex(null);
|
||||||
|
setSelectedConditionIndex(null);
|
||||||
|
setIsEditing(false);
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
if (!netData) return null;
|
||||||
|
|
||||||
|
const isCompleted = netData.trangThai === "Đã hoàn thành";
|
||||||
|
|
||||||
|
// Danh sách tên cá có sẵn
|
||||||
|
const fishNameOptions = [
|
||||||
|
"Cá chim trắng",
|
||||||
|
"Cá song đỏ",
|
||||||
|
"Cá hồng",
|
||||||
|
"Cá nục",
|
||||||
|
"Cá ngừ đại dương",
|
||||||
|
"Cá mú trắng",
|
||||||
|
"Cá hồng phớn",
|
||||||
|
"Cá hổ Napoleon",
|
||||||
|
"Cá nược",
|
||||||
|
"Cá đuối quạt",
|
||||||
|
];
|
||||||
|
|
||||||
|
// Danh sách đơn vị
|
||||||
|
const unitOptions = ["kg", "con", "tấn"];
|
||||||
|
|
||||||
|
// Danh sách tình trạng
|
||||||
|
const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
setIsEditing(!isEditing);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
setIsEditing(false);
|
||||||
|
console.log("Saved catch list:", editableCatchList);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setIsEditing(false);
|
||||||
|
setEditableCatchList(netData.catchList || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleExpanded = (index: number) => {
|
||||||
|
setExpandedFishIndices((prev) =>
|
||||||
|
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCatchItem = (
|
||||||
|
index: number,
|
||||||
|
field: keyof FishCatch,
|
||||||
|
value: string | number
|
||||||
|
) => {
|
||||||
|
setEditableCatchList((prev) =>
|
||||||
|
prev.map((item, i) => {
|
||||||
|
if (i === index) {
|
||||||
|
const updatedItem = { ...item };
|
||||||
|
if (
|
||||||
|
field === "catch_number" ||
|
||||||
|
field === "fish_size" ||
|
||||||
|
field === "fish_rarity"
|
||||||
|
) {
|
||||||
|
updatedItem[field] = Number(value) || 0;
|
||||||
|
} else {
|
||||||
|
updatedItem[field] = value as never;
|
||||||
|
}
|
||||||
|
return updatedItem;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalCatch = editableCatchList.reduce(
|
||||||
|
(sum, item) => sum + item.catch_number,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
visible={visible}
|
||||||
|
animationType="slide"
|
||||||
|
presentationStyle="pageSheet"
|
||||||
|
onRequestClose={onClose}
|
||||||
|
>
|
||||||
|
<View style={styles.container}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
|
||||||
|
<View style={styles.headerButtons}>
|
||||||
|
{isEditing ? (
|
||||||
|
<>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={handleCancel}
|
||||||
|
style={styles.cancelButton}
|
||||||
|
>
|
||||||
|
<Text style={styles.cancelButtonText}>Hủy</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={handleSave}
|
||||||
|
style={styles.saveButton}
|
||||||
|
>
|
||||||
|
<Text style={styles.saveButtonText}>Lưu</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
|
||||||
|
<View style={styles.editIconButton}>
|
||||||
|
<IconSymbol
|
||||||
|
name="pencil"
|
||||||
|
size={28}
|
||||||
|
color="#fff"
|
||||||
|
weight="heavy"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
||||||
|
<View style={styles.closeIconButton}>
|
||||||
|
<IconSymbol name="xmark" size={28} color="#fff" />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<ScrollView style={styles.content}>
|
||||||
|
{/* Thông tin chung */}
|
||||||
|
<InfoSection netData={netData} isCompleted={isCompleted} />
|
||||||
|
|
||||||
|
{/* Danh sách cá bắt được */}
|
||||||
|
<CatchSectionHeader totalCatch={totalCatch} />
|
||||||
|
|
||||||
|
{/* Fish cards */}
|
||||||
|
<FishCardList
|
||||||
|
catchList={editableCatchList}
|
||||||
|
isEditing={isEditing}
|
||||||
|
expandedFishIndex={expandedFishIndices}
|
||||||
|
selectedFishIndex={selectedFishIndex}
|
||||||
|
selectedUnitIndex={selectedUnitIndex}
|
||||||
|
selectedConditionIndex={selectedConditionIndex}
|
||||||
|
fishNameOptions={fishNameOptions}
|
||||||
|
unitOptions={unitOptions}
|
||||||
|
conditionOptions={conditionOptions}
|
||||||
|
onToggleExpanded={handleToggleExpanded}
|
||||||
|
onUpdateCatchItem={updateCatchItem}
|
||||||
|
setSelectedFishIndex={setSelectedFishIndex}
|
||||||
|
setSelectedUnitIndex={setSelectedUnitIndex}
|
||||||
|
setSelectedConditionIndex={setSelectedConditionIndex}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Ghi chú */}
|
||||||
|
<NotesSection ghiChu={netData.ghiChu} />
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NetDetailModal;
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Text, View } from "react-native";
|
||||||
|
import styles from "../../style/NetDetailModal.styles";
|
||||||
|
|
||||||
|
interface CatchSectionHeaderProps {
|
||||||
|
totalCatch: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CatchSectionHeader: React.FC<CatchSectionHeaderProps> = ({
|
||||||
|
totalCatch,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
|
||||||
|
<Text style={styles.totalCatchText}>
|
||||||
|
Tổng: {totalCatch.toLocaleString()} kg
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import React from "react";
|
||||||
|
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;
|
||||||
|
index: number;
|
||||||
|
isEditing: boolean;
|
||||||
|
fishNameOptions: string[];
|
||||||
|
unitOptions: string[];
|
||||||
|
conditionOptions: string[];
|
||||||
|
selectedFishIndex: number | null;
|
||||||
|
selectedUnitIndex: number | null;
|
||||||
|
selectedConditionIndex: number | null;
|
||||||
|
setSelectedFishIndex: (index: number | null) => void;
|
||||||
|
setSelectedUnitIndex: (index: number | null) => void;
|
||||||
|
setSelectedConditionIndex: (index: number | null) => void;
|
||||||
|
onUpdateCatchItem: (
|
||||||
|
index: number,
|
||||||
|
field: keyof FishCatch,
|
||||||
|
value: string | number
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FishCardForm: React.FC<FishCardFormProps> = ({
|
||||||
|
fish,
|
||||||
|
index,
|
||||||
|
isEditing,
|
||||||
|
fishNameOptions,
|
||||||
|
unitOptions,
|
||||||
|
conditionOptions,
|
||||||
|
selectedFishIndex,
|
||||||
|
selectedUnitIndex,
|
||||||
|
selectedConditionIndex,
|
||||||
|
setSelectedFishIndex,
|
||||||
|
setSelectedUnitIndex,
|
||||||
|
setSelectedConditionIndex,
|
||||||
|
onUpdateCatchItem,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Tên cá - Select */}
|
||||||
|
<View
|
||||||
|
style={[styles.fieldGroup, { zIndex: 1000 - index }, { marginTop: 15 }]}
|
||||||
|
>
|
||||||
|
<Text style={styles.label}>Tên cá</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<FishSelectDropdown
|
||||||
|
options={fishNameOptions}
|
||||||
|
selectedValue={fish.fish_name}
|
||||||
|
isOpen={selectedFishIndex === index}
|
||||||
|
onToggle={() =>
|
||||||
|
setSelectedFishIndex(selectedFishIndex === index ? null : index)
|
||||||
|
}
|
||||||
|
onSelect={(value: string) => {
|
||||||
|
onUpdateCatchItem(index, "fish_name", value);
|
||||||
|
setSelectedFishIndex(null);
|
||||||
|
}}
|
||||||
|
zIndex={1000 - index}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.fish_name}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Số lượng & Đơn vị */}
|
||||||
|
<View style={styles.rowGroup}>
|
||||||
|
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
||||||
|
<Text style={styles.label}>Số lượng</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={String(fish.catch_number)}
|
||||||
|
onChangeText={(value) =>
|
||||||
|
onUpdateCatchItem(index, "catch_number", value)
|
||||||
|
}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="0"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.catch_number}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.fieldGroup,
|
||||||
|
{ flex: 1, marginLeft: 8, zIndex: 900 - index },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Text style={styles.label}>Đơn vị</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<FishSelectDropdown
|
||||||
|
options={unitOptions}
|
||||||
|
selectedValue={fish.catch_unit}
|
||||||
|
isOpen={selectedUnitIndex === index}
|
||||||
|
onToggle={() =>
|
||||||
|
setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
|
||||||
|
}
|
||||||
|
onSelect={(value: string) => {
|
||||||
|
onUpdateCatchItem(index, "catch_unit", value);
|
||||||
|
setSelectedUnitIndex(null);
|
||||||
|
}}
|
||||||
|
zIndex={900 - index}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.catch_unit}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Kích thước & Độ hiếm */}
|
||||||
|
<View style={styles.rowGroup}>
|
||||||
|
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
||||||
|
<Text style={styles.label}>Kích thước (cm)</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={String(fish.fish_size)}
|
||||||
|
onChangeText={(value) =>
|
||||||
|
onUpdateCatchItem(index, "fish_size", value)
|
||||||
|
}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="0"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.fish_size} cm</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
|
||||||
|
<Text style={styles.label}>Độ hiếm</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={String(fish.fish_rarity)}
|
||||||
|
onChangeText={(value) =>
|
||||||
|
onUpdateCatchItem(index, "fish_rarity", value)
|
||||||
|
}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="1-5"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.fish_rarity}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Tình trạng */}
|
||||||
|
<View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
|
||||||
|
<Text style={styles.label}>Tình trạng</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<FishSelectDropdown
|
||||||
|
options={conditionOptions}
|
||||||
|
selectedValue={fish.fish_condition}
|
||||||
|
isOpen={selectedConditionIndex === index}
|
||||||
|
onToggle={() =>
|
||||||
|
setSelectedConditionIndex(
|
||||||
|
selectedConditionIndex === index ? null : index
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onSelect={(value: string) => {
|
||||||
|
onUpdateCatchItem(index, "fish_condition", value);
|
||||||
|
setSelectedConditionIndex(null);
|
||||||
|
}}
|
||||||
|
zIndex={800 - index}
|
||||||
|
styleOverride={styles.optionsStatusFishList}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.fish_condition}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Ngư cụ sử dụng */}
|
||||||
|
<View style={styles.fieldGroup}>
|
||||||
|
<Text style={styles.label}>Ngư cụ sử dụng</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={fish.gear_usage}
|
||||||
|
onChangeText={(value) =>
|
||||||
|
onUpdateCatchItem(index, "gear_usage", value)
|
||||||
|
}
|
||||||
|
placeholder="Nhập ngư cụ..."
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {
|
||||||
|
return (
|
||||||
|
<View style={styles.fishCardHeaderContent}>
|
||||||
|
<Text style={styles.fishCardTitle}>{fish.fish_name}:</Text>
|
||||||
|
<Text style={styles.fishCardSubtitle}>
|
||||||
|
{fish.catch_number} {fish.catch_unit}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
|
import React from "react";
|
||||||
|
import { TouchableOpacity, View } from "react-native";
|
||||||
|
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[];
|
||||||
|
isEditing: boolean;
|
||||||
|
expandedFishIndex: number[];
|
||||||
|
selectedFishIndex: number | null;
|
||||||
|
selectedUnitIndex: number | null;
|
||||||
|
selectedConditionIndex: number | null;
|
||||||
|
fishNameOptions: string[];
|
||||||
|
unitOptions: string[];
|
||||||
|
conditionOptions: string[];
|
||||||
|
onToggleExpanded: (index: number) => void;
|
||||||
|
onUpdateCatchItem: (
|
||||||
|
index: number,
|
||||||
|
field: keyof FishCatch,
|
||||||
|
value: string | number
|
||||||
|
) => void;
|
||||||
|
setSelectedFishIndex: (index: number | null) => void;
|
||||||
|
setSelectedUnitIndex: (index: number | null) => void;
|
||||||
|
setSelectedConditionIndex: (index: number | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FishCardList: React.FC<FishCardListProps> = ({
|
||||||
|
catchList,
|
||||||
|
isEditing,
|
||||||
|
expandedFishIndex,
|
||||||
|
selectedFishIndex,
|
||||||
|
selectedUnitIndex,
|
||||||
|
selectedConditionIndex,
|
||||||
|
fishNameOptions,
|
||||||
|
unitOptions,
|
||||||
|
conditionOptions,
|
||||||
|
onToggleExpanded,
|
||||||
|
onUpdateCatchItem,
|
||||||
|
setSelectedFishIndex,
|
||||||
|
setSelectedUnitIndex,
|
||||||
|
setSelectedConditionIndex,
|
||||||
|
}) => {
|
||||||
|
// Chuyển về logic đơn giản, không animation
|
||||||
|
const handleToggleCard = (index: number) => {
|
||||||
|
onToggleExpanded(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{catchList.map((fish, index) => (
|
||||||
|
<View key={index} style={styles.fishCard}>
|
||||||
|
{/* Chevron button - always on top */}
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
zIndex: 9999,
|
||||||
|
padding: 8,
|
||||||
|
}}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => handleToggleCard(index)}
|
||||||
|
style={[styles.chevronIconRight, { zIndex: 9999 }]}
|
||||||
|
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<IconSymbol
|
||||||
|
name={
|
||||||
|
expandedFishIndex.includes(index)
|
||||||
|
? "chevron.up"
|
||||||
|
: "chevron.down"
|
||||||
|
}
|
||||||
|
size={24}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Header - Only visible when collapsed */}
|
||||||
|
{!expandedFishIndex.includes(index) && <FishCardHeader fish={fish} />}
|
||||||
|
|
||||||
|
{/* Form - Only show when expanded */}
|
||||||
|
{expandedFishIndex.includes(index) && (
|
||||||
|
<FishCardForm
|
||||||
|
fish={fish}
|
||||||
|
index={index}
|
||||||
|
isEditing={isEditing}
|
||||||
|
fishNameOptions={fishNameOptions}
|
||||||
|
unitOptions={unitOptions}
|
||||||
|
conditionOptions={conditionOptions}
|
||||||
|
selectedFishIndex={selectedFishIndex}
|
||||||
|
selectedUnitIndex={selectedUnitIndex}
|
||||||
|
selectedConditionIndex={selectedConditionIndex}
|
||||||
|
setSelectedFishIndex={setSelectedFishIndex}
|
||||||
|
setSelectedUnitIndex={setSelectedUnitIndex}
|
||||||
|
setSelectedConditionIndex={setSelectedConditionIndex}
|
||||||
|
onUpdateCatchItem={onUpdateCatchItem}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
|
import React from "react";
|
||||||
|
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||||
|
import styles from "../../style/NetDetailModal.styles";
|
||||||
|
|
||||||
|
interface FishSelectDropdownProps {
|
||||||
|
options: string[];
|
||||||
|
selectedValue: string;
|
||||||
|
isOpen: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
onSelect: (value: string) => void;
|
||||||
|
zIndex: number;
|
||||||
|
styleOverride?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
|
||||||
|
options,
|
||||||
|
selectedValue,
|
||||||
|
isOpen,
|
||||||
|
onToggle,
|
||||||
|
onSelect,
|
||||||
|
zIndex,
|
||||||
|
styleOverride,
|
||||||
|
}) => {
|
||||||
|
const dropdownStyle = styleOverride || styles.optionsList;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ zIndex }}>
|
||||||
|
<TouchableOpacity style={styles.selectButton} onPress={onToggle}>
|
||||||
|
<Text style={styles.selectButtonText}>{selectedValue}</Text>
|
||||||
|
<IconSymbol
|
||||||
|
name={isOpen ? "chevron.up" : "chevron.down"}
|
||||||
|
size={16}
|
||||||
|
color="#666"
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{isOpen && (
|
||||||
|
<ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
|
||||||
|
{options.map((option, optIndex) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={optIndex}
|
||||||
|
style={styles.optionItem}
|
||||||
|
onPress={() => onSelect(option)}
|
||||||
|
>
|
||||||
|
<Text style={styles.optionText}>{option}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</ScrollView>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Text, View } from "react-native";
|
||||||
|
import styles from "../../style/NetDetailModal.styles";
|
||||||
|
|
||||||
|
interface NetDetail {
|
||||||
|
id: string;
|
||||||
|
stt: string;
|
||||||
|
trangThai: string;
|
||||||
|
thoiGianBatDau?: string;
|
||||||
|
thoiGianKetThuc?: string;
|
||||||
|
viTriHaThu?: string;
|
||||||
|
viTriThuLuoi?: string;
|
||||||
|
doSauHaThu?: string;
|
||||||
|
doSauThuLuoi?: string;
|
||||||
|
catchList?: any[];
|
||||||
|
ghiChu?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InfoSectionProps {
|
||||||
|
netData: NetDetail;
|
||||||
|
isCompleted: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const InfoSection: React.FC<InfoSectionProps> = ({
|
||||||
|
netData,
|
||||||
|
isCompleted,
|
||||||
|
}) => {
|
||||||
|
const infoItems = [
|
||||||
|
{ label: "Số thứ tự", value: netData.stt },
|
||||||
|
{
|
||||||
|
label: "Trạng thái",
|
||||||
|
value: netData.trangThai,
|
||||||
|
isStatus: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Thời gian bắt đầu",
|
||||||
|
value: netData.thoiGianBatDau || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Thời gian kết thúc",
|
||||||
|
value: netData.thoiGianKetThuc || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Vị trí hạ thu",
|
||||||
|
value: netData.viTriHaThu || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Vị trí thu lưới",
|
||||||
|
value: netData.viTriThuLuoi || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Độ sâu hạ thu",
|
||||||
|
value: netData.doSauHaThu || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Độ sâu thu lưới",
|
||||||
|
value: netData.doSauThuLuoi || "Chưa cập nhật",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.infoCard}>
|
||||||
|
{infoItems.map((item, index) => (
|
||||||
|
<View key={index} style={styles.infoRow}>
|
||||||
|
<Text style={styles.infoLabel}>{item.label}</Text>
|
||||||
|
{item.isStatus ? (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.statusBadge,
|
||||||
|
isCompleted
|
||||||
|
? styles.statusBadgeCompleted
|
||||||
|
: styles.statusBadgeInProgress,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.statusBadgeText,
|
||||||
|
isCompleted
|
||||||
|
? styles.statusBadgeTextCompleted
|
||||||
|
: styles.statusBadgeTextInProgress,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<Text style={styles.infoValue}>{item.value}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Text, View } from "react-native";
|
||||||
|
import styles from "../../style/NetDetailModal.styles";
|
||||||
|
|
||||||
|
interface NotesSectionProps {
|
||||||
|
ghiChu?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NotesSection: React.FC<NotesSectionProps> = ({ ghiChu }) => {
|
||||||
|
if (!ghiChu) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.infoCard}>
|
||||||
|
<View style={styles.infoRow}>
|
||||||
|
<Text style={styles.infoLabel}>Ghi chú</Text>
|
||||||
|
<Text style={styles.infoValue}>{ghiChu}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export { CatchSectionHeader } from "./CatchSectionHeader";
|
||||||
|
export { FishCardForm } from "./FishCardForm";
|
||||||
|
export { FishCardHeader } from "./FishCardHeader";
|
||||||
|
export { FishCardList } from "./FishCardList";
|
||||||
|
export { FishSelectDropdown } from "./FishSelectDropdown";
|
||||||
|
export { InfoSection } from "./InfoSection";
|
||||||
|
export { NotesSection } from "./NotesSection";
|
||||||
@@ -140,6 +140,7 @@ const styles = StyleSheet.create({
|
|||||||
color: "#007AFF",
|
color: "#007AFF",
|
||||||
},
|
},
|
||||||
fishCard: {
|
fishCard: {
|
||||||
|
position: "relative",
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#fff",
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
padding: 16,
|
padding: 16,
|
||||||
@@ -152,7 +153,7 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
fieldGroup: {
|
fieldGroup: {
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
position: "relative",
|
marginTop: 0,
|
||||||
},
|
},
|
||||||
rowGroup: {
|
rowGroup: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
@@ -231,6 +232,38 @@ const styles = StyleSheet.create({
|
|||||||
shadowRadius: 8,
|
shadowRadius: 8,
|
||||||
shadowOffset: { width: 0, height: 4 },
|
shadowOffset: { width: 0, height: 4 },
|
||||||
},
|
},
|
||||||
|
fishCardHeaderContent: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 5,
|
||||||
|
},
|
||||||
|
chevronIconRight: {
|
||||||
|
position: "absolute",
|
||||||
|
top: 6,
|
||||||
|
right: 12,
|
||||||
|
zIndex: 1000,
|
||||||
|
backgroundColor: "#007AFF",
|
||||||
|
borderRadius: 8,
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
padding: 0,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOpacity: 0.08,
|
||||||
|
shadowRadius: 2,
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
fishCardTitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "600",
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
fishCardSubtitle: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: "#ff6600",
|
||||||
|
marginTop: 0,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default styles;
|
export default styles;
|
||||||
|
|||||||
@@ -23,8 +23,8 @@ const MAPPING = {
|
|||||||
"chevron.right": "chevron-right",
|
"chevron.right": "chevron-right",
|
||||||
"ferry.fill": "directions-boat",
|
"ferry.fill": "directions-boat",
|
||||||
"map.fill": "map",
|
"map.fill": "map",
|
||||||
"arrowshape.down.fill": "arrow-drop-down",
|
"chevron.down": "arrow-drop-down",
|
||||||
"arrowshape.up.fill": "arrow-drop-up",
|
"chevron.up": "arrow-drop-up",
|
||||||
"exclamationmark.triangle.fill": "warning",
|
"exclamationmark.triangle.fill": "warning",
|
||||||
"book.closed.fill": "book",
|
"book.closed.fill": "book",
|
||||||
"dot.radiowaves.left.and.right": "sensors",
|
"dot.radiowaves.left.and.right": "sensors",
|
||||||
|
|||||||
Reference in New Issue
Block a user