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 291 additions and 121 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 DetailListWorkView from './view';
const DetailListWork = (props) => {
const [data, setData] = useState(
const DetailListWork = props => {
const [data, setData] = useState({
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',
status: 'Chờ duyệt',
deadline: '2025-09-04',
supervisor: [
{
id: 1,
name: 'Trần Văn Hùng',
},
{
id: 2,
name: 'Nguyễn Văn A',
},
],
implementer: [
{
id: 1,
name: 'Trần Văn Hùng',
},
{
id: 2,
name: 'Nguyễn Văn A',
},
],
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',
});
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'},
{id: 6, name: 'Vũ Thị Hằng'},
{id: 7, name: 'Ngô Văn Nam'},
{id: 8, name: 'Đinh Thị Lan'},
{id: 9, name: 'Bùi Văn Phúc'},
{id: 10, name: 'Lý Thị Hoa'},
{id: 11, name: 'Phan Minh Hoàng'},
{id: 12, name: 'Tạ Thị Hương'},
{id: 13, name: 'Đoàn Văn Dũng'},
{id: 14, name: 'Nguyễn Thị Vân'},
{id: 15, name: 'Trương Văn Long'},
{id: 16, name: 'Mai Thị Ngọc'},
{id: 17, name: 'Huỳnh Quốc Việt'},
{id: 18, name: 'Lâm Thị Thu'},
{id: 19, name: 'Nguyễn Hữu Tài'},
{id: 20, name: 'Phạm Thị Kim'},
]);
const [dataReport, setDataReport] = useState([
{
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',
status: 'Chờ duyệt',
deadline: '2025-09-04',
supervisor: [
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: 'Trần Văn Hùng',
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: 'Nguyễn Văn A',
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',
},
],
implementer: [
{
id: 1,
name: 'Trần Văn Hùng',
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: 2,
name: 'Nguyễn Văn A',
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',
},
],
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',
},
);
{
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',
},
]
}
])
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' },
{ id: 6, name: 'Vũ Thị Hằng' },
{ id: 7, name: 'Ngô Văn Nam' },
{ id: 8, name: 'Đinh Thị Lan' },
{ id: 9, name: 'Bùi Văn Phúc' },
{ id: 10, name: 'Lý Thị Hoa' },
{ id: 11, name: 'Phan Minh Hoàng' },
{ id: 12, name: 'Tạ Thị Hương' },
{ id: 13, name: 'Đoàn Văn Dũng' },
{ id: 14, name: 'Nguyễn Thị Vân' },
{ id: 15, name: 'Trương Văn Long' },
{ id: 16, name: 'Mai Thị Ngọc' },
{ id: 17, name: 'Huỳnh Quốc Việt' },
{ id: 18, name: 'Lâm Thị Thu' },
{ id: 19, name: 'Nguyễn Hữu Tài' },
{ id: 20, name: 'Phạm Thị Kim' }
]);
return (
<DetailListWorkView data={data} dataList={dataList} />
);
return <DetailListWorkView data={data} dataList={dataList} dataReport={dataReport} />;
};
export default DetailListWork;
src/screens/list_work/detail/style.js
......@@ -9,69 +9,77 @@ const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: R.colors.white,
marginHorizontal:15
marginHorizontal: 15,
},
text:{
fontSize:R.fontsize.fontSizeContent,
color:R.colors.black,
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
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,
sub_text: {
fontSize: R.fontsize.fontSizeContent,
color: R.colors.black,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
},
containerContent:{
borderWidth:1,
containerContent: {
borderWidth: 1,
borderRadius: 10,
padding: 10,
marginBottom: 5,
borderColor: R.colors.grayBorderInputTextHeader,
},
containerFile: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 10,
backgroundColor: R.colors.blue1,
padding: 10,
marginBottom: 5,
},
image: {
width: 20,
height: 20,
},
chip: {
flexDirection: 'row',
alignItems: 'center',
// position: 'relative',
paddingLeft: 10,
paddingRight: 10,
height: 25,
borderRadius: 10,
marginBottom: 10,
marginRight: 5,
backgroundColor: R.colors.blue2,
alignSelf: 'flex-start',
},
containerIcon: {
marginRight: 2,
},
imageIcon: {
width: 15,
height: 15,
},
textChip: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
color: R.colors.blueTextChip,
},
flatListSelect: {
flexDirection: 'row',
flexWrap: 'wrap',
},
containerDropdown:{
marginBottom:5
},
containerCard:{
borderRadius:10,
padding:10,
borderColor:R.colors.grayBorderInputTextHeader,
},
containerFile:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
borderRadius:10,
backgroundColor:R.colors.blue1,
padding:10,
},
image:{
width:20,
height:20,
},
chip:{
flexDirection: 'row',
alignItems: 'center',
// position: 'relative',
paddingLeft: 10,
paddingRight:10,
height: 25,
borderRadius: 10,
marginBottom:10,
marginRight:5,
backgroundColor: R.colors.blue2,
alignSelf:'flex-start'
},
containerIcon:{
marginRight: 2,
},
imageIcon:{
width: 15,
height: 15,
},
textChip:{
fontSize: R.fontsize.fontSizeContent,
fontWeight: '400',
fontFamily:R.fonts.fontRegular,
color:R.colors.blueTextChip,
},
flatListSelect:{
flexDirection:'row',
flexWrap:'wrap',
},
marginBottom:10,
}
});
export default styles;
src/screens/list_work/detail/view.js
......@@ -6,6 +6,7 @@ import {
StyleSheet,
Image,
FlatList,
ScrollView,
} from 'react-native';
import styles from './style';
import FAB from '../../../components/FAB/fab';
......@@ -16,7 +17,7 @@ import Dropdown from '../../../components/DropdownAlert/Dropdown';
import WorkReportModal from '../detail/modal_add_report';
import EditReportModal from '../detail/modal_edit_report';
const DetailListWorkView = props => {
const {data, dataList} = props;
const {data, dataList, dataReport} = props;
const [showWorkReportModal, setShowWorkReportModal] = useState(false);
const [showEditReportModal, setShowEditReportModal] = useState(false);
const getColor = status => {
......@@ -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 = () => {
return (
<View style={styles.body}>
<Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle ,}]}>
<Text
style={[
styles.text,
{fontSize: R.fontsize.fontSizeSubTitle, marginBottom: 5},
]}>
{data.title}
</Text>
<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>
</Text>
<Text style={styles.text}>
<Text style={[styles.text, {marginBottom: 5}]}>
Trạng thái:{' '}
<Text style={{color: getColor(data.status)}}>{data.status}</Text>
</Text>
</View>
<Text style={styles.text}>
<Text style={[styles.text, {marginBottom: 5}]}>
Công việc thuộc văn bản:
<Text style={[styles.sub_text, {color: R.colors.blue}]}>
{data.document}
</Text>
</Text>
<Text style={styles.text}>
<Text style={[styles.text, {marginBottom: 5}]}>
Người giám sát:
<Text style={styles.sub_text}>
{data.supervisor.map(item => item.name).join(', ')}
</Text>
</Text>
<Text style={styles.text}>
<Text style={[styles.text, {marginBottom: 5}]}>
Người thực hiện:
<Text style={styles.sub_text}>
{data.implementer.map(item => item.name).join(', ')}
......@@ -114,12 +196,22 @@ const DetailListWorkView = props => {
item.id?.toString() || index.toString()
}
numColumns={2}
style={{maxHeight: 150, marginBottom: 10}}
style={{maxHeight: 150, marginBottom: 5}}
showsVerticalScrollIndicator={false}
columnWrapperStyle={styles.flatListSelect}
nestedScrollEnabled={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>
);
};
......@@ -152,11 +244,11 @@ const DetailListWorkView = props => {
}
};
const handleWorkReportSubmit = (reportContent) => {
const handleWorkReportSubmit = reportContent => {
console.log('Work report submitted:', reportContent);
};
const handleEditReportSubmit = (reportContent) => {
const handleEditReportSubmit = reportContent => {
console.log('Edit report submitted:', reportContent);
};
......@@ -167,7 +259,9 @@ const DetailListWorkView = props => {
return (
<View style={styles.container}>
<Header title={'Chi tiết công việc'} isBack />
{renderView(data)}
<ScrollView showsVerticalScrollIndicator={false}>
{renderView(data)}
</ScrollView>
{shouldShowFAB() && (
<FAB>
<SubButton
......@@ -178,13 +272,13 @@ const DetailListWorkView = props => {
/>
</FAB>
)}
<WorkReportModal
visible={showWorkReportModal}
onClose={() => setShowWorkReportModal(false)}
onSubmit={handleWorkReportSubmit}
/>
<EditReportModal
visible={showEditReportModal}
onClose={() => setShowEditReportModal(false)}
......
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