313 lines
9.4 KiB
TypeScript
313 lines
9.4 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { useTrip } from "@/state/use-trip";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
|
import CrewDetailModal from "./modal/CrewDetailModal";
|
|
import styles from "./style/CrewListTable.styles";
|
|
|
|
const mockCrews: Model.TripCrews[] = [
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "480863197307",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.230053Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "480863197307",
|
|
name: "Huỳnh Tấn Trang",
|
|
phone: "0838944284",
|
|
email: "huynhtantrang@crew.sgw.vn",
|
|
birth_date: new Date("2025-01-11T00:00:00Z"),
|
|
note: "",
|
|
address: "49915 Poplar Avenue",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "714834545296",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.301376Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "714834545296",
|
|
name: "Trương Văn Nam",
|
|
phone: "0773396753",
|
|
email: "truongvannam@crew.sgw.vn",
|
|
birth_date: new Date("2025-07-24T00:00:00Z"),
|
|
note: "",
|
|
address: "3287 Carlotta Underpass",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "049299828990",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.373037Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "049299828990",
|
|
name: "Đặng Anh Minh",
|
|
phone: "0827640820",
|
|
email: "danganhminh@crew.sgw.vn",
|
|
birth_date: new Date("2024-10-30T00:00:00Z"),
|
|
note: "",
|
|
address: "68909 Gerda Burgs",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "851494873747",
|
|
role: "captain",
|
|
joined_at: new Date("2025-11-06T08:13:33.442774Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "851494873747",
|
|
name: "Tô Thị Linh",
|
|
phone: "0337906041",
|
|
email: "tothilinh@crew.sgw.vn",
|
|
birth_date: new Date("2025-06-18T00:00:00Z"),
|
|
note: "",
|
|
address: "6676 Kulas Groves",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "384839614682",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.515532Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "384839614682",
|
|
name: "Lê Thanh Hoa",
|
|
phone: "0937613034",
|
|
email: "lethanhhoa@crew.sgw.vn",
|
|
birth_date: new Date("2025-07-17T00:00:00Z"),
|
|
note: "",
|
|
address: "244 Cicero Estate",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "702319275290",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.588038Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "702319275290",
|
|
name: "Nguyễn Phước Hải",
|
|
phone: "0347859214",
|
|
email: "nguyenphuochai@crew.sgw.vn",
|
|
birth_date: new Date("2025-08-13T00:00:00Z"),
|
|
note: "",
|
|
address: "6874 Devon Key",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "943534816439",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.668984Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "943534816439",
|
|
name: "Lý Hữu Hà",
|
|
phone: "0768548881",
|
|
email: "lyhuuha@crew.sgw.vn",
|
|
birth_date: new Date("2025-08-18T00:00:00Z"),
|
|
note: "",
|
|
address: "655 Middle Street",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
{
|
|
TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
|
|
PersonalID: "096528446981",
|
|
role: "crew",
|
|
joined_at: new Date("2025-11-06T08:13:33.74379Z"),
|
|
left_at: null,
|
|
note: null,
|
|
Person: {
|
|
personal_id: "096528446981",
|
|
name: "Trần Xuân Thi",
|
|
phone: "0963449523",
|
|
email: "tranxuanthi@crew.sgw.vn",
|
|
birth_date: new Date("2024-09-21T00:00:00Z"),
|
|
note: "",
|
|
address: "59344 Burley Isle",
|
|
created_at: new Date("0001-01-01T00:00:00Z"),
|
|
updated_at: new Date("0001-01-01T00:00:00Z"),
|
|
},
|
|
},
|
|
];
|
|
|
|
const CrewListTable: React.FC = () => {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const [contentHeight, setContentHeight] = useState<number>(0);
|
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [selectedCrew, setSelectedCrew] = useState<Model.TripCrews | null>(
|
|
null
|
|
);
|
|
|
|
const { trip } = useTrip();
|
|
|
|
const data: Model.TripCrews[] = trip?.crews ?? mockCrews;
|
|
|
|
const tongThanhVien = data.length;
|
|
|
|
// Reset animated height khi dữ liệu thay đổi
|
|
useEffect(() => {
|
|
setContentHeight(0); // Reset để tính lại chiều cao
|
|
setCollapsed(true); // Reset về trạng thái gập lại
|
|
}, [data]);
|
|
|
|
const handleToggle = () => {
|
|
const toValue = collapsed ? contentHeight : 0;
|
|
Animated.timing(animatedHeight, {
|
|
toValue,
|
|
duration: 300,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
setCollapsed((prev) => !prev);
|
|
};
|
|
|
|
const handleCrewPress = (crewId: string) => {
|
|
const crew = data.find((item) => item.Person.personal_id === crewId);
|
|
if (crew) {
|
|
setSelectedCrew(crew);
|
|
setModalVisible(true);
|
|
}
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setModalVisible(false);
|
|
setSelectedCrew(null);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Header toggle */}
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleToggle}
|
|
style={styles.headerRow}
|
|
>
|
|
<Text style={styles.title}>Danh sách thuyền viên</Text>
|
|
{collapsed && (
|
|
<Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
|
|
)}
|
|
<IconSymbol
|
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
|
size={16}
|
|
color="#000"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
{/* Nội dung ẩn để đo chiều cao */}
|
|
<View
|
|
style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
|
|
onLayout={(event) => {
|
|
const height = event.nativeEvent.layout.height;
|
|
if (height > 0 && contentHeight === 0) {
|
|
setContentHeight(height);
|
|
}
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<View style={styles.cellWrapper}>
|
|
<Text style={[styles.cell, styles.headerText]}>Tên</Text>
|
|
</View>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Chức vụ
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item) => (
|
|
<View key={item.Person.personal_id} style={styles.row}>
|
|
<TouchableOpacity
|
|
style={styles.cellWrapper}
|
|
onPress={() => handleCrewPress(item.Person.personal_id)}
|
|
>
|
|
<Text style={[styles.cell, styles.linkText]}>
|
|
{item.Person.name}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={[styles.cell, styles.right]}>{item.role}</Text>
|
|
</View>
|
|
))}
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.row]}>
|
|
<Text style={[styles.cell, styles.footerText]}>Tổng cộng</Text>
|
|
<Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Bảng hiển thị với animation */}
|
|
<Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
|
|
{/* Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<View style={styles.cellWrapper}>
|
|
<Text style={[styles.cell, styles.headerText]}>Tên</Text>
|
|
</View>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Chức vụ
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item) => (
|
|
<View key={item.Person.personal_id} style={styles.row}>
|
|
<TouchableOpacity
|
|
style={styles.cellWrapper}
|
|
onPress={() => handleCrewPress(item.Person.personal_id)}
|
|
>
|
|
<Text style={[styles.cell, styles.linkText]}>
|
|
{item.Person.name}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={[styles.cell, styles.right]}>{item.role}</Text>
|
|
</View>
|
|
))}
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.row]}>
|
|
<Text style={[styles.cell, styles.footerText]}>Tổng cộng</Text>
|
|
<Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
{/* Modal chi tiết thuyền viên */}
|
|
<CrewDetailModal
|
|
visible={modalVisible}
|
|
onClose={handleCloseModal}
|
|
crewData={selectedCrew}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CrewListTable;
|