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

Add swipe-to-delete functionality for requests and improve QR Code scanning

Browse Source
This commit is contained in:
Riccardo Mancini
2026-02-17 16:12:15 +01:00
parent 68e25fac71
commit ed25c5299d
7 changed files with 249 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@@ -1,3 +1,4 @@
EXPO_PUBLIC_API_URL=[YOUR_API_URL]
EXPO_PUBLIC_HA_API_URL=[YOUR_HOME_ASSISTANT_API_URL]
EXPO_PUBLIC_HA_TOKEN=[YOUR_HOME_ASSISTANT_TOKEN]
EXPO_PUBLIC_ENABLE_NFC=[true|false]

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

@@ -21,8 +21,7 @@ export default function AttendanceScreen() {
const [refreshing, setRefreshing] = useState(false);
const checkNfcAvailability = async () => {
// TODO: add env variable to disable NFC checks in development or if not needed
// if (!ENABLE_NFC) return;
if (process.env.EXPO_PUBLIC_ENABLE_NFC!=='true') return;
try {
const isSupported = await NfcManager.isSupported();
if (isSupported) setScannerType('nfc');

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

@@ -5,10 +5,11 @@ import RequestPermitModal from '@/components/RequestPermitModal';
import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
import api from '@/utils/api';
import { formatDate, formatTime } from '@/utils/dateTime';
import { Calendar as CalendarIcon, CalendarX, Clock, Plus, Thermometer } from 'lucide-react-native';
import { Calendar as CalendarIcon, CalendarX, Clock, Plus, Thermometer, Trash2 } from 'lucide-react-native';
import React, { JSX, useEffect, useMemo, useState } from 'react';
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
// Icon Mapping
const typeIcons: Record<string, (color: string) => JSX.Element> = {
@@ -78,6 +79,73 @@ export default function PermitsScreen() {
fetchPermits();
};
// Funzione per eliminare una richiesta
const deletePermitRequest = async (id: number, itemRef?: React.ElementRef<typeof Swipeable> | null) => {
try {
itemRef?.close();
await api.post(`/time-off-request/delete-request`, {id: id});
// Optimistic update
setPermits(prevPermits => prevPermits.filter(p => p.id !== id));
alert.showAlert('success', 'Richiesta eliminata', 'La richiesta è stata eliminata con successo.');
// Refresh
fetchPermits();
} catch (error: any) {
console.error('Errore eliminazione richiesta:', error);
const errorMessage = error?.response?.data?.message || 'Impossibile eliminare la richiesta.';
alert.showAlert('error', 'Errore', errorMessage);
fetchPermits(); // Ripristina stato corretto
}
};
// Dialogo di conferma
const confirmDelete = (item: TimeOffRequest, itemRef?: React.ElementRef<typeof Swipeable> | null) => {
const requestType = item.timeOffRequestType.name;
const dateRange = item.end_date
? `${formatDate(item.start_date?.toLocaleString())} - ${formatDate(item.end_date.toLocaleString())}`
: formatDate(item.start_date?.toLocaleString());
alert.showConfirm(
'Conferma eliminazione',
`Sei sicuro di voler eliminare questa richiesta?\n\n${requestType}\n${dateRange}`,
[
{
text: 'Annulla',
style: 'cancel',
onPress: () => itemRef?.close()
},
{
text: 'Elimina',
style: 'destructive',
onPress: () => deletePermitRequest(item.id, itemRef)
}
]
);
};
// Renderizza pulsante DELETE al swipe
const renderRightActions = (
progress: any,
dragX: any,
item: TimeOffRequest,
swipeableRef: React.RefObject<React.ElementRef<typeof Swipeable> | null>
) => {
return (
<TouchableOpacity
onPress={() => confirmDelete(item, swipeableRef.current)}
className="bg-red-500 justify-center items-center px-6 rounded-3xl ml-3"
activeOpacity={0.7}
style={{margin: 2}}
>
<View className="items-center gap-1">
<Trash2 size={24} color="white" strokeWidth={2.5} pointerEvents="none" />
<Text className="text-white font-bold text-sm">Elimina</Text>
</View>
</TouchableOpacity>
);
};
if (isLoading && !refreshing) {
return <LoadingScreen />;
}
@@ -119,32 +187,57 @@ export default function PermitsScreen() {
) : (
<View className="gap-4">
<Text className="text-xl font-bold text-gray-800 px-1">Le tue richieste</Text>
{filteredPermits.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">
<View className={`p-4 rounded-2xl`} style={{ backgroundColor: item.timeOffRequestType.color ? `${item.timeOffRequestType.color}25` : '#E5E7EB' }}>
{typeIcons[item.timeOffRequestType.name]?.(item.timeOffRequestType.color)}
</View>
<View>
<Text className="font-bold text-gray-800 text-lg">{item.timeOffRequestType.name}</Text>
<Text className="text-base text-gray-500 mt-0.5">
{formatDate(item.start_date?.toLocaleString())} {item.end_date ? `- ${formatDate(item.end_date.toLocaleString())}` : ''}
</Text>
{item.timeOffRequestType.name === 'Permesso' && (
<Text className="text-sm text-orange-600 font-bold mt-1">
{formatTime(item.start_time)} - {formatTime(item.end_time)}
{filteredPermits.map((item) => {
const swipeableRef = React.createRef<React.ElementRef<typeof Swipeable>>();
const canDelete = item.status === null; // Solo "In Attesa"
const cardContent = (
<View 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">
<View className={`p-4 rounded-2xl`} style={{ backgroundColor: item.timeOffRequestType.color ? `${item.timeOffRequestType.color}25` : '#E5E7EB' }}>
{typeIcons[item.timeOffRequestType.name]?.(item.timeOffRequestType.color)}
</View>
<View>
<Text className="font-bold text-gray-800 text-lg">{item.timeOffRequestType.name}</Text>
<Text className="text-base text-gray-500 mt-0.5">
{formatDate(item.start_date?.toLocaleString())} {item.end_date ? `- ${formatDate(item.end_date.toLocaleString())}` : ''}
</Text>
)}
{item.timeOffRequestType.name === 'Permesso' && (
<Text className="text-sm text-orange-600 font-bold mt-1">
{formatTime(item.start_time)} - {formatTime(item.end_time)}
</Text>
)}
</View>
</View>
<View className={`px-3 py-1.5 rounded-lg ${item.status===1 ? 'bg-green-100' : item.status===0 ? 'bg-red-100' : 'bg-yellow-100'}`}>
<Text className={`text-xs font-bold uppercase tracking-wide ${item.status===1 ? 'text-green-700' : item.status===0 ? 'text-red-700' : 'text-yellow-700'}`}>
{item.status===1 ? 'Approvata' : item.status===0 ? 'Rifiutata' : 'In Attesa'}
</Text>
</View>
</View>
{/* TODO: Add functionality to edit/remove the request */}
<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'}
</Text>
</View>
</View>
))}
);
// Wrappa solo richieste "In Attesa" con Swipeable
if (canDelete) {
return (
<Swipeable
key={item.id}
ref={swipeableRef}
renderRightActions={(progress, dragX) =>
renderRightActions(progress, dragX, item, swipeableRef)
}
rightThreshold={40}
friction={2}
overshootFriction={8}
containerStyle={{padding: 2}}
>
{cardContent}
</Swipeable>
);
}
// Richieste approvate senza swipe
return <View key={item.id}>{cardContent}</View>;
})}
</View>
)}
</View>

27
app/_layout.tsx
View File

@@ -5,22 +5,25 @@ import { AlertProvider } from '@/components/AlertComponent';
import { NetworkProvider } from '@/utils/networkProvider';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { KeyboardProvider } from "react-native-keyboard-controller";
import {GestureHandlerRootView} from "react-native-gesture-handler";
export default function AppLayout() {
return (
<SafeAreaProvider>
<KeyboardProvider>
<NetworkProvider>
<AuthProvider>
<AlertProvider>
<Stack screenOptions={{ headerShown: false, animation: 'flip' }}>
<Stack.Screen name="(protected)" />
<Stack.Screen name="login" />
</Stack>
</AlertProvider>
</AuthProvider>
</NetworkProvider>
</KeyboardProvider>
<GestureHandlerRootView>
<KeyboardProvider>
<NetworkProvider>
<AuthProvider>
<AlertProvider>
<Stack screenOptions={{ headerShown: false, animation: 'flip' }}>
<Stack.Screen name="(protected)" />
<Stack.Screen name="login" />
</Stack>
</AlertProvider>
</AuthProvider>
</NetworkProvider>
</KeyboardProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
);
}

95
components/AlertComponent.tsx
View File

@@ -4,8 +4,21 @@ import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react-native';
type AlertType = 'success' | 'error' | 'info' | 'warning';
type ConfirmButtonStyle = 'default' | 'destructive' | 'cancel';
interface ConfirmButton {
text: string;
onPress: () => void;
style?: ConfirmButtonStyle;
}
interface AlertContextData {
showAlert: (type: AlertType, title: string, message: string) => void;
showConfirm: (
title: string,
message: string,
buttons: [ConfirmButton, ConfirmButton]
) => void;
hideAlert: () => void;
}
@@ -44,11 +57,29 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
const [title, setTitle] = useState('');
const [message, setMessage] = useState('');
const [type, setType] = useState<AlertType>('info');
const [isConfirmMode, setIsConfirmMode] = useState(false);
const [confirmButtons, setConfirmButtons] = useState<[ConfirmButton, ConfirmButton]>([
{ text: 'Annulla', onPress: () => {}, style: 'cancel' },
{ text: 'Conferma', onPress: () => {}, style: 'default' }
]);
const showAlert = (newType: AlertType, newTitle: string, newMessage: string) => {
setType(newType);
setTitle(newTitle);
setMessage(newMessage);
setIsConfirmMode(false);
setVisible(true);
};
const showConfirm = (
newTitle: string,
newMessage: string,
buttons: [ConfirmButton, ConfirmButton]
) => {
setTitle(newTitle);
setMessage(newMessage);
setConfirmButtons(buttons);
setIsConfirmMode(true);
setVisible(true);
};
@@ -60,7 +91,7 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
// TODO: Need to refactor component styles
return (
<AlertContext.Provider value={{ showAlert, hideAlert }}>
<AlertContext.Provider value={{ showAlert, showConfirm, hideAlert }}>
{children}
<Modal
@@ -79,10 +110,12 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
<TouchableWithoutFeedback>
<View className="bg-white w-full max-w-sm rounded-3xl p-6 items-center shadow-2xl">
{/* Icon Circle */}
<View className={`${bgColor} p-4 rounded-full mb-4`}>
<Icon size={32} className={color} strokeWidth={2.5} pointerEvents="none" />
</View>
{/* Icon Circle - Solo per alert normali */}
{!isConfirmMode && (
<View className={`${bgColor} p-4 rounded-full mb-4`}>
<Icon size={32} className={color} strokeWidth={2.5} pointerEvents="none" />
</View>
)}
{/* Texts */}
<Text className="text-xl font-bold text-gray-900 text-center mb-2">
@@ -93,15 +126,49 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
{message}
</Text>
{/* OK Button */}
<TouchableOpacity
onPress={hideAlert}
className={`w-full py-3.5 rounded-3xl ${btnColor} active:opacity-90 shadow-sm`}
>
<Text className="text-white text-center font-bold text-lg">
Ok, ho capito
</Text>
</TouchableOpacity>
{/* Buttons - Condizionale */}
{isConfirmMode ? (
// Conferma: 2 bottoni orizzontali
<View className="flex-row gap-3 w-full">
{confirmButtons.map((button, index) => {
const isDestructive = button.style === 'destructive';
const isCancel = button.style === 'cancel';
return (
<TouchableOpacity
key={index}
onPress={() => {
hideAlert();
button.onPress();
}}
className={`flex-1 py-3.5 rounded-3xl ${
isDestructive
? 'bg-red-600'
: isCancel
? 'bg-gray-200'
: 'bg-[#099499]'
} active:opacity-90 shadow-sm`}
>
<Text className={`text-center font-bold text-lg ${
isCancel ? 'text-gray-700' : 'text-white'
}`}>
{button.text}
</Text>
</TouchableOpacity>
);
})}
</View>
) : (
// Alert normale: singolo bottone OK
<TouchableOpacity
onPress={hideAlert}
className={`w-full py-3.5 rounded-3xl ${btnColor} active:opacity-90 shadow-sm`}
>
<Text className="text-white text-center font-bold text-lg">
Ok, ho capito
</Text>
</TouchableOpacity>
)}
</View>
</TouchableWithoutFeedback>

8
components/QrScanModal.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, Dimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions } from 'expo-camera';
@@ -13,6 +13,7 @@ interface QrScanModalProps {
export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
const scanInProgress = useRef(false);
const { width, height } = Dimensions.get('window');
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
@@ -20,6 +21,7 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
useEffect(() => {
if (visible) {
setScanned(false);
scanInProgress.current = false;
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
@@ -27,7 +29,9 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
}, [visible, permission]);
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
if (scanned) return;
if (scanInProgress.current) return;
scanInProgress.current = true;
setScanned(true);
Vibration.vibrate();
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);

31
components/RequestPermitModal.tsx
View File

@@ -7,7 +7,7 @@ import { TimePickerModal } from './TimePickerModal';
import api from '@/utils/api';
import { formatPickerDate } from '@/utils/dateTime';
import { AppDatePicker } from '@/components/AppDatePicker';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
interface RequestPermitModalProps {
visible: boolean;
@@ -116,13 +116,19 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
</TouchableOpacity>
</View>
<KeyboardAvoidingView
behavior={"padding"}
keyboardVerticalOffset={100}
className='flex-1 mh-600'
<KeyboardAwareScrollView
bottomOffset={Platform.OS === 'ios' ? 50 : 80}
disableScrollOnKeyboardHide={false}
enabled={true}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingBottom: 70,
flexGrow: 1
}}
className="flex-1"
>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
<View className="space-y-6">
<View className="space-y-6">
{/* Permit Type */}
<View className='mb-6'>
<Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
@@ -181,6 +187,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
value={startTime}
onChangeText={setStartTime}
editable={false}
pointerEvents="none"
/>
</TouchableOpacity>
</View>
@@ -194,6 +201,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
value={endTime}
onChangeText={setEndTime}
editable={false}
pointerEvents="none"
/>
</TouchableOpacity>
</View>
@@ -222,10 +230,12 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
<TextInput
placeholder="Scrivi qui il motivo..."
placeholderTextColor="#9CA3AF"
className="w-full px-3 py-4 bg-white font-bold text-gray-800 rounded-lg border border-orange-200 text-gray-800"
className="w-full px-3 py-3 bg-white font-bold text-gray-800 rounded-lg border border-orange-200"
textAlignVertical="top"
value={message}
onChangeText={setMessage}
multiline
numberOfLines={3}
/>
</View>
</View>
@@ -249,9 +259,8 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
</KeyboardAwareScrollView>
</View>
</View>
</Modal>