Commit 2297c8e4 by tungnq

TODO: Tái cấu trúc và bổ sung modal yêu cầu chỉnh sửa báo cáo trong component…

TODO: Tái cấu trúc và bổ sung modal yêu cầu chỉnh sửa báo cáo trong component DetailListWorkMonitoring
parent f50fe522
......@@ -5,6 +5,7 @@ const DetailListWorkMonitoring = props => {
const {route} = props;
const workItem = route?.params?.workItem || {};
const [showRequestReport, setShowRequestReport] = useState(false);
const [showRequestEditReport, setShowRequestEditReport] = useState(false);
const [data, setData] = useState({
id: workItem.id || 1,
......@@ -48,12 +49,17 @@ const DetailListWorkMonitoring = props => {
const [dataReport, setDataReport] = useState([
{
id: 1,
userSend: [
{
title: 'Báo cáo tiến độ lần 1',
time: '14:30',
date: '2025-09-10',
content:
'Báo cáo tiến độ thực hiện công việc được giao. Hiện tại đã hoàn thành 60% công việc theo kế hoạch.',
fileTitle: 'Báo cáo tiến độ - BC001',
},
],
responder: [
{
id: 1,
......@@ -68,12 +74,16 @@ const DetailListWorkMonitoring = props => {
},
{
id: 2,
userSend: [
{
title: 'Báo cáo tiến độ lần 2',
time: '16:00',
date: '2025-09-12',
content:
'Cập nhật tiến độ thực hiện. Đã hoàn thành 80% công việc, dự kiến hoàn thành đúng hạn.',
fileTitle: 'Báo cáo tiến độ - BC002',
},
],
responder: [
{
id: 1,
......@@ -102,6 +112,20 @@ const DetailListWorkMonitoring = props => {
setShowRequestReport(false);
};
const handleOpenRequestEditReport = () => {
if (data.status === 'Chờ duyệt' && dataReport.userSend.length > 0) {
setShowRequestEditReport(true);
}
};
const handleCloseModalRequestEditReport = () => {
setShowRequestEditReport(false);
};
const handleSubmitRequestEditReport = reportData => {
setShowRequestEditReport(false);
};
return (
<DetailListWorkMonitoringView
data={data}
......@@ -111,6 +135,10 @@ const DetailListWorkMonitoring = props => {
showModalRequestReport={showRequestReport}
onCloseModalRequestReport={handleCloseModalRequestReport}
onSubmitRequestReport={handleSubmitRequestReport}
onOpenModalRequestEditReport={handleOpenRequestEditReport}
showModalRequestEditReport={showRequestEditReport}
onCloseModalRequestEditReport={handleCloseModalRequestEditReport}
onSubmitRequestEditReport={handleSubmitRequestEditReport}
/>
);
};
......
import React, {useState} from 'react';
import ModalRequestReportView from './view';
import ModalRequestEditReportView from './view';
const ModalRequestEditReport = props => {
const {visible, onClose, onSubmitReport, workData} = props;
const [reportTitle, setReportTitle] = useState('');
const [reportContent, setReportContent] = useState('');
const [reportDeadline, setReportDeadline] = useState('');
const handleSubmit = () => {
if (!reportTitle.trim()) {
alert('Vui lòng nhập tiêu đề báo cáo');
return;
}
if (!reportContent.trim()) {
alert('Vui lòng nhập nội dung yêu cầu');
return;
}
if (!reportDeadline.trim()) {
alert('Vui lòng nhập hạn báo cáo');
return;
}
const reportData = {
title: reportTitle.trim(),
content: reportContent.trim(),
deadline: reportDeadline.trim(),
workId: workData?.id,
implementers: workData?.implementer || [],
};
onSubmitReport(reportData);
resetForm();
};
const resetForm = () => {
setReportTitle('');
setReportContent('');
setReportDeadline('');
};
const handleClose = () => {
resetForm();
onClose();
};
return (
<ModalRequestEditReportView
visible={visible}
onClose={handleClose}
onSubmit={handleSubmit}
reportTitle={reportTitle}
setReportTitle={setReportTitle}
reportContent={reportContent}
setReportContent={setReportContent}
reportDeadline={reportDeadline}
setReportDeadline={setReportDeadline}
implementers={workData?.implementer}
/>
);
};
export default ModalRequestEditReport;
import {StyleSheet} from 'react-native';
import R from '../../../../assets/R';
const styles = StyleSheet.create({
// Modal styles
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
backgroundColor: R.colors.white,
borderRadius: 15,
width: '90%',
maxHeight: '80%',
elevation: 5,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
padding: 10,
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 20,
borderBottomWidth: 1,
borderBottomColor: R.colors.grayBorderInputTextHeader,
},
modalTitle: {
fontSize: R.fontsize.fontSizeTitle,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
textAlign: 'center',
},
closeButton: {
padding: 5,
},
closeIcon: {
width: 20,
height: 20,
tintColor: R.colors.gray,
},
modalContent: {
padding: 20,
maxHeight: 400,
},
inputLabel: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
marginBottom: 8,
marginTop: 15,
},
required: {
color: R.colors.red,
},
textInput: {
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
borderRadius: 10,
padding: 12,
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
backgroundColor: R.colors.white,
},
textArea: {
height: 100,
textAlignVertical: 'top',
},
dateInput: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
borderRadius: 10,
paddingHorizontal: 12,
backgroundColor: R.colors.white,
},
dateText: {
flex: 1,
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
paddingVertical: 12,
},
calendarIcon: {
width: 20,
height: 20,
tintColor: R.colors.blue,
},
assigneeContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 8,
},
assigneeChip: {
backgroundColor: R.colors.blue2,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 15,
marginRight: 8,
marginBottom: 8,
},
assigneeText: {
fontSize: R.fontsize.fontSizeSmall,
fontFamily: R.fonts.fontRegular,
color: R.colors.blueTextChip,
},
modalFooter: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 20,
borderTopWidth: 1,
borderTopColor: R.colors.grayBorderInputTextHeader,
},
cancelButton: {
flex: 1,
backgroundColor: R.colors.white,
borderWidth: 1,
borderColor: R.colors.gray,
borderRadius: 10,
paddingVertical: 12,
marginRight: 10,
alignItems: 'center',
},
cancelButtonText: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.gray,
},
submitButton: {
flex: 1,
backgroundColor: R.colors.blue,
borderRadius: 10,
paddingVertical: 12,
marginLeft: 10,
alignItems: 'center',
},
submitButtonText: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.white,
},
buttonContainerStyle: {
borderRadius: 15,
color: R.colors.white,
},
containerButton: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginTop: 10,
},
});
export default styles;
import React from 'react';
import {
Modal,
View,
Text,
} from 'react-native';
import styles from './style';
import R from '../../../../assets/R';
import TextField from '../../../../components/Input/TextField';
import Button from '../../../../components/Button';
import TextMulti from '../../../../components/Input/TextMulti';
const ModalRequestEditReportView = props => {
const {
visible,
onClose,
onSubmit,
reportDeadline,
setReportDeadline,
} = props;
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
onRequestClose={onClose}>
<View style={styles.modalOverlay}>
<View style={styles.modalContainer}>
<Text style={styles.modalTitle}>Yêu cu chnh sa báo cáo</Text>
<TextMulti
title={'Góp ý báo cáo'}
required={true}
value={reportDeadline}
onChangeText={setReportDeadline}
/>
<TextField
title={'Hạn sửa báo cáo'}
required={true}
value={reportDeadline}
onChangeText={setReportDeadline}
/>
<View style={styles.containerButton}>
<Button
title={'Huỷ'}
onPress={onClose}
backgroundColor={R.colors.orange}
textColor={R.colors.white}
fontSize={R.fontsize.fontSizeContent}
height={30}
width={100}
marginRight={10}
containerStyle={styles.buttonContainerStyle}
/>
<Button
title={'Yêu cầu báo cáo'}
onPress={onSubmit}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
fontSize={R.fontsize.fontSizeContent}
height={30}
width={130}
containerStyle={styles.buttonContainerStyle}
/>
</View>
</View>
</View>
</Modal>
);
};
export default ModalRequestEditReportView;
......@@ -16,6 +16,7 @@ import Header from '../../../components/Header/Header';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button';
import ModalRequestReport from './modal_request_report';
import ModalRequestEditReport from './modal_request_edit_report';
const DetailListWorkMonitoringView = props => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
......@@ -28,6 +29,11 @@ const DetailListWorkMonitoringView = props => {
showModalRequestReport,
onCloseModalRequestReport,
onSubmitRequestReport,
onOpenModalRequestEditReport,
showModalRequestEditReport,
onCloseModalRequestEditReport,
onSubmitRequestEditReport,
} = props;
const getColor = status => {
......@@ -50,6 +56,9 @@ const DetailListWorkMonitoringView = props => {
const shouldShowFAB = () => {
return data.status === 'Đang thực hiện';
};
const shouldShowButtonDowloadDocument = () => {
return data.status === 'Đang thực hiện';
};
const renderItem_1 = ({item, onPress}) => {
return (
......@@ -218,12 +227,17 @@ const DetailListWorkMonitoringView = props => {
</Text>
<Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity>
{
shouldShowButtonDowloadDocument() && (
<TouchableOpacity style={styles.attachmentContainer}>
<Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liu</Text>
</TouchableOpacity>
{renderButton()}
)
}
{
shouldShowButtonDowloadDocument() && renderButton()
}
</View>
);
};
......@@ -252,6 +266,13 @@ const DetailListWorkMonitoringView = props => {
onSubmitReport={onSubmitRequestReport}
workData={data}
/>
<ModalRequestEditReport
visible={showModalRequestEditReport}
onClose={onCloseModalRequestEditReport}
onSubmitReport={onSubmitRequestEditReport}
workData={data}
/>
</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