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

feat: add and enhance PermitsScreen and RequestPermitModal

Browse Source 
- add LoadingScreen component
- update utilities
This commit is contained in:
leonardo
2025-12-15 17:20:57 +01:00
parent b9807f6cc2
commit ef88c518d1
9 changed files with 166 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -31,6 +31,7 @@ yarn-error.*
*.pem
# local env files
.env
.env*.local
# typescript

1
app/(protected)/_layout.tsx
View File

@ -14,6 +14,7 @@ export default function ProtectedLayout() {
return <Redirect href="/login" />;
}
// TODO: Aggiungere padding per i dispositivi con notch/bottom bar
return (
<Tabs
screenOptions={{

4
app/(protected)/attendance/index.tsx
View File

@ -77,12 +77,12 @@ export default function AttendanceScreen() {
<View className={`w-3 h-3 rounded-full shadow-sm ${item.status === 'complete' ? 'bg-green-500' : 'bg-orange-500'}`} />
<View>
<Text className="font-bold text-gray-800 text-lg mb-0.5">{item.site}</Text>
<Text className="text-sm text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
<Text className="text-base text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
</View>
</View>
{item.status === 'complete' && (
<View className="bg-gray-100 px-3 py-1.5 rounded-lg">
<Text className="text-sm font-mono text-gray-600 font-bold">8h</Text>
<Text className="text-base font-mono text-gray-600 font-bold">8h</Text>
</View>
)}
</View>

12
app/(protected)/permits/index.tsx
View File

@ -4,6 +4,7 @@ import { Alert, ScrollView, Text, TouchableOpacity, View, ActivityIndicator, Ref
import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
import RequestPermitModal from '@/components/RequestPermitModal';
import CalendarWidget from '@/components/CalendarWidget';
import LoadingScreen from '@/components/LoadingScreen';
import api from '@/utils/api';
import { formatDate, formatTime } from '@/utils/dateTime';
@ -51,14 +52,8 @@ export default function PermitsScreen() {
fetchPermits();
};
// TODO: Migliorare schermata di caricamento -> spostarla in un componente a parte
if (isLoading && !refreshing) {
return (
<View className="flex-1 justify-center items-center bg-gray-50">
<ActivityIndicator size="large" color="#099499" />
<Text className="text-gray-500 mt-2">Caricamento...</Text>
</View>
);
return <LoadingScreen />;
}
return (
@ -96,7 +91,7 @@ export default function PermitsScreen() {
) : (
<View className="gap-4">
<Text className="text-xl font-bold text-gray-800 px-1">Le tue richieste</Text>
{/* TODO: Aggiungere una paginazione con delle freccette affianco? */}
{/* TODO: Aggiungere una paginazione con delle freccette affianco? - Limite backend? */}
{permits.map((item) => (
<View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row justify-between items-center">
<View className="flex-row items-center gap-4">
@ -115,6 +110,7 @@ export default function PermitsScreen() {
)}
</View>
</View>
{/* TODO: Aggiungere funzionalità per modificare/eliminare la richiesta? */}
<View className={`px-3 py-1.5 rounded-lg ${item.status ? 'bg-green-100' : 'bg-yellow-100'}`}>
<Text className={`text-xs font-bold uppercase tracking-wide ${item.status ? 'text-green-700' : 'text-yellow-700'}`}>
{item.status ? 'Approvato' : 'In Attesa'}

1
components/CalendarWidget.tsx
View File

@ -32,6 +32,7 @@ export default function CalendarWidget({ events, types }: CalendarWidgetProps) {
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.start_date) return false;
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;

10
components/LoadingScreen.tsx Normal file
View File

@ -0,0 +1,10 @@
import { View, Text, ActivityIndicator } from 'react-native';
export default function LoadingScreen() {
return (
<View className="flex-1 justify-center items-center bg-gray-50">
<ActivityIndicator size="large" color="#099499" />
<Text className="text-gray-500 mt-2">Caricamento...</Text>
</View>
);
}

142
components/RequestPermitModal.tsx
View File

@ -1,10 +1,11 @@
import React, { useState } from 'react';
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 { TimeOffRequestType } from '@/types/types';
import { X } from 'lucide-react-native';
import { TimePickerModal } from './TimePickerModal';
import api from '@/utils/api';
import { formatPickerDate } from '@/utils/dateTime';
interface RequestPermitModalProps {
visible: boolean;
@ -15,86 +16,84 @@ interface RequestPermitModalProps {
export default function RequestPermitModal({ visible, types, onClose, onSubmit }: RequestPermitModalProps) {
const defaultStyles = useDefaultStyles();
const [type, setType] = useState<TimeOffRequestType | undefined>(types[0]); // Default to first type
const [date, setDate] = useState<DateType>();
const [type, setType] = useState<TimeOffRequestType>(types[0]); // Default to first type
const [date, setDate] = useState<string | null>();
const [range, setRange] = useState<{
startDate: DateType;
endDate: DateType;
}>({ startDate: undefined, endDate: undefined });
startDate: string | null;
endDate: string | null;
}>({ startDate: null, endDate: null });
const [showStartPicker, setShowStartPicker] = useState(false);
const [showEndPicker, setShowEndPicker] = useState(false);
const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState('');
const [message, setMessage] = useState('');
// Funzione per resettare le selezioni di data
const clearCalendar = () => {
setDate(undefined);
setRange({ startDate: undefined, endDate: undefined });
setDate(null);
setRange({ startDate: null, endDate: null });
setStartTime(''); setEndTime('');
setType(types[0]);
};
// Funzione per validare la richiesta
function validateRequest(type: TimeOffRequestType, date: string | null | undefined, range: { startDate: string | null; endDate: string | null }, startTime: string, endTime: string, message: string): string | null {
if (!type) return "Seleziona una tipologia di assenza.";
if (!message || message.trim() === "") return "Inserisci un messaggio.";
if (type.time_required === 0) {
if (!range.startDate) return "Seleziona una data di inizio.";
return null;
}
if (!date) return "Seleziona una data.";
if (!startTime || !endTime) return "Seleziona gli orari.";
if (startTime >= endTime) return "L'orario di fine deve essere successivo a quello di inizio.";
return null;
}
// Funzione per inviare la richiesta alla API
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) {
if (response.data.status === 'success') {
Alert.alert('Successo', response.data.message || 'La tua richiesta è stata inviata con successo.');
} else {
Alert.alert('Errore', response.data.message || 'Impossibile inviare la richiesta.');
}
} catch (error: any) {
console.error('Errore nell\'invio della richiesta:', error);
Alert.alert('Errore', 'Impossibile inviare la richiesta. Riprova più tardi.');
throw new Error('Impossibile inviare la richiesta.');
}
};
// Funzione per inviare la richiesta
const handleSubmit = (
type: TimeOffRequestType | undefined,
date: DateType | undefined,
range: { startDate: DateType | undefined; endDate: DateType | undefined },
startTime: string,
endTime: string
) => {
const handleSubmit = async () => {
const error = validateRequest(type, date, range, startTime, endTime, message);
if (error) return Alert.alert("Errore", error);
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,
message: message || ""
};
saveRequest(requestData);
onSubmit(requestData);
try {
await saveRequest(requestData);
onSubmit(requestData); // TODO: Gestire risposta e controllare fetch in index?
onClose();
} catch (e) {
Alert.alert("Errore", "Impossibile inviare la richiesta.");
}
};
return (
<Modal
visible={visible}
@ -113,9 +112,9 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
<View className="space-y-6 gap-6">
<View className="space-y-6">
{/* Tipologia */}
<View>
<View className='mb-6'>
<Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
<ScrollView
horizontal
@ -143,8 +142,12 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
mode="range"
startDate={range.startDate}
endDate={range.endDate}
onChange={(params) => setRange(params)}
timeZone='Universal'
onChange={(params) => {
setRange({
startDate: params.startDate ? formatPickerDate(params.startDate) : null,
endDate: params.endDate ? formatPickerDate(params.endDate) : null
})
}}
locale='it'
styles={{
...defaultStyles,
@ -152,22 +155,24 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
}}
/>
) : (
<View className='flex-column'>
<DateTimePicker
mode="single"
date={date}
onChange={({ date }) => setDate(date)}
timeZone='Universal'
onChange={({ date }) => setDate(date ? formatPickerDate(date) : null)}
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-column bg-orange-50 rounded-xl border border-orange-100 mb-6'>
{type?.time_required === 1 && (
<View>
<View className="flex-row gap-4 p-4">
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
<Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
<TouchableOpacity onPress={() => setShowStartPicker(true)}>
<TextInput
placeholder="09:00"
@ -179,7 +184,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
</TouchableOpacity>
</View>
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
<Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
<TouchableOpacity onPress={() => setShowEndPicker(true)}>
<TextInput
placeholder="18:00"
@ -191,8 +196,6 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
</TouchableOpacity>
</View>
</View>
</View>
)}
<TimePickerModal
visible={showStartPicker}
@ -208,7 +211,22 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
onConfirm={(time) => setEndTime(time)}
onClose={() => setShowEndPicker(false)}
/>
</View>
)}
{/* TODO: Trasformare message in una select? - Predefinito per alcuni tipi */}
<View className="p-4">
<Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Motivo</Text>
<TextInput
placeholder="Scrivi qui il motivo..."
className="w-full px-3 py-4 bg-white font-bold text-gray-800 rounded-lg border border-orange-200 text-gray-800"
textAlignVertical="top"
value={message}
onChangeText={setMessage}
/>
</View>
</View>
{/* Azioni */}
<View className="flex-row gap-4">
<TouchableOpacity
onPress={() => {
@ -221,9 +239,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
handleSubmit(type, date, range, startTime, endTime);
}}
onPress={handleSubmit}
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>

3
utils/api.ts
View File

@ -1,8 +1,7 @@
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store';
const API_BASE_URL = `http://10.0.2.2:32768/mobile`;
const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL;
export const KEY_TOKEN = 'auth_key';
// Crea un'istanza di axios

20
utils/dateTime.ts
View File

@ -1,3 +1,5 @@
import { DateType } from "react-native-ui-datepicker";
/**
* Trasforma una data da "YYYY-MM-DD" a "DD/MM/YYYY"
* @param dateStr stringa data in formato ISO "YYYY-MM-DD"
@ -19,3 +21,21 @@ export const formatTime = (timeStr: string | null | undefined): string => {
const [hours, minutes] = timeStr.split(':');
return `${hours}:${minutes}`;
};
/**
* Formatta una data per l'uso con un date picker, normalizzandola a mezzanotte
* @param d Data in formato DateType
* @returns stringa data in formato "YYYY-MM-DD" o null se l'input è null/undefined
*/
export const formatPickerDate = (d: DateType | null | undefined) => {
if (!d) return null;
const date = new Date(d as string | number | Date);
const normalized = new Date(date.getFullYear(), date.getMonth(), date.getDate());
const yyyy = normalized.getFullYear();
const mm = String(normalized.getMonth() + 1).padStart(2, "0");
const dd = String(normalized.getDate()).padStart(2, "0");
return `${yyyy}-${mm}-${dd}`;
}