fill data API CrewList, FishingTools, TripCost
This commit is contained in:
@@ -6,25 +6,11 @@ import styles from "./style/CrewDetailModal.styles";
|
||||
// ---------------------------
|
||||
// 🧩 Interface
|
||||
// ---------------------------
|
||||
interface CrewMember {
|
||||
id: string;
|
||||
maDinhDanh: string;
|
||||
ten: string;
|
||||
chucVu: string;
|
||||
ngaySinh?: string;
|
||||
cccd?: string;
|
||||
soDienThoai?: string;
|
||||
diaChi?: string;
|
||||
ngayVaoLam?: string;
|
||||
trinhDoChuyenMon?: string;
|
||||
bangCap?: string;
|
||||
tinhTrang?: string;
|
||||
}
|
||||
|
||||
interface CrewDetailModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
crewData: CrewMember | null;
|
||||
crewData: Model.TripCrews | null;
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
@@ -38,20 +24,28 @@ const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
|
||||
if (!crewData) return null;
|
||||
|
||||
const infoItems = [
|
||||
{ label: "Mã định danh", value: crewData.maDinhDanh },
|
||||
{ label: "Họ và tên", value: crewData.ten },
|
||||
{ label: "Chức vụ", value: crewData.chucVu },
|
||||
{ label: "Ngày sinh", value: crewData.ngaySinh || "Chưa cập nhật" },
|
||||
{ label: "CCCD/CMND", value: crewData.cccd || "Chưa cập nhật" },
|
||||
{ label: "Số điện thoại", value: crewData.soDienThoai || "Chưa cập nhật" },
|
||||
{ label: "Địa chỉ", value: crewData.diaChi || "Chưa cập nhật" },
|
||||
{ label: "Ngày vào làm", value: crewData.ngayVaoLam || "Chưa cập nhật" },
|
||||
{ label: "Mã định danh", value: crewData.Person.personal_id },
|
||||
{ label: "Họ và tên", value: crewData.Person.name },
|
||||
{ label: "Chức vụ", value: crewData.role },
|
||||
{
|
||||
label: "Trình độ chuyên môn",
|
||||
value: crewData.trinhDoChuyenMon || "Chưa cập nhật",
|
||||
label: "Ngày sinh",
|
||||
value: crewData.Person.birth_date
|
||||
? new Date(crewData.Person.birth_date).toLocaleDateString()
|
||||
: "Chưa cập nhật",
|
||||
},
|
||||
{ label: "Số điện thoại", value: crewData.Person.phone || "Chưa cập nhật" },
|
||||
{ label: "Địa chỉ", value: crewData.Person.address || "Chưa cập nhật" },
|
||||
{
|
||||
label: "Ngày vào làm",
|
||||
value: crewData.joined_at
|
||||
? new Date(crewData.joined_at).toLocaleDateString()
|
||||
: "Chưa cập nhật",
|
||||
},
|
||||
{ label: "Ghi chú", value: crewData.note || "Chưa cập nhật" },
|
||||
{
|
||||
label: "Tình trạng",
|
||||
value: crewData.left_at ? "Đã nghỉ" : "Đang làm việc",
|
||||
},
|
||||
{ label: "Bằng cấp", value: crewData.bangCap || "Chưa cập nhật" },
|
||||
{ label: "Tình trạng", value: crewData.tinhTrang || "Đang làm việc" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Modal,
|
||||
@@ -15,19 +15,10 @@ import styles from "./style/TripCostDetailModal.styles";
|
||||
// ---------------------------
|
||||
// 🧩 Interface
|
||||
// ---------------------------
|
||||
interface CostItem {
|
||||
id: string;
|
||||
loai: string;
|
||||
soLuong: number;
|
||||
donVi: string;
|
||||
chiPhi: number;
|
||||
tongChiPhi: number;
|
||||
}
|
||||
|
||||
interface TripCostDetailModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
data: CostItem[];
|
||||
data: Model.TripCost[];
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
@@ -39,9 +30,14 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
data,
|
||||
}) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editableData, setEditableData] = useState<CostItem[]>(data);
|
||||
const [editableData, setEditableData] = useState<Model.TripCost[]>(data);
|
||||
|
||||
const tongCong = editableData.reduce((sum, item) => sum + item.tongChiPhi, 0);
|
||||
// Cập nhật editableData khi props data thay đổi (API fetch xong)
|
||||
useEffect(() => {
|
||||
setEditableData(data);
|
||||
}, [data]);
|
||||
|
||||
const tongCong = editableData.reduce((sum, item) => sum + item.total_cost, 0);
|
||||
|
||||
const handleEdit = () => {
|
||||
setIsEditing(!isEditing);
|
||||
@@ -50,7 +46,7 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
const handleSave = () => {
|
||||
setIsEditing(false);
|
||||
// TODO: Save data to backend
|
||||
// console.log("Saved data:", editableData);
|
||||
console.log("Saved data:", editableData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@@ -58,16 +54,23 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
setEditableData(data); // Reset to original data
|
||||
};
|
||||
|
||||
const updateItem = (id: string, field: keyof CostItem, value: string) => {
|
||||
const updateItem = (
|
||||
index: number,
|
||||
field: keyof Model.TripCost,
|
||||
value: string
|
||||
) => {
|
||||
setEditableData((prev) =>
|
||||
prev.map((item) => {
|
||||
if (item.id === id) {
|
||||
const numValue =
|
||||
field === "loai" || field === "donVi" ? value : Number(value) || 0;
|
||||
const updated = { ...item, [field]: numValue };
|
||||
// Recalculate tongChiPhi
|
||||
if (field === "soLuong" || field === "chiPhi") {
|
||||
updated.tongChiPhi = updated.soLuong * updated.chiPhi;
|
||||
prev.map((item, idx) => {
|
||||
if (idx === index) {
|
||||
const updated = { ...item, [field]: value };
|
||||
// Recalculate total_cost
|
||||
if (field === "amount" || field === "cost_per_unit") {
|
||||
const amount =
|
||||
Number(field === "amount" ? value : item.amount) || 0;
|
||||
const costPerUnit =
|
||||
Number(field === "cost_per_unit" ? value : item.cost_per_unit) ||
|
||||
0;
|
||||
updated.total_cost = amount * costPerUnit;
|
||||
}
|
||||
return updated;
|
||||
}
|
||||
@@ -133,15 +136,15 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
|
||||
{/* Content */}
|
||||
<ScrollView style={styles.content}>
|
||||
{editableData.map((item) => (
|
||||
<View key={item.id} style={styles.itemCard}>
|
||||
{editableData.map((item, index) => (
|
||||
<View key={index} style={styles.itemCard}>
|
||||
{/* Loại */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={styles.label}>Loại chi phí</Text>
|
||||
<TextInput
|
||||
style={[styles.input, !isEditing && styles.inputDisabled]}
|
||||
value={item.loai}
|
||||
onChangeText={(value) => updateItem(item.id, "loai", value)}
|
||||
value={item.type}
|
||||
onChangeText={(value) => updateItem(index, "type", value)}
|
||||
editable={isEditing}
|
||||
placeholder="Nhập loại chi phí"
|
||||
/>
|
||||
@@ -155,9 +158,9 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
<Text style={styles.label}>Số lượng</Text>
|
||||
<TextInput
|
||||
style={[styles.input, !isEditing && styles.inputDisabled]}
|
||||
value={String(item.soLuong)}
|
||||
value={String(item.amount ?? "")}
|
||||
onChangeText={(value) =>
|
||||
updateItem(item.id, "soLuong", value)
|
||||
updateItem(index, "amount", value)
|
||||
}
|
||||
editable={isEditing}
|
||||
keyboardType="numeric"
|
||||
@@ -168,10 +171,8 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
<Text style={styles.label}>Đơn vị</Text>
|
||||
<TextInput
|
||||
style={[styles.input, !isEditing && styles.inputDisabled]}
|
||||
value={item.donVi}
|
||||
onChangeText={(value) =>
|
||||
updateItem(item.id, "donVi", value)
|
||||
}
|
||||
value={item.unit}
|
||||
onChangeText={(value) => updateItem(index, "unit", value)}
|
||||
editable={isEditing}
|
||||
placeholder="kg, lít..."
|
||||
/>
|
||||
@@ -183,9 +184,9 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
<Text style={styles.label}>Chi phí/đơn vị (VNĐ)</Text>
|
||||
<TextInput
|
||||
style={[styles.input, !isEditing && styles.inputDisabled]}
|
||||
value={String(item.chiPhi)}
|
||||
value={String(item.cost_per_unit ?? "")}
|
||||
onChangeText={(value) =>
|
||||
updateItem(item.id, "chiPhi", value)
|
||||
updateItem(index, "cost_per_unit", value)
|
||||
}
|
||||
editable={isEditing}
|
||||
keyboardType="numeric"
|
||||
@@ -198,7 +199,7 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
|
||||
<Text style={styles.label}>Tổng chi phí</Text>
|
||||
<View style={styles.totalContainer}>
|
||||
<Text style={styles.totalText}>
|
||||
{item.tongChiPhi.toLocaleString()} VNĐ
|
||||
{item.total_cost.toLocaleString()} VNĐ
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user