Skip to content

A
AppUms_Lecturer
Commit 63488e16 by tungnq
Options

TODO: Đã điều chỉnh đường dẫn khi bấm chi tiết thì sẽ điều vào màn hình của… 

TODO: Đã điều chỉnh đường dẫn khi bấm chi tiết thì sẽ điều vào màn hình của người giám sát còn nếu bấm chi tiết nhưng ở tab view giao cho tôi thì điều hướng vào giao cho tôi
parent c3e40a85
Showing with 330 additions and 26 deletions
src/screens/list_work/index.js
...@@ -377,9 +377,21 @@ const ListWork = props => { ...@@ -377,9 +377,21 @@ const ListWork = props => {
// ==================== NAVIGATION HANDLERS ==================== // ==================== NAVIGATION HANDLERS ====================
// Điều hướng đến màn hình chi tiết công việc // Điều hướng đến màn hình chi tiết công việc - conditional navigation
const handleViewDetailDeliverToMe = item => { const handleViewDetailWork = item => {
// Nếu công việc được giao cho tôi (assignedToMe: true) -> đi vào màn hình detail như cũ
if (item.assignedToMe) {
navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item}); navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item});
}
// Nếu tôi đang giám sát công việc này (supervisedByMe: true) -> đi vào màn hình monitoring
else if (item.supervisedByMe) {
navigation.navigate(ScreenName.DETAILWORKMONITORING, {workItem: item});
}
};
// Giữ lại function cũ để tương thích
const handleViewDetailDeliverToMe = item => {
handleViewDetailWork(item);
}; };
// ==================== ACTION HANDLERS ==================== // ==================== ACTION HANDLERS ====================
......
src/screens/list_work/monitoring/index.js
import React from 'react'; import React, {useState} from 'react';
import DetailListWorkMonitoringView from './view'; import DetailListWorkMonitoringView from './view';
const DetailListWorkMonitoring = (props) => { const DetailListWorkMonitoring = (props) => {
const {route} = props;
const workItem = route?.params?.workItem || {};
const [data, setData] = useState({
id: workItem.id || 1,
title: workItem.title || 'Công việc giám sát',
status: workItem.status || 'Đang thực hiện',
deadline: workItem.deadline || '2025-09-04',
assignee: workItem.assignee || [
{
id: 1,
name: 'Nguyễn Văn A',
},
{
id: 2,
name: 'Trần Thị B',
},
],
implementer: workItem.implementer || [
{
id: 1,
name: 'Nguyễn Văn A',
},
{
id: 2,
name: 'Trần Thị B',
},
],
document: workItem.document || 'Văn bản công việc giám sát',
content: workItem.content || 'Nội dung công việc đang được giám sát và theo dõi tiến độ thực hiện',
});
const [dataList, setDataList] = useState([
{id: 1, name: 'Nguyễn Minh Đức'},
{id: 2, name: 'Trần Văn Hùng'},
{id: 3, name: 'Lê Thị Mai'},
{id: 4, name: 'Phạm Quốc Khánh'},
{id: 5, name: 'Hoàng Anh Tuấn'},
]);
const [dataReport, setDataReport] = useState([
{
id: 1,
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,
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.',
},
],
},
{
id: 2,
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.',
},
],
},
]);
return ( return (
<DetailListWorkMonitoringView /> <DetailListWorkMonitoringView
data={data}
dataList={dataList}
dataReport={dataReport}
/>
); );
}; };
......
src/screens/list_work/monitoring/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet } from 'react-native';
import R from '../../../assets/R' import R from '../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex:1, flex: 1,
backgroundColor:R.colors.white backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
marginHorizontal:15 backgroundColor: R.colors.white,
marginHorizontal: 15,
} },
text: {
}) fontSize: R.fontsize.fontSizeContent,
color: R.colors.black,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
sub_text: {
fontSize: R.fontsize.fontSizeContent,
color: R.colors.black,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
},
containerCard: {
borderWidth: 1,
borderRadius: 10,
padding: 10,
marginBottom: 10,
borderColor: R.colors.grayBorderInputTextHeader,
backgroundColor: R.colors.white,
},
containerText: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 5,
},
sizedBox: {
height: 10,
},
fab: {
position: 'absolute',
bottom: 20,
right: 20,
},
containerFile: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 10,
backgroundColor: R.colors.blue1,
marginBottom: 5,
height: 30,
paddingHorizontal: 10,
},
image: {
width: 20,
height: 20,
},
});
export default styles export default styles;
\ No newline at end of file \ No newline at end of file
src/screens/list_work/monitoring/view.js
import React from 'react'; import React, {useState} from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {
Text,
View,
TouchableOpacity,
Image,
FlatList,
ScrollView,
LogBox,
} from 'react-native';
import styles from './style'; import styles from './style';
const DetailListWorkMonitoringView = (props) => { import FAB from '../../../components/FAB/fab';
const { } = props; import SubButton from '../../../components/FAB/sub_button';
import R from '../../../assets/R';
import Header from '../../../components/Header/Header';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
const DetailListWorkMonitoringView = props => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
const {data, dataList, dataReport} = props;
const [showApprovalModal, setShowApprovalModal] = useState(false);
const [showRequestEditModal, setShowRequestEditModal] = useState(false);
const getColor = status => {
switch (status) {
case 'Chờ duyệt':
return R.colors.blue;
case 'Hoàn thành':
return R.colors.green;
case 'Đợi chỉnh sửa':
return R.colors.orange;
case 'Đang thực hiện':
return R.colors.orange;
case 'Đợi báo cáo':
return R.colors.blue;
default:
return R.colors.gray;
}
};
const renderReportItem = ({item}) => {
return (
<View style={styles.containerCard}>
<View style={{flexDirection: 'row', marginBottom: 3}}>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.title} -{' '}
</Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.time}{' '}
</Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.date}
</Text>
</View>
<Text style={styles.text}>{item.content}</Text>
<View style={styles.sizedBox} />
<View style={styles.containerText}>
<Text style={styles.text}>Tệp đính kèm: </Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.fileTitle}
</Text>
</View>
<View style={styles.sizedBox} />
<FlatList
data={item.responder}
renderItem={renderResponderItem}
keyExtractor={item => item.id.toString()}
/>
</View>
);
};
const renderResponderItem = ({item}) => {
return (
<View style={styles.containerCard}>
<View style={{flexDirection: 'row', marginBottom: 3}}>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.name} - {item.code} -{' '}
</Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.time}{' '}
</Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{item.date}
</Text>
</View>
<Text style={styles.text}>{item.content}</Text>
</View>
);
};
const renderImplementerItem = ({item}) => {
return ( return (
<View style={styles.containerText}>
<Text style={styles.text}>{item.name}</Text>
</View>
);
};
return (
<View style={styles.container}>
<Header title={'Chi tiết công việc giám sát'} />
<ScrollView style={styles.body}>
<View style={styles.containerCard}>
<View <View
style={styles.container}> style={[
<TouchableOpacity> styles.containerText,
<Text>ComponentName</Text> {backgroundColor: getColor(data.status)},
</TouchableOpacity> ]}>
<Text style={[styles.text, {color: R.colors.white}]}>
{data.status}
</Text>
</View>
<View style={styles.sizedBox} />
<Text style={styles.text}>{data.title}</Text>
<View style={styles.sizedBox} />
<View style={styles.containerText}>
<Text style={styles.text}>Ngày đến hạn: </Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{data.deadline}
</Text>
</View>
<View style={styles.sizedBox} />
<View style={styles.containerText}>
<Text style={styles.text}>Người thực hiện: </Text>
</View>
<FlatList
data={data.implementer}
renderItem={renderImplementerItem}
keyExtractor={item => item.id.toString()}
/>
<View style={styles.sizedBox} />
<View style={styles.containerText}>
<Text style={styles.text}>Thuộc văn bản: </Text>
<Text style={[styles.text, {color: R.colors.blue}]}>
{data.document}
</Text>
</View>
<View style={styles.sizedBox} />
<Text style={styles.text}>{data.content}</Text>
</View>
<View style={styles.containerCard}>
<Text style={styles.text}>Lịch sử báo cáo</Text>
<View style={styles.sizedBox} />
<FlatList
data={dataReport}
renderItem={renderReportItem}
keyExtractor={item => item.id.toString()}
/>
</View>
</ScrollView>
<FAB
style={styles.fab}
onPress={() => console.log('FAB pressed for monitoring actions')}>
<SubButton
onPress={() => setShowApprovalModal(true)}
title={'Phê duyệt'}
/>
<SubButton
onPress={() => setShowRequestEditModal(true)}
title={'Yêu cầu chỉnh sửa'}
/>
<SubButton
onPress={() => console.log('Request report')}
title={'Yêu cầu báo cáo'}
/>
</FAB>
</View> </View>
); );
}; };
......
src/screens/list_work/view.js
...@@ -67,7 +67,10 @@ const ListWorkView = props => { ...@@ -67,7 +67,10 @@ const ListWorkView = props => {
key={index} key={index}
title={button.title} title={button.title}
onPress={() => { onPress={() => {
if (button.action === 'approve' || button.action === 'needsEdit') { if (button.action === 'detail') {
// Conditional navigation for "Chi tiết" button
onViewDetailDeliverToMe(item);
} else if (button.action === 'approve' || button.action === 'needsEdit') {
onApprovalAction(item, button.action); onApprovalAction(item, button.action);
} else { } else {
onReportAction(item, button.action); onReportAction(item, button.action);
......
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