riccardoandClaude Opus 5
bdaecd4d26
Use the compatible asset representation so the picker transcodes HEIC to JPEG before upload, a format the backend resizes and browsers display. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
411 lines
18 KiB
TypeScript
411 lines
18 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, TouchableOpacity, TextInput, Dimensions, ActivityIndicator, Modal } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { ChevronLeft, ImageIcon, Calendar as CalendarIcon } from 'lucide-react-native';
|
|
import { AppDatePicker } from '@/components/AppDatePicker';
|
|
import { DateType } from 'react-native-ui-datepicker';
|
|
import { formatDate, formatPickerDate } from '@/utils/dateTime';
|
|
import { Image } from 'expo-image';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
|
|
import api from '@/utils/api';
|
|
import { uploadDocument } from '@/utils/documentUtils';
|
|
import { useAlert } from '@/components/AlertComponent';
|
|
import GenericDropdown from '@/components/GenericDropdown';
|
|
import ActivityLaborCard from '@/components/ActivityLaborCard';
|
|
import RemovablePhotoTile from '@/components/RemovablePhotoTile';
|
|
import CameraAddTile from '@/components/CameraAddTile';
|
|
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
|
|
|
|
export default function ActivityFormScreen() {
|
|
const router = useRouter();
|
|
const alert = useAlert();
|
|
const { id } = useLocalSearchParams();
|
|
const isEditing = !!id;
|
|
|
|
// Data lists
|
|
const [subactivities, setSubactivities] = useState<any[]>([]);
|
|
|
|
// Form states
|
|
const [date, setDate] = useState<DateType>(new Date());
|
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
const [selectedSubactivityUuid, setSelectedSubactivityUuid] = useState<string | null>(null);
|
|
const [selectedSubactivityId, setSelectedSubactivityId] = useState<number | null>(null);
|
|
const [description, setDescription] = useState('');
|
|
|
|
// Labor states
|
|
const [operatorLabor, setOperatorLabor] = useState<any[]>([]);
|
|
const [equipmentLabor, setEquipmentLabor] = useState<any[]>([]);
|
|
|
|
// Photos
|
|
const [photos, setPhotos] = useState<any[]>([]); // New photos
|
|
const [existingPhotos, setExistingPhotos] = useState<any[]>([]); // Existing (readonly)
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
// Initial load
|
|
useEffect(() => {
|
|
loadInitialData();
|
|
}, []);
|
|
|
|
const loadInitialData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// Load subactivities
|
|
const subRes = await api.get('/subactivity/get-subactivities');
|
|
if (subRes.data?.success) {
|
|
setSubactivities(subRes.data.subactivities);
|
|
}
|
|
|
|
// If editing, load activity data
|
|
if (isEditing) {
|
|
const actRes = await api.post('/activity/get-activity-data', {
|
|
params: JSON.stringify({ id: id })
|
|
});
|
|
|
|
if (actRes.data?.success) {
|
|
const data = actRes.data;
|
|
const activity = data.activity;
|
|
|
|
setDate(new Date(activity.date));
|
|
setDescription(activity.description || '');
|
|
|
|
if (subRes.data?.success) {
|
|
const match = subRes.data.subactivities.find((s: any) => s.id === activity.id_subactivity);
|
|
if (match) {
|
|
setSelectedSubactivityUuid(match.uuid);
|
|
setSelectedSubactivityId(match.id);
|
|
}
|
|
}
|
|
|
|
setOperatorLabor(data.operator_labor || []);
|
|
setEquipmentLabor(data.materials || []);
|
|
setExistingPhotos(data.attachments || []);
|
|
} else {
|
|
alert.showAlert('error', 'Errore', 'Impossibile caricare i dati dell\'attività.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
alert.showAlert('error', 'Errore', 'Si è verificato un errore di connessione.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDateChange = (params: any) => {
|
|
setDate(params.date);
|
|
setShowDatePicker(false);
|
|
};
|
|
|
|
const pickFromGallery = async () => {
|
|
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (permissionResult.granted === false) {
|
|
alert.showAlert('error', 'Permessi Negati', 'È necessario consentire l\'accesso alla galleria.');
|
|
return;
|
|
}
|
|
|
|
const limit = 50 - photos.length;
|
|
if (limit <= 0) return;
|
|
|
|
try {
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ['images'],
|
|
allowsMultipleSelection: true,
|
|
selectionLimit: limit,
|
|
quality: 0.8,
|
|
// iOS: converte HEIC in JPEG, formato gestito dal backend e visualizzabile sul web
|
|
preferredAssetRepresentationMode: ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
|
|
});
|
|
|
|
if (!result.canceled && result.assets) {
|
|
setPhotos(prev => [...prev, ...result.assets]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Errore gallery:', error);
|
|
}
|
|
};
|
|
|
|
const takePhoto = async () => {
|
|
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
|
|
if (permissionResult.granted === false) {
|
|
alert.showAlert('error', 'Permessi Negati', 'È necessario consentire l\'accesso alla fotocamera.');
|
|
return;
|
|
}
|
|
|
|
if (photos.length >= 50) return;
|
|
|
|
try {
|
|
const result = await ImagePicker.launchCameraAsync({
|
|
mediaTypes: ['images'],
|
|
quality: 0.8,
|
|
});
|
|
|
|
if (!result.canceled && result.assets && result.assets.length > 0) {
|
|
setPhotos(prev => [...prev, result.assets[0]]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Errore fotocamera:', error);
|
|
}
|
|
};
|
|
|
|
const removePhoto = (index: number) => {
|
|
setPhotos(prev => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!selectedSubactivityUuid) {
|
|
alert.showAlert('error', 'Campi obbligatori', 'Selezionare un Cantiere.');
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
// Se in edit mode dobbiamo passare subactivity_id, se in add mode subactivity_uuid.
|
|
let subactivity_id = selectedSubactivityId;
|
|
if (!subactivity_id) {
|
|
const match = subactivities.find(s => s.uuid === selectedSubactivityUuid);
|
|
if (match) subactivity_id = match.id;
|
|
}
|
|
|
|
const payload: any = {
|
|
description: description,
|
|
date: date ? formatPickerDate(date) : new Date().toISOString().split('T')[0], // YYYY-MM-DD
|
|
n_files: photos.length,
|
|
operator_labor: operatorLabor,
|
|
equipment_labor: equipmentLabor,
|
|
};
|
|
|
|
if (isEditing) {
|
|
payload.id = id;
|
|
payload.subactivity_id = subactivity_id;
|
|
} else {
|
|
payload.subactivity_uuid = selectedSubactivityUuid;
|
|
}
|
|
|
|
const params = {
|
|
post: JSON.stringify(payload)
|
|
};
|
|
|
|
const endpoint = isEditing ? '/activity/edit' : '/activity/add';
|
|
const res = await api.post(endpoint, params);
|
|
|
|
if (res.data?.success) {
|
|
const savedId = res.data.id;
|
|
|
|
// Upload new photos sequentially
|
|
if (photos.length > 0) {
|
|
for (const file of photos) {
|
|
const fileName = file.fileName || file.uri.split('/').pop() || 'photo.jpg';
|
|
const mimeType = file.mimeType || 'image/jpeg';
|
|
|
|
await uploadDocument({
|
|
uri: file.uri,
|
|
name: fileName,
|
|
mimeType: mimeType
|
|
}, {
|
|
endpoint: '/activity/upload',
|
|
fileKey: 'files',
|
|
extraData: {
|
|
model_classname: 'Activity',
|
|
model_id: savedId.toString(),
|
|
method: 'put',
|
|
name: fileName,
|
|
type: mimeType
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
alert.showAlert('success', 'Salvato', 'Attività salvata con successo.');
|
|
if (isEditing) {
|
|
router.back();
|
|
} else {
|
|
router.push('/(protected)/activity');
|
|
}
|
|
} else {
|
|
alert.showAlert('error', 'Errore', res.data?.message || 'Impossibile salvare l\'attività.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Errore salvataggio:', error);
|
|
alert.showAlert('error', 'Errore di connessione', 'Verifica la connessione e riprova.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View className="flex-1 bg-gray-50 items-center justify-center">
|
|
<ActivityIndicator size="large" color="#1071C2" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const windowWidth = Dimensions.get('window').width;
|
|
const itemsPerRow = 4;
|
|
const padding = 20;
|
|
const gap = 12;
|
|
const tileWidth = (windowWidth - (padding * 2) - (gap * (itemsPerRow - 1))) / itemsPerRow;
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-50">
|
|
<StatusBar style="dark" />
|
|
|
|
{/* Header */}
|
|
<View className="bg-white px-4 pb-4 shadow-sm border-b border-gray-100">
|
|
<SafeAreaView edges={['top']} className="pt-2">
|
|
<View className="flex-row items-center justify-between px-2">
|
|
<TouchableOpacity onPress={() => router.back()} className="p-2 -ml-2 rounded-full active:bg-gray-100 w-12 items-center justify-center">
|
|
<ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
|
|
</TouchableOpacity>
|
|
|
|
<Text className="text-xl font-bold text-gray-800 uppercase flex-1 text-center" numberOfLines={1}>
|
|
{isEditing ? 'Modifica Attività' : 'Nuova Attività'}
|
|
</Text>
|
|
|
|
<View className="w-12" />
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
|
|
<KeyboardAwareScrollView
|
|
contentContainerStyle={{ padding: 20 }}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* General Info Card */}
|
|
<View className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 mb-4">
|
|
<View className="mb-4">
|
|
<Text className="text-[#082963] font-bold text-sm mb-2 uppercase">Cantiere <Text className="text-red-500">*</Text></Text>
|
|
<View>
|
|
<GenericDropdown
|
|
options={subactivities.map(s => ({ id: s.uuid, label: s.label }))}
|
|
selectedId={selectedSubactivityUuid}
|
|
onSelect={(id) => setSelectedSubactivityUuid(id as string)}
|
|
placeholder="Seleziona il cantiere"
|
|
searchPlaceholder="Cerca cantiere"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="mb-4">
|
|
<Text className="text-[#082963] font-bold text-sm mb-2 uppercase">Data</Text>
|
|
<TouchableOpacity
|
|
onPress={() => setShowDatePicker(true)}
|
|
className="bg-gray-50 border border-gray-200 p-3 rounded-2xl flex-row items-center justify-between"
|
|
>
|
|
<Text className="text-gray-800 text-base">{date ? formatDate(formatPickerDate(date) || undefined) : ''}</Text>
|
|
<CalendarIcon size={20} color="#9ca3af" />
|
|
</TouchableOpacity>
|
|
|
|
{showDatePicker && (
|
|
<Modal visible={showDatePicker} transparent animationType="fade">
|
|
<View className="flex-1 bg-black/50 justify-center px-4">
|
|
<View className="bg-white rounded-3xl p-5 w-full max-w-sm self-center shadow-lg">
|
|
<AppDatePicker
|
|
date={date}
|
|
mode="single"
|
|
onChange={handleDateChange}
|
|
/>
|
|
<TouchableOpacity
|
|
onPress={() => setShowDatePicker(false)}
|
|
className="mt-4 p-3 rounded-xl items-center border border-gray-200 active:bg-gray-50"
|
|
>
|
|
<Text className="text-gray-600 font-bold">Chiudi</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)}
|
|
</View>
|
|
|
|
<View>
|
|
<Text className="text-[#082963] font-bold text-sm mb-2 uppercase">Descrizione</Text>
|
|
<TextInput
|
|
value={description}
|
|
onChangeText={setDescription}
|
|
placeholder="Inserisci una descrizione (opzionale)"
|
|
multiline
|
|
numberOfLines={4}
|
|
textAlignVertical="top"
|
|
className="bg-gray-50 border border-gray-200 p-4 rounded-2xl text-gray-800 text-base min-h-[100px]"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Labor Cards */}
|
|
<View>
|
|
<ActivityLaborCard
|
|
title="Operai"
|
|
fetchUrl="/activity/get-operators"
|
|
laborList={operatorLabor}
|
|
onAddLabor={(labor) => setOperatorLabor([...operatorLabor, labor])}
|
|
onRemoveLabor={(idx) => setOperatorLabor(operatorLabor.filter((_, i) => i !== idx))}
|
|
/>
|
|
|
|
<ActivityLaborCard
|
|
title="Attrezzature"
|
|
fetchUrl="/activity/get-equipment"
|
|
laborList={equipmentLabor}
|
|
onAddLabor={(labor) => setEquipmentLabor([...equipmentLabor, labor])}
|
|
onRemoveLabor={(idx) => setEquipmentLabor(equipmentLabor.filter((_, i) => i !== idx))}
|
|
/>
|
|
</View>
|
|
|
|
{/* Photos */}
|
|
<View className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 mb-6">
|
|
<Text className="text-[#082963] font-bold text-lg mb-4">Allegati</Text>
|
|
|
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: gap }}>
|
|
{/* Existing Photos (Read-only) */}
|
|
{existingPhotos.map((photo, index) => (
|
|
<View key={`ext-${index}`} style={{ width: tileWidth, height: tileWidth }} className="rounded-2xl overflow-hidden border border-gray-200">
|
|
<Image source={{ uri: photo.uri }} style={{ width: '100%', height: '100%' }} contentFit="cover" />
|
|
</View>
|
|
))}
|
|
|
|
{/* New Photos */}
|
|
{photos.map((photo, index) => (
|
|
<RemovablePhotoTile key={`new-${index}`} uri={photo.uri} onRemove={() => removePhoto(index)} size={tileWidth} />
|
|
))}
|
|
|
|
{/* Add Buttons */}
|
|
{(photos.length + existingPhotos.length) < 50 && (
|
|
<>
|
|
<CameraAddTile onPress={takePhoto} size={tileWidth} />
|
|
<TouchableOpacity
|
|
onPress={pickFromGallery}
|
|
style={{ width: tileWidth, height: tileWidth }}
|
|
className="bg-blue-50 items-center justify-center rounded-2xl border border-blue-100 border-dashed"
|
|
>
|
|
<ImageIcon size={24} color="#1071C2" />
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Submit */}
|
|
<TouchableOpacity
|
|
onPress={handleSave}
|
|
disabled={isSubmitting}
|
|
className={`bg-[#1071C2] p-4 rounded-full items-center justify-center mt-2 flex-row gap-2 ${isSubmitting ? 'opacity-70' : 'active:bg-[#0d5a9b]'}`}
|
|
>
|
|
{isSubmitting ? (
|
|
<ActivityIndicator color="white" />
|
|
) : (
|
|
<Text className="text-white font-bold text-lg uppercase tracking-wider">
|
|
{isEditing ? 'Salva Modifiche' : 'Salva Attività'}
|
|
</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</KeyboardAwareScrollView>
|
|
</View>
|
|
);
|
|
}
|