Skip to content

A
AppUms_Lecturer
Commit 63bc0a43 by tungnq
Options

TODO: Bổ sung chức năng hiển thị FAB theo trạng thái

parent c6819f8e
Showing with 442 additions and 24 deletions
src/components/EditReportModal/index.js 0 → 100644
import EditReportModal from './view';
export default EditReportModal;
src/components/EditReportModal/view.js 0 → 100644
import React, {useState} from 'react';
import {
Modal,
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native';
import R from '../../assets/R';
const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
const [reportContent, setReportContent] = useState(initialContent);
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
onClose();
}
};
const handleCancel = () => {
setReportContent(initialContent);
onClose();
};
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
onRequestClose={onClose}>
<View style={styles.overlay}>
<View style={styles.modalContainer}>
<Text style={styles.title}>Chỉnh sửa báo cáo</Text>
<Text style={styles.description}>
Bạn đã nộp yêu cầu nhưng thành thời khoa chưa trong
thông cho cần đánh giá môn học các công việc và
lịch hẹn quan
</Text>
<Text style={styles.label}>Tài liệu đính kèm</Text>
<View style={styles.attachedFileContainer}>
<Text style={styles.fileName}>
Quyết định thông báo đào tạo - QD347583
</Text>
<TouchableOpacity>
<Image source={R.images.icDelete} style={styles.deleteIcon} />
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.attachmentContainer}>
<Image source={R.images.icUpload} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}
onPress={handleSubmit}>
<Text style={styles.submitButtonText}>Cập nhật</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
backgroundColor: 'white',
borderRadius: 12,
padding: 20,
width: '90%',
maxWidth: 400,
},
title: {
fontSize: 18,
fontWeight: '600',
color: R.colors.blue,
textAlign: 'center',
marginBottom: 16,
},
description: {
fontSize: 14,
color: R.colors.black,
lineHeight: 20,
marginBottom: 20,
textAlign: 'left',
},
label: {
fontSize: 14,
fontWeight: '500',
color: R.colors.black,
marginBottom: 8,
},
attachedFileContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f5f5f5',
borderRadius: 8,
padding: 12,
marginBottom: 12,
},
fileName: {
fontSize: 14,
color: R.colors.black,
flex: 1,
},
deleteIcon: {
width: 20,
height: 20,
tintColor: R.colors.red,
},
attachmentContainer: {
borderWidth: 1,
borderColor: R.colors.gray,
borderRadius: 8,
borderStyle: 'dashed',
padding: 20,
alignItems: 'center',
marginBottom: 20,
},
uploadIcon: {
width: 40,
height: 40,
tintColor: R.colors.blue,
marginBottom: 8,
},
attachmentText: {
fontSize: 14,
color: R.colors.blue,
fontWeight: '500',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: 12,
},
cancelButton: {
flex: 1,
backgroundColor: R.colors.orange,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
submitButton: {
flex: 1,
backgroundColor: R.colors.blue,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
cancelButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
submitButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});
export default EditReportModal;
src/components/WorkReportModal/index.js 0 → 100644
import WorkReportModal from './view';
export default WorkReportModal;
src/components/WorkReportModal/view.js 0 → 100644
import React, {useState} from 'react';
import {
Modal,
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native';
import R from '../../assets/R';
const WorkReportModal = ({visible, onClose, onSubmit}) => {
const [reportContent, setReportContent] = useState('');
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
setReportContent('');
onClose();
}
};
const handleCancel = () => {
setReportContent('');
onClose();
};
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
onRequestClose={onClose}>
<View style={styles.overlay}>
<View style={styles.modalContainer}>
<Text style={styles.title}>Báo cáo công việc</Text>
<Text style={styles.label}>Nội dung báo cáo *</Text>
<TextInput
style={styles.textInput}
multiline={true}
numberOfLines={6}
placeholder="Nhập nội dung báo cáo..."
value={reportContent}
onChangeText={setReportContent}
textAlignVertical="top"
/>
<Text style={styles.label}>Tài liệu đính kèm</Text>
<TouchableOpacity style={styles.attachmentContainer}>
<Image source={R.images.icUpload} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.submitButton, !reportContent.trim() && styles.disabledButton]}
onPress={handleSubmit}
disabled={!reportContent.trim()}>
<Text style={styles.submitButtonText}>Báo cáo</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
backgroundColor: 'white',
borderRadius: 12,
padding: 20,
width: '90%',
maxWidth: 400,
},
title: {
fontSize: 18,
fontWeight: '600',
color: R.colors.blue,
textAlign: 'center',
marginBottom: 20,
},
label: {
fontSize: 14,
fontWeight: '500',
color: R.colors.black,
marginBottom: 8,
},
textInput: {
borderWidth: 1,
borderColor: R.colors.gray,
borderRadius: 8,
padding: 12,
fontSize: 14,
color: R.colors.black,
marginBottom: 16,
minHeight: 120,
},
attachmentContainer: {
borderWidth: 1,
borderColor: R.colors.gray,
borderRadius: 8,
borderStyle: 'dashed',
padding: 20,
alignItems: 'center',
marginBottom: 20,
},
uploadIcon: {
width: 40,
height: 40,
tintColor: R.colors.blue,
marginBottom: 8,
},
attachmentText: {
fontSize: 14,
color: R.colors.blue,
fontWeight: '500',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: 12,
},
cancelButton: {
flex: 1,
backgroundColor: R.colors.orange,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
submitButton: {
flex: 1,
backgroundColor: R.colors.blue,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
disabledButton: {
backgroundColor: R.colors.gray,
},
cancelButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
submitButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});
export default WorkReportModal;
src/screens/list_work/detail/view.js
import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, Image, FlatList} from 'react-native';
import React, {useState} from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Image,
FlatList,
} from 'react-native';
import styles from './style';
import FAB from '../../../components/FAB/fab';
import SubButton from '../../../components/FAB/sub_button';
import R from '../../../assets/R';
import Header from '../../../components/Header/Header';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import WorkReportModal from '../../../components/WorkReportModal';
import EditReportModal from '../../../components/EditReportModal';
const DetailListWorkView = props => {
const { data , dataList } = props;
const getColor = (status) => {
const {data, dataList} = props;
const [showWorkReportModal, setShowWorkReportModal] = useState(false);
const [showEditReportModal, setShowEditReportModal] = useState(false);
const getColor = status => {
switch (status) {
case 'Đang xử lý':
case 'Chờ duyệt':
return R.colors.blue;
case 'Đã hoàn thành':
case 'Hoàn thành':
return R.colors.green;
case 'Đã hủy':
return R.colors.red;
case 'Cần chỉnh sửa':
return R.colors.orange;
case 'Đang thực hiện':
return R.colors.orange;
case 'Chờ báo cáo':
return R.colors.blue;
default:
return R.colors.gray;
}
}
};
const renderView = () => {
return (
<View style={styles.body}>
<Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>{data.title}</Text>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<Text style={styles.text}>Thời hạn:{' '}
<Text style={styles.sub_text}>{data.deadline}</Text>
<Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>
{data.title}
</Text>
<Text style={styles.text}>Trạng thái:{' '}
<Text style={{color:getColor(data.status)}}>{data.status}</Text>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={styles.text}>
Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text>
</Text>
<Text style={styles.text}>
Trạng thái:{' '}
<Text style={{color: getColor(data.status)}}>{data.status}</Text>
</Text>
</View>
<Text style={styles.text}>Công việc thuộc văn bản:
<Text style={[styles.sub_text, {color:R.colors.blue}]}>{data.document}</Text></Text>
<Text style={styles.text}>
Công việc thuộc văn bản:
<Text style={[styles.sub_text, {color: R.colors.blue}]}>
{data.document}
</Text>
</Text>
<Text style={styles.text}>
Người giám sát:
<Text style={styles.sub_text}>{data.supervisor.map(item => item.name).join(', ')}</Text>
<Text style={styles.sub_text}>
{data.supervisor.map(item => item.name).join(', ')}
</Text>
</Text>
<Text style={styles.text}>
Người thực hiện:
<Text style={styles.sub_text}>{data.implementer.map(item => item.name).join(', ')}</Text>
<Text style={styles.sub_text}>
{data.implementer.map(item => item.name).join(', ')}
</Text>
</Text>
<Text style={styles.text}>Nội dung công việc:</Text>
<View style={styles.containerContent}>
<Text style={[styles.text, {color:R.colors.gray}]}>{data.content}</Text>
<Text style={[styles.text, {color: R.colors.gray}]}>
{data.content}
</Text>
</View>
<Text style={styles.text}>Tài liệu đính kèm</Text>
<TouchableOpacity style={styles.containerFile}>
<Text style={styles.text}>Quyết định thông báo đào tạo - QD347583</Text>
<Image source={R.images.icDownload} style={styles.image}/>
<Text style={styles.text}>
Quyết định thông báo đào tạo - QD347583
</Text>
<Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity>
<View style={styles.containerDropdown}>
......@@ -112,18 +140,59 @@ const DetailListWorkView = props => {
);
};
const handleReportPress = () => {
if (data.status === 'Chờ báo cáo') {
setShowWorkReportModal(true);
} else if (data.status === 'Chờ duyệt') {
setShowEditReportModal(true);
} else if (data.status === 'Cần chỉnh sửa') {
setShowWorkReportModal(true);
} else if (data.status === 'Đang thực hiện') {
setShowWorkReportModal(true);
}
};
const handleWorkReportSubmit = (reportContent) => {
console.log('Work report submitted:', reportContent);
// Handle work report submission logic here
};
const handleEditReportSubmit = (reportContent) => {
console.log('Edit report submitted:', reportContent);
// Handle edit report submission logic here
};
const shouldShowFAB = () => {
return data.status !== 'Hoàn thành';
};
return (
<View style={styles.container}>
<Header title={'Chi tiết công việc'} isBack />
{renderView(data)}
{shouldShowFAB() && (
<FAB>
<SubButton
onPress={() => {}}
label="Báo cáo"
onPress={handleReportPress}
label={data.status === 'Chờ duyệt' ? 'Sửa báo cáo' : 'Báo cáo'}
images={R.images.icEdit}
backgroundColor={R.colors.orange}
/>
</FAB>
)}
<WorkReportModal
visible={showWorkReportModal}
onClose={() => setShowWorkReportModal(false)}
onSubmit={handleWorkReportSubmit}
/>
<EditReportModal
visible={showEditReportModal}
onClose={() => setShowEditReportModal(false)}
onSubmit={handleEditReportSubmit}
initialContent=""
/>
</View>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment