cập nhật phần modal thêm chuyến đi mới
This commit is contained in:
388
components/diary/addTripModal/AutoFillSection.tsx
Normal file
388
components/diary/addTripModal/AutoFillSection.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
Platform,
|
||||
ScrollView,
|
||||
TextInput,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useThings } from "@/state/use-thing";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { queryLastTrip } from "@/controller/TripController";
|
||||
import { showErrorToast } from "@/services/toast_service";
|
||||
|
||||
interface AutoFillSectionProps {
|
||||
onAutoFill: (tripData: Model.Trip, selectedShipId: string) => void;
|
||||
}
|
||||
|
||||
export default function AutoFillSection({ onAutoFill }: AutoFillSectionProps) {
|
||||
const { t } = useI18n();
|
||||
const { colors } = useThemeContext();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const { things } = useThings();
|
||||
|
||||
// Convert things to ship options
|
||||
const shipOptions =
|
||||
things
|
||||
?.filter((thing) => thing.id != null)
|
||||
.map((thing) => ({
|
||||
id: thing.id as string,
|
||||
shipName: thing.metadata?.ship_name || "",
|
||||
})) || [];
|
||||
|
||||
// Filter ships based on search text
|
||||
const filteredShips = shipOptions.filter((ship) => {
|
||||
const searchLower = searchText.toLowerCase();
|
||||
return ship.shipName.toLowerCase().includes(searchLower);
|
||||
});
|
||||
|
||||
const handleSelectShip = async (shipId: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await queryLastTrip(shipId);
|
||||
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);
|
||||
|
||||
// Use Alert instead of Toast so it appears above all modals
|
||||
Alert.alert(
|
||||
t("common.success"),
|
||||
t("diary.autoFill.success")
|
||||
);
|
||||
} else {
|
||||
showErrorToast(t("diary.autoFill.noData"));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching last trip:", error);
|
||||
showErrorToast(t("diary.autoFill.error"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const themedStyles = {
|
||||
container: {
|
||||
backgroundColor: colors.backgroundSecondary,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
label: { color: colors.text },
|
||||
description: { color: colors.textSecondary },
|
||||
button: {
|
||||
backgroundColor: colors.primary,
|
||||
},
|
||||
modalContent: { backgroundColor: colors.card },
|
||||
searchContainer: {
|
||||
backgroundColor: colors.backgroundSecondary,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
searchInput: { color: colors.text },
|
||||
option: { borderBottomColor: colors.separator },
|
||||
optionText: { color: colors.text },
|
||||
emptyText: { color: colors.textSecondary },
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, themedStyles.container]}>
|
||||
<View style={styles.contentWrapper}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons name="flash" size={24} color={colors.primary} />
|
||||
</View>
|
||||
<View style={styles.textContainer}>
|
||||
<Text style={[styles.label, themedStyles.label]}>
|
||||
{t("diary.autoFill.title")}
|
||||
</Text>
|
||||
<Text style={[styles.description, themedStyles.description]}>
|
||||
{t("diary.autoFill.description")}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, themedStyles.button]}
|
||||
onPress={() => setIsOpen(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.buttonText}>{t("diary.autoFill.selectShip")}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Modal
|
||||
visible={isOpen}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setIsOpen(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.modalOverlay}
|
||||
activeOpacity={1}
|
||||
onPress={() => setIsOpen(false)}
|
||||
>
|
||||
<View
|
||||
style={[styles.modalContent, themedStyles.modalContent]}
|
||||
onStartShouldSetResponder={() => true}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={[styles.modalTitle, { color: colors.text }]}>
|
||||
{t("diary.autoFill.modalTitle")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Search Input */}
|
||||
<View
|
||||
style={[styles.searchContainer, themedStyles.searchContainer]}
|
||||
>
|
||||
<Ionicons
|
||||
name="search"
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
style={styles.searchIcon}
|
||||
/>
|
||||
<TextInput
|
||||
style={[styles.searchInput, themedStyles.searchInput]}
|
||||
placeholder={t("diary.searchShip")}
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
value={searchText}
|
||||
onChangeText={setSearchText}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
{searchText.length > 0 && (
|
||||
<TouchableOpacity onPress={() => setSearchText("")}>
|
||||
<Ionicons
|
||||
name="close-circle"
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={colors.primary} />
|
||||
<Text style={[styles.loadingText, { color: colors.textSecondary }]}>
|
||||
{t("diary.autoFill.loading")}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView style={styles.optionsList}>
|
||||
{/* Filtered ship options */}
|
||||
{filteredShips.length > 0 ? (
|
||||
filteredShips.map((ship) => (
|
||||
<TouchableOpacity
|
||||
key={ship.id}
|
||||
style={[styles.option, themedStyles.option]}
|
||||
onPress={() => handleSelectShip(ship.id)}
|
||||
>
|
||||
<View style={styles.optionContent}>
|
||||
<Ionicons
|
||||
name="boat"
|
||||
size={20}
|
||||
color={colors.primary}
|
||||
style={styles.optionIcon}
|
||||
/>
|
||||
<Text style={[styles.optionText, themedStyles.optionText]}>
|
||||
{ship.shipName}
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
))
|
||||
) : (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={[styles.emptyText, themedStyles.emptyText]}>
|
||||
{t("diary.noShipsFound")}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 20,
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderStyle: "dashed",
|
||||
},
|
||||
contentWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 12,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
},
|
||||
textContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
label: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
marginBottom: 4,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
description: {
|
||||
fontSize: 13,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#FFFFFF",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
modalContent: {
|
||||
borderRadius: 12,
|
||||
width: "85%",
|
||||
maxHeight: "70%",
|
||||
overflow: "hidden",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
modalHeader: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
searchIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
padding: 0,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
optionsList: {
|
||||
maxHeight: 350,
|
||||
},
|
||||
option: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
optionContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
},
|
||||
optionIcon: {
|
||||
marginRight: 12,
|
||||
},
|
||||
optionText: {
|
||||
fontSize: 16,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
emptyContainer: {
|
||||
paddingVertical: 24,
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 14,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
loadingContainer: {
|
||||
paddingVertical: 40,
|
||||
alignItems: "center",
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 12,
|
||||
fontSize: 14,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user