Skip to content

A
AppUms_Lecturer
Commit c76c0d30 by tungnq
Options

TODO: Tái cấu trúc và cải thiện hiển thị báo cáo trong component DetailListWorkMonitoring

parent 2297c8e4
Showing with 131 additions and 59 deletions
src/screens/list_work/monitoring/index.js
...@@ -46,57 +46,55 @@ const DetailListWorkMonitoring = props => { ...@@ -46,57 +46,55 @@ const DetailListWorkMonitoring = props => {
{id: 5, name: 'Hoàng Anh Tuấn'}, {id: 5, name: 'Hoàng Anh Tuấn'},
]); ]);
const [dataReport, setDataReport] = useState([ const [dataReport, setDataReport] = useState(
{ {
id: 1,
userSend: [ userSend: [
{ {
id: 1,
title: 'Báo cáo tiến độ lần 1', title: 'Báo cáo tiến độ lần 1',
time: '14:30', time: '14:30',
date: '2025-09-10', date: '2025-09-10',
content: 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.', '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', fileTitle: 'Báo cáo tiến độ - BC001',
responder: [
{
id: 1,
name: 'Nguyễn Văn A',
code: '12345',
time: '14:30',
date: '2025-09-10',
content:
'Đã hoàn thành phần phân tích yêu cầu và đang triển khai thiết kế hệ thống.',
fileTitle: 'Báo cáo tiến độ - BC001',
},
],
}, },
], // {
// id: 2,
responder: [ // title: 'Báo cáo tiến độ lần 2',
{ // time: '16:00',
id: 1, // date: '2025-09-12',
name: 'Nguyễn Văn A', // content:
code: '12345', // '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.',
time: '14:30', // fileTitle: 'Báo cáo tiến độ - BC001',
date: '2025-09-10', // responder: [
content: // {
'Đã hoàn thành phần phân tích yêu cầu và đang triển khai thiết kế hệ thống.', // id: 1,
}, // name: 'Nguyễn Văn A',
], // code: '12345',
}, // time: '14:30',
{ // date: '2025-09-10',
id: 2, // content:
userSend: [ // 'Đã hoàn thành phần phân tích yêu cầu và đang triển khai thiết kế hệ thống.',
{ // },
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,
name: 'Nguyễn Văn A',
code: '12345',
time: '16:00',
date: '2025-09-12',
content:
'Đã hoàn thành phần thiết kế và đang trong giai đoạn kiểm thử hệ thống.',
},
], ],
}, },
]);
);
const handleReportPress = () => { const handleReportPress = () => {
if (data.status === 'Đang thực hiện') { if (data.status === 'Đang thực hiện') {
......
src/screens/list_work/monitoring/style.js
...@@ -48,7 +48,7 @@ const styles = StyleSheet.create({ ...@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
marginVertical: 3, marginVertical: 5,
borderColor: R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
}, },
flatListSelect: { flatListSelect: {
...@@ -116,6 +116,14 @@ const styles = StyleSheet.create({ ...@@ -116,6 +116,14 @@ const styles = StyleSheet.create({
width: 20, width: 20,
height: 20, height: 20,
}, },
cardContent: {
borderWidth: 1,
borderRadius: 10,
padding: 10,
marginVertical: 3,
borderColor: R.colors.grayBorderInputTextHeader,
backgroundColor: R.colors.white,
}
}); });
export default styles; export default styles;
src/screens/list_work/monitoring/view.js
...@@ -53,10 +53,7 @@ const DetailListWorkMonitoringView = props => { ...@@ -53,10 +53,7 @@ const DetailListWorkMonitoringView = props => {
} }
}; };
const shouldShowFAB = () => { const shouldShowFilterStatus = () => {
return data.status === 'Đang thực hiện';
};
const shouldShowButtonDowloadDocument = () => {
return data.status === 'Đang thực hiện'; return data.status === 'Đang thực hiện';
}; };
...@@ -89,12 +86,90 @@ const DetailListWorkMonitoringView = props => { ...@@ -89,12 +86,90 @@ const DetailListWorkMonitoringView = props => {
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
height={35} height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}} containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
/> />
</View> </View>
); );
}; };
const renderButtonDownloadDoc = () => {
return (
<TouchableOpacity style={styles.attachmentContainer}>
<Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
);
};
const renderListReport = () => {
const reports = dataReport?.userSend ?? [];
const responders = reports.flatMap(r => r?.responder ?? []);
return (
<View>
<Text
style={[
styles.text,
{
color: R.colors.blue,
fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeSubTitle,
},
]}>
Báo cáo công việc
</Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{reports.map(item => item.title).join(', ')} -{' '}
{reports.map(item => item.time).join(', ')}{' '}
{reports.map(item => item.date).join(', ')}
</Text>
<View style={styles.cardContent}>
<Text style={[styles.text]}>
{responders.map(item => item.name).join(', ')} -{' '}
{responders.map(item => item.time).join(', ')}{' '}
{responders.map(item => item.date).join(', ')}
</Text>
<View style={styles.containerContent}>
<Text style={[styles.text, {color: R.colors.gray4}]}>
{responders.map(item => item.content).join(', ')}
</Text>
</View>
<TouchableOpacity style={styles.containerFile}>
<Text style={[styles.text, {fontSize: R.sizes.xs}]}>
Quyết định thông báo đào tạo - QD347583
</Text>
<Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity>
<View style={{flexDirection: 'row', justifyContent:'flex-end'}}>
<Button
title="Yêu cầu chỉnh sửa"
backgroundColor={R.colors.orange}
textColor={R.colors.white}
onPress={()=>{
console.log('Yêu cầu chỉnh sửa');
onOpenModalRequestEditReport();
}}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={30}
containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginRight: 5}}
/>
<Button
title="Phê duyệt"
backgroundColor={R.colors.blue}
textColor={R.colors.white}
onPress={() => ({})}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={30}
containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
/>
</View>
</View>
</View>
);
};
const renderBody = item => { const renderBody = item => {
return ( return (
<View style={styles.body}> <View style={styles.body}>
...@@ -227,29 +302,21 @@ const DetailListWorkMonitoringView = props => { ...@@ -227,29 +302,21 @@ const DetailListWorkMonitoringView = props => {
</Text> </Text>
<Image source={R.images.icDownload} style={styles.image} /> <Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity> </TouchableOpacity>
{ {shouldShowFilterStatus() && renderButtonDownloadDoc()}
shouldShowButtonDowloadDocument() && ( {shouldShowFilterStatus() && renderButton()}
<TouchableOpacity style={styles.attachmentContainer}> {!shouldShowFilterStatus() && renderListReport()}
<Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
)
}
{
shouldShowButtonDowloadDocument() && renderButton()
}
</View> </View>
); );
}; };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Chi tiết công việc giám sát'} isBack={true}/> <Header title={'Chi tiết công việc giám sát'} isBack={true} />
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
{renderBody()} {renderBody()}
</ScrollView> </ScrollView>
{shouldShowFAB() && ( {shouldShowFilterStatus() && (
<FAB> <FAB>
<SubButton <SubButton
onPress={onOpenModalRequestReport} onPress={onOpenModalRequestReport}
...@@ -271,7 +338,6 @@ const DetailListWorkMonitoringView = props => { ...@@ -271,7 +338,6 @@ const DetailListWorkMonitoringView = props => {
visible={showModalRequestEditReport} visible={showModalRequestEditReport}
onClose={onCloseModalRequestEditReport} onClose={onCloseModalRequestEditReport}
onSubmitReport={onSubmitRequestEditReport} onSubmitReport={onSubmitRequestEditReport}
workData={data}
/> />
</View> </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