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

2025-12-22 15:22:06 +07:00
parent 12fb7c48ed
commit 67e9fc22a3
9 changed files with 228 additions and 86 deletions
--- 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
@@ -29,6 +29,10 @@ export default function TripDurationPicker({
  const { colors, colorScheme } = useThemeContext();
  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 "";
@@ -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 ===");
-
-    // Reset form and close modal
-    handleCancel();
+    setIsSubmitting(true);
+    try {
+      const response = await createTrip(selectedShipId, apiBody);
+      
+      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",