408 lines
11 KiB
TypeScript
408 lines
11 KiB
TypeScript
import React, { useState, useRef, useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
Modal,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
Platform,
|
|
ScrollView,
|
|
Animated,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import StatusDropdown from "./StatusDropdown";
|
|
import DateRangePicker from "./DateRangePicker";
|
|
import ShipDropdown from "./ShipDropdown";
|
|
import { TripStatus } from "./types";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
|
|
// Map status number to string - now uses i18n
|
|
export function useMapStatusNumberToString() {
|
|
const { t } = useI18n();
|
|
|
|
return (status: TripStatus | null): string => {
|
|
switch (status) {
|
|
case 0:
|
|
return t("diary.tripStatus.created");
|
|
case 1:
|
|
return t("diary.tripStatus.pending");
|
|
case 2:
|
|
return t("diary.tripStatus.approved");
|
|
case 3:
|
|
return t("diary.tripStatus.departed");
|
|
case 4:
|
|
return t("diary.tripStatus.completed");
|
|
case 5:
|
|
return t("diary.tripStatus.cancelled");
|
|
default:
|
|
return "-";
|
|
}
|
|
};
|
|
}
|
|
|
|
interface FilterModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onApply: (filters: FilterValues) => void;
|
|
}
|
|
|
|
export interface ShipOption {
|
|
id: string;
|
|
shipName: string;
|
|
}
|
|
|
|
export interface FilterValues {
|
|
status: TripStatus | null; // number (0-5) hoặc null
|
|
startDate: Date | null;
|
|
endDate: Date | null;
|
|
selectedShip: ShipOption | null; // Tàu được chọn
|
|
}
|
|
|
|
export default function FilterModal({
|
|
visible,
|
|
onClose,
|
|
onApply,
|
|
}: FilterModalProps) {
|
|
const { t } = useI18n();
|
|
const { colors } = useThemeContext();
|
|
const mapStatusNumberToString = useMapStatusNumberToString();
|
|
const [status, setStatus] = useState<TripStatus | null>(null);
|
|
const [startDate, setStartDate] = useState<Date | null>(null);
|
|
const [endDate, setEndDate] = useState<Date | null>(null);
|
|
const [selectedShip, setSelectedShip] = useState<ShipOption | null>(null);
|
|
|
|
// Animation values
|
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
const slideAnim = useRef(new Animated.Value(Dimensions.get('window').height)).current;
|
|
|
|
// Handle animation when modal visibility changes
|
|
useEffect(() => {
|
|
if (visible) {
|
|
// Open animation: fade overlay + slide content up
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(slideAnim, {
|
|
toValue: 0,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start();
|
|
}
|
|
}, [visible, fadeAnim, slideAnim]);
|
|
|
|
const handleClose = () => {
|
|
// Close animation: fade overlay + slide content down
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0,
|
|
duration: 250,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(slideAnim, {
|
|
toValue: Dimensions.get('window').height,
|
|
duration: 250,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start(() => {
|
|
onClose();
|
|
});
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setStatus(null);
|
|
setStartDate(null);
|
|
setEndDate(null);
|
|
setSelectedShip(null);
|
|
};
|
|
|
|
const handleApply = () => {
|
|
// Close animation then apply
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0,
|
|
duration: 250,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(slideAnim, {
|
|
toValue: Dimensions.get('window').height,
|
|
duration: 250,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start(() => {
|
|
onApply({ status, startDate, endDate, selectedShip });
|
|
onClose();
|
|
});
|
|
};
|
|
|
|
const hasFilters =
|
|
status !== null ||
|
|
startDate !== null ||
|
|
endDate !== null ||
|
|
selectedShip !== null;
|
|
|
|
const themedStyles = {
|
|
modalContainer: {
|
|
backgroundColor: colors.card,
|
|
},
|
|
header: {
|
|
borderBottomColor: colors.separator,
|
|
},
|
|
title: {
|
|
color: colors.text,
|
|
},
|
|
previewContainer: {
|
|
backgroundColor: colors.backgroundSecondary,
|
|
},
|
|
previewTitle: {
|
|
color: colors.textSecondary,
|
|
},
|
|
filterTag: {
|
|
backgroundColor: colors.primary + '20', // 20% opacity
|
|
},
|
|
filterTagText: {
|
|
color: colors.primary,
|
|
},
|
|
footer: {
|
|
borderTopColor: colors.separator,
|
|
},
|
|
resetButton: {
|
|
backgroundColor: colors.backgroundSecondary,
|
|
},
|
|
resetButtonText: {
|
|
color: colors.textSecondary,
|
|
},
|
|
applyButton: {
|
|
backgroundColor: colors.primary,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
animationType="none"
|
|
transparent
|
|
onRequestClose={handleClose}
|
|
>
|
|
<Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
|
|
<TouchableOpacity
|
|
style={styles.overlayTouchable}
|
|
activeOpacity={1}
|
|
onPress={handleClose}
|
|
/>
|
|
<Animated.View
|
|
style={[
|
|
styles.modalContainer,
|
|
themedStyles.modalContainer,
|
|
{ transform: [{ translateY: slideAnim }] }
|
|
]}
|
|
>
|
|
{/* Header */}
|
|
<View style={[styles.header, themedStyles.header]}>
|
|
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
|
<Ionicons name="close" size={24} color={colors.text} />
|
|
</TouchableOpacity>
|
|
<Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
|
|
<View style={styles.placeholder} />
|
|
</View>
|
|
|
|
{/* Content */}
|
|
<ScrollView
|
|
style={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<StatusDropdown value={status} onChange={setStatus} />
|
|
<DateRangePicker
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onStartDateChange={setStartDate}
|
|
onEndDateChange={setEndDate}
|
|
/>
|
|
<ShipDropdown value={selectedShip} onChange={setSelectedShip} />
|
|
|
|
{/* Filter Results Preview */}
|
|
{hasFilters && (
|
|
<View style={[styles.previewContainer, themedStyles.previewContainer]}>
|
|
<Text style={[styles.previewTitle, themedStyles.previewTitle]}>{t("diary.selectedFilters")}</Text>
|
|
{status !== null && (
|
|
<View style={[styles.filterTag, themedStyles.filterTag]}>
|
|
<Text style={[styles.filterTagText, themedStyles.filterTagText]}>
|
|
{t("diary.statusLabel")} {mapStatusNumberToString(status)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{startDate && (
|
|
<View style={[styles.filterTag, themedStyles.filterTag]}>
|
|
<Text style={[styles.filterTagText, themedStyles.filterTagText]}>
|
|
{t("diary.fromLabel")} {startDate.toLocaleDateString("vi-VN")}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{endDate && (
|
|
<View style={[styles.filterTag, themedStyles.filterTag]}>
|
|
<Text style={[styles.filterTagText, themedStyles.filterTagText]}>
|
|
{t("diary.toLabel")} {endDate.toLocaleDateString("vi-VN")}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{selectedShip && (
|
|
<View style={[styles.filterTag, themedStyles.filterTag]}>
|
|
<Text style={[styles.filterTagText, themedStyles.filterTagText]}>
|
|
{t("diary.shipLabel")} {selectedShip.shipName}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.footer, themedStyles.footer]}>
|
|
<TouchableOpacity
|
|
style={[styles.resetButton, themedStyles.resetButton]}
|
|
onPress={handleReset}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[styles.resetButtonText, themedStyles.resetButtonText]}>{t("diary.reset")}</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.applyButton, themedStyles.applyButton]}
|
|
onPress={handleApply}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.applyButtonText}>{t("diary.apply")}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Animated.View>
|
|
</Animated.View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
justifyContent: "flex-end",
|
|
},
|
|
overlayTouchable: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
modalContainer: {
|
|
borderTopLeftRadius: 24,
|
|
borderTopRightRadius: 24,
|
|
maxHeight: "80%",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: -4,
|
|
},
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 12,
|
|
elevation: 8,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
},
|
|
closeButton: {
|
|
padding: 4,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
placeholder: {
|
|
width: 32,
|
|
},
|
|
content: {
|
|
padding: 20,
|
|
},
|
|
previewContainer: {
|
|
marginTop: 20,
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
},
|
|
previewTitle: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
marginBottom: 12,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
filterTag: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 16,
|
|
marginBottom: 8,
|
|
alignSelf: "flex-start",
|
|
},
|
|
filterTagText: {
|
|
fontSize: 14,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
footer: {
|
|
flexDirection: "row",
|
|
gap: 12,
|
|
padding: 20,
|
|
borderTopWidth: 1,
|
|
},
|
|
resetButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
},
|
|
resetButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
applyButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
},
|
|
applyButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: "#FFFFFF",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
});
|