update netDetailModal
This commit is contained in:
@@ -1,30 +1,191 @@
|
|||||||
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 styles from "./style/NetListTable.styles";
|
import styles from "./style/NetListTable.styles";
|
||||||
|
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
// 🧩 Interface
|
// 🧩 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 {
|
interface NetItem {
|
||||||
id: string;
|
id: string;
|
||||||
stt: string;
|
stt: string;
|
||||||
trangThai: string;
|
trangThai: string;
|
||||||
|
thoiGianBatDau?: string;
|
||||||
|
thoiGianKetThuc?: string;
|
||||||
|
viTriHaThu?: string;
|
||||||
|
viTriThuLuoi?: string;
|
||||||
|
doSauHaThu?: string;
|
||||||
|
doSauThuLuoi?: string;
|
||||||
|
catchList?: FishCatch[];
|
||||||
|
ghiChu?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
// 🧵 Dữ liệu mẫu
|
// 🧵 Dữ liệu mẫu
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
const data: NetItem[] = [
|
const data: NetItem[] = [
|
||||||
{ id: "1", stt: "Mẻ 3", trangThai: "Đã hoàn thành" },
|
{
|
||||||
{ id: "2", stt: "Mẻ 2", trangThai: "Đã hoàn thành" },
|
id: "1",
|
||||||
{ id: "3", stt: "Mẻ 1", trangThai: "Đã hoàn thành" },
|
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 NetListTable: React.FC = () => {
|
||||||
const [collapsed, setCollapsed] = useState(true);
|
const [collapsed, setCollapsed] = useState(true);
|
||||||
const [contentHeight, setContentHeight] = useState<number>(0);
|
const [contentHeight, setContentHeight] = useState<number>(0);
|
||||||
const animatedHeight = useRef(new Animated.Value(0)).current;
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
||||||
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
|
const [selectedNet, setSelectedNet] = useState<NetItem | null>(null);
|
||||||
const tongSoMe = data.length;
|
const tongSoMe = data.length;
|
||||||
|
|
||||||
const handleToggle = () => {
|
const handleToggle = () => {
|
||||||
@@ -38,7 +199,11 @@ const NetListTable: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleStatusPress = (id: string) => {
|
const handleStatusPress = (id: string) => {
|
||||||
console.log(`ID mẻ lưới: ${id}`);
|
const net = data.find((item) => item.id === id);
|
||||||
|
if (net) {
|
||||||
|
setSelectedNet(net);
|
||||||
|
setModalVisible(true);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -115,6 +280,13 @@ const NetListTable: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
|
||||||
|
{/* Modal chi tiết */}
|
||||||
|
<NetDetailModal
|
||||||
|
visible={modalVisible}
|
||||||
|
onClose={() => setModalVisible(false)}
|
||||||
|
netData={selectedNet}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
515
components/tripInfo/modal/NetDetailModal.tsx
Normal file
515
components/tripInfo/modal/NetDetailModal.tsx
Normal 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
236
components/tripInfo/modal/style/NetDetailModal.styles.ts
Normal 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;
|
||||||
Reference in New Issue
Block a user