Skip to content

A
AppUms_Lecturer
Commit 5d0804e2 by tungnq
Options

TODO : Đã hoàn thiện list danh sách công việc

parent dc6982fe
Showing with 250 additions and 80 deletions
src/screens/list_work/detail/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailListWorkView from './view'; import DetailListWorkView from './view';
const DetailListWork = (props) => { const DetailListWork = props => {
const [data, setData] = useState( const [data, setData] = useState({
{
id: 1, id: 1,
title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025', title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
status: 'Chờ duyệt', status: 'Chờ duyệt',
...@@ -30,36 +29,105 @@ const DetailListWork = (props) => { ...@@ -30,36 +29,105 @@ const DetailListWork = (props) => {
}, },
], ],
document: 'Văn bản thông báo lịch nộp thời khóa biểu của học kỳ 2 năm 2025', document: 'Văn bản thông báo lịch nộp thời khóa biểu của học kỳ 2 năm 2025',
content: 'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan', content:
}, 'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
); });
const [dataList, setDataList] = useState([ const [dataList, setDataList] = useState([
{ id: 1, name: 'Nguyễn Minh Đức' }, {id: 1, name: 'Nguyễn Minh Đức'},
{ id: 2, name: 'Trần Văn Hùng' }, {id: 2, name: 'Trần Văn Hùng'},
{ id: 3, name: 'Lê Thị Mai' }, {id: 3, name: 'Lê Thị Mai'},
{ id: 4, name: 'Phạm Quốc Khánh' }, {id: 4, name: 'Phạm Quốc Khánh'},
{ id: 5, name: 'Hoàng Anh Tuấn' }, {id: 5, name: 'Hoàng Anh Tuấn'},
{ id: 6, name: 'Vũ Thị Hằng' }, {id: 6, name: 'Vũ Thị Hằng'},
{ id: 7, name: 'Ngô Văn Nam' }, {id: 7, name: 'Ngô Văn Nam'},
{ id: 8, name: 'Đinh Thị Lan' }, {id: 8, name: 'Đinh Thị Lan'},
{ id: 9, name: 'Bùi Văn Phúc' }, {id: 9, name: 'Bùi Văn Phúc'},
{ id: 10, name: 'Lý Thị Hoa' }, {id: 10, name: 'Lý Thị Hoa'},
{ id: 11, name: 'Phan Minh Hoàng' }, {id: 11, name: 'Phan Minh Hoàng'},
{ id: 12, name: 'Tạ Thị Hương' }, {id: 12, name: 'Tạ Thị Hương'},
{ id: 13, name: 'Đoàn Văn Dũng' }, {id: 13, name: 'Đoàn Văn Dũng'},
{ id: 14, name: 'Nguyễn Thị Vân' }, {id: 14, name: 'Nguyễn Thị Vân'},
{ id: 15, name: 'Trương Văn Long' }, {id: 15, name: 'Trương Văn Long'},
{ id: 16, name: 'Mai Thị Ngọc' }, {id: 16, name: 'Mai Thị Ngọc'},
{ id: 17, name: 'Huỳnh Quốc Việt' }, {id: 17, name: 'Huỳnh Quốc Việt'},
{ id: 18, name: 'Lâm Thị Thu' }, {id: 18, name: 'Lâm Thị Thu'},
{ id: 19, name: 'Nguyễn Hữu Tài' }, {id: 19, name: 'Nguyễn Hữu Tài'},
{ id: 20, name: 'Phạm Thị Kim' } {id: 20, name: 'Phạm Thị Kim'},
]); ]);
return ( const [dataReport, setDataReport] = useState([
<DetailListWorkView data={data} dataList={dataList} /> {
); id:1,
title:'Báo cáo lần 1',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
fileTitle:'Quyết định thông báo đào tạo - QD347583',
responder:[
{
id:1,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
{
id:2,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
{
id:3,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
]
},
{
id:2,
title:'Báo cáo lần 2',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
fileTitle:'Quyết định thông báo đào tạo - QD347583',
responder:[
{
id:1,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
{
id:2,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
{
id:3,
name:'Bùi tiến dũng',
code:'08569',
time:'16:00',
date:'2025-07-24',
content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
},
]
}
])
return <DetailListWorkView data={data} dataList={dataList} dataReport={dataReport} />;
}; };
export default DetailListWork; export default DetailListWork;
src/screens/list_work/detail/style.js
...@@ -9,69 +9,77 @@ const styles = StyleSheet.create({ ...@@ -9,69 +9,77 @@ const styles = StyleSheet.create({
body: { body: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
marginHorizontal:15 marginHorizontal: 15,
}, },
text:{ text: {
fontSize:R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
color:R.colors.black, color: R.colors.black,
fontWeight:'600', fontWeight: '600',
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
}, },
sub_text:{ sub_text: {
fontSize:R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
color:R.colors.black, color: R.colors.black,
fontWeight:'400', fontWeight: '400',
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
}, },
containerContent:{ containerContent: {
borderWidth:1, borderWidth: 1,
borderRadius:10, borderRadius: 10,
padding:10, padding: 10,
borderColor:R.colors.grayBorderInputTextHeader, marginBottom: 5,
borderColor: R.colors.grayBorderInputTextHeader,
}, },
containerFile:{ containerFile: {
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'space-between', justifyContent: 'space-between',
borderRadius:10, borderRadius: 10,
backgroundColor:R.colors.blue1, backgroundColor: R.colors.blue1,
padding:10, padding: 10,
marginBottom: 5,
}, },
image:{ image: {
width:20, width: 20,
height:20, height: 20,
}, },
chip:{ chip: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
// position: 'relative', // position: 'relative',
paddingLeft: 10, paddingLeft: 10,
paddingRight:10, paddingRight: 10,
height: 25, height: 25,
borderRadius: 10, borderRadius: 10,
marginBottom:10, marginBottom: 10,
marginRight:5, marginRight: 5,
backgroundColor: R.colors.blue2, backgroundColor: R.colors.blue2,
alignSelf:'flex-start' alignSelf: 'flex-start',
}, },
containerIcon:{ containerIcon: {
marginRight: 2, marginRight: 2,
}, },
imageIcon:{ imageIcon: {
width: 15, width: 15,
height: 15, height: 15,
}, },
textChip:{ textChip: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontWeight: '400', fontWeight: '400',
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color:R.colors.blueTextChip, color: R.colors.blueTextChip,
}, },
flatListSelect:{ flatListSelect: {
flexDirection:'row', flexDirection: 'row',
flexWrap:'wrap', flexWrap: 'wrap',
}, },
containerDropdown:{
marginBottom:5
},
containerCard:{
borderRadius:10,
marginBottom:10,
}
}); });
export default styles; export default styles;
src/screens/list_work/detail/view.js
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
StyleSheet, StyleSheet,
Image, Image,
FlatList, FlatList,
ScrollView,
} 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';
...@@ -16,7 +17,7 @@ import Dropdown from '../../../components/DropdownAlert/Dropdown'; ...@@ -16,7 +17,7 @@ import Dropdown from '../../../components/DropdownAlert/Dropdown';
import WorkReportModal from '../detail/modal_add_report'; import WorkReportModal from '../detail/modal_add_report';
import EditReportModal from '../detail/modal_edit_report'; import EditReportModal from '../detail/modal_edit_report';
const DetailListWorkView = props => { const DetailListWorkView = props => {
const {data, dataList} = props; const {data, dataList, dataReport} = props;
const [showWorkReportModal, setShowWorkReportModal] = useState(false); const [showWorkReportModal, setShowWorkReportModal] = useState(false);
const [showEditReportModal, setShowEditReportModal] = useState(false); const [showEditReportModal, setShowEditReportModal] = useState(false);
const getColor = status => { const getColor = status => {
...@@ -36,34 +37,115 @@ const DetailListWorkView = props => { ...@@ -36,34 +37,115 @@ const DetailListWorkView = props => {
} }
}; };
const renderItem = ({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>
<View
style={{
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
padding: 10,
borderRadius: 10,
marginBottom: 5,
}}>
<Text style={[styles.text, {color: R.colors.gray}]}>
{item.content}
</Text>
</View>
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: R.colors.blue1,
padding: 5,
borderRadius: 5,
marginBottom:10,
justifyContent: 'space-between',
}}>
<Text style={[styles.text, {color: R.colors.black, fontSize: 10}]}>
{item.fileTitle}
</Text>
<Image source={R.images.icDownload} style={styles.image} />
</TouchableOpacity>
<Text style={[styles.text, {color: R.colors.blue}]} >Phản hồi báo cáo</Text>
<FlatList
data={item.responder || []}
renderItem={renderItem_2}
showsVerticalScrollIndicator={false}
vertical
style={{marginLeft:15}}
keyExtractor={(item, index) => `${index}`}
/>
</View>
);
};
const renderItem_2 = ({item}) => {
return (
<View style={styles.containerCard}>
<View style={{flexDirection: 'row', marginBottom: 3}}>
<Text style={[styles.text, {color: R.colors.black,}]}>
{item.name} - {item.code} {' '}
</Text>
<Text style={[styles.text, {color: R.colors.black}]}>
{item.time} {item.date}
</Text>
</View>
<View
style={{
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
padding: 10,
borderRadius: 10,
}}>
<Text style={[styles.text, {color: R.colors.gray}]}>
{item.content}
</Text>
</View>
</View>
);
};
const renderView = () => { const renderView = () => {
return ( return (
<View style={styles.body}> <View style={styles.body}>
<Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle ,}]}> <Text
style={[
styles.text,
{fontSize: R.fontsize.fontSizeSubTitle, marginBottom: 5},
]}>
{data.title} {data.title}
</Text> </Text>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={styles.text}> <Text style={[styles.text, {marginBottom: 5}]}>
Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text> Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text>
</Text> </Text>
<Text style={styles.text}> <Text style={[styles.text, {marginBottom: 5}]}>
Trạng thái:{' '} Trạng thái:{' '}
<Text style={{color: getColor(data.status)}}>{data.status}</Text> <Text style={{color: getColor(data.status)}}>{data.status}</Text>
</Text> </Text>
</View> </View>
<Text style={styles.text}> <Text style={[styles.text, {marginBottom: 5}]}>
Công việc thuộc văn bản: Công việc thuộc văn bản:
<Text style={[styles.sub_text, {color: R.colors.blue}]}> <Text style={[styles.sub_text, {color: R.colors.blue}]}>
{data.document} {data.document}
</Text> </Text>
</Text> </Text>
<Text style={styles.text}> <Text style={[styles.text, {marginBottom: 5}]}>
Người giám sát: Người giám sát:
<Text style={styles.sub_text}> <Text style={styles.sub_text}>
{data.supervisor.map(item => item.name).join(', ')} {data.supervisor.map(item => item.name).join(', ')}
</Text> </Text>
</Text> </Text>
<Text style={styles.text}> <Text style={[styles.text, {marginBottom: 5}]}>
Người thực hiện: Người thực hiện:
<Text style={styles.sub_text}> <Text style={styles.sub_text}>
{data.implementer.map(item => item.name).join(', ')} {data.implementer.map(item => item.name).join(', ')}
...@@ -114,12 +196,22 @@ const DetailListWorkView = props => { ...@@ -114,12 +196,22 @@ const DetailListWorkView = props => {
item.id?.toString() || index.toString() item.id?.toString() || index.toString()
} }
numColumns={2} numColumns={2}
style={{maxHeight: 150, marginBottom: 10}} style={{maxHeight: 150, marginBottom: 5}}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
columnWrapperStyle={styles.flatListSelect} columnWrapperStyle={styles.flatListSelect}
nestedScrollEnabled={true} nestedScrollEnabled={true}
scrollEnabled={true} scrollEnabled={true}
/> />
<Text style={[styles.text, {marginBottom: 3}]}>
Báo cáo công việc :
</Text>
<FlatList
data={dataReport || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
</View> </View>
); );
}; };
...@@ -152,11 +244,11 @@ const DetailListWorkView = props => { ...@@ -152,11 +244,11 @@ const DetailListWorkView = props => {
} }
}; };
const handleWorkReportSubmit = (reportContent) => { const handleWorkReportSubmit = reportContent => {
console.log('Work report submitted:', reportContent); console.log('Work report submitted:', reportContent);
}; };
const handleEditReportSubmit = (reportContent) => { const handleEditReportSubmit = reportContent => {
console.log('Edit report submitted:', reportContent); console.log('Edit report submitted:', reportContent);
}; };
...@@ -167,7 +259,9 @@ const DetailListWorkView = props => { ...@@ -167,7 +259,9 @@ const DetailListWorkView = props => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Chi tiết công việc'} isBack /> <Header title={'Chi tiết công việc'} isBack />
<ScrollView showsVerticalScrollIndicator={false}>
{renderView(data)} {renderView(data)}
</ScrollView>
{shouldShowFAB() && ( {shouldShowFAB() && (
<FAB> <FAB>
<SubButton <SubButton
......
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