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

2025-11-07 18:54:44 +07:00
parent c02b61163d
commit 4d821646cf
10 changed files with 300 additions and 213 deletions
--- a/components/ButtonCreateNewHaulOrTrip.tsx
+++ b/components/ButtonCreateNewHaulOrTrip.tsx
@@ -94,7 +94,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
      });
      if (resp.status === 200) {
        showSuccessToast("Bắt đầu chuyến đi thành công!");
-        getTrip();
+        await getTrip();
      }
    } catch (error) {
      console.error("Error stating trip :", error);
@@ -125,7 +125,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
      const resp = await queryStartNewHaul(body);
      if (resp.status === 200) {
        showSuccessToast("Bắt đầu mẻ lưới mới thành công!");
-        getTrip();
+        await getTrip();
      } else {
        showErrorToast("Tạo mẻ lưới mới thất bại!");
      }
@@ -173,7 +173,8 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
        </IconButton>
      )}
      <CreateOrUpdateHaulModal
-        haulData={null}
+        fishingLog={trip?.fishing_logs?.find((f) => f.status === 0)!}
+        fishingLogIndex={trip?.fishing_logs?.length!}
        isVisible={isFinishHaulModalOpen}
        onClose={function (): void {
          setIsFinishHaulModalOpen(false);
--- a/components/tripInfo/NetListTable.tsx
+++ b/components/tripInfo/NetListTable.tsx
@@ -3,7 +3,7 @@ import { useFishes } from "@/state/use-fish";
 import { useTrip } from "@/state/use-trip";
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
-import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
+import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
 import styles from "./style/NetListTable.styles";

 const NetListTable: React.FC = () => {
@@ -17,8 +17,11 @@ const NetListTable: React.FC = () => {
  useEffect(() => {
    getFishSpecies();
  }, []);
-  const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
-  const tongSoMe = data.length;
+
+  // useEffect(() => {
+  //   console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
+  // }, [trip]);
+  // const data: Model.FishingLog[] = trip?.fishing_logs ?? [];

  const handleToggle = () => {
    const toValue = collapsed ? contentHeight : 0;
@@ -31,7 +34,7 @@ const NetListTable: React.FC = () => {
  };

  const handleStatusPress = (id: string) => {
-    const net = data.find((item) => item.fishing_log_id === id);
+    const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
    if (net) {
      setSelectedNet(net);
      setModalVisible(true);
@@ -47,7 +50,11 @@ const NetListTable: React.FC = () => {
        style={styles.headerRow}
      >
        <Text style={styles.title}>Danh sách mẻ lưới</Text>
-        {collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>
+            {trip?.fishing_logs?.length}
+          </Text>
+        )}
        <IconSymbol
          name={collapsed ? "chevron.down" : "chevron.up"}
          size={16}
@@ -60,8 +67,18 @@ const NetListTable: React.FC = () => {
        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
        onLayout={(event) => {
          const height = event.nativeEvent.layout.height;
-          if (height > 0 && contentHeight === 0) {
+          // Update measured content height whenever it actually changes.
+          if (height > 0 && height !== contentHeight) {
            setContentHeight(height);
+            // If the panel is currently expanded, animate to the new height so
+            // newly added/removed rows become visible immediately.
+            if (!collapsed) {
+              Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: 200,
+                useNativeDriver: false,
+              }).start();
+            }
          }
        }}
      >
@@ -72,7 +89,7 @@ const NetListTable: React.FC = () => {
        </View>

        {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -101,7 +118,7 @@ const NetListTable: React.FC = () => {
        </View>

        {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -120,9 +137,23 @@ const NetListTable: React.FC = () => {
          </View>
        ))}
      </Animated.View>
-
+      <CreateOrUpdateHaulModal
+        isVisible={modalVisible}
+        onClose={() => {
+          console.log("OnCLose");
+          setModalVisible(false);
+        }}
+        fishingLog={selectedNet}
+        fishingLogIndex={
+          selectedNet
+            ? trip!.fishing_logs!.findIndex(
+                (item) => item.fishing_log_id === selectedNet.fishing_log_id
+              ) + 1
+            : undefined
+        }
+      />
      {/* Modal chi tiết */}
-      <NetDetailModal
+      {/* <NetDetailModal
        visible={modalVisible}
        onClose={() => {
          console.log("OnCLose");
@@ -136,7 +167,7 @@ const NetListTable: React.FC = () => {
              ) + 1
            : undefined
        }
-      />
+      /> */}
    </View>
  );
 };
--- a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
+++ b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
@@ -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}
--- a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
+++ b/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
@@ -11,7 +11,6 @@ import {
 import styles from "../style/NetDetailModal.styles";
 import { CatchSectionHeader } from "./components/CatchSectionHeader";
 import { FishCardList } from "./components/FishCardList";
-import { InfoSection } from "./components/InfoSection";
 import { NotesSection } from "./components/NotesSection";

 interface NetDetailModalProps {
@@ -320,11 +319,11 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
        {/* Content */}
        <ScrollView style={styles.content}>
          {/* Thông tin chung */}
-          <InfoSection
+          {/* <InfoSection
            netData={netData ?? undefined}
            isCompleted={isCompleted}
            stt={stt}
-          />
+          /> */}

          {/* Danh sách cá bắt được */}
          <CatchSectionHeader totalCatch={totalCatch} />
--- a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
+++ b/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
@@ -3,53 +3,52 @@ import { Text, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";

 interface InfoSectionProps {
-  netData?: Model.FishingLog;
-  isCompleted: boolean;
+  fishingLog?: Model.FishingLog;
  stt?: number;
 }

 export const InfoSection: React.FC<InfoSectionProps> = ({
-  netData,
-  isCompleted,
+  fishingLog,
  stt,
 }) => {
-  if (!netData) {
+  if (!fishingLog) {
    return null;
  }
  const infoItems = [
    { label: "Số thứ tự", value: `Mẻ ${stt}` },
    {
      label: "Trạng thái",
-      value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
+      value: fishingLog.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
      isStatus: true,
    },
    {
      label: "Thời gian bắt đầu",
-      value: netData.start_at
-        ? new Date(netData.start_at).toLocaleString()
+      value: fishingLog.start_at
+        ? new Date(fishingLog.start_at).toLocaleString()
        : "Chưa cập nhật",
    },
    {
      label: "Thời gian kết thúc",
-      value: netData.start_at
-        ? new Date(netData.end_at).toLocaleString()
-        : "Chưa cập nhật",
+      value:
+        fishingLog.end_at !== "0001-01-01T00:00:00Z"
+          ? new Date(fishingLog.end_at).toLocaleString()
+          : "-",
    },
    // {
    //   label: "Vị trí hạ thu",
-    //   value: netData.viTriHaThu || "Chưa cập nhật",
+    //   value: fishingLog.viTriHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Vị trí thu lưới",
-    //   value: netData.viTriThuLuoi || "Chưa cập nhật",
+    //   value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu hạ thu",
-    //   value: netData.doSauHaThu || "Chưa cập nhật",
+    //   value: fishingLog.doSauHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu thu lưới",
-    //   value: netData.doSauThuLuoi || "Chưa cập nhật",
+    //   value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
    // },
  ];