- Refactor Profile and Login screens to use AuthContext for user data
- Enhance RequestPermitModal with multiple time-off types and validation - Implement CalendarWidget for visualizing time-off requests - Improve API error handling and token management - Add utility functions for consistent date and time formatting - Clean up unused mock data and update types
This commit is contained in:
109
components/CalendarWidget.tsx
Normal file
109
components/CalendarWidget.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, TouchableOpacity } from 'react-native';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react-native';
|
||||
import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
|
||||
|
||||
interface CalendarWidgetProps {
|
||||
events: TimeOffRequest[];
|
||||
types: TimeOffRequestType[];
|
||||
}
|
||||
|
||||
export default function CalendarWidget({ events, types }: CalendarWidgetProps) {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
|
||||
// Helpers per il calendario
|
||||
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); // 0 = Sun
|
||||
const adjustedFirstDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // 0 = Mon
|
||||
|
||||
const weekDays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
|
||||
|
||||
const changeMonth = (increment: number) => {
|
||||
const newDate = new Date(currentDate.setMonth(currentDate.getMonth() + increment));
|
||||
setCurrentDate(new Date(newDate));
|
||||
};
|
||||
|
||||
const getEventForDay = (day: number) => {
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
|
||||
const dayStr = String(day).padStart(2, '0');
|
||||
const dateStr = `${year}-${month}-${dayStr}`;
|
||||
|
||||
return events.find(event => {
|
||||
// Logica semplice: controlla se la data cade nel range
|
||||
// Nota: per una logica perfetta sui range lunghi, servirebbe un controllo più approfondito
|
||||
if (event.timeOffRequestType.name === 'Permesso') return event.start_date === dateStr;
|
||||
const end = event.end_date || event.start_date;
|
||||
return dateStr >= event.start_date && dateStr <= end;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
|
||||
{/* Header Mese */}
|
||||
<View className="flex-row justify-between items-center mb-6">
|
||||
<TouchableOpacity
|
||||
onPress={() => changeMonth(-1)}
|
||||
className="p-2 bg-gray-50 rounded-full"
|
||||
>
|
||||
<ChevronLeft size={24} color="#374151" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-xl font-bold text-gray-800 capitalize">
|
||||
{currentDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => changeMonth(1)}
|
||||
className="p-2 bg-gray-50 rounded-full"
|
||||
>
|
||||
<ChevronRight size={24} color="#374151" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Week Header */}
|
||||
<View className="flex-row justify-between mb-4">
|
||||
{weekDays.map(day => (
|
||||
<Text key={day} className="w-10 text-center text-xs font-bold text-gray-400 uppercase">{day}</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Days Grid */}
|
||||
<View className="flex-row flex-wrap gap-y-4">
|
||||
{/* Empty slots for alignment */}
|
||||
{Array.from({ length: adjustedFirstDay }).map((_, i) => (
|
||||
<View key={`empty-${i}`} style={{ width: '14.28%' }} />
|
||||
))}
|
||||
{/* Days */}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const event = getEventForDay(day);
|
||||
|
||||
let bgClass = 'bg-transparent';
|
||||
let textClass = 'text-gray-700';
|
||||
let borderClass = 'border-transparent';
|
||||
|
||||
const bgColor = event?.timeOffRequestType?.color ? `${event.timeOffRequestType.color}25` : 'transparent';
|
||||
const borderColor = event?.timeOffRequestType?.color || 'transparent';
|
||||
const textColor = event ? event.timeOffRequestType?.color : '#374151';
|
||||
|
||||
return (
|
||||
<View key={day} style={{ width: '14.28%' }} className="items-center">
|
||||
<View className={`w-10 h-10 rounded-full items-center justify-center border`} style={{backgroundColor: bgColor, borderColor: borderColor }}>
|
||||
<Text className={`text-sm ${event ? 'font-bold' : ''}`} style={{ color: textColor }}>{day}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Legenda */}
|
||||
<View className="flex-row flex-wrap justify-center gap-4 mt-8 pt-4 border-t border-gray-100">
|
||||
{types.map((type) => (
|
||||
<View key={type.id} className="flex-row items-center" >
|
||||
<View className={`w-3 h-3 rounded-full mr-2`} style={{ backgroundColor: type.color }} />
|
||||
<Text className="text-sm font-medium text-gray-500">{type.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@ -1,19 +1,21 @@
|
||||
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 { View, Text, Modal, TouchableOpacity, TextInput, ScrollView, Alert } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
||||
import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
|
||||
import { X } from 'lucide-react-native';
|
||||
import { TimePickerModal } from './TimePickerModal';
|
||||
import api from '@/utils/api';
|
||||
|
||||
interface RequestPermitModalProps {
|
||||
visible: boolean;
|
||||
types: TimeOffRequestType[];
|
||||
onClose: () => void;
|
||||
onSubmit: (data: any) => void;
|
||||
}
|
||||
|
||||
export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) {
|
||||
export default function RequestPermitModal({ visible, types, onClose, onSubmit }: RequestPermitModalProps) {
|
||||
const defaultStyles = useDefaultStyles();
|
||||
const [type, setType] = useState<PermitType>('Ferie');
|
||||
const [type, setType] = useState<TimeOffRequestType | undefined>(types[0]); // Default to first type
|
||||
const [date, setDate] = useState<DateType>();
|
||||
const [range, setRange] = useState<{
|
||||
startDate: DateType;
|
||||
@ -25,6 +27,74 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
|
||||
const [startTime, setStartTime] = useState('');
|
||||
const [endTime, setEndTime] = useState('');
|
||||
|
||||
// Funzione per resettare le selezioni di data
|
||||
const clearCalendar = () => {
|
||||
setDate(undefined);
|
||||
setRange({ startDate: undefined, endDate: undefined });
|
||||
setStartTime(''); setEndTime('');
|
||||
setType(types[0]);
|
||||
};
|
||||
|
||||
const saveRequest = async (requestData: any) => {
|
||||
try {
|
||||
// Chiamata API per salvare la richiesta
|
||||
const response = await api.post('/time-off-request/save-request', requestData);
|
||||
Alert.alert('Successo', 'La tua richiesta è stata inviata con successo.');
|
||||
} catch (error) {
|
||||
console.error('Errore nell\'invio della richiesta:', error);
|
||||
Alert.alert('Errore', 'Impossibile inviare la richiesta. Riprova più tardi.');
|
||||
}
|
||||
};
|
||||
|
||||
// Funzione per inviare la richiesta
|
||||
const handleSubmit = (
|
||||
type: TimeOffRequestType | undefined,
|
||||
date: DateType | undefined,
|
||||
range: { startDate: DateType | undefined; endDate: DateType | undefined },
|
||||
startTime: string,
|
||||
endTime: string
|
||||
) => {
|
||||
|
||||
if (!type) {
|
||||
alert('Seleziona una tipologia di assenza.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validazioni
|
||||
if (type.time_required === 0) {
|
||||
if (!range.startDate && !range.endDate) {
|
||||
alert('Seleziona almeno una data.');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!date) {
|
||||
alert('Seleziona una data.');
|
||||
return;
|
||||
}
|
||||
if (!startTime || !endTime) {
|
||||
alert('Seleziona l\'orario di inizio e fine.');
|
||||
return;
|
||||
} else if (startTime >= endTime) {
|
||||
alert('L\'orario di fine deve essere successivo all\'orario di inizio.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Costruzione oggetto request
|
||||
const requestData = {
|
||||
id_type: type.id,
|
||||
start_date: type.time_required === 0 ? range.startDate : date,
|
||||
end_date: type.time_required === 0 ? range.endDate : null,
|
||||
start_time: type.time_required === 1 ? startTime : null,
|
||||
end_time: type.time_required === 1 ? endTime : null,
|
||||
};
|
||||
|
||||
saveRequest(requestData);
|
||||
onSubmit(requestData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
@ -46,34 +116,35 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
|
||||
<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) => (
|
||||
<Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingHorizontal: 0, gap: 12 }}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t}
|
||||
key={t.id}
|
||||
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'
|
||||
className={`py-4 px-5 rounded-xl border-2 items-center justify-center ${type?.id === t.id ? '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 className={`text-sm font-bold ${type?.id === t.id ? 'text-[#099499]' : 'text-gray-500'}`}>
|
||||
{t.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Date Selection */}
|
||||
{type !== 'Permesso' ? (
|
||||
{/* Date and Time Selection */}
|
||||
{type?.time_required === 0 ? (
|
||||
<DateTimePicker
|
||||
mode="range"
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(params) => setRange(params)}
|
||||
timeZone='Europe/Rome'
|
||||
timeZone='Universal'
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
@ -86,7 +157,7 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
|
||||
mode="single"
|
||||
date={date}
|
||||
onChange={({ date }) => setDate(date)}
|
||||
timeZone='Europe/Rome'
|
||||
timeZone='Universal'
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
@ -126,36 +197,37 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
|
||||
<TimePickerModal
|
||||
visible={showStartPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Inizio"
|
||||
onConfirm={(time) => setStartTime(time)}
|
||||
onClose={() => setShowStartPicker(false)}
|
||||
/>
|
||||
<TimePickerModal
|
||||
visible={showEndPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Fine"
|
||||
onConfirm={(time) => setEndTime(time)}
|
||||
onClose={() => setShowEndPicker(false)}
|
||||
/>
|
||||
|
||||
<View>
|
||||
<View className="flex-row gap-4">
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
onSubmit({ type, date, range, startTime, endTime });
|
||||
clearCalendar();
|
||||
onClose();
|
||||
}}
|
||||
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]"
|
||||
className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
|
||||
>
|
||||
<Text className="text-gray-700 text-center font-bold text-lg">Annulla Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
handleSubmit(type, date, range, startTime, endTime);
|
||||
}}
|
||||
className="flex-1 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>
|
||||
|
||||
@ -7,11 +7,12 @@ import dayjs from 'dayjs';
|
||||
interface TimePickerModalProps {
|
||||
visible: boolean;
|
||||
initialDate?: DateType;
|
||||
title?: string;
|
||||
onConfirm: (time: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: TimePickerModalProps) => {
|
||||
export const TimePickerModal = ({ visible, initialDate, title, onConfirm, onClose }: TimePickerModalProps) => {
|
||||
const defaultStyles = useDefaultStyles();
|
||||
const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date());
|
||||
|
||||
@ -36,7 +37,8 @@ export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: Ti
|
||||
<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">
|
||||
<View className="flex-row justify-between items-center mb-4">
|
||||
<Text className="text-lg font-bold text-gray-800">{title}</Text>
|
||||
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
|
||||
<X size={20} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
|
||||
Reference in New Issue
Block a user