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

clear file not use

Browse Source
This commit is contained in:
MinhNN
2025-11-20 16:54:37 +07:00
parent 1d5b29e4a7
commit 51327c7d01
11 changed files with 53 additions and 1043 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
View File

@@ -20,7 +20,7 @@ import {
View,
} from "react-native";
import { z } from "zod";
import { InfoSection } from "./NetDetailModal/components";
import { InfoSection } from "./components/InfoSection";
import styles from "./style/CreateOrUpdateHaulModal.styles";
interface CreateOrUpdateHaulModalProps {

362
components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
View File

@@ -1,362 +0,0 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useState } from "react";
import {
Alert,
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 { NotesSection } from "./components/NotesSection";
interface NetDetailModalProps {
visible: boolean;
onClose: () => void;
netData: Model.FishingLog | null;
stt?: number;
}
// ---------------------------
// 🧵 Component Modal
// ---------------------------
const NetDetailModal: React.FC<NetDetailModalProps> = ({
visible,
onClose,
netData,
stt,
}) => {
const [isEditing, setIsEditing] = useState(false);
const [editableCatchList, setEditableCatchList] = useState<
Model.FishingLogInfo[]
>([]);
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
null
);
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
null
);
// const [selectedConditionIndex, setSelectedConditionIndex] = useState<
// number | null
// >(null);
// const [selectedGearIndex, setSelectedGearIndex] = useState<number | null>(
// null
// );
const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
// Khởi tạo dữ liệu khi netData thay đổi
React.useEffect(() => {
if (netData?.info) {
setEditableCatchList(netData.info);
}
}, [netData]);
// Reset state khi modal đóng
React.useEffect(() => {
if (!visible) {
setExpandedFishIndices([]);
setSelectedFishIndex(null);
setSelectedUnitIndex(null);
// setSelectedConditionIndex(null);
// setSelectedGearIndex(null);
setIsEditing(false);
}
}, [visible]);
// if (!netData) return null;
const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
// Danh sách tên cá có sẵn
const fishNameOptions = [
"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"];
// Danh sách ngư cụ
// const gearOptions = [
// "Lưới kéo",
// "Lưới vây",
// "Lưới rê",
// "Lưới cào",
// "Lưới lồng",
// "Câu cần",
// "Câu dây",
// "Chài cá",
// "Lồng bẫy",
// "Đăng",
// ];
const handleEdit = () => {
setIsEditing(!isEditing);
};
const handleSave = () => {
// Validate từng cá trong danh sách và thu thập tất cả lỗi
const allErrors: { index: number; errors: string[] }[] = [];
for (let i = 0; i < editableCatchList.length; i++) {
const fish = editableCatchList[i];
const errors: string[] = [];
if (!fish.fish_name || fish.fish_name.trim() === "") {
errors.push("- Tên loài cá");
}
if (!fish.catch_number || fish.catch_number <= 0) {
errors.push("- Số lượng bắt được");
}
if (!fish.catch_unit || fish.catch_unit.trim() === "") {
errors.push("- Đơn vị");
}
if (!fish.fish_size || fish.fish_size <= 0) {
errors.push("- Kích thước cá");
}
// if (!fish.fish_condition || fish.fish_condition.trim() === "") {
// errors.push("- Tình trạng cá");
// }
// if (!fish.gear_usage || fish.gear_usage.trim() === "") {
// errors.push("- Dụng cụ sử dụng");
// }
if (errors.length > 0) {
allErrors.push({ index: i, errors });
}
}
// Nếu có lỗi, hiển thị tất cả
if (allErrors.length > 0) {
const errorMessage = allErrors
.map((item) => {
return `Cá số ${item.index + 1}:\n${item.errors.join("\n")}`;
})
.join("\n\n");
Alert.alert(
"Thông tin không đầy đủ",
errorMessage,
[
{
text: "Tiếp tục chỉnh sửa",
onPress: () => {
// Mở rộng tất cả các card bị lỗi
setExpandedFishIndices((prev) => {
const errorIndices = allErrors.map((item) => item.index);
const newIndices = [...prev];
errorIndices.forEach((idx) => {
if (!newIndices.includes(idx)) {
newIndices.push(idx);
}
});
return newIndices;
});
},
},
{
text: "Hủy",
onPress: () => {},
},
],
{ cancelable: false }
);
return;
}
// Nếu validation pass, lưu dữ liệu
setIsEditing(false);
console.log("Saved catch list:", editableCatchList);
};
const handleCancel = () => {
setIsEditing(false);
setEditableCatchList(netData?.info || []);
};
const handleToggleExpanded = (index: number) => {
setExpandedFishIndices((prev) =>
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
);
};
const updateCatchItem = (
index: number,
field: keyof Model.FishingLogInfo,
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 handleAddNewFish = () => {
const newFish: Model.FishingLogInfo = {
fish_species_id: 0,
fish_name: "",
catch_number: 0,
catch_unit: "kg",
fish_size: 0,
fish_rarity: 0,
fish_condition: "",
gear_usage: "",
};
setEditableCatchList((prev) => [...prev, newFish]);
// Tự động expand card mới
setExpandedFishIndices((prev) => [...prev, editableCatchList.length]);
};
const handleDeleteFish = (index: number) => {
Alert.alert(
"Xác nhận xóa",
`Bạn có chắc muốn xóa loài cá này?`,
[
{
text: "Hủy",
style: "cancel",
},
{
text: "Xóa",
style: "destructive",
onPress: () => {
setEditableCatchList((prev) => prev.filter((_, i) => i !== index));
// Cập nhật lại expandedFishIndices sau khi xóa
setExpandedFishIndices((prev) =>
prev
.filter((i) => i !== index)
.map((i) => (i > index ? i - 1 : i))
);
},
},
],
{ cancelable: true }
);
};
// Chỉ tính tổng số lượng cá có đơn vị là 'kg'
const totalCatch = editableCatchList.reduce(
(sum, item) =>
item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
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 ?? undefined}
isCompleted={isCompleted}
stt={stt}
/> */}
{/* 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}
// selectedGearIndex={selectedGearIndex}
fishNameOptions={fishNameOptions}
unitOptions={unitOptions}
// conditionOptions={conditionOptions}
// gearOptions={gearOptions}
onToggleExpanded={handleToggleExpanded}
onUpdateCatchItem={updateCatchItem}
setSelectedFishIndex={setSelectedFishIndex}
setSelectedUnitIndex={setSelectedUnitIndex}
// setSelectedConditionIndex={setSelectedConditionIndex}
// setSelectedGearIndex={setSelectedGearIndex}
onAddNewFish={handleAddNewFish}
onDeleteFish={handleDeleteFish}
/>
{/* Ghi chú */}
<NotesSection ghiChu={netData?.weather_description} />
</ScrollView>
</View>
</Modal>
);
};
export default NetDetailModal;

20
components/tripInfo/modal/NetDetailModal/components/CatchSectionHeader.tsx
View File

@@ -1,20 +0,0 @@
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>
);
};

207
components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
View File

@@ -1,207 +0,0 @@
import { useFishes } from "@/state/use-fish";
import React from "react";
import { Text, TextInput, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { FishSelectDropdown } from "./FishSelectDropdown";
interface FishCardFormProps {
fish: Model.FishingLogInfo;
index: number;
isEditing: boolean;
fishNameOptions: string[]; // Bỏ gọi API cá
unitOptions: string[]; // Bỏ render ở trong này
// conditionOptions: string[];
// gearOptions: string[];
selectedFishIndex: number | null;
selectedUnitIndex: number | null;
// selectedConditionIndex: number | null;
// selectedGearIndex: number | null;
setSelectedFishIndex: (index: number | null) => void;
setSelectedUnitIndex: (index: number | null) => void;
// setSelectedConditionIndex: (index: number | null) => void;
// setSelectedGearIndex: (index: number | null) => void;
onUpdateCatchItem: (
index: number,
field: keyof Model.FishingLogInfo,
value: string | number
) => void;
}
export const FishCardForm: React.FC<FishCardFormProps> = ({
fish,
index,
isEditing,
unitOptions,
// conditionOptions,
// gearOptions,
selectedFishIndex,
selectedUnitIndex,
// selectedConditionIndex,
// selectedGearIndex,
setSelectedFishIndex,
setSelectedUnitIndex,
// setSelectedConditionIndex,
// setSelectedGearIndex,
onUpdateCatchItem,
}) => {
const { fishSpecies } = useFishes();
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={fishSpecies || []}
selectedFishId={selectedFishIndex}
isOpen={selectedFishIndex === index}
onToggle={() =>
setSelectedFishIndex(selectedFishIndex === index ? null : index)
}
onSelect={(value: Model.FishSpeciesResponse) => {
onUpdateCatchItem(index, "fish_name", value.name);
setSelectedFishIndex(value.id);
console.log("Fish Selected: ", fish);
}}
zIndex={1000 - index}
styleOverride={styles.fishNameDropdown}
/>
) : (
<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, { zIndex: 700 - index }]}>
<Text style={styles.label}>Ngư cụ sử dụng</Text>
{isEditing ? (
<FishSelectDropdown
options={gearOptions}
selectedValue={fish.gear_usage}
isOpen={selectedGearIndex === index}
onToggle={() =>
setSelectedGearIndex(selectedGearIndex === index ? null : index)
}
onSelect={(value: string) => {
onUpdateCatchItem(index, "gear_usage", value);
setSelectedGearIndex(null);
}}
zIndex={700 - index}
styleOverride={styles.optionsStatusFishList}
/>
) : (
<Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
)}
</View> */}
</>
);
};

18
components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx
View File

@@ -1,18 +0,0 @@
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface FishCardHeaderProps {
fish: Model.FishingLogInfo;
}
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>
);
};

168
components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx
View File

@@ -1,168 +0,0 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React from "react";
import { Text, TouchableOpacity, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { FishCardForm } from "./FishCardForm";
import { FishCardHeader } from "./FishCardHeader";
interface FishCardListProps {
catchList: Model.FishingLogInfo[];
isEditing: boolean;
expandedFishIndex: number[];
selectedFishIndex: number | null;
selectedUnitIndex: number | null;
// selectedConditionIndex: number | null;
// selectedGearIndex: number | null;
fishNameOptions: string[];
unitOptions: string[];
// conditionOptions: string[];
// gearOptions: string[];
onToggleExpanded: (index: number) => void;
onUpdateCatchItem: (
index: number,
field: keyof Model.FishingLogInfo,
value: string | number
) => void;
setSelectedFishIndex: (index: number | null) => void;
setSelectedUnitIndex: (index: number | null) => void;
// setSelectedConditionIndex: (index: number | null) => void;
// setSelectedGearIndex: (index: number | null) => void;
onAddNewFish?: () => void;
onDeleteFish?: (index: number) => void;
}
export const FishCardList: React.FC<FishCardListProps> = ({
catchList,
isEditing,
expandedFishIndex,
selectedFishIndex,
selectedUnitIndex,
// selectedConditionIndex,
// selectedGearIndex,
fishNameOptions,
unitOptions,
// conditionOptions,
// gearOptions,
onToggleExpanded,
onUpdateCatchItem,
setSelectedFishIndex,
setSelectedUnitIndex,
// setSelectedConditionIndex,
// setSelectedGearIndex,
onAddNewFish,
onDeleteFish,
}) => {
// 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}>
{/* Delete + Chevron buttons - always on top, right side, horizontal row */}
<View
style={{
position: "absolute",
top: 0,
right: 0,
zIndex: 9999,
flexDirection: "row",
alignItems: "center",
padding: 8,
gap: 8,
}}
pointerEvents="box-none"
>
{isEditing && (
<TouchableOpacity
onPress={() => onDeleteFish?.(index)}
style={{
backgroundColor: "#FF3B30",
borderRadius: 8,
width: 40,
height: 40,
justifyContent: "center",
alignItems: "center",
shadowColor: "#000",
shadowOpacity: 0.08,
shadowRadius: 2,
shadowOffset: { width: 0, height: 1 },
elevation: 2,
}}
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
activeOpacity={0.7}
>
<IconSymbol name="trash" size={24} color="#fff" />
</TouchableOpacity>
)}
<TouchableOpacity
onPress={() => handleToggleCard(index)}
style={{
backgroundColor: "#007AFF",
borderRadius: 8,
width: 40,
height: 40,
justifyContent: "center",
alignItems: "center",
shadowColor: "#000",
shadowOpacity: 0.08,
shadowRadius: 2,
shadowOffset: { width: 0, height: 1 },
elevation: 2,
}}
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}
// gearOptions={gearOptions}
selectedFishIndex={selectedFishIndex}
selectedUnitIndex={selectedUnitIndex}
// selectedConditionIndex={selectedConditionIndex}
// selectedGearIndex={selectedGearIndex}
setSelectedFishIndex={setSelectedFishIndex}
setSelectedUnitIndex={setSelectedUnitIndex}
// setSelectedConditionIndex={setSelectedConditionIndex}
// setSelectedGearIndex={setSelectedGearIndex}
onUpdateCatchItem={onUpdateCatchItem}
/>
)}
</View>
))}
{/* Nút thêm loài cá mới - hiển thị khi đang chỉnh sửa */}
{isEditing && (
<TouchableOpacity onPress={onAddNewFish} style={styles.addFishButton}>
<View style={styles.addFishButtonContent}>
<IconSymbol name="plus" size={24} color="#fff" />
<Text style={styles.addFishButtonText}>Thêm loài cá</Text>
</View>
</TouchableOpacity>
)}
</>
);
};

61
components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
View File

@@ -1,61 +0,0 @@
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: Model.FishSpeciesResponse[];
selectedFishId: number | null;
isOpen: boolean;
onToggle: () => void;
onSelect: (value: Model.FishSpeciesResponse) => void;
zIndex: number;
styleOverride?: any;
}
export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
options,
selectedFishId,
isOpen,
onToggle,
onSelect,
zIndex,
styleOverride,
}) => {
const dropdownStyle = styleOverride || styles.optionsList;
const findFishNameById = (id: number | null) => {
const fish = options.find((item) => item.id === id);
return fish?.name || "Chọn cá";
};
const [selectedFish, setSelectedFish] =
React.useState<Model.FishSpeciesResponse | null>(null);
return (
<View style={{ zIndex }}>
<TouchableOpacity style={styles.selectButton} onPress={onToggle}>
<Text style={styles.selectButtonText}>
{findFishNameById(selectedFishId)}
</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={option.id || optIndex}
style={styles.optionItem}
onPress={() => onSelect(option)}
>
<Text style={styles.optionText}>
{findFishNameById(option.id)}
</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
);
};

20
components/tripInfo/modal/NetDetailModal/components/NotesSection.tsx
View File

@@ -1,20 +0,0 @@
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>
);
};

7
components/tripInfo/modal/NetDetailModal/components/index.ts
View File

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

177
components/tripInfo/modal/NetDetailModal/style/NetDetailModal.styles.ts
View File

@@ -1,177 +0,0 @@
import { StyleSheet } from "react-native";
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 16,
paddingTop: 16,
paddingBottom: 8,
backgroundColor: "#f8f9fa",
borderBottomWidth: 1,
borderBottomColor: "#e9ecef",
},
title: {
fontSize: 18,
fontWeight: "bold",
color: "#333",
},
closeButton: {
padding: 8,
},
closeButtonText: {
fontSize: 16,
color: "#007bff",
},
content: {
flex: 1,
padding: 16,
},
fieldGroup: {
marginBottom: 16,
},
label: {
fontSize: 14,
fontWeight: "600",
color: "#333",
marginBottom: 4,
},
input: {
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 4,
padding: 8,
fontSize: 16,
backgroundColor: "#fff",
},
infoValue: {
fontSize: 16,
color: "#555",
paddingVertical: 8,
},
rowGroup: {
flexDirection: "row",
justifyContent: "space-between",
},
fishNameDropdown: {
// Custom styles if needed
},
optionsStatusFishList: {
// Custom styles if needed
},
optionsList: {
maxHeight: 150,
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 4,
backgroundColor: "#fff",
position: "absolute",
top: 40,
left: 0,
right: 0,
zIndex: 1000,
},
selectButton: {
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 4,
padding: 8,
backgroundColor: "#fff",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
selectButtonText: {
fontSize: 16,
color: "#333",
},
optionItem: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: "#eee",
},
optionText: {
fontSize: 16,
color: "#333",
},
card: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 8,
padding: 12,
marginBottom: 12,
backgroundColor: "#f9f9f9",
},
removeButton: {
backgroundColor: "#dc3545",
padding: 8,
borderRadius: 4,
alignSelf: "flex-end",
marginTop: 8,
},
removeButtonText: {
color: "#fff",
fontSize: 14,
},
errorText: {
color: "#dc3545",
fontSize: 12,
marginTop: 4,
},
buttonGroup: {
flexDirection: "row",
justifyContent: "space-around",
marginTop: 16,
},
editButton: {
backgroundColor: "#007bff",
padding: 10,
borderRadius: 4,
},
editButtonText: {
color: "#fff",
fontSize: 16,
},
addButton: {
backgroundColor: "#28a745",
padding: 10,
borderRadius: 4,
},
addButtonText: {
color: "#fff",
fontSize: 16,
},
saveButton: {
backgroundColor: "#007bff",
padding: 10,
borderRadius: 4,
},
saveButtonText: {
color: "#fff",
fontSize: 16,
},
cancelButton: {
backgroundColor: "#6c757d",
padding: 10,
borderRadius: 4,
},
cancelButtonText: {
color: "#fff",
fontSize: 16,
},
addFishButton: {
backgroundColor: "#17a2b8",
padding: 10,
borderRadius: 4,
marginBottom: 16,
},
addFishButtonText: {
color: "#fff",
fontSize: 16,
},
});

54
components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx → components/tripInfo/modal/components/InfoSection.tsx
View File

@@ -1,7 +1,6 @@
import { useI18n } from "@/hooks/use-i18n";
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { StyleSheet, Text, View } from "react-native";
interface InfoSectionProps {
fishingLog?: Model.FishingLog;
@@ -93,3 +92,54 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
</View>
);
};
const styles = StyleSheet.create({
infoCard: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 8,
padding: 12,
marginBottom: 12,
backgroundColor: "#f9f9f9",
},
infoRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 8,
},
infoLabel: {
fontSize: 14,
fontWeight: "600",
color: "#333",
},
infoValue: {
fontSize: 16,
color: "#555",
paddingVertical: 8,
},
statusBadge: {
paddingVertical: 4,
paddingHorizontal: 12,
borderRadius: 12,
alignItems: "center",
justifyContent: "center",
},
statusBadgeCompleted: {
backgroundColor: "#34C759",
},
statusBadgeInProgress: {
backgroundColor: "#FF9500",
},
statusBadgeText: {
fontSize: 14,
fontWeight: "600",
color: "#fff",
},
statusBadgeTextCompleted: {
color: "#fff",
},
statusBadgeTextInProgress: {
color: "#fff",
},
});