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

update CreateOrHaulModal.tsx

Browse Source
This commit is contained in:
MinhNN
2025-11-09 18:34:58 +07:00
parent c19cc7e00a
commit fd80f63bbe
2 changed files with 95 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
import React from "react"; import React from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form"; import { Controller, useFieldArray, useForm } from "react-hook-form";
import { import {
KeyboardAvoidingView,
Modal, Modal,
Platform,
ScrollView, ScrollView,
Text, Text,
TextInput, TextInput,
@@ -229,14 +231,16 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
const quantity = watch(`fish.${index}.quantity`); const quantity = watch(`fish.${index}.quantity`);
const unit = watch(`fish.${index}.unit`); const unit = watch(`fish.${index}.unit`);
return fishName ? ( return (
<View style={styles.fishCardHeaderContent}> <View style={styles.fishCardHeaderContent}>
<Text style={styles.fishCardTitle}>{fishName}:</Text> <Text style={styles.fishCardTitle}>
{fishName || "Chọn loài cá"}:
</Text>
<Text style={styles.fishCardSubtitle}> <Text style={styles.fishCardSubtitle}>
{quantity} {unit} {fishName ? `${quantity} ${unit}` : "---"}
</Text> </Text>
</View> </View>
) : null; );
})()} })()}
</View> </View>
)} )}
@@ -360,75 +364,81 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
presentationStyle="pageSheet" presentationStyle="pageSheet"
onRequestClose={onClose} onRequestClose={onClose}
> >
<View style={styles.container}> <KeyboardAvoidingView
{/* Header */} style={{ flex: 1 }}
<View style={styles.header}> behavior={Platform.OS === "ios" ? "padding" : "height"}
<Text style={styles.title}> keyboardVerticalOffset={60}
{isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"} >
</Text> <View style={styles.container}>
<View style={styles.headerButtons}> {/* Header */}
{isEditing ? ( <View style={styles.header}>
<> <Text style={styles.title}>
<TouchableOpacity {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
onPress={() => {
setIsEditing(false);
reset(); // reset to previous values
}}
style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
>
<Text style={styles.saveButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSubmit(onSubmit)}
style={styles.saveButton}
>
<Text style={styles.saveButtonText}>Lưu</Text>
</TouchableOpacity>
</>
) : (
!isCreateMode && (
<TouchableOpacity
onPress={() => setIsEditing(true)}
style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
>
<Text style={styles.saveButtonText}>Sửa</Text>
</TouchableOpacity>
)
)}
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<View style={styles.closeIconButton}>
<IconSymbol name="xmark" size={24} color="#fff" />
</View>
</TouchableOpacity>
</View>
</View>
{/* Content */}
<ScrollView style={styles.content}>
{/* Info Section */}
<InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
{/* Fish List */}
{fields.map((item, index) => renderRow(item, index))}
{/* Add Button - only show when editing */}
{isEditing && (
<TouchableOpacity
onPress={() => append(defaultItem())}
style={styles.addButton}
>
<Text style={styles.addButtonText}>+ Thêm loài cá</Text>
</TouchableOpacity>
)}
{/* Error Message */}
{errors.fish && (
<Text style={styles.errorText}>
{(errors.fish as any)?.message}
</Text> </Text>
)} <View style={styles.headerButtons}>
</ScrollView> {isEditing ? (
</View> <>
<TouchableOpacity
onPress={() => {
setIsEditing(false);
reset(); // reset to previous values
}}
style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
>
<Text style={styles.saveButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSubmit(onSubmit)}
style={styles.saveButton}
>
<Text style={styles.saveButtonText}>Lưu</Text>
</TouchableOpacity>
</>
) : (
!isCreateMode && (
<TouchableOpacity
onPress={() => setIsEditing(true)}
style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
>
<Text style={styles.saveButtonText}>Sửa</Text>
</TouchableOpacity>
)
)}
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<View style={styles.closeIconButton}>
<IconSymbol name="xmark" size={24} color="#fff" />
</View>
</TouchableOpacity>
</View>
</View>
{/* Content */}
<ScrollView style={styles.content}>
{/* Info Section */}
<InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
{/* Fish List */}
{fields.map((item, index) => renderRow(item, index))}
{/* Add Button - only show when editing */}
{isEditing && (
<TouchableOpacity
onPress={() => append(defaultItem())}
style={styles.addButton}
>
<Text style={styles.addButtonText}>+ Thêm loài cá</Text>
</TouchableOpacity>
)}
{/* Error Message */}
{errors.fish && (
<Text style={styles.errorText}>
{(errors.fish as any)?.message}
</Text>
)}
</ScrollView>
</View>
</KeyboardAvoidingView>
</Modal> </Modal>
); );
}; };

23
components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
View File

@@ -78,8 +78,8 @@ const styles = StyleSheet.create({
color: "#000", color: "#000",
}, },
fishCardSubtitle: { fishCardSubtitle: {
fontSize: 14, fontSize: 15,
color: "#666", color: "#ff6600",
fontWeight: "500", fontWeight: "500",
}, },
fieldGroup: { fieldGroup: {
@@ -132,19 +132,22 @@ const styles = StyleSheet.create({
fontWeight: "600", fontWeight: "600",
}, },
addButton: { addButton: {
backgroundColor: "#28a745", backgroundColor: "#007AFF",
borderRadius: 8, borderRadius: 12,
paddingHorizontal: 20, padding: 16,
paddingVertical: 12, marginBottom: 12,
marginTop: 16,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
alignSelf: "flex-start", shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
}, },
addButtonText: { addButtonText: {
color: "#fff", fontSize: 16,
fontSize: 14,
fontWeight: "600", fontWeight: "600",
color: "#fff",
}, },
footerSection: { footerSection: {
paddingHorizontal: 16, paddingHorizontal: 16,