tuanta/SeaGateway-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update netDetailModal

Browse Source
This commit is contained in:
MinhNN
2025-11-02 23:39:17 +07:00
parent 5cc760f818
commit 67a80c1498
3 changed files with 927 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

515
components/tripInfo/modal/NetDetailModal.tsx Normal file
View File

@@ -0,0 +1,515 @@
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;

236
components/tripInfo/modal/style/NetDetailModal.styles.ts Normal file
View File

@@ -0,0 +1,236 @@
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f5f5f5",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 20,
paddingTop: 30,
paddingBottom: 16,
backgroundColor: "#fff",
borderBottomWidth: 1,
borderBottomColor: "#eee",
},
title: {
fontSize: 22,
fontWeight: "700",
color: "#000",
flex: 1,
},
closeButton: {
padding: 4,
},
closeIconButton: {
backgroundColor: "#FF3B30",
borderRadius: 10,
padding: 10,
justifyContent: "center",
alignItems: "center",
},
content: {
flex: 1,
padding: 16,
marginBottom: 15,
},
infoCard: {
backgroundColor: "#fff",
borderRadius: 12,
padding: 16,
marginBottom: 35,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
},
infoRow: {
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
},
infoLabel: {
fontSize: 13,
fontWeight: "600",
color: "#666",
marginBottom: 6,
},
infoValue: {
fontSize: 16,
color: "#000",
fontWeight: "500",
},
statusBadge: {
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 8,
alignSelf: "flex-start",
},
statusBadgeCompleted: {
backgroundColor: "#e8f5e9",
},
statusBadgeInProgress: {
backgroundColor: "#fff3e0",
},
statusBadgeText: {
fontSize: 14,
fontWeight: "600",
},
statusBadgeTextCompleted: {
color: "#2e7d32",
},
statusBadgeTextInProgress: {
color: "#f57c00",
},
headerButtons: {
flexDirection: "row",
alignItems: "center",
gap: 12,
},
editButton: {
padding: 4,
},
editIconButton: {
backgroundColor: "#007AFF",
borderRadius: 10,
padding: 10,
justifyContent: "center",
alignItems: "center",
},
cancelButton: {
paddingHorizontal: 12,
paddingVertical: 6,
},
cancelButtonText: {
color: "#007AFF",
fontSize: 16,
fontWeight: "600",
},
saveButton: {
backgroundColor: "#007AFF",
paddingHorizontal: 16,
paddingVertical: 6,
borderRadius: 6,
},
saveButtonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600",
},
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginTop: 16,
marginBottom: 12,
paddingHorizontal: 4,
},
sectionTitle: {
fontSize: 18,
fontWeight: "700",
color: "#000",
},
totalCatchText: {
fontSize: 16,
fontWeight: "600",
color: "#007AFF",
},
fishCard: {
backgroundColor: "#fff",
borderRadius: 12,
padding: 16,
marginBottom: 12,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
},
fieldGroup: {
marginBottom: 12,
position: "relative",
},
rowGroup: {
flexDirection: "row",
marginBottom: 12,
},
label: {
fontSize: 13,
fontWeight: "600",
color: "#666",
marginBottom: 6,
},
input: {
borderWidth: 1,
borderColor: "#007AFF",
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 10,
fontSize: 15,
color: "#000",
backgroundColor: "#fff",
},
selectButton: {
borderWidth: 1,
borderColor: "#007AFF",
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 10,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#fff",
},
selectButtonText: {
fontSize: 15,
color: "#000",
},
optionsList: {
position: "absolute",
top: 46,
left: 0,
right: 0,
borderWidth: 1,
borderColor: "#007AFF",
borderRadius: 8,
marginTop: 4,
backgroundColor: "#fff",
maxHeight: 200,
zIndex: 1000,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
optionItem: {
paddingHorizontal: 12,
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
},
optionText: {
fontSize: 15,
color: "#000",
},
optionsStatusFishList: {
borderWidth: 1,
borderColor: "#007AFF",
borderRadius: 8,
marginTop: 4,
backgroundColor: "#fff",
maxHeight: 200,
zIndex: 1000,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
});
export default styles;