Initial commit
This commit is contained in:
292
app/(protected)/journal/add.tsx
Normal file
292
app/(protected)/journal/add.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import { ChevronLeft } from 'lucide-react-native';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, TouchableOpacity, TextInput, KeyboardAvoidingView, ScrollView, Platform, Dimensions, ActivityIndicator } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import PlaceFilter from '@/components/PlaceFilter';
|
||||
import { Place } from '@/types/types';
|
||||
import api from '@/utils/api';
|
||||
import { useAlert } from '@/components/AlertComponent';
|
||||
import RemovablePhotoTile from '@/components/RemovablePhotoTile';
|
||||
import CameraAddTile from '@/components/CameraAddTile';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
|
||||
export default function AddJournalScreen() {
|
||||
const router = useRouter();
|
||||
const alert = useAlert();
|
||||
const [places, setPlaces] = useState<Place[]>([]);
|
||||
const [selectedPlaceId, setSelectedPlaceId] = useState<any>(null);
|
||||
const [description, setDescription] = useState('');
|
||||
const [photos, setPhotos] = useState<any[]>([]);
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState<{ current: number, total: number } | null>(null);
|
||||
|
||||
// Dynamic calculation of grid items (4 items per row)
|
||||
const windowWidth = Dimensions.get('window').width;
|
||||
const padding = 24;
|
||||
const gap = 12;
|
||||
const itemsPerRow = 4;
|
||||
const itemSize = (windowWidth - (padding * 2) - (gap * (itemsPerRow - 1))) / itemsPerRow;
|
||||
|
||||
// Function to pick images from the gallery
|
||||
const pickFromGallery = async () => {
|
||||
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
|
||||
if (permissionResult.granted === false) {
|
||||
alert.showAlert('error', 'Permessi Negati', 'È necessario consentire l\'accesso alla galleria per caricare foto.');
|
||||
return;
|
||||
}
|
||||
|
||||
const limit = 50 - photos.length;
|
||||
if (limit <= 0) return;
|
||||
|
||||
try {
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ['images'], // Only images
|
||||
allowsMultipleSelection: true,
|
||||
selectionLimit: limit,
|
||||
quality: 0.8, // Apply light compression and permanently fix the correct orientation
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets) {
|
||||
setPhotos(prev => [...prev, ...result.assets]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Errore nella galleria:', error);
|
||||
alert.showAlert('error', 'Errore', 'Impossibile accedere alla galleria.');
|
||||
}
|
||||
};
|
||||
|
||||
// Function to take a photo using the camera
|
||||
const takePhoto = async () => {
|
||||
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
|
||||
|
||||
if (permissionResult.granted === false) {
|
||||
alert.showAlert('error', 'Permessi Negati', 'È necessario consentire l\'accesso alla fotocamera per scattare foto.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (photos.length >= 50) return;
|
||||
|
||||
try {
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
mediaTypes: ['images'],
|
||||
quality: 0.8, // Apply light compression and permanently fix the correct orientation
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets && result.assets.length > 0) {
|
||||
setPhotos(prev => [...prev, result.assets[0]]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Errore nella fotocamera:', error);
|
||||
alert.showAlert('error', 'Errore', 'Impossibile accedere alla fotocamera.');
|
||||
}
|
||||
};
|
||||
|
||||
const removePhoto = (index: number) => {
|
||||
setPhotos(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedPlaceId) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setUploadProgress(null);
|
||||
|
||||
try {
|
||||
// Create record in the database first
|
||||
const params = {
|
||||
place: selectedPlaceId,
|
||||
description: description,
|
||||
n_files: photos.length
|
||||
};
|
||||
|
||||
const response = await api.post('/journal/add', params);
|
||||
|
||||
if (response.data?.success) {
|
||||
const journalId = response.data.id;
|
||||
|
||||
// Sequential asynchronous upload
|
||||
if (photos.length > 0) {
|
||||
setUploadProgress({ current: 0, total: photos.length });
|
||||
|
||||
for (let i = 0; i < photos.length; i++) {
|
||||
const file = photos[i];
|
||||
let formData = new FormData();
|
||||
|
||||
const fileName = file.fileName || file.uri.split('/').pop() || `photo_${i}.jpg`;
|
||||
const fileType = file.mimeType || 'image/jpeg';
|
||||
const fileUri = Platform.OS === 'android' ? file.uri : file.uri.replace('file://', '');
|
||||
|
||||
formData.append("files", {
|
||||
name: fileName,
|
||||
type: fileType,
|
||||
uri: fileUri
|
||||
} as any);
|
||||
|
||||
formData.append('model_classname', 'JournalUpdate');
|
||||
formData.append('model_id', journalId);
|
||||
formData.append('method', 'put');
|
||||
formData.append('name', fileName);
|
||||
formData.append('type', fileType);
|
||||
|
||||
await api.post('/journal/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
|
||||
setUploadProgress({ current: i + 1, total: photos.length });
|
||||
}
|
||||
}
|
||||
|
||||
alert.showAlert('success', 'Ottimo Lavoro', 'Aggiornamento caricato con successo!');
|
||||
router.replace('/(protected)/journal');
|
||||
} else {
|
||||
alert.showAlert('error', 'Errore', response.data?.message || 'Impossibile creare l\'avanzamento.');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Errore durante il salvataggio:', error);
|
||||
alert.showAlert('error', 'Errore di connessione', 'Verifica la tua connessione e riprova.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setUploadProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPlaces();
|
||||
}, []);
|
||||
|
||||
const fetchPlaces = async () => {
|
||||
try {
|
||||
// This endpoint returns the UUID of the construction site necessary for saving
|
||||
const response = await api.get('/journal/get-places');
|
||||
if (response.data?.success) {
|
||||
const mappedPlaces = response.data.places.map((p: any) => ({
|
||||
id: p.value, // value = UUID
|
||||
label: p.label,
|
||||
code: ''
|
||||
}));
|
||||
setPlaces(mappedPlaces);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Errore nel recupero dei cantieri:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<StatusBar style="dark" />
|
||||
{/* Header */}
|
||||
<View className="bg-white px-4 pb-6 shadow-sm border-b border-gray-100">
|
||||
<SafeAreaView edges={['top']} className='pt-5'>
|
||||
<View className='flex-row items-center gap-4 px-2'>
|
||||
<TouchableOpacity onPress={() => router.back()} className="p-2 -ml-2 rounded-full active:bg-gray-100">
|
||||
<ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text className="text-xl font-bold text-gray-800 leading-tight uppercase flex-1 pr-4">
|
||||
Nuovo Aggiornamento
|
||||
</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'padding'}
|
||||
className="flex-1"
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ padding: 24, paddingBottom: 100 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Place Filter Component */}
|
||||
<View className="border-b border-gray-200 mb-4">
|
||||
<PlaceFilter
|
||||
places={places}
|
||||
selectedPlaceId={selectedPlaceId}
|
||||
onPlaceSelect={setSelectedPlaceId}
|
||||
textColor="text-primary-dark"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Description Area */}
|
||||
<View className="pb-8 border-b border-gray-200 mb-6">
|
||||
<Text className="text-lg font-bold text-primary-dark mb-3">Descrizione</Text>
|
||||
<View className="bg-white rounded-2xl shadow-sm border border-gray-200">
|
||||
<TextInput
|
||||
className="p-4 text-base text-gray-800"
|
||||
placeholder="(opzionale)"
|
||||
placeholderTextColor="#9ca3af"
|
||||
multiline
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
style={{ minHeight: 80, textAlignVertical: 'top' }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Attachments Area */}
|
||||
<View className="pb-8 border-b border-transparent mb-6">
|
||||
<View className="flex-row items-center justify-between mb-4">
|
||||
<Text className="text-lg font-bold text-gray-700">Allegati <Text className="text-sm font-normal text-gray-500">({photos.length}/50)</Text></Text>
|
||||
{photos.length < 50 && (
|
||||
<TouchableOpacity activeOpacity={0.7} onPress={pickFromGallery}>
|
||||
<Text className="text-[#1071C2] font-bold text-base">Aggiungi</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex-row flex-wrap" style={{ gap: gap }}>
|
||||
{photos.map((photo, index) => (
|
||||
<RemovablePhotoTile
|
||||
key={index}
|
||||
uri={photo.uri}
|
||||
size={itemSize}
|
||||
onRemove={() => removePhoto(index)}
|
||||
/>
|
||||
))}
|
||||
{photos.length < 50 && (
|
||||
<CameraAddTile
|
||||
size={itemSize}
|
||||
onPress={takePhoto}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
|
||||
{/* Save Button */}
|
||||
<View className="px-6 pt-2 pb-8">
|
||||
<TouchableOpacity
|
||||
className={`w-full py-4 rounded-[2rem] shadow-sm active:scale-[0.98] ${selectedPlaceId ? 'bg-[#1071C2]' : 'bg-gray-300'}`}
|
||||
disabled={!selectedPlaceId || isSubmitting}
|
||||
onPress={handleSave}
|
||||
>
|
||||
<Text className={`text-center uppercase font-bold text-lg ${selectedPlaceId ? 'text-white' : 'text-gray-500'}`}>Salva</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isSubmitting && (
|
||||
<View className="absolute inset-0 bg-black/60 items-center justify-center z-50">
|
||||
<View className="bg-white p-8 rounded-3xl items-center shadow-2xl min-w-[200px]">
|
||||
<ActivityIndicator size="large" color="#1071C2" className="mb-4" />
|
||||
<Text className="text-gray-800 text-lg font-bold text-center mb-1">
|
||||
{uploadProgress ? 'Caricamento foto...' : 'Salvataggio...'}
|
||||
</Text>
|
||||
{uploadProgress && (
|
||||
<Text className="text-[#1071C2] font-black text-xl text-center mt-2">
|
||||
{uploadProgress.current} / {uploadProgress.total}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user