121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
import FishingGearList from "./FishingGearList";
|
|
import MaterialCostList from "./MaterialCostList";
|
|
import TripNameInput from "./TripNameInput";
|
|
import TripDurationPicker from "./TripDurationPicker";
|
|
import PortSelector from "./PortSelector";
|
|
import BasicInfoInput from "./BasicInfoInput";
|
|
import ShipSelector from "./ShipSelector";
|
|
import AutoFillSection from "./AutoFillSection";
|
|
import { FishingGear, TripCost } from "./index";
|
|
|
|
interface TripFormBodyProps {
|
|
mode: "add" | "edit" | "view";
|
|
tripData?: Model.Trip;
|
|
// Form state
|
|
selectedShipId: string;
|
|
setSelectedShipId: (id: string) => void;
|
|
tripName: string;
|
|
setTripName: (name: string) => void;
|
|
fishingGears: FishingGear[];
|
|
setFishingGears: (gears: FishingGear[]) => void;
|
|
tripCosts: TripCost[];
|
|
setTripCosts: (costs: TripCost[]) => void;
|
|
startDate: Date | null;
|
|
setStartDate: (date: Date | null) => void;
|
|
endDate: Date | null;
|
|
setEndDate: (date: Date | null) => void;
|
|
departurePortId: number;
|
|
setDeparturePortId: (id: number) => void;
|
|
arrivalPortId: number;
|
|
setArrivalPortId: (id: number) => void;
|
|
fishingGroundCodes: string;
|
|
setFishingGroundCodes: (codes: string) => void;
|
|
// Callbacks
|
|
onAutoFill?: (tripData: Model.Trip, selectedThingId: string) => void;
|
|
}
|
|
|
|
export default function TripFormBody({
|
|
mode,
|
|
selectedShipId,
|
|
setSelectedShipId,
|
|
tripName,
|
|
setTripName,
|
|
fishingGears,
|
|
setFishingGears,
|
|
tripCosts,
|
|
setTripCosts,
|
|
startDate,
|
|
setStartDate,
|
|
endDate,
|
|
setEndDate,
|
|
departurePortId,
|
|
setDeparturePortId,
|
|
arrivalPortId,
|
|
setArrivalPortId,
|
|
fishingGroundCodes,
|
|
setFishingGroundCodes,
|
|
onAutoFill,
|
|
}: TripFormBodyProps) {
|
|
const isEditMode = mode === "edit";
|
|
const isViewMode = mode === "view";
|
|
const isReadOnly = isViewMode;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Auto Fill Section - only show in add mode */}
|
|
{!isEditMode && !isViewMode && onAutoFill && (
|
|
<AutoFillSection onAutoFill={onAutoFill} />
|
|
)}
|
|
|
|
{/* Ship Selector - disabled in edit and view mode */}
|
|
<ShipSelector
|
|
selectedShipId={selectedShipId}
|
|
onChange={setSelectedShipId}
|
|
disabled={isEditMode || isViewMode}
|
|
/>
|
|
|
|
{/* Trip Name */}
|
|
<TripNameInput value={tripName} onChange={setTripName} disabled={isReadOnly} />
|
|
|
|
{/* Fishing Gear List */}
|
|
<FishingGearList items={fishingGears} onChange={setFishingGears} disabled={isReadOnly} />
|
|
|
|
{/* Trip Cost List */}
|
|
<MaterialCostList items={tripCosts} onChange={setTripCosts} disabled={isReadOnly} />
|
|
|
|
{/* Trip Duration */}
|
|
<TripDurationPicker
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onStartDateChange={setStartDate}
|
|
onEndDateChange={setEndDate}
|
|
disabled={isReadOnly}
|
|
/>
|
|
|
|
{/* Port Selector */}
|
|
<PortSelector
|
|
departurePortId={departurePortId}
|
|
arrivalPortId={arrivalPortId}
|
|
onDeparturePortChange={setDeparturePortId}
|
|
onArrivalPortChange={setArrivalPortId}
|
|
disabled={isReadOnly}
|
|
/>
|
|
|
|
{/* Fishing Ground Codes */}
|
|
<BasicInfoInput
|
|
fishingGroundCodes={fishingGroundCodes}
|
|
onChange={setFishingGroundCodes}
|
|
disabled={isReadOnly}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
});
|