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 = {
green: 'rgba(0, 255, 21, 1)',
green1: 'rgb(9, 193, 25)',
green2:'rgb(0, 128, 0)',
red: 'rgba(255, 47, 48, 1)',
......
src/screens/list_work/monitoring/index.js
......@@ -54,9 +54,7 @@ const DetailListWorkMonitoring = props => {
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',
statusDocument: 'Đã phê duyệt',
responder: [
{
id: 1,
......
src/screens/list_work/monitoring/modal_request_edit_report/view.js
......@@ -33,6 +33,7 @@ const ModalRequestEditReportView = props => {
required={true}
value={reportDeadline}
onChangeText={setReportDeadline}
containerMarginBottom={10}
/>
<TextField
title={'Hạn sửa báo cáo'}
......
src/screens/list_work/monitoring/style.js
......@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
cardContent: {
borderWidth: 1,
borderRadius: 10,
padding: 10,
marginVertical: 3,
borderColor: R.colors.grayBorderInputTextHeader,
backgroundColor: R.colors.white,
......
src/screens/list_work/monitoring/view.js
......@@ -7,6 +7,7 @@ import {
FlatList,
ScrollView,
LogBox,
ActivityIndicator,
} from 'react-native';
import styles from './style';
import FAB from '../../../components/FAB/fab';
......@@ -53,10 +54,35 @@ const DetailListWorkMonitoringView = props => {
}
};
const shouldShowFilterStatus = () => {
return data.status === 'Đang thực hiện';
const getColorCard = statusDocument => {
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}) => {
return (
<View style={styles.chip}>
......@@ -75,20 +101,20 @@ const DetailListWorkMonitoringView = props => {
);
};
const renderButton = () => {
return (
<View style={styles.btnRegister2}>
<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}
textColor={R.colors.white}
onPress={() => ({})}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
height={30}
containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginTop:30}}
/>
</View>
);
};
......@@ -106,70 +132,107 @@ const DetailListWorkMonitoringView = props => {
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(', ')}
<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>
<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}}
/>
<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}>
<View
style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
paddingLeft: 10,
backgroundColor: getColorCard(
reports.map(item => item.statusDocument).join(', '),
),
}}>
<Text
style={[
styles.text,
{
color: R.colors.white,
},
]}>
{reports.map(item => item.statusDocument).join(', ')}
</Text>
</View>
<View style ={{ padding: 10,}} >
<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={() => {
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>
);
};
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 => {
return (
<View style={styles.body}>
......@@ -302,9 +365,13 @@ const DetailListWorkMonitoringView = props => {
</Text>
<Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity>
{shouldShowFilterStatus() && renderButtonDownloadDoc()}
{shouldShowFilterStatus() && renderButton()}
{!shouldShowFilterStatus() && renderListReport()}
<>
{mode === 'editing' && renderButtonDownloadDoc()}
{mode === 'editing' && renderButton()}
{mode === 'review' && renderLoading()}
{(mode === 'waiting' || mode === 'waitingEdit' || mode === 'completed') && renderListReport()}
{mode === 'waiting' && renderButton()}
</>
</View>
);
};
......@@ -315,17 +382,18 @@ const DetailListWorkMonitoringView = props => {
<ScrollView showsVerticalScrollIndicator={false}>
{renderBody()}
</ScrollView>
{shouldShowFilterStatus() && (
<FAB>
<SubButton
onPress={onOpenModalRequestReport}
label={'Yêu cầu báo cáo'}
images={R.images.icEdit}
backgroundColor={R.colors.orange}
/>
</FAB>
)}
<>
{mode === 'editing' && (
<FAB>
<SubButton
onPress={onOpenModalRequestReport}
label={'Yêu cầu báo cáo'}
images={R.images.icEdit}
backgroundColor={R.colors.orange}
/>
</FAB>
)}
</>
<ModalRequestReport
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