72 lines
3.3 KiB
TypeScript
72 lines
3.3 KiB
TypeScript
import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
|
|
import { useState, useEffect } from 'react';
|
|
import { X } from 'lucide-react-native';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { getDatabase } from '@/lib/database';
|
|
import { Territory } from '@/lib/territoryHelpers';
|
|
|
|
interface Props { territory: Territory; visible: boolean; onClose: () => void; onSaved: () => void; }
|
|
|
|
export function EditTerritorySheet({ territory, visible, onClose, onSaved }: Props) {
|
|
const [municipality, setMunicipality] = useState(territory.municipality ?? '');
|
|
const [barangay, setBarangay] = useState(territory.barangay ?? '');
|
|
const [area, setArea] = useState(territory.area ?? '');
|
|
const [block, setBlock] = useState(territory.block ?? '');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMunicipality(territory.municipality ?? '');
|
|
setBarangay(territory.barangay ?? '');
|
|
setArea(territory.area ?? '');
|
|
setBlock(territory.block ?? '');
|
|
}, [territory]);
|
|
|
|
async function handleSave() {
|
|
setLoading(true);
|
|
try {
|
|
const db = await getDatabase();
|
|
const now = Math.floor(Date.now() / 1000);
|
|
await db.runAsync(
|
|
'UPDATE territories SET municipality=?, barangay=?, area=?, block=?, updated_at=? WHERE id=?',
|
|
[municipality.trim() || null, barangay.trim() || null, area.trim() || null, block.trim() || null, now, territory.id]
|
|
);
|
|
onSaved();
|
|
} finally { setLoading(false); }
|
|
}
|
|
|
|
return (
|
|
<Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
|
|
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
|
|
<View className="flex-1 bg-secondary">
|
|
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
|
|
<TouchableOpacity
|
|
onPress={onClose}
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Close"
|
|
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
|
>
|
|
<X size={22} color="#2C3E50" />
|
|
</TouchableOpacity>
|
|
<Text className="text-charcoal font-semibold text-lg">Edit Territory</Text>
|
|
<View style={{ width: 44 }} />
|
|
</View>
|
|
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
|
|
<View className="mb-4 bg-gray-100 rounded-xl px-4 py-3">
|
|
<Text className="text-gray-500 text-sm">Territory Code</Text>
|
|
<Text className="text-charcoal font-bold text-lg">{territory.territoryCode}</Text>
|
|
</View>
|
|
<Input label="Municipality" value={municipality} onChangeText={setMunicipality} />
|
|
<Input label="Barangay" value={barangay} onChangeText={setBarangay} />
|
|
<Input label="Area" value={area} onChangeText={setArea} />
|
|
<Input label="Block" value={block} onChangeText={setBlock} />
|
|
</ScrollView>
|
|
<View className="px-4 py-4 border-t border-gray-200 bg-white">
|
|
<Button label="Save Changes" onPress={handleSave} loading={loading} />
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</Modal>
|
|
);
|
|
}
|