cập nhật phần modal thêm chuyến đi mới
This commit is contained in:
472
components/diary/addTripModal/MaterialCostList.tsx
Normal file
472
components/diary/addTripModal/MaterialCostList.tsx
Normal file
@@ -0,0 +1,472 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Platform,
|
||||
TextInput,
|
||||
Modal,
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
|
||||
interface TripCost {
|
||||
id: string;
|
||||
type: string;
|
||||
amount: number;
|
||||
unit: string;
|
||||
cost_per_unit: number;
|
||||
total_cost: number;
|
||||
}
|
||||
|
||||
interface MaterialCostListProps {
|
||||
items: TripCost[];
|
||||
onChange: (items: TripCost[]) => void;
|
||||
}
|
||||
|
||||
// Predefined cost types
|
||||
const COST_TYPES = [
|
||||
{ value: "fuel", label: "Nhiên liệu" },
|
||||
{ value: "food", label: "Thực phẩm" },
|
||||
{ value: "crew_salary", label: "Lương thuyền viên" },
|
||||
{ value: "ice_salt_cost", label: "Muối đá" },
|
||||
{ value: "other", label: "Khác" },
|
||||
];
|
||||
|
||||
export default function MaterialCostList({
|
||||
items,
|
||||
onChange,
|
||||
}: MaterialCostListProps) {
|
||||
const { t } = useI18n();
|
||||
const { colors } = useThemeContext();
|
||||
const [typeDropdownVisible, setTypeDropdownVisible] = useState<string | null>(null);
|
||||
|
||||
const handleAddMaterial = () => {
|
||||
const newMaterial: TripCost = {
|
||||
id: Date.now().toString(),
|
||||
type: "",
|
||||
amount: 0,
|
||||
unit: "",
|
||||
cost_per_unit: 0,
|
||||
total_cost: 0,
|
||||
};
|
||||
onChange([...items, newMaterial]);
|
||||
};
|
||||
|
||||
const handleRemoveMaterial = (id: string) => {
|
||||
onChange(items.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const handleDuplicateMaterial = (material: TripCost) => {
|
||||
const duplicatedMaterial: TripCost = {
|
||||
id: Date.now().toString(),
|
||||
type: material.type,
|
||||
amount: material.amount,
|
||||
unit: material.unit,
|
||||
cost_per_unit: material.cost_per_unit,
|
||||
total_cost: material.total_cost,
|
||||
};
|
||||
onChange([...items, duplicatedMaterial]);
|
||||
};
|
||||
|
||||
const handleUpdateMaterial = (id: string, field: keyof TripCost, value: string | number) => {
|
||||
onChange(
|
||||
items.map((item) => {
|
||||
if (item.id === id) {
|
||||
const updatedItem = { ...item, [field]: value };
|
||||
// Auto-calculate total_cost when amount or cost_per_unit changes
|
||||
if (field === "amount" || field === "cost_per_unit") {
|
||||
const amount = field === "amount" ? Number(value) : item.amount;
|
||||
const costPerUnit = field === "cost_per_unit" ? Number(value) : item.cost_per_unit;
|
||||
updatedItem.total_cost = amount * costPerUnit;
|
||||
}
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeLabel = (value: string) => {
|
||||
const type = COST_TYPES.find((t) => t.value === value);
|
||||
return type ? type.label : value || t("diary.selectType");
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat("vi-VN").format(amount);
|
||||
};
|
||||
|
||||
const themedStyles = {
|
||||
sectionTitle: { color: colors.text },
|
||||
fieldLabel: { color: colors.text },
|
||||
input: {
|
||||
backgroundColor: colors.card,
|
||||
borderColor: colors.border,
|
||||
color: colors.text,
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: colors.card,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
dropdownText: { color: colors.text },
|
||||
placeholder: { color: colors.textSecondary },
|
||||
addButton: {
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
addButtonText: { color: colors.primary },
|
||||
modalOverlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: colors.card,
|
||||
},
|
||||
option: {
|
||||
borderBottomColor: colors.separator,
|
||||
},
|
||||
optionText: { color: colors.text },
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={[styles.sectionTitle, themedStyles.sectionTitle]}>
|
||||
{t("diary.materialCostList")}
|
||||
</Text>
|
||||
|
||||
{/* Cost Items List */}
|
||||
{items.map((cost) => (
|
||||
<View key={cost.id} style={styles.costRow}>
|
||||
<View style={styles.formRow}>
|
||||
{/* Type Dropdown */}
|
||||
<View style={[styles.inputGroup, styles.typeGroup]}>
|
||||
<Text style={[styles.fieldLabel, themedStyles.fieldLabel]}>
|
||||
{t("diary.costType")}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.dropdown, themedStyles.dropdown]}
|
||||
onPress={() => setTypeDropdownVisible(cost.id)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.dropdownText,
|
||||
themedStyles.dropdownText,
|
||||
!cost.type && themedStyles.placeholder,
|
||||
]}
|
||||
>
|
||||
{getTypeLabel(cost.type)}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name="chevron-down"
|
||||
size={16}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Type Dropdown Modal */}
|
||||
<Modal
|
||||
visible={typeDropdownVisible === cost.id}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setTypeDropdownVisible(null)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalOverlay, themedStyles.modalOverlay]}
|
||||
activeOpacity={1}
|
||||
onPress={() => setTypeDropdownVisible(null)}
|
||||
>
|
||||
<View style={[styles.modalContent, themedStyles.modalContent]}>
|
||||
<ScrollView>
|
||||
{COST_TYPES.map((type) => (
|
||||
<TouchableOpacity
|
||||
key={type.value}
|
||||
style={[styles.option, themedStyles.option]}
|
||||
onPress={() => {
|
||||
handleUpdateMaterial(cost.id, "type", type.value);
|
||||
setTypeDropdownVisible(null);
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={[styles.optionText, themedStyles.optionText]}
|
||||
>
|
||||
{type.label}
|
||||
</Text>
|
||||
{cost.type === type.value && (
|
||||
<Ionicons
|
||||
name="checkmark"
|
||||
size={20}
|
||||
color={colors.primary}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</View>
|
||||
|
||||
{/* Amount Input */}
|
||||
<View style={[styles.inputGroup, styles.smallGroup]}>
|
||||
<Text style={[styles.fieldLabel, themedStyles.fieldLabel]}>
|
||||
{t("diary.amount")}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.smallInput, themedStyles.input]}
|
||||
value={cost.amount.toString()}
|
||||
onChangeText={(value) =>
|
||||
handleUpdateMaterial(cost.id, "amount", Number(value) || 0)
|
||||
}
|
||||
placeholder="0"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Unit Input */}
|
||||
<View style={[styles.inputGroup, styles.smallGroup]}>
|
||||
<Text style={[styles.fieldLabel, themedStyles.fieldLabel]}>
|
||||
{t("diary.unit")}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.smallInput, themedStyles.input]}
|
||||
value={cost.unit}
|
||||
onChangeText={(value) =>
|
||||
handleUpdateMaterial(cost.id, "unit", value)
|
||||
}
|
||||
placeholder={t("diary.unitPlaceholder")}
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.formRow}>
|
||||
{/* Cost Per Unit Input */}
|
||||
<View style={[styles.inputGroup, styles.mediumGroup]}>
|
||||
<Text style={[styles.fieldLabel, themedStyles.fieldLabel]}>
|
||||
{t("diary.costPerUnit")}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.mediumInput, themedStyles.input]}
|
||||
value={cost.cost_per_unit.toString()}
|
||||
onChangeText={(value) =>
|
||||
handleUpdateMaterial(
|
||||
cost.id,
|
||||
"cost_per_unit",
|
||||
Number(value) || 0
|
||||
)
|
||||
}
|
||||
placeholder="0"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Total Cost (Read-only, auto-calculated) */}
|
||||
<View style={[styles.inputGroup, styles.mediumGroup]}>
|
||||
<Text style={[styles.fieldLabel, themedStyles.fieldLabel]}>
|
||||
{t("diary.totalCost")}
|
||||
</Text>
|
||||
<View style={[styles.input, styles.mediumInput, themedStyles.input, styles.readOnlyInput]}>
|
||||
<Text style={[styles.readOnlyText, themedStyles.dropdownText]}>
|
||||
{formatCurrency(cost.total_cost)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<View style={styles.actionButtons}>
|
||||
<TouchableOpacity
|
||||
onPress={() => handleDuplicateMaterial(cost)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<Ionicons name="copy-outline" size={20} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => handleRemoveMaterial(cost.id)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<Ionicons
|
||||
name="trash-outline"
|
||||
size={20}
|
||||
color={colors.error}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{/* Add Button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.addButton, themedStyles.addButton]}
|
||||
onPress={handleAddMaterial}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="add" size={20} color={colors.primary} />
|
||||
<Text style={[styles.addButtonText, themedStyles.addButtonText]}>
|
||||
{t("diary.addMaterialCost")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
marginBottom: 16,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
costRow: {
|
||||
marginBottom: 20,
|
||||
paddingBottom: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#E5E5E5",
|
||||
},
|
||||
formRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-end",
|
||||
gap: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
inputGroup: {
|
||||
flex: 1,
|
||||
},
|
||||
typeGroup: {
|
||||
flex: 1.5,
|
||||
},
|
||||
smallGroup: {
|
||||
flex: 0.8,
|
||||
},
|
||||
mediumGroup: {
|
||||
flex: 1,
|
||||
},
|
||||
fieldLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
marginBottom: 6,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 15,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
smallInput: {},
|
||||
mediumInput: {},
|
||||
dropdown: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
dropdownText: {
|
||||
fontSize: 15,
|
||||
flex: 1,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
readOnlyInput: {
|
||||
justifyContent: "center",
|
||||
opacity: 0.7,
|
||||
},
|
||||
readOnlyText: {
|
||||
fontSize: 15,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
actionButtons: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
alignItems: "center",
|
||||
paddingBottom: 10,
|
||||
},
|
||||
addButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderWidth: 1.5,
|
||||
borderRadius: 8,
|
||||
borderStyle: "dashed",
|
||||
marginTop: 4,
|
||||
},
|
||||
addButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
// Modal styles
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
modalContent: {
|
||||
borderRadius: 12,
|
||||
width: "80%",
|
||||
maxHeight: "50%",
|
||||
overflow: "hidden",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
option: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
optionText: {
|
||||
fontSize: 16,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user