leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add DatePicker and refactor some views layout

Browse Source
This commit is contained in:
leonardo
2025-12-09 13:06:35 +01:00
parent 2251c42ecf
commit abe14f4c3f
12 changed files with 379 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
components/RequestPermitModal.tsx Normal file
View 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>
);
};