Skip to content

A
AppUms_Lecturer
Commit 7f297adb by tungnq
Options

TODO: Tối ưu hóa và cải thiện hiển thị trong component DetailListWorkMonitoring:… 

TODO: Tối ưu hóa và cải thiện hiển thị trong component DetailListWorkMonitoring: thêm màu sắc mới, điều chỉnh giao diện và xử lý trạng thái báo cáo.
parent c76c0d30
Showing with 150 additions and 82 deletions
src/assets/colors.js
...@@ -27,6 +27,7 @@ const colors = { ...@@ -27,6 +27,7 @@ const colors = {
green: 'rgba(0, 255, 21, 1)', green: 'rgba(0, 255, 21, 1)',
green1: 'rgb(9, 193, 25)', green1: 'rgb(9, 193, 25)',
green2:'rgb(0, 128, 0)',
red: 'rgba(255, 47, 48, 1)', red: 'rgba(255, 47, 48, 1)',
......
src/screens/list_work/monitoring/index.js
...@@ -54,9 +54,7 @@ const DetailListWorkMonitoring = props => { ...@@ -54,9 +54,7 @@ const DetailListWorkMonitoring = props => {
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: statusDocument: 'Đã phê duyệt',
'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: [ responder: [
{ {
id: 1, id: 1,
......
src/screens/list_work/monitoring/modal_request_edit_report/view.js
...@@ -33,6 +33,7 @@ const ModalRequestEditReportView = props => { ...@@ -33,6 +33,7 @@ const ModalRequestEditReportView = props => {
required={true} required={true}
value={reportDeadline} value={reportDeadline}
onChangeText={setReportDeadline} onChangeText={setReportDeadline}
containerMarginBottom={10}
/> />
<TextField <TextField
title={'Hạn sửa báo cáo'} title={'Hạn sửa báo cáo'}
......
src/screens/list_work/monitoring/style.js
...@@ -119,7 +119,7 @@ const styles = StyleSheet.create({ ...@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
cardContent: { cardContent: {
borderWidth: 1, borderWidth: 1,
borderRadius: 10, borderRadius: 10,
padding: 10,
marginVertical: 3, marginVertical: 3,
borderColor: R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
......
src/screens/list_work/monitoring/view.js
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
FlatList, FlatList,
ScrollView, ScrollView,
LogBox, LogBox,
ActivityIndicator,
} from 'react-native'; } from 'react-native';
import styles from './style'; import styles from './style';
import FAB from '../../../components/FAB/fab'; import FAB from '../../../components/FAB/fab';
...@@ -53,10 +54,35 @@ const DetailListWorkMonitoringView = props => { ...@@ -53,10 +54,35 @@ const DetailListWorkMonitoringView = props => {
} }
}; };
const shouldShowFilterStatus = () => { const getColorCard = statusDocument => {
return data.status === 'Đang thực hiện'; switch (statusDocument) {
case 'Đã phê duyệt':
return R.colors.green;
case 'Chỉnh sửa':
return R.colors.orange;
default:
return R.colors.gray;
}
}; };
const getViewMode = () => {
switch (data?.status) {
case 'Đang thực hiện':
return 'editing';
case 'Đợi báo cáo':
return 'review';
case 'Chờ duyệt':
return 'waiting';
case 'Đợi chỉnh sửa':
return 'waitingEdit';
case 'Hoàn thành':
return 'completed';
default:
return 'none';
}
};
const mode = getViewMode();
const renderItem_1 = ({item, onPress}) => { const renderItem_1 = ({item, onPress}) => {
return ( return (
<View style={styles.chip}> <View style={styles.chip}>
...@@ -75,20 +101,20 @@ const DetailListWorkMonitoringView = props => { ...@@ -75,20 +101,20 @@ const DetailListWorkMonitoringView = props => {
); );
}; };
const renderButton = () => { const renderButton = () => {
return ( return (
<View style={styles.btnRegister2}>
<Button <Button
title={'Cập nhật thông tin công việc'} title={ mode === 'editing' ? 'Cập nhật thông tin công việc' : 'Phê duyệt' }
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
textColor={R.colors.white} textColor={R.colors.white}
onPress={() => ({})} onPress={() => ({})}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
height={35} height={30}
containerStyle={{paddingHorizontal: 15, borderRadius: 25}} containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginTop:30}}
/> />
</View>
); );
}; };
...@@ -106,70 +132,107 @@ const DetailListWorkMonitoringView = props => { ...@@ -106,70 +132,107 @@ const DetailListWorkMonitoringView = props => {
const responders = reports.flatMap(r => r?.responder ?? []); const responders = reports.flatMap(r => r?.responder ?? []);
return ( return (
<View> <View>
<Text <View>
style={[ <Text
styles.text, style={[
{ styles.text,
color: R.colors.blue, {
fontFamily: R.fonts.fontMedium, color: R.colors.blue,
fontSize: R.fontsize.fontSizeSubTitle, fontFamily: R.fonts.fontMedium,
}, fontSize: R.fontsize.fontSizeSubTitle,
]}> },
Báo cáo công việc ]}>
</Text> Báo cáo công việc
<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> </Text>
<View style={styles.containerContent}> <Text style={[styles.text, {color: R.colors.blue}]}>
<Text style={[styles.text, {color: R.colors.gray4}]}> {reports.map(item => item.title).join(', ')} -{' '}
{responders.map(item => item.content).join(', ')} {reports.map(item => item.time).join(', ')}{' '}
</Text> {reports.map(item => item.date).join(', ')}
</View> </Text>
<TouchableOpacity style={styles.containerFile}>
<Text style={[styles.text, {fontSize: R.sizes.xs}]}> <View style={styles.cardContent}>
Quyết định thông báo đào tạo - QD347583 <View
</Text> style={{
<Image source={R.images.icDownload} style={styles.image} /> borderTopLeftRadius: 10,
</TouchableOpacity> borderTopRightRadius: 10,
<View style={{flexDirection: 'row', justifyContent:'flex-end'}}> paddingLeft: 10,
<Button backgroundColor: getColorCard(
title="Yêu cầu chỉnh sửa" reports.map(item => item.statusDocument).join(', '),
backgroundColor={R.colors.orange} ),
textColor={R.colors.white} }}>
onPress={()=>{ <Text
console.log('Yêu cầu chỉnh sửa'); style={[
onOpenModalRequestEditReport(); styles.text,
{
}} color: R.colors.white,
fontSize={R.sizes.sm} },
fontFamily={R.fonts.fontMedium} ]}>
height={30} {reports.map(item => item.statusDocument).join(', ')}
containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginRight: 5}} </Text>
/> </View>
<Button
title="Phê duyệt" <View style ={{ padding: 10,}} >
backgroundColor={R.colors.blue} <Text style={[styles.text]}>
textColor={R.colors.white} {responders.map(item => item.name).join(', ')} -{' '}
onPress={() => ({})} {responders.map(item => item.time).join(', ')}{' '}
fontSize={R.sizes.sm} {responders.map(item => item.date).join(', ')}{' '}
fontFamily={R.fonts.fontMedium} </Text>
height={30} <View style={styles.containerContent}>
containerStyle={{paddingHorizontal: 15, borderRadius: 25}} <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={() => {
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> </View>
</View> </View>
</View> </View>
); );
}; };
const renderLoading = () => {
return (
<View style={styles.body}>
<Text style={[styles.text, {textAlign: 'center'}]}>
Xin hãy đợi thông tin phản hồi từ người thực hiện công việc ...
</Text>
</View>
);
};
const renderBody = item => { const renderBody = item => {
return ( return (
<View style={styles.body}> <View style={styles.body}>
...@@ -302,9 +365,13 @@ const DetailListWorkMonitoringView = props => { ...@@ -302,9 +365,13 @@ 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()} <>
{shouldShowFilterStatus() && renderButton()} {mode === 'editing' && renderButtonDownloadDoc()}
{!shouldShowFilterStatus() && renderListReport()} {mode === 'editing' && renderButton()}
{mode === 'review' && renderLoading()}
{(mode === 'waiting' || mode === 'waitingEdit' || mode === 'completed') && renderListReport()}
{mode === 'waiting' && renderButton()}
</>
</View> </View>
); );
}; };
...@@ -315,17 +382,18 @@ const DetailListWorkMonitoringView = props => { ...@@ -315,17 +382,18 @@ const DetailListWorkMonitoringView = props => {
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
{renderBody()} {renderBody()}
</ScrollView> </ScrollView>
<>
{shouldShowFilterStatus() && ( {mode === 'editing' && (
<FAB> <FAB>
<SubButton <SubButton
onPress={onOpenModalRequestReport} onPress={onOpenModalRequestReport}
label={'Yêu cầu báo cáo'} label={'Yêu cầu báo cáo'}
images={R.images.icEdit} images={R.images.icEdit}
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
/> />
</FAB> </FAB>
)} )}
</>
<ModalRequestReport <ModalRequestReport
visible={showModalRequestReport} visible={showModalRequestReport}
......
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