ManageWorkScheduleScreen
unknown
plain_text
6 months ago
8.1 kB
3
Indexable
import React, { useEffect, useState } from 'react'; import { View, Text, FlatList, StyleSheet, TouchableOpacity, Modal, Button, TextInput } from 'react-native'; import { Picker } from '@react-native-picker/picker'; import { useNavigation } from '@react-navigation/native'; import { Ionicons } from '@expo/vector-icons'; const WorkScheduleCard = ({ schedule, onView, onDelete }) => { return ( <View style={styles.card}> <Text style={styles.scheduleInfo}>Doctor ID: {schedule.doctorID}</Text> <Text style={styles.scheduleInfo}>Date: {schedule.date_of_week}</Text> <Text style={styles.scheduleInfo}>Time: {schedule.start_time} - {schedule.end_time}</Text> <Text style={styles.scheduleInfo}>Status: {schedule.status}</Text> <TouchableOpacity onPress={() => onView(schedule)} style={styles.viewButton}> <Text style={styles.viewButtonText}>View</Text> </TouchableOpacity> <TouchableOpacity onPress={() => onDelete(schedule)} style={styles.deleteButton}> <Text style={styles.deleteButtonText}>Delete</Text> </TouchableOpacity> </View> ); }; const ManageWorkScheduleScreen = () => { const navigation = useNavigation(); const [schedules, setSchedules] = useState([]); const [loading, setLoading] = useState(true); const [selectedSchedule, setSelectedSchedule] = useState(null); const [createModalVisible, setCreateModalVisible] = useState(false); const [updateModalVisible, setUpdateModalVisible] = useState(false); const [deleteModalVisible, setDeleteModalVisible] = useState(false); const [scheduleToDelete, setScheduleToDelete] = useState(null); const [newSchedule, setNewSchedule] = useState({ date_of_week: '', doctorID: '', start_time: '', end_time: '', status: 'Available', }); const [updatedSchedule, setUpdatedSchedule] = useState(null); useEffect(() => { const initialSchedules = [ { workID: '1', doctorID: 'D001', date_of_week: 'Monday', start_time: '09:00', end_time: '12:00', status: 'Available', }, { workID: '2', doctorID: 'D002', date_of_week: 'Tuesday', start_time: '10:00', end_time: '13:00', status: 'Unavailable', }, { workID: '3', doctorID: 'D003', date_of_week: 'Wednesday', start_time: '08:00', end_time: '11:00', status: 'Available', }, ]; setSchedules(initialSchedules); setLoading(false); }, []); const handleViewSchedule = (schedule) => { setSelectedSchedule(schedule); }; const handleAddSchedule = () => { const newWorkID = (schedules.length + 1).toString(); const scheduleToAdd = { ...newSchedule, workID: newWorkID }; setSchedules([...schedules, scheduleToAdd]); setCreateModalVisible(false); setNewSchedule({ date_of_week: '', doctorID: '', start_time: '', end_time: '', status: 'Available' }); }; const handleUpdateSchedule = () => { const updatedSchedules = schedules.map(schedule => schedule.workID === updatedSchedule.workID ? updatedSchedule : schedule ); setSchedules(updatedSchedules); setUpdateModalVisible(false); setUpdatedSchedule(null); }; const handleDeleteSchedule = () => { setSchedules(schedules.filter(schedule => schedule.workID !== scheduleToDelete.workID)); setDeleteModalVisible(false); setScheduleToDelete(null); }; const renderItem = ({ item }) => ( <WorkScheduleCard schedule={item} onView={handleViewSchedule} onDelete={(schedule) => { setScheduleToDelete(schedule); setDeleteModalVisible(true); }} /> ); if (loading) { return ( <View style={styles.container}> <Text>Loading...</Text> </View> ); } return ( <View style={styles.container}> <View style={styles.header}> <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}> <Ionicons name="arrow-back" size={24} color="#fff" /> </TouchableOpacity> <Text style={styles.headerText}>Work Schedules</Text> <TouchableOpacity style={styles.createButton} onPress={() => setCreateModalVisible(true)}> <Text style={styles.createButtonText}>Create</Text> </TouchableOpacity> </View> <FlatList data={schedules} renderItem={renderItem} keyExtractor={(item) => item.workID} contentContainerStyle={styles.list} /> {/* Modal thêm lịch làm việc */} <Modal visible={createModalVisible} transparent={true} animationType="slide" onRequestClose={() => setCreateModalVisible(false)} > {/* Modal thêm nội dung */} </Modal> {/* Modal chi tiết lịch làm việc */} <Modal visible={selectedSchedule !== null} transparent={true} animationType="slide" onRequestClose={() => setSelectedSchedule(null)} > {/* Modal chi tiết nội dung */} </Modal> {/* Modal cập nhật lịch làm việc */} <Modal visible={updateModalVisible} transparent={true} animationType="slide" onRequestClose={() => setUpdateModalVisible(false)} > {/* Modal cập nhật nội dung */} </Modal> {/* Modal xác nhận xóa */} <Modal visible={deleteModalVisible} transparent={true} animationType="slide" onRequestClose={() => setDeleteModalVisible(false)} > <View style={styles.modalContainer}> <View style={styles.modalContent}> <Text>Bạn có chắc muốn xóa lịch làm việc này không?</Text> <View style={styles.buttonContainer}> <Button title="Xóa" onPress={handleDeleteSchedule} color="#dc3545" /> <Button title="Hủy" onPress={() => setDeleteModalVisible(false)} color="#6c757d" /> </View> </View> </View> </Modal> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#f8f9fa', }, header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }, backButton: { backgroundColor: '#DDDDDD', paddingVertical: 6, paddingHorizontal: 12, borderRadius: 4, marginRight: 5, }, headerText: { fontSize: 20, fontWeight: 'bold', }, createButton: { padding: 8, backgroundColor: '#28a745', borderRadius: 5, }, createButtonText: { color: '#fff', }, list: { paddingBottom: 16, }, card: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, marginBottom: 15, padding: 15, backgroundColor: '#ffffff', shadowColor: '#000', shadowOffset: { width: 0, height: 1, }, shadowOpacity: 0.2, shadowRadius: 1.41, elevation: 2, }, scheduleInfo: { fontSize: 16, marginBottom: 4, }, viewButton: { marginTop: 8, padding: 8, backgroundColor: '#007bff', borderRadius: 5, }, viewButtonText: { color: '#fff', }, deleteButton: { marginTop: 8, padding: 8, backgroundColor: '#dc3545', borderRadius: 5, }, deleteButtonText: { color: '#fff', }, modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, modalContent: { width: '80%', backgroundColor: '#fff', borderRadius: 10, padding: 16, }, buttonContainer: { flexDirection: 'row', justifyContent: 'space-between', }, }); export default ManageWorkScheduleScreen;
Editor is loading...
Leave a Comment