Add DatePicker and refactor some views layout
This commit is contained in:
@ -1,16 +1,15 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Text, TouchableOpacity, View } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
||||
import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
|
||||
import { Check, X } from 'lucide-react-native';
|
||||
|
||||
export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
|
||||
// Stato locale temporaneo per la selezione nel modale
|
||||
const [localRange, setLocalRange] = useState(currentRange);
|
||||
|
||||
// Sincronizza lo stato locale quando il modale si apre
|
||||
useEffect(() => {
|
||||
if (visible) setLocalRange(currentRange);
|
||||
}, [visible, currentRange]);
|
||||
const defaultStyles = useDefaultStyles();
|
||||
// const defaultClassNames = useDefaultClassNames();
|
||||
const [range, setRange] = useState<{
|
||||
startDate: DateType;
|
||||
endDate: DateType;
|
||||
}>({ startDate: undefined, endDate: undefined });
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@ -30,19 +29,26 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
|
||||
|
||||
<DateTimePicker
|
||||
mode="range"
|
||||
locale="it"
|
||||
startDate={localRange.startDate}
|
||||
endDate={localRange.endDate}
|
||||
onChange={(params: any) => setLocalRange(params)}
|
||||
// selectedItemColor="#099499"
|
||||
// headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
|
||||
// calendarTextStyle={{ color: '#374151' }}
|
||||
// weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(params) => setRange(params)}
|
||||
timeZone='Europe/Rome'
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
selected: { backgroundColor: '#099499' }
|
||||
}}
|
||||
// classNames={{
|
||||
// ...defaultClassNames,
|
||||
// selected: 'bg-#099499'
|
||||
// }}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
onApply(localRange);
|
||||
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]"
|
||||
@ -50,6 +56,16 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
|
||||
<Check size={20} color="white" className="mr-2" />
|
||||
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
console.log("Reset pressed");
|
||||
range.startDate = range.endDate = undefined;
|
||||
// TODO: deselect dates from calendar
|
||||
}}
|
||||
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>
|
||||
|
||||
@ -1,127 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
|
||||
import { PermitType } from '@/types/types';
|
||||
import { X } from 'lucide-react-native';
|
||||
|
||||
interface RequestPermitModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: any) => void;
|
||||
}
|
||||
|
||||
export default function RequestPermitModal({ visible, onClose, onSubmit}: RequestPermitModalProps) {
|
||||
const [type, setType] = useState<PermitType>('Ferie');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [startTime, setStartTime] = useState('');
|
||||
const [endTime, setEndTime] = useState('');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent={true}
|
||||
animationType="slide"
|
||||
statusBarTranslucent
|
||||
>
|
||||
<View className="flex-1 bg-black/60 justify-end sm:justify-center">
|
||||
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
|
||||
{/* Header Modale */}
|
||||
<View className="flex-row justify-between items-center mb-6">
|
||||
<Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
|
||||
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
|
||||
<X size={24} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
|
||||
<View className="space-y-6 gap-6">
|
||||
{/* Tipologia */}
|
||||
<View>
|
||||
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
|
||||
<View className="flex-row gap-3">
|
||||
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t}
|
||||
onPress={() => setType(t)}
|
||||
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${
|
||||
type === t
|
||||
? 'border-[#099499] bg-teal-50'
|
||||
: 'border-gray-100 bg-white'
|
||||
}`}
|
||||
>
|
||||
<Text className={`text-sm font-bold ${
|
||||
type === t ? 'text-[#099499]' : 'text-gray-500'
|
||||
}`}>
|
||||
{t}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Date Selection */}
|
||||
<View className="flex-row gap-4">
|
||||
<View className={`flex-1 ${type === 'Permesso' ? 'w-full' : ''}`}>
|
||||
<Text className="text-sm font-bold text-gray-700 mb-2">
|
||||
{type === 'Permesso' ? 'Data' : 'Dal'}
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder="YYYY-MM-DD"
|
||||
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
|
||||
value={startDate}
|
||||
onChangeText={setStartDate}
|
||||
/>
|
||||
</View>
|
||||
{type !== 'Permesso' && (
|
||||
<View className="flex-1">
|
||||
<Text className="text-sm font-bold text-gray-700 mb-2">Al</Text>
|
||||
<TextInput
|
||||
placeholder="YYYY-MM-DD"
|
||||
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
|
||||
value={endDate}
|
||||
onChangeText={setEndDate}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Time Selection (Solo Permessi) */}
|
||||
{type === 'Permesso' && (
|
||||
<View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
|
||||
<View className="flex-1">
|
||||
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
|
||||
<TextInput
|
||||
placeholder="09:00"
|
||||
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
|
||||
value={startTime}
|
||||
onChangeText={setStartTime}
|
||||
/>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
|
||||
<TextInput
|
||||
placeholder="18:00"
|
||||
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
|
||||
value={endTime}
|
||||
onChangeText={setEndTime}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
onSubmit({ type, startDate, endDate, startTime, endTime });
|
||||
onClose();
|
||||
}}
|
||||
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg mt-4 active:scale-[0.98]"
|
||||
>
|
||||
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
166
components/RequestPermitModal.tsx
Normal file
166
components/RequestPermitModal.tsx
Normal file
@ -0,0 +1,166 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
|
||||
import { PermitType } from '@/types/types';
|
||||
import { X } from 'lucide-react-native';
|
||||
import { TimePickerModal } from './TimePickerModal';
|
||||
|
||||
interface RequestPermitModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: any) => void;
|
||||
}
|
||||
|
||||
export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) {
|
||||
const defaultStyles = useDefaultStyles();
|
||||
const [type, setType] = useState<PermitType>('Ferie');
|
||||
const [date, setDate] = useState<DateType>();
|
||||
const [range, setRange] = useState<{
|
||||
startDate: DateType;
|
||||
endDate: DateType;
|
||||
}>({ startDate: undefined, endDate: undefined });
|
||||
|
||||
const [showStartPicker, setShowStartPicker] = useState(false);
|
||||
const [showEndPicker, setShowEndPicker] = useState(false);
|
||||
const [startTime, setStartTime] = useState('');
|
||||
const [endTime, setEndTime] = useState('');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent={true}
|
||||
animationType="slide"
|
||||
statusBarTranslucent
|
||||
>
|
||||
<View className="flex-1 bg-black/60 justify-end sm:justify-center">
|
||||
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
|
||||
{/* Header Modale */}
|
||||
<View className="flex-row justify-between items-center mb-6">
|
||||
<Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
|
||||
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
|
||||
<X size={24} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
|
||||
<View className="space-y-6 gap-6">
|
||||
{/* Tipologia */}
|
||||
<View>
|
||||
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
|
||||
<View className="flex-row gap-3">
|
||||
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t}
|
||||
onPress={() => setType(t)}
|
||||
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${type === t
|
||||
? 'border-[#099499] bg-teal-50'
|
||||
: 'border-gray-100 bg-white'
|
||||
}`}
|
||||
>
|
||||
<Text className={`text-sm font-bold ${type === t ? 'text-[#099499]' : 'text-gray-500'
|
||||
}`}>
|
||||
{t}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Date Selection */}
|
||||
{type !== 'Permesso' ? (
|
||||
<DateTimePicker
|
||||
mode="range"
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(params) => setRange(params)}
|
||||
timeZone='Europe/Rome'
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
selected: { backgroundColor: '#099499' }
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View className='flex-column'>
|
||||
<DateTimePicker
|
||||
mode="single"
|
||||
date={date}
|
||||
onChange={({ date }) => setDate(date)}
|
||||
timeZone='Europe/Rome'
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
selected: { backgroundColor: '#099499' }
|
||||
}}
|
||||
/>
|
||||
|
||||
<View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
|
||||
<View className="flex-1">
|
||||
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
|
||||
<TouchableOpacity onPress={() => setShowStartPicker(true)}>
|
||||
<TextInput
|
||||
placeholder="09:00"
|
||||
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
|
||||
value={startTime}
|
||||
onChangeText={setStartTime}
|
||||
editable={false}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
|
||||
<TouchableOpacity onPress={() => setShowEndPicker(true)}>
|
||||
<TextInput
|
||||
placeholder="18:00"
|
||||
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
|
||||
value={endTime}
|
||||
onChangeText={setEndTime}
|
||||
editable={false}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TimePickerModal
|
||||
visible={showStartPicker}
|
||||
initialDate={new Date()}
|
||||
onConfirm={(time) => setStartTime(time)}
|
||||
onClose={() => setShowStartPicker(false)}
|
||||
/>
|
||||
<TimePickerModal
|
||||
visible={showEndPicker}
|
||||
initialDate={new Date()}
|
||||
onConfirm={(time) => setEndTime(time)}
|
||||
onClose={() => setShowEndPicker(false)}
|
||||
/>
|
||||
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
onSubmit({ type, date, range, startTime, endTime });
|
||||
onClose();
|
||||
}}
|
||||
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]"
|
||||
>
|
||||
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
console.log("Reset pressed");
|
||||
onClose();
|
||||
// TODO: deselect dates from calendar
|
||||
}}
|
||||
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">Annulla Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
68
components/TimePickerModal.tsx
Normal file
68
components/TimePickerModal.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Modal, View, TouchableOpacity, Text } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
||||
import { X } from 'lucide-react-native';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface TimePickerModalProps {
|
||||
visible: boolean;
|
||||
initialDate?: DateType;
|
||||
onConfirm: (time: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: TimePickerModalProps) => {
|
||||
const defaultStyles = useDefaultStyles();
|
||||
const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date());
|
||||
|
||||
const formatTime = (date?: DateType | null) => {
|
||||
if (!date) return "00:00";
|
||||
date = dayjs(date);
|
||||
const hour = date?.hour().toString().padStart(2, "0") ?? "00";
|
||||
const minute = date?.minute().toString().padStart(2, "0") ?? "00";
|
||||
return `${hour}:${minute}`;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
const time = formatTime(selectedDate);
|
||||
console.log("Selected time:", time);
|
||||
onConfirm(time);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent animationType="fade">
|
||||
<View className="flex-1 justify-center items-center bg-black/50">
|
||||
<View className="bg-white rounded-xl p-4 w-[90%] max-h-[400px]">
|
||||
|
||||
{/* Header con chiusura */}
|
||||
<View className="flex-row justify-end items-center mb-4">
|
||||
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
|
||||
<X size={20} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* TimePicker */}
|
||||
<DateTimePicker
|
||||
mode="single"
|
||||
timePicker
|
||||
date={selectedDate}
|
||||
initialView="time"
|
||||
hideHeader
|
||||
containerHeight={200}
|
||||
styles={defaultStyles}
|
||||
onChange={(d) => setSelectedDate(d.date || new Date())}
|
||||
/>
|
||||
|
||||
{/* Bottone conferma */}
|
||||
<TouchableOpacity
|
||||
onPress={handleConfirm}
|
||||
className="mt-4 w-full py-3 bg-[#099499] rounded-xl shadow-lg active:scale-[0.98]"
|
||||
>
|
||||
<Text className="text-white text-center font-bold text-lg">Applica</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user