leonardo
6e5b9cde68
- Added a new DocumentsScreen for managing user documents with search and date filtering capabilities. - Created AddDocumentModal for uploading documents with file selection and custom title options. - Introduced SiteDocumentsScreen to display documents related to specific construction sites. - Implemented SitesScreen for listing construction sites with search functionality. - Updated ProfileScreen to link to the new DocumentsScreen. - Refactored RangePickerModal for selecting date ranges in document filtering. - Improved date formatting utilities for better timestamp handling. - Added necessary API calls for document and site management. - Updated types to reflect changes in document structure and site information. - Added expo-document-picker dependency for document selection functionality.
70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
|
|
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
|
import { Check, X } from 'lucide-react-native';
|
|
|
|
export const RangePickerModal = ({ visible, onClose, onApply }: any) => {
|
|
const defaultStyles = useDefaultStyles();
|
|
const [range, setRange] = useState<{
|
|
startDate: DateType;
|
|
endDate: DateType;
|
|
}>({ startDate: null, endDate: null });
|
|
|
|
const clearCalendar = () => {
|
|
setRange({ startDate: null, endDate: null });
|
|
onApply({ startDate: null, endDate: null });
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent={true}
|
|
animationType="fade"
|
|
onRequestClose={onClose}
|
|
>
|
|
<View className="flex-1 bg-black/60 justify-center items-center p-6">
|
|
<View className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl">
|
|
<View className="flex-row justify-between items-center mb-4">
|
|
<Text className="text-xl font-bold text-gray-800">Seleziona Periodo</Text>
|
|
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-50 rounded-full">
|
|
<X size={20} color="#4b5563" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<DateTimePicker
|
|
mode="range"
|
|
startDate={range.startDate}
|
|
endDate={range.endDate}
|
|
onChange={(params) => setRange(params)}
|
|
timeZone='Europe/Rome'
|
|
locale='it'
|
|
styles={{
|
|
...defaultStyles,
|
|
selected: { backgroundColor: '#099499' }
|
|
}}
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
console.log("Data inizio: ", range.startDate?.toLocaleString());
|
|
console.log("Data fine: ", range.endDate?.toLocaleString());
|
|
onApply(range);
|
|
onClose();
|
|
}}
|
|
className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
|
|
>
|
|
<Check size={20} color="white" className="mr-2" />
|
|
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={clearCalendar}
|
|
className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
|
|
>
|
|
<Text className="text-gray-700 font-bold text-lg ml-2">Reset</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}; |