cập nhật modal add/edit fishingLog và sửa lỗi event ở map

This commit is contained in:
Tran Anh Tuan
2025-11-07 18:54:44 +07:00
parent c02b61163d
commit 4d821646cf
10 changed files with 300 additions and 213 deletions

View File

@@ -5,11 +5,13 @@ import React from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { Button, FlatList, Modal, Text, TextInput, View } from "react-native";
import { z } from "zod";
import { InfoSection } from "./NetDetailModal/components";
interface CreateOrUpdateHaulModalProps {
isVisible: boolean;
onClose: () => void;
haulData?: Model.FishingLogInfo[] | null;
fishingLog?: Model.FishingLog | null;
fishingLogIndex?: number;
}
const UNITS = ["con", "kg", "tấn"] as const;
@@ -49,9 +51,10 @@ const defaultItem = (): FormValues["fish"][number] => ({
const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
isVisible,
onClose,
haulData,
fishingLog,
fishingLogIndex
}) => {
const [isCreateMode, setIsCreateMode] = React.useState(!haulData);
const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
const { control, handleSubmit, formState, watch, reset } =
useForm<FormValues>({
resolver: zodResolver(formSchema),
@@ -102,14 +105,14 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
return;
}
// when modal opened, populate based on haulData
if (haulData === null) {
// when modal opened, populate based on fishingLog
if (fishingLog?.info === null) {
// explicit null -> start with a single default item
reset({ fish: [defaultItem()] });
setIsCreateMode(true);
} else if (Array.isArray(haulData) && haulData.length > 0) {
} else if (Array.isArray(fishingLog?.info) && fishingLog?.info.length > 0) {
// map FishingLogInfo -> form rows
const mapped = haulData.map((h) => ({
const mapped = fishingLog.info.map((h) => ({
id: h.fish_species_id ?? -1,
quantity: (h.catch_number as number) ?? 1,
unit: (h.catch_unit as Unit) ?? (defaultItem().unit as Unit),
@@ -122,7 +125,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
reset({ fish: [defaultItem()] });
setIsCreateMode(true);
}
}, [isVisible, haulData, reset]);
}, [isVisible, fishingLog?.info, reset]);
const renderRow = ({ item, index }: { item: any; index: number }) => {
return (
<View
@@ -255,6 +258,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
onRequestClose={onClose}
>
<Text>{isCreateMode ? "Create Haul" : "Update Haul"}</Text>
<InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
<FlatList
data={fields}
keyExtractor={(it) => it._id}