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 { Controller, useFieldArray, useForm } from "react-hook-form";
import {
KeyboardAvoidingView,
Modal,
Platform,
ScrollView,
Text,
TextInput,
@@ -229,14 +231,16 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
const quantity = watch(`fish.${index}.quantity`);
const unit = watch(`fish.${index}.unit`);
return fishName ? (
return (
<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}>
{quantity} {unit}
{fishName ? `${quantity} ${unit}` : "---"}
</Text>
</View>
) : null;
);
})()}
</View>
)}
@@ -360,75 +364,81 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
presentationStyle="pageSheet"
onRequestClose={onClose}
>
<View style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.title}>
{isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
</Text>
<View style={styles.headerButtons}>
{isEditing ? (
<>
<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}
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={60}
>
<View style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.title}>
{isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
</Text>
)}
</ScrollView>
</View>
<View style={styles.headerButtons}>
{isEditing ? (
<>
<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>
);
};

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

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