Cập nhật API thêm trip (validate)

2025-12-22 15:22:06 +07:00
9 changed files with 228 additions and 86 deletions
--- a/app/(tabs)/diary.tsx
+++ b/app/(tabs)/diary.tsx
@@ -37,6 +37,7 @@ export default function diary() {
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const isInitialLoad = useRef(true);
+  const flatListRef = useRef<FlatList>(null);

  // Body call API things (đang fix cứng)
  const payloadThings: Model.SearchThingBody = {
@@ -198,6 +199,25 @@ export default function diary() {
    // TODO: Show confirmation dialog and delete trip
  };

+  // Handle sau khi thêm chuyến đi thành công
+  const handleTripAddSuccess = useCallback(() => {
+    // Reset về trang đầu và gọi lại API
+    isInitialLoad.current = true;
+    setAllTrips([]);
+    setHasMore(true);
+    const resetPayload: Model.TripListBody = {
+      ...payloadTrips,
+      offset: 0,
+    };
+    setPayloadTrips(resetPayload);
+    getTripsList(resetPayload);
+
+    // Scroll FlatList lên đầu
+    setTimeout(() => {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }, 100);
+  }, [payloadTrips, getTripsList]);
+
  // Dynamic styles based on theme
  const themedStyles = {
    safeArea: {
@@ -304,6 +324,7 @@ export default function diary() {

        {/* Trip List with FlatList */}
        <FlatList
+          ref={flatListRef}
          data={allTrips}
          renderItem={renderTripItem}
          keyExtractor={keyExtractor}
@@ -331,6 +352,7 @@ export default function diary() {
      <AddTripModal
        visible={showAddTripModal}
        onClose={() => setShowAddTripModal(false)}
+        onSuccess={handleTripAddSuccess}
      />
    </SafeAreaView>
  );
--- a/components/diary/addTripModal/AutoFillSection.tsx
+++ b/components/diary/addTripModal/AutoFillSection.tsx
@@ -19,7 +19,7 @@ import { queryLastTrip } from "@/controller/TripController";
 import { showErrorToast } from "@/services/toast_service";

 interface AutoFillSectionProps {
-  onAutoFill: (tripData: Model.Trip, selectedShipId: string) => void;
+  onAutoFill: (tripData: Model.Trip, selectedThingId: string) => void;
 }

 export default function AutoFillSection({ onAutoFill }: AutoFillSectionProps) {
@@ -36,7 +36,7 @@ export default function AutoFillSection({ onAutoFill }: AutoFillSectionProps) {
    things
      ?.filter((thing) => thing.id != null)
      .map((thing) => ({
-        id: thing.id as string,
+        thingId: thing.id as string,
        shipName: thing.metadata?.ship_name || "",
      })) || [];

@@ -46,17 +46,17 @@ export default function AutoFillSection({ onAutoFill }: AutoFillSectionProps) {
    return ship.shipName.toLowerCase().includes(searchLower);
  });

-  const handleSelectShip = async (shipId: string) => {
+  const handleSelectShip = async (thingId: string) => {
    setIsLoading(true);
    try {
-      const response = await queryLastTrip(shipId);
+      const response = await queryLastTrip(thingId);
      if (response.data) {
        // Close the modal first before showing alert
        setIsOpen(false);
        setSearchText("");
        
-        // Pass shipId (thingId) along with trip data for filling ShipSelector
-        onAutoFill(response.data, shipId);
+        // Pass thingId along with trip data for filling ShipSelector
+        onAutoFill(response.data, thingId);
        
        // Use Alert instead of Toast so it appears above all modals
        Alert.alert(
@@ -182,9 +182,9 @@ export default function AutoFillSection({ onAutoFill }: AutoFillSectionProps) {
                {filteredShips.length > 0 ? (
                  filteredShips.map((ship) => (
                    <TouchableOpacity
-                      key={ship.id}
+                      key={ship.thingId}
                      style={[styles.option, themedStyles.option]}
-                      onPress={() => handleSelectShip(ship.id)}
+                      onPress={() => handleSelectShip(ship.thingId)}
                    >
                      <View style={styles.optionContent}>
                        <Ionicons
--- a/components/diary/addTripModal/TripDurationPicker.tsx
+++ b/components/diary/addTripModal/TripDurationPicker.tsx
@@ -30,6 +30,10 @@ export default function TripDurationPicker({
  const [showStartPicker, setShowStartPicker] = useState(false);
  const [showEndPicker, setShowEndPicker] = useState(false);
  
+  // Temp states to hold the picker value before confirming
+  const [tempStartDate, setTempStartDate] = useState<Date>(new Date());
+  const [tempEndDate, setTempEndDate] = useState<Date>(new Date());
+
  const formatDate = (date: Date | null) => {
    if (!date) return "";
    const day = date.getDate().toString().padStart(2, "0");
@@ -38,20 +42,64 @@ export default function TripDurationPicker({
    return `${day}/${month}/${year}`;
  };

+  const handleOpenStartPicker = () => {
+    const today = new Date();
+    const dateToUse = startDate || today;
+    // If no date selected, immediately set to today
+    if (!startDate) {
+      onStartDateChange(today);
+    }
+    // Always set tempStartDate to the date we're using (today if no date was selected)
+    setTempStartDate(dateToUse);
+    setShowStartPicker(true);
+  };
+
+  const handleOpenEndPicker = () => {
+    const today = new Date();
+    const dateToUse = endDate || today;
+    // If no date selected, immediately set to today
+    if (!endDate) {
+      onEndDateChange(today);
+    }
+    // Always set tempEndDate to the date we're using (today if no date was selected)
+    setTempEndDate(dateToUse);
+    setShowEndPicker(true);
+  };
+
  const handleStartDateChange = (event: any, selectedDate?: Date) => {
-    setShowStartPicker(Platform.OS === "ios");
-    if (selectedDate) {
+    if (Platform.OS === "android") {
+      setShowStartPicker(false);
+      if (event.type === "set" && selectedDate) {
+        onStartDateChange(selectedDate);
+      }
+    } else if (selectedDate) {
+      // For iOS, update both temp and actual date immediately
+      setTempStartDate(selectedDate);
      onStartDateChange(selectedDate);
    }
  };

  const handleEndDateChange = (event: any, selectedDate?: Date) => {
-    setShowEndPicker(Platform.OS === "ios");
-    if (selectedDate) {
+    if (Platform.OS === "android") {
+      setShowEndPicker(false);
+      if (event.type === "set" && selectedDate) {
+        onEndDateChange(selectedDate);
+      }
+    } else if (selectedDate) {
+      // For iOS, update both temp and actual date immediately
+      setTempEndDate(selectedDate);
      onEndDateChange(selectedDate);
    }
  };

+  const handleConfirmStartDate = () => {
+    setShowStartPicker(false);
+  };
+
+  const handleConfirmEndDate = () => {
+    setShowEndPicker(false);
+  };
+
  const themedStyles = {
    label: { color: colors.text },
    dateInput: {
@@ -79,7 +127,7 @@ export default function TripDurationPicker({
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={() => setShowStartPicker(true)}
+            onPress={handleOpenStartPicker}
            activeOpacity={0.7}
          >
            <Text
@@ -106,7 +154,7 @@ export default function TripDurationPicker({
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={() => setShowEndPicker(true)}
+            onPress={handleOpenEndPicker}
            activeOpacity={0.7}
          >
            <Text
@@ -141,12 +189,12 @@ export default function TripDurationPicker({
                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                  {t("diary.selectStartDate")}
                </Text>
-                <TouchableOpacity onPress={() => setShowStartPicker(false)}>
+                <TouchableOpacity onPress={handleConfirmStartDate}>
                  <Text style={styles.doneButton}>{t("common.done")}</Text>
                </TouchableOpacity>
              </View>
              <DateTimePicker
-                value={startDate || new Date()}
+                value={tempStartDate}
                mode="date"
                display={Platform.OS === "ios" ? "spinner" : "default"}
                onChange={handleStartDateChange}
@@ -173,12 +221,12 @@ export default function TripDurationPicker({
                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                  {t("diary.selectEndDate")}
                </Text>
-                <TouchableOpacity onPress={() => setShowEndPicker(false)}>
+                <TouchableOpacity onPress={handleConfirmEndDate}>
                  <Text style={styles.doneButton}>{t("common.done")}</Text>
                </TouchableOpacity>
              </View>
              <DateTimePicker
-                value={endDate || new Date()}
+                value={tempEndDate}
                mode="date"
                display={Platform.OS === "ios" ? "spinner" : "default"}
                onChange={handleEndDateChange}
--- a/components/diary/addTripModal/index.tsx
+++ b/components/diary/addTripModal/index.tsx
@@ -7,6 +7,8 @@ import {
  StyleSheet,
  Platform,
  ScrollView,
+  Alert,
+  ActivityIndicator,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useI18n } from "@/hooks/use-i18n";
@@ -19,52 +21,24 @@ import PortSelector from "@/components/diary/addTripModal/PortSelector";
 import BasicInfoInput from "@/components/diary/addTripModal/BasicInfoInput";
 import ShipSelector from "./ShipSelector";
 import AutoFillSection from "./AutoFillSection";
+import { createTrip } from "@/controller/TripController";

-
-// Internal component interfaces
-export interface FishingGear {
+// Internal component interfaces - extend from Model with local id for state management
+export interface FishingGear extends Model.FishingGear {
  id: string;
-  name: string;
-  number: string; // Changed from quantity to number (string)
 }

-export interface TripCost {
+export interface TripCost extends Model.TripCost {
  id: string;
-  type: string;
-  amount: number;
-  unit: string;
-  cost_per_unit: number;
-  total_cost: number;
-}
-
-// API body interface
-export interface TripAPIBody {
-  thing_id?: string; // Ship ID
-  name: string;
-  departure_time: string; // ISO string
-  departure_port_id: number;
-  arrival_time: string; // ISO string
-  arrival_port_id: number;
-  fishing_ground_codes: number[]; // Array of numbers
-  fishing_gears: Array<{
-    name: string;
-    number: string;
-  }>;
-  trip_cost: Array<{
-    type: string;
-    amount: number;
-    unit: string;
-    cost_per_unit: number;
-    total_cost: number;
-  }>;
 }

 interface AddTripModalProps {
  visible: boolean;
  onClose: () => void;
+  onSuccess?: () => void; // Callback khi thêm chuyến đi thành công
 }

-export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
+export default function AddTripModal({ visible, onClose, onSuccess }: AddTripModalProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

@@ -78,6 +52,7 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
  const [departurePortId, setDeparturePortId] = useState<number>(1);
  const [arrivalPortId, setArrivalPortId] = useState<number>(1);
  const [fishingGroundCodes, setFishingGroundCodes] = useState<string>(""); // Input as string, convert to array
+  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleCancel = () => {
    // Reset form
@@ -99,17 +74,19 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
    setSelectedShipId(selectedThingId);

    // Fill trip name
-    if (tripData.name) {
-      setTripName(tripData.name);
-    }
+    // if (tripData.name) {
+    //   setTripName(tripData.name);
+    // }

    // Fill fishing gears
    if (tripData.fishing_gears && Array.isArray(tripData.fishing_gears)) {
-      const gears: FishingGear[] = tripData.fishing_gears.map((gear, index) => ({
-        id: `auto-${Date.now()}-${index}`,
-        name: gear.name || "",
-        number: gear.number?.toString() || "",
-      }));
+      const gears: FishingGear[] = tripData.fishing_gears.map(
+        (gear, index) => ({
+          id: `auto-${Date.now()}-${index}`,
+          name: gear.name || "",
+          number: gear.number?.toString() || "",
+        })
+      );
      setFishingGears(gears);
    }

@@ -135,12 +112,33 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
    }

    // Fill fishing ground codes
-    if (tripData.fishing_ground_codes && Array.isArray(tripData.fishing_ground_codes)) {
+    if (
+      tripData.fishing_ground_codes &&
+      Array.isArray(tripData.fishing_ground_codes)
+    ) {
      setFishingGroundCodes(tripData.fishing_ground_codes.join(", "));
    }
  };

-  const handleSubmit = () => {
+  const handleSubmit = async () => {
+    // Validate thingId is required
+    if (!selectedShipId) {
+      Alert.alert(t("common.error"), t("diary.validation.shipRequired"));
+      return;
+    }
+
+    // Validate dates are required
+    if (!startDate || !endDate) {
+      Alert.alert(t("common.error"), t("diary.validation.datesRequired"));
+      return;
+    }
+
+    // Validate trip name is required
+    if (!tripName.trim()) {
+      Alert.alert(t("common.error"), t("diary.validation.tripNameRequired"));
+      return;
+    }
+
    // Parse fishing ground codes from comma-separated string to array of numbers
    const fishingGroundCodesArray = fishingGroundCodes
      .split(",")
@@ -148,8 +146,8 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
      .filter((code) => !isNaN(code));

    // Format API body
-    const apiBody: TripAPIBody = {
-      thing_id: selectedShipId || undefined,
+    const apiBody: Model.TripAPIBody = {
+      thing_id: selectedShipId,
      name: tripName,
      departure_time: startDate ? startDate.toISOString() : "",
      departure_port_id: departurePortId,
@@ -169,13 +167,37 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
      })),
    };

-    // Simulate API call - log the formatted data
-    console.log("=== Submitting Trip Data (API Format) ===");
-    console.log(JSON.stringify(apiBody, null, 2));
-    console.log("=== End Trip Data ===");
+    setIsSubmitting(true);
+    try {
+      const response = await createTrip(selectedShipId, apiBody);
      
-    // Reset form and close modal
-    handleCancel();
+      if (response.data) {
+        // Show success alert
+        Alert.alert(
+          t("common.success"),
+          t("diary.createTripSuccess")
+        );
+        
+        // Call onSuccess callback
+        if (onSuccess) {
+          onSuccess();
+        }
+        
+        // Reset form and close modal
+        handleCancel();
+      }
+    } catch (error: any) {
+      console.error("Error creating trip:", error);
+      // Log detailed error information for debugging
+      if (error.response) {
+        console.error("Response status:", error.response.status);
+        console.error("Response data:", JSON.stringify(error.response.data, null, 2));
+      }
+      console.log("Request body was:", JSON.stringify(apiBody, null, 2));
+      Alert.alert(t("common.error"), t("diary.createTripError"));
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  const themedStyles = {
@@ -240,16 +262,10 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
            <TripNameInput value={tripName} onChange={setTripName} />

            {/* Fishing Gear List */}
-            <FishingGearList
-              items={fishingGears}
-              onChange={setFishingGears}
-            />
+            <FishingGearList items={fishingGears} onChange={setFishingGears} />

            {/* Trip Cost List */}
-            <MaterialCostList
-              items={tripCosts}
-              onChange={setTripCosts}
-            />
+            <MaterialCostList items={tripCosts} onChange={setTripCosts} />

            {/* Trip Duration */}
            <TripDurationPicker
@@ -281,18 +297,29 @@ export default function AddTripModal({ visible, onClose }: AddTripModalProps) {
              onPress={handleCancel}
              activeOpacity={0.7}
            >
-              <Text style={[styles.cancelButtonText, themedStyles.cancelButtonText]}>
+              <Text
+                style={[styles.cancelButtonText, themedStyles.cancelButtonText]}
+              >
                {t("common.cancel")}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
-              style={[styles.submitButton, themedStyles.submitButton]}
+              style={[
+                styles.submitButton, 
+                themedStyles.submitButton,
+                isSubmitting && styles.submitButtonDisabled
+              ]}
              onPress={handleSubmit}
              activeOpacity={0.7}
+              disabled={isSubmitting}
            >
-              <Text style={styles.submitButtonText}>
-                {t("diary.createTrip")}
-              </Text>
+              {isSubmitting ? (
+                <ActivityIndicator size="small" color="#FFFFFF" />
+              ) : (
+                <Text style={styles.submitButtonText}>
+                  {t("diary.createTrip")}
+                </Text>
+              )}
            </TouchableOpacity>
          </View>
        </View>
@@ -373,6 +400,9 @@ const styles = StyleSheet.create({
    borderRadius: 12,
    alignItems: "center",
  },
+  submitButtonDisabled: {
+    opacity: 0.7,
+  },
  submitButtonText: {
    fontSize: 16,
    fontWeight: "600",
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -58,6 +58,7 @@ export const API_GET_ALL_BANZONES = "/api/sgw/banzones";
 export const API_GET_SHIP_TYPES = "/api/sgw/ships/types";
 export const API_GET_SHIP_GROUPS = "/api/sgw/shipsgroup";
 export const API_GET_LAST_TRIP = "/api/sgw/trips/last";
+export const API_POST_TRIP = "/api/sgw/trips"; 
 export const API_GET_ALARM = "/api/alarms";
 export const API_MANAGER_ALARM = "/api/alarms/confirm";
 export const API_GET_ALL_SHIP = "/api/sgw/ships";
--- a/controller/TripController.ts
+++ b/controller/TripController.ts
@@ -6,6 +6,7 @@ import {
  API_UPDATE_FISHING_LOGS,
  API_UPDATE_TRIP_STATUS,
  API_GET_LAST_TRIP,
+  API_POST_TRIP,
 } from "@/constants";

 export async function queryTrip() {
@@ -31,3 +32,7 @@ export async function queryUpdateFishingLogs(body: Model.FishingLog) {
 export async function queryTripsList(body: Model.TripListBody) {
  return api.post(API_POST_TRIPSLIST, body);
 }
+
+export async function createTrip(thingId: string, body: Model.TripAPIBody) {
+  return api.post<Model.Trip>(`${API_POST_TRIP}/${thingId}`, body);
+}
--- a/controller/typings.d.ts
+++ b/controller/typings.d.ts
@@ -200,6 +200,28 @@ declare namespace Model {
    status: number;
    note?: string;
  }
+
+  // API body interface for creating a new trip
+  interface TripAPIBody {
+    thing_id?: string;
+    name: string;
+    departure_time: string; // ISO string
+    departure_port_id: number;
+    arrival_time: string; // ISO string
+    arrival_port_id: number;
+    fishing_ground_codes: number[];
+    fishing_gears: Array<{
+      name: string;
+      number: string;
+    }>;
+    trip_cost: Array<{
+      type: string;
+      amount: number;
+      unit: string;
+      cost_per_unit: number;
+      total_cost: number;
+    }>;
+  }
  //Fish
  interface FishSpeciesResponse {
    id: number;
--- a/locales/en.json
+++ b/locales/en.json
@@ -165,7 +165,14 @@
      "success": "Data filled from last trip",
      "error": "Unable to fetch trip data",
      "noData": "No previous trip data available"
-    }
+    },
+    "validation": {
+      "shipRequired": "Please select a ship before creating the trip",
+      "datesRequired": "Please select departure and arrival dates",
+      "tripNameRequired": "Please enter a trip name"
+    },
+    "createTripSuccess": "Trip created successfully!",
+    "createTripError": "Unable to create trip. Please try again."
  },
  "trip": {
    "infoTrip": "Trip Information",
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -165,7 +165,14 @@
      "success": "Đã điền dữ liệu từ chuyến đi cuối cùng",
      "error": "Không thể lấy dữ liệu chuyến đi",
      "noData": "Không có dữ liệu chuyến đi trước đó"
-    }
+    },
+    "validation": {
+      "shipRequired": "Vui lòng chọn tàu trước khi tạo chuyến đi",
+      "datesRequired": "Vui lòng chọn ngày khởi hành và ngày kết thúc",
+      "tripNameRequired": "Vui lòng nhập tên chuyến đi"
+    },
+    "createTripSuccess": "Tạo chuyến đi thành công!",
+    "createTripError": "Không thể tạo chuyến đi. Vui lòng thử lại."
  },
  "trip": {
    "infoTrip": "Thông Tin Chuyến Đi",