Skip to content

A
AppUms_Lecturer
Commit 408a922c by tungnq
Options

TODO: Refactor ListWork và Modals: Cải thiện cấu trúc và khả năng đọc của code 

Cập nhật component ListWork để tối ưu định dạng và dễ bảo trì hơn.

Refactor AddWorkModal và AddMonitoringModal nhằm tách biệt logic với phần giao diện.

Thêm quản lý state cho dữ liệu form và lựa chọn trong các modal.

Cải thiện cách xử lý dropdown và logic chọn item.

Nâng cao tính nhất quán trong styling giữa các component.

Bổ sung style mới cho tính năng chỉnh sửa báo cáo trong modal.
parent 6625758a
Showing with 711 additions and 448 deletions
src/screens/list_work/deliver_to_me/detail/modal_add_report/index.js
import WorkReportModal from './view'; import React, {useState} from 'react';
import WorkReportModalView from './view';
const WorkReportModal = ({visible, onClose, onSubmit}) => {
const [reportContent, setReportContent] = useState('');
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
setReportContent('');
onClose();
}
};
const handleCancel = () => {
setReportContent('');
onClose();
};
const handleContentChange = (content) => {
setReportContent(content);
};
const handleAddAttachment = () => {
// Handle add attachment logic
console.log('Add attachment');
};
return (
<WorkReportModalView
visible={visible}
onClose={onClose}
reportContent={reportContent}
onContentChange={handleContentChange}
onSubmit={handleSubmit}
onCancel={handleCancel}
onAddAttachment={handleAddAttachment}
/>
);
};
export default WorkReportModal; export default WorkReportModal;
src/screens/list_work/deliver_to_me/detail/modal_add_report/view.js
import React, {useState} from 'react'; import React from 'react';
import { import {Modal, View, Text, TouchableOpacity, Image} from 'react-native';
Modal,
View,
Text,
TouchableOpacity,
Image,
} from 'react-native';
import TextMulti from '../../../../../components/Input/TextMulti'; import TextMulti from '../../../../../components/Input/TextMulti';
import R from '../../../../../assets/R'; import R from '../../../../../assets/R';
import Button from '../../../../../components/Button'; import Button from '../../../../../components/Button';
import styles from './style'; import styles from './style';
const WorkReportModal = ({visible, onClose, onSubmit}) => { const WorkReportModalView = ({
const [reportContent, setReportContent] = useState(''); visible,
onClose,
const handleSubmit = () => { reportContent,
if (reportContent.trim()) { onContentChange,
onSubmit(reportContent); onSubmit,
setReportContent(''); onCancel,
onClose(); onAddAttachment,
} }) => {
};
const handleCancel = () => {
setReportContent('');
onClose();
};
return ( return (
<Modal <Modal
...@@ -41,10 +29,12 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => { ...@@ -41,10 +29,12 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
title="Nội dung báo cáo" title="Nội dung báo cáo"
required={true} required={true}
containerMarginBottom={10} containerMarginBottom={10}
value={reportContent}
onChangeText={onContentChange}
/> />
<Text style={styles.label}>Tài liệu đính kèm</Text> <Text style={styles.label}>Tài liệu đính kèm</Text>
<TouchableOpacity style={styles.attachmentContainer}> <TouchableOpacity style={styles.attachmentContainer} onPress={onAddAttachment}>
<Image source={R.images.icDocument} style={styles.uploadIcon} /> <Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text> <Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -57,7 +47,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => { ...@@ -57,7 +47,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
borderRadius={100} borderRadius={100}
fontSize={R.fontsize.fontSizeContent} fontSize={R.fontsize.fontSizeContent}
onPress={handleCancel} onPress={onCancel}
txtStyle={{ txtStyle={{
color: R.colors.white, color: R.colors.white,
fontWeight: '600', fontWeight: '600',
...@@ -72,7 +62,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => { ...@@ -72,7 +62,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
borderRadius={100} borderRadius={100}
fontSize={R.fontsize.fontSizeContent} fontSize={R.fontsize.fontSizeContent}
onPress={handleSubmit} onPress={onSubmit}
txtStyle={{ txtStyle={{
color: R.colors.white, color: R.colors.white,
fontWeight: '600', fontWeight: '600',
...@@ -86,4 +76,4 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => { ...@@ -86,4 +76,4 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
); );
}; };
export default WorkReportModal; export default WorkReportModalView;
src/screens/list_work/deliver_to_me/detail/modal_edit_report/index.js
import EditReportModal from './view'; import React, {useState, useEffect} from 'react';
import EditReportModalView from './view';
const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
const [reportContent, setReportContent] = useState(initialContent);
// Update reportContent when initialContent changes
useEffect(() => {
setReportContent(initialContent);
}, [initialContent]);
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
onClose();
}
};
const handleCancel = () => {
setReportContent(initialContent);
onClose();
};
const handleContentChange = (content) => {
setReportContent(content);
};
const handleDeleteAttachment = () => {
// Handle attachment deletion logic
console.log('Delete attachment');
};
const handleAddAttachment = () => {
// Handle add attachment logic
console.log('Add attachment');
};
return (
<EditReportModalView
visible={visible}
onClose={onClose}
reportContent={reportContent}
onContentChange={handleContentChange}
onSubmit={handleSubmit}
onCancel={handleCancel}
onDeleteAttachment={handleDeleteAttachment}
onAddAttachment={handleAddAttachment}
/>
);
};
export default EditReportModal; export default EditReportModal;
src/screens/list_work/deliver_to_me/detail/modal_edit_report/style.js 0 → 100644
import { StyleSheet } from "react-native";
import R from "../../../../../assets/R";
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
backgroundColor: 'white',
borderRadius: 12,
padding: 20,
width: '90%',
maxWidth: 400,
},
title: {
fontSize: R.fontsize.fontsSizeTitle,
fontWeight: '600',
color: R.colors.blue,
textAlign: 'center',
},
description: {
fontSize: R.fontsize.fontSizeContent,
color: R.colors.gray1,
lineHeight: 18,
marginBottom: 10,
textAlign: 'left',
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
borderRadius: 10,
padding: 10,
},
required: {
color: R.colors.red,
},
attachedFileContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: R.colors.blue1,
borderRadius: 10,
padding: 10,
marginBottom: 10,
},
text: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
fileName: {
fontSize: R.sizes.xs,
color: R.colors.black,
},
deleteIcon: {
width: 20,
height: 20,
tintColor: R.colors.blue,
},
attachmentContainer: {
borderWidth: 1,
borderColor: R.colors.blue,
borderRadius: 10,
padding: 20,
alignItems: 'center',
marginBottom: 20,
},
uploadIcon: {
width: 23,
height: 28,
tintColor: R.colors.blue,
marginBottom: 5,
},
attachmentText: {
fontSize: 14,
color: R.colors.blue,
fontWeight: '500',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'flex-end',
},
cancelButton: {
flex: 1,
backgroundColor: R.colors.orange,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
submitButton: {
flex: 1,
backgroundColor: R.colors.blue,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
cancelButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
submitButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});
export default styles
\ No newline at end of file
src/screens/list_work/deliver_to_me/detail/modal_edit_report/view.js
import React, {useState} from 'react'; import React from 'react';
import { import {Modal, View, Text, TouchableOpacity, Image} from 'react-native';
Modal,
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native';
import R from '../../../../../assets/R'; import R from '../../../../../assets/R';
import Button from '../../../../../components/Button'; import Button from '../../../../../components/Button';
import styles from './style';
const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => { const EditReportModalView = ({
const [reportContent, setReportContent] = useState(initialContent); visible,
onClose,
const handleSubmit = () => { reportContent,
if (reportContent.trim()) { onContentChange,
onSubmit(reportContent); onSubmit,
onClose(); onCancel,
} onDeleteAttachment,
}; onAddAttachment,
}) => {
const handleCancel = () => {
setReportContent(initialContent);
onClose();
};
return ( return (
<Modal <Modal
...@@ -50,12 +39,12 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => { ...@@ -50,12 +39,12 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
<Text style={styles.fileName}> <Text style={styles.fileName}>
Quyết định thông báo đào tạo - QD347583 Quyết định thông báo đào tạo - QD347583
</Text> </Text>
<TouchableOpacity> <TouchableOpacity onPress={onDeleteAttachment}>
<Image source={R.images.icCancel} style={styles.deleteIcon} /> <Image source={R.images.icCancel} style={styles.deleteIcon} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<TouchableOpacity style={styles.attachmentContainer}> <TouchableOpacity style={styles.attachmentContainer} onPress={onAddAttachment}>
<Image source={R.images.icDocument} style={styles.uploadIcon} /> <Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text> <Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -63,7 +52,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => { ...@@ -63,7 +52,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
<Button <Button
title="Hủy" title="Hủy"
onPress={handleCancel} onPress={onCancel}
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
width={100} width={100}
height={35} height={35}
...@@ -74,7 +63,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => { ...@@ -74,7 +63,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
/> />
<Button <Button
title="Cập nhật" title="Cập nhật"
onPress={handleSubmit} onPress={onSubmit}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
width={100} width={100}
height={35} height={35}
...@@ -89,112 +78,4 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => { ...@@ -89,112 +78,4 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
); );
}; };
const styles = StyleSheet.create({ export default EditReportModalView;
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
backgroundColor: 'white',
borderRadius: 12,
padding: 20,
width: '90%',
maxWidth: 400,
},
title: {
fontSize: R.fontsize.fontsSizeTitle,
fontWeight: '600',
color: R.colors.blue,
textAlign: 'center',
},
description: {
fontSize: R.fontsize.fontSizeContent,
color: R.colors.gray1,
lineHeight: 18,
marginBottom: 10,
textAlign: 'left',
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
borderRadius: 10,
padding: 10,
},
required: {
color: R.colors.red,
},
attachedFileContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: R.colors.blue1,
borderRadius: 10,
padding: 10,
marginBottom: 10,
},
text: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
fileName: {
fontSize: R.sizes.xs,
color: R.colors.black,
},
deleteIcon: {
width: 20,
height: 20,
tintColor: R.colors.blue,
},
attachmentContainer: {
borderWidth: 1,
borderColor: R.colors.blue,
borderRadius: 10,
padding: 20,
alignItems: 'center',
marginBottom: 20,
},
uploadIcon: {
width: 23,
height: 28,
tintColor: R.colors.blue,
marginBottom: 5,
},
attachmentText: {
fontSize: 14,
color: R.colors.blue,
fontWeight: '500',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'flex-end',
},
cancelButton: {
flex: 1,
backgroundColor: R.colors.orange,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
submitButton: {
flex: 1,
backgroundColor: R.colors.blue,
borderRadius: 8,
paddingVertical: 12,
alignItems: 'center',
},
cancelButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
submitButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});
export default EditReportModal;
src/screens/list_work/index.js
...@@ -94,7 +94,10 @@ const ListWork = props => { ...@@ -94,7 +94,10 @@ const ListWork = props => {
deadline: '2025-09-10', deadline: '2025-09-10',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'BM301, Phòng Đào tạo', document: 'BM301, Phòng Đào tạo',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -105,7 +108,10 @@ const ListWork = props => { ...@@ -105,7 +108,10 @@ const ListWork = props => {
deadline: '2025-09-12', deadline: '2025-09-12',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Công văn 12/MN', document: 'Công văn 12/MN',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -116,7 +122,10 @@ const ListWork = props => { ...@@ -116,7 +122,10 @@ const ListWork = props => {
deadline: '2025-09-15', deadline: '2025-09-15',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'BM-Exam-2025', document: 'BM-Exam-2025',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -127,7 +136,10 @@ const ListWork = props => { ...@@ -127,7 +136,10 @@ const ListWork = props => {
deadline: '2025-09-11', deadline: '2025-09-11',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Slide_v2.pptx', document: 'Slide_v2.pptx',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -138,7 +150,10 @@ const ListWork = props => { ...@@ -138,7 +150,10 @@ const ListWork = props => {
deadline: '2025-09-05', deadline: '2025-09-05',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'AI-Syllabus-Final.pdf', document: 'AI-Syllabus-Final.pdf',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -149,7 +164,10 @@ const ListWork = props => { ...@@ -149,7 +164,10 @@ const ListWork = props => {
deadline: '2025-09-18', deadline: '2025-09-18',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Biên bản họp 09/2025', document: 'Biên bản họp 09/2025',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -160,7 +178,10 @@ const ListWork = props => { ...@@ -160,7 +178,10 @@ const ListWork = props => {
deadline: '2025-09-20', deadline: '2025-09-20',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Report-Draft.docx', document: 'Report-Draft.docx',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -171,7 +192,10 @@ const ListWork = props => { ...@@ -171,7 +192,10 @@ const ListWork = props => {
deadline: '2025-09-22', deadline: '2025-09-22',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Checklist-KDCL.xlsx', document: 'Checklist-KDCL.xlsx',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -182,7 +206,10 @@ const ListWork = props => { ...@@ -182,7 +206,10 @@ const ListWork = props => {
deadline: '2025-09-13', deadline: '2025-09-13',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'SeminarPlan.docx', document: 'SeminarPlan.docx',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -193,7 +220,10 @@ const ListWork = props => { ...@@ -193,7 +220,10 @@ const ListWork = props => {
deadline: '2025-09-03', deadline: '2025-09-03',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Textbook-Final.pdf', document: 'Textbook-Final.pdf',
workProgress: 'Đã hoàn thành', workProgress: 'Đã hoàn thành',
}, },
...@@ -204,7 +234,10 @@ const ListWork = props => { ...@@ -204,7 +234,10 @@ const ListWork = props => {
deadline: '2025-09-16', deadline: '2025-09-16',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'RN-Lab3.md', document: 'RN-Lab3.md',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -215,7 +248,10 @@ const ListWork = props => { ...@@ -215,7 +248,10 @@ const ListWork = props => {
deadline: '2025-09-17', deadline: '2025-09-17',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Issue#127', document: 'Issue#127',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -226,7 +262,10 @@ const ListWork = props => { ...@@ -226,7 +262,10 @@ const ListWork = props => {
deadline: '2025-09-19', deadline: '2025-09-19',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'BigData-Slides-v1.pptx', document: 'BigData-Slides-v1.pptx',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -237,7 +276,10 @@ const ListWork = props => { ...@@ -237,7 +276,10 @@ const ListWork = props => {
deadline: '2025-09-14', deadline: '2025-09-14',
assignedToMe: true, assignedToMe: true,
supervisedByMe: false, supervisedByMe: false,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Minutes-Dept-0909.docx', document: 'Minutes-Dept-0909.docx',
workProgress: 'Đang thực hiện', workProgress: 'Đang thực hiện',
}, },
...@@ -248,7 +290,10 @@ const ListWork = props => { ...@@ -248,7 +290,10 @@ const ListWork = props => {
deadline: '2025-09-21', deadline: '2025-09-21',
assignedToMe: false, assignedToMe: false,
supervisedByMe: true, supervisedByMe: true,
supervisor: [{id: 1, name: 'Trần Văn Hùng'}, {id: 2, name: 'Nguyễn Văn A'}], supervisor: [
{id: 1, name: 'Trần Văn Hùng'},
{id: 2, name: 'Nguyễn Văn A'},
],
document: 'Thesis-List.xlsx', document: 'Thesis-List.xlsx',
workProgress: 'Chờ duyệt', workProgress: 'Chờ duyệt',
}, },
...@@ -296,8 +341,8 @@ const ListWork = props => { ...@@ -296,8 +341,8 @@ const ListWork = props => {
setCurrentTabKey(item?.key || ROLE.ALL); setCurrentTabKey(item?.key || ROLE.ALL);
console.log('Tab changed to:', item?.key); console.log('Tab changed to:', item?.key);
}; };
// Hiển thị dữ liệu sau khi chọn // Hiển thị dữ liệu sau khi chọn
const filterList = useMemo(() => { const filterList = useMemo(() => {
let base = dataList; let base = dataList;
console.log('Dữ liệu danh sách đầu vào', base); console.log('Dữ liệu danh sách đầu vào', base);
...@@ -414,67 +459,105 @@ const ListWork = props => { ...@@ -414,67 +459,105 @@ const ListWork = props => {
} }
} }
return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}]; return [
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
}; };
// Helper function cho buttons của Supervisor // Helper function cho buttons của Supervisor
const getButtonsForSupervisor = (status) => { const getButtonsForSupervisor = status => {
switch (status) { switch (status) {
case 'Đang thực hiện': case 'Đang thực hiện':
// Supervisor có thể yêu cầu báo cáo từ người được giao việc // Supervisor có thể yêu cầu báo cáo từ người được giao việc
return [ return [
{title: 'Yêu cầu báo cáo', backgroundColor: R.colors.orange, action: 'requestReport'}, {
title: 'Yêu cầu báo cáo',
backgroundColor: R.colors.orange,
action: 'requestReport',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Đợi chỉnh sửa': case 'Đợi chỉnh sửa':
// Đang chờ người được giao việc chỉnh sửa // Đang chờ người được giao việc chỉnh sửa
return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}]; return [
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
case 'Chờ duyệt': case 'Chờ duyệt':
// Supervisor cần phê duyệt hoặc yêu cầu chỉnh sửa // Supervisor cần phê duyệt hoặc yêu cầu chỉnh sửa
return [ return [
{title: 'Cần chỉnh sửa', backgroundColor: R.colors.orange, action: 'needsEdit'}, {
{title: 'Phê duyệt', backgroundColor: R.colors.green, action: 'approve'}, title: 'Cần chỉnh sửa',
backgroundColor: R.colors.orange,
action: 'needsEdit',
},
{
title: 'Phê duyệt',
backgroundColor: R.colors.green,
action: 'approve',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Đợi báo cáo': case 'Đợi báo cáo':
// Đang chờ người được giao việc nộp báo cáo // Đang chờ người được giao việc nộp báo cáo
return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}]; return [
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
case 'Hoàn thành': case 'Hoàn thành':
return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}]; return [
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
default: default:
return []; return [];
} }
}; };
// Helper function cho buttons của Assignee // Helper function cho buttons của Assignee
const getButtonsForAssignee = (status) => { const getButtonsForAssignee = status => {
switch (status) { switch (status) {
case 'Đang thực hiện': case 'Đang thực hiện':
// Người được giao việc đang thực hiện và có thể nộp báo cáo // Người được giao việc đang thực hiện và có thể nộp báo cáo
return [ return [
{title: 'Báo cáo', backgroundColor: R.colors.orange, action: 'report'}, {
title: 'Báo cáo',
backgroundColor: R.colors.orange,
action: 'report',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Cần chỉnh sửa': case 'Cần chỉnh sửa':
// Supervisor yêu cầu chỉnh sửa, người được giao việc cần báo cáo lại // Supervisor yêu cầu chỉnh sửa, người được giao việc cần báo cáo lại
return [ return [
{title: 'Báo cáo', backgroundColor: R.colors.orange, action: 'report'}, {
title: 'Báo cáo',
backgroundColor: R.colors.orange,
action: 'report',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Đợi báo cáo': case 'Đợi báo cáo':
// Supervisor yêu cầu báo cáo, người được giao việc cần nộp báo cáo // Supervisor yêu cầu báo cáo, người được giao việc cần nộp báo cáo
return [ return [
{title: 'Báo cáo', backgroundColor: R.colors.orange, action: 'report'}, {
title: 'Báo cáo',
backgroundColor: R.colors.orange,
action: 'report',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Chờ duyệt': case 'Chờ duyệt':
// Đã nộp báo cáo, đang chờ supervisor duyệt, có thể sửa báo cáo // Đã nộp báo cáo, đang chờ supervisor duyệt, có thể sửa báo cáo
return [ return [
{title: 'Sửa báo cáo', backgroundColor: R.colors.orange, action: 'editReport'}, {
title: 'Sửa báo cáo',
backgroundColor: R.colors.orange,
action: 'editReport',
},
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
]; ];
case 'Hoàn thành': case 'Hoàn thành':
return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}]; return [
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
default: default:
return []; return [];
} }
...@@ -495,28 +578,28 @@ const ListWork = props => { ...@@ -495,28 +578,28 @@ const ListWork = props => {
return ( return (
<ListWorkView <ListWorkView
// Dữ liệu // Dữ liệu
searchQuery={searchQuery} searchQuery={searchQuery}
setSearchQuery={setSearchQuery} setSearchQuery={setSearchQuery}
dataList={filterList} dataList={filterList}
modalDeliverToMeVisible={modalDeliverToMeVisible} modalDeliverToMeVisible={modalDeliverToMeVisible}
modalMonitoringVisible={modalMonitoringVisible} modalMonitoringVisible={modalMonitoringVisible}
tabView={tabView} tabView={tabView}
currentTabKey={currentTabKey} currentTabKey={currentTabKey}
shouldShowFAB={shouldShowFAB()} shouldShowFAB={shouldShowFAB()}
// Sự kiện // Sự kiện
onFilterChange={handleFilterChange} onFilterChange={handleFilterChange}
onAddWork={handleAddWork} onAddWork={handleAddWork}
onSaveDeliverToMeWork={handleSaveDeliverToMeWork} onSaveDeliverToMeWork={handleSaveDeliverToMeWork}
onSaveMonitoringWork={handleSaveMonitoringWork} onSaveMonitoringWork={handleSaveMonitoringWork}
onCloseDeliverToMeModal={handleCloseDeliverToMeModal} onCloseDeliverToMeModal={handleCloseDeliverToMeModal}
onCloseMonitoringModal={handleCloseMonitoringModal} onCloseMonitoringModal={handleCloseMonitoringModal}
onViewDetailDeliverToMe={handleViewDetailDeliverToMe} onViewDetailDeliverToMe={handleViewDetailDeliverToMe}
onReportAction={handleReportAction} onReportAction={handleReportAction}
onApprovalAction={handleApprovalAction} onApprovalAction={handleApprovalAction}
// Utils // Utils
getStatusColor={getStatusColor} getStatusColor={getStatusColor}
getButtonsForStatus={getButtonsForStatus} getButtonsForStatus={getButtonsForStatus}
/> />
); );
}; };
......
src/screens/list_work/modal_add_deliver_to_me/index.js
import AddWorkModal from './view'; import React, {useState} from 'react';
import AddWorkModalView from './view';
const AddWorkModal = ({visible, onClose, onSave}) => {
const [formData, setFormData] = useState({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
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 categoryData = [
{name: 'Công việc theo văn bản', value: 'document'},
{name: 'Công việc khác', value: 'other'},
];
const items = [
{id: 1, label: 'Option 1'},
{id: 2, label: 'Option 2'},
{id: 3, label: 'Option 3'},
];
const responsibleData = [
{name: 'Công việc theo văn bản', value: 'document'},
{name: 'Công việc cá nhân', value: 'personal'},
];
const assigneeData = [
{name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
{name: 'Khác', value: 'other'},
];
const implementerData = [
{name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
{name: 'Khác', value: 'other'},
];
const updateFormData = (field, value) => {
setFormData(prev => ({...prev, [field]: value}));
};
const handleSave = () => {
onSave(formData);
resetForm();
onClose();
};
const resetForm = () => {
setFormData({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
};
const handleCancel = () => {
resetForm();
onClose();
};
const handleItemPress = (item) => {
// Logic xử lý khi nhấn vào item trong danh sách
console.log('Item pressed:', item);
};
const handleDropdownSelect = (item, field) => {
console.log('Dropdown selected:', item, field);
updateFormData(field, item);
};
return (
<AddWorkModalView
visible={visible}
formData={formData}
dataList={dataList}
categoryData={categoryData}
items={items}
responsibleData={responsibleData}
assigneeData={assigneeData}
implementerData={implementerData}
updateFormData={updateFormData}
handleSave={handleSave}
handleCancel={handleCancel}
handleItemPress={handleItemPress}
handleDropdownSelect={handleDropdownSelect}
/>
);
};
export default AddWorkModal; export default AddWorkModal;
src/screens/list_work/modal_add_deliver_to_me/view.js
import React, {useState} from 'react'; import React from 'react';
import { import {
Modal, Modal,
View, View,
...@@ -15,88 +15,26 @@ import TextMulti from '../../../components/Input/TextMulti'; ...@@ -15,88 +15,26 @@ import TextMulti from '../../../components/Input/TextMulti';
import Dropdown from '../../../components/DropdownAlert/Dropdown'; import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
const AddWorkModal = ({visible, onClose, onSave}) => { const AddWorkModalView = props => {
const [formData, setFormData] = useState({ const {
title: '', visible,
content: '', formData,
category: null, dataList,
responsible: null, categoryData,
deadline: null, items,
assignee: null, responsibleData,
implementer: null, assigneeData,
attachments: [], implementerData,
}); updateFormData,
handleSave,
const [dataList, setDataList] = useState([ handleCancel,
{id: 1, name: 'Nguyễn Minh Đức'}, handleItemPress,
{id: 2, name: 'Trần Văn Hùng'}, handleDropdownSelect,
{id: 3, name: 'Lê Thị Mai'}, } = props;
{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 categoryData = [
{name: 'Công việc theo văn bản', value: 'document'},
{name: 'Công việc khác', value: 'other'},
];
const items = [
{id: 1, label: 'Option 1'},
{id: 2, label: 'Option 2'},
{id: 3, label: 'Option 3'},
];
const responsibleData = [
{name: 'Công việc theo văn bản', value: 'document'},
{name: 'Công việc cá nhân', value: 'personal'},
];
const assigneeData = [
{name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
{name: 'Khác', value: 'other'},
];
const implementerData = [
{name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
{name: 'Khác', value: 'other'},
];
const handleSave = () => {
onSave(formData);
onClose();
};
const handleCancel = () => {
setFormData({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
onClose();
};
const renderItem_1 = ({item, onPress}) => { const renderItem_1 = ({item, onPress}) => {
return ( return (
<View style={styles.chip}> <View style={styles.chip}>
<TouchableOpacity style={styles.containerIcon} onPress={onPress}> <TouchableOpacity style={styles.containerIcon} onPress={() => handleItemPress(item)}>
<Image <Image
resizeMode="cover" resizeMode="cover"
source={R.images.icCancel} source={R.images.icCancel}
...@@ -113,7 +51,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -113,7 +51,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
visible={visible} visible={visible}
animationType="slide" animationType="slide"
transparent={true} transparent={true}
onRequestClose={onClose}> onRequestClose={handleCancel}>
<View style={styles.overlay}> <View style={styles.overlay}>
<View style={styles.modalContainer}> <View style={styles.modalContainer}>
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
...@@ -126,6 +64,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -126,6 +64,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
title="Tiêu đề" title="Tiêu đề"
required required
value={formData.title} value={formData.title}
onChangeText={(value) => updateFormData('title', value)}
containerMarginBottom={10} containerMarginBottom={10}
/> />
...@@ -133,6 +72,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -133,6 +72,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
title="Mô tả" title="Mô tả"
required required
value={formData.content} value={formData.content}
onChangeText={(value) => updateFormData('content', value)}
containerMarginBottom={10} containerMarginBottom={10}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
titleFontSize={R.fontsize.fontSizeContent} titleFontSize={R.fontsize.fontSizeContent}
...@@ -156,7 +96,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -156,7 +96,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
height={35} height={35}
items={items} items={items}
placeholder="Công việc theo văn bản" placeholder="Công việc theo văn bản"
onSelect={item => console.log('Bạn đã chọn:', item)} onSelect={item => handleDropdownSelect(item, 'category')}
/> />
</View> </View>
<Text style={[styles.text_2, {marginBottom: 3}]}> <Text style={[styles.text_2, {marginBottom: 3}]}>
...@@ -194,7 +134,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -194,7 +134,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
height={35} height={35}
items={items} items={items}
placeholder="Công việc theo văn bản" placeholder="Công việc theo văn bản"
onSelect={item => console.log('Bạn đã chọn:', item)} onSelect={item => handleDropdownSelect(item, 'document')}
/> />
</View> </View>
<Text style={[styles.text_2, {marginBottom: 3}]}> <Text style={[styles.text_2, {marginBottom: 3}]}>
...@@ -217,7 +157,8 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -217,7 +157,8 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<TextField <TextField
title="Ngày đến hạn" title="Ngày đến hạn"
required required
value={formData.title} value={formData.deadline}
onChangeText={(value) => updateFormData('deadline', value)}
containerMarginBottom={10} containerMarginBottom={10}
/> />
...@@ -238,7 +179,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -238,7 +179,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<Dropdown <Dropdown
height={35} height={35}
items={items} items={items}
onSelect={item => console.log('Bạn đã chọn:', item)} onSelect={item => handleDropdownSelect(item, 'supervisor')}
/> />
</View> </View>
<Text style={[styles.text_2, {marginBottom: 3}]}> <Text style={[styles.text_2, {marginBottom: 3}]}>
...@@ -275,7 +216,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -275,7 +216,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<Dropdown <Dropdown
height={35} height={35}
items={items} items={items}
onSelect={item => console.log('Bạn đã chọn:', item)} onSelect={item => handleDropdownSelect(item, 'implementer')}
/> />
</View> </View>
<Text style={[styles.text_2, {marginBottom: 3}]}> <Text style={[styles.text_2, {marginBottom: 3}]}>
...@@ -327,4 +268,4 @@ const AddWorkModal = ({visible, onClose, onSave}) => { ...@@ -327,4 +268,4 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
); );
}; };
export default AddWorkModal; export default AddWorkModalView;
src/screens/list_work/modal_add_monitoring/index.js
import AddMonitoringModal from './view'; import React, {useState} from 'react';
import AddMonitoringModalView from './view';
const AddMonitoringModal = ({visible, onClose, onSave}) => {
const [formData, setFormData] = useState({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
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 [selectedItems, setSelectedItems] = useState([]);
const updateFormData = (field, value) => {
setFormData(prev => ({...prev, [field]: value}));
};
const handleSave = () => {
if (formData.title.trim() && formData.content.trim()) {
const workData = {
...formData,
selectedImplementers: selectedItems,
type: 'monitoring', // Đánh dấu đây là công việc giám sát
};
onSave(workData);
resetForm();
} else {
alert('Vui lòng điền đầy đủ thông tin bắt buộc');
}
};
const resetForm = () => {
setFormData({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
setSelectedItems([]);
};
const handleClose = () => {
resetForm();
onClose();
};
const handleSelectItem = item => {
const isSelected = selectedItems.some(selected => selected.id === item.id);
if (isSelected) {
setSelectedItems(prev => prev.filter(selected => selected.id !== item.id));
} else {
setSelectedItems(prev => [...prev, item]);
}
};
const handleRemoveItem = itemId => {
setSelectedItems(prev => prev.filter(item => item.id !== itemId));
};
return (
<AddMonitoringModalView
visible={visible}
formData={formData}
dataList={dataList}
selectedItems={selectedItems}
updateFormData={updateFormData}
handleSave={handleSave}
handleClose={handleClose}
handleSelectItem={handleSelectItem}
handleRemoveItem={handleRemoveItem}
/>
);
};
export default AddMonitoringModal; export default AddMonitoringModal;
src/screens/list_work/modal_add_monitoring/view.js
import React, {useState} from 'react'; import React from 'react';
import { import {
Modal, Modal,
View, View,
...@@ -15,92 +15,18 @@ import TextMulti from '../../../components/Input/TextMulti'; ...@@ -15,92 +15,18 @@ import TextMulti from '../../../components/Input/TextMulti';
import Dropdown from '../../../components/DropdownAlert/Dropdown'; import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
const AddMonitoringModal = ({visible, onClose, onSave}) => { const AddMonitoringModalView = props => {
const [formData, setFormData] = useState({ const {
title: '', visible,
content: '', formData,
category: null, dataList,
responsible: null, selectedItems,
deadline: null, updateFormData,
assignee: null, handleSave,
implementer: null, handleClose,
attachments: [], handleSelectItem,
}); handleRemoveItem,
} = props;
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 [selectedItems, setSelectedItems] = useState([]);
const updateFormData = (field, value) => {
setFormData(prev => ({...prev, [field]: value}));
};
const handleSave = () => {
if (formData.title.trim() && formData.content.trim()) {
const workData = {
...formData,
selectedImplementers: selectedItems,
type: 'monitoring', // Đánh dấu đây là công việc giám sát
};
onSave(workData);
resetForm();
} else {
alert('Vui lòng điền đầy đủ thông tin bắt buộc');
}
};
const resetForm = () => {
setFormData({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
setSelectedItems([]);
};
const handleClose = () => {
resetForm();
onClose();
};
const handleSelectItem = item => {
const isSelected = selectedItems.some(selected => selected.id === item.id);
if (isSelected) {
setSelectedItems(prev => prev.filter(selected => selected.id !== item.id));
} else {
setSelectedItems(prev => [...prev, item]);
}
};
const handleRemoveItem = itemId => {
setSelectedItems(prev => prev.filter(item => item.id !== itemId));
};
const renderItem = ({item}) => { const renderItem = ({item}) => {
const isSelected = selectedItems.some(selected => selected.id === item.id); const isSelected = selectedItems.some(selected => selected.id === item.id);
...@@ -268,4 +194,4 @@ const AddMonitoringModal = ({visible, onClose, onSave}) => { ...@@ -268,4 +194,4 @@ const AddMonitoringModal = ({visible, onClose, onSave}) => {
); );
}; };
export default AddMonitoringModal; export default AddMonitoringModalView;
src/screens/list_work/style.js
...@@ -37,21 +37,21 @@ const styles = StyleSheet.create({ ...@@ -37,21 +37,21 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
borderColor: R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
}, },
container_tab_view:{ container_tab_view: {
marginVertical:5 marginVertical: 5,
}, },
item_tab_view:{ item_tab_view: {
backgroundColor: R.colors.gray, backgroundColor: R.colors.gray,
marginHorizontal: 5, marginHorizontal: 5,
borderRadius: 10, borderRadius: 10,
width: 107, width: 107,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
active_tab_view:{ active_tab_view: {
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
}, },
text_tab_view:{ text_tab_view: {
color: R.colors.white, color: R.colors.white,
fontWeight: '400', fontWeight: '400',
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
......
src/screens/list_work/view.js
...@@ -39,7 +39,7 @@ const ListWorkView = props => { ...@@ -39,7 +39,7 @@ const ListWorkView = props => {
onReportAction, onReportAction,
onApprovalAction, onApprovalAction,
getStatusColor, getStatusColor,
getButtonsForStatus getButtonsForStatus,
} = props; } = props;
const renderTabView = () => { const renderTabView = () => {
...@@ -143,61 +143,80 @@ const ListWorkView = props => { ...@@ -143,61 +143,80 @@ const ListWorkView = props => {
); );
}; };
return ( const renderCard = () => {
<View style={styles.container}> return (
<Header title={'Danh sách công việc'} isBack /> <View style={styles.card}>
<View style={styles.body}> <TouchableOpacity style={styles.btnCard}>
{renderTabView()} <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
</TouchableOpacity>
</View>
);
};
<View style={{marginBottom: 15, flex: 1}}> const renderFilter = () => {
<View style={styles.card}> return (
<TouchableOpacity style={styles.btnCard}> <View style={styles.box_3}>
<Text style={styles.text}>Học kỳ 2, Năm 2025</Text> <View style={styles.searchBox}>
</TouchableOpacity> <Image source={R.images.icSearch} style={{width: 20, height: 20}} />
<View style={{flex: 1, padding: 0, margin: 0, height: 30}}>
<TextInput
placeholder="Tìm kiếm"
style={[styles.text, {height: 30, padding: 0, marginRight: 15}]}
value={searchQuery}
onChangeText={setSearchQuery}
/>
</View> </View>
</View>
<View style={{flex: 0.1}}></View>
<View style={styles.box_3}> <View style={{flex: 1}}>
<View style={styles.searchBox}> <Dropdown title={'Tìm kiếm'} height={30} />
<Image </View>
source={R.images.icSearch} </View>
style={{width: 20, height: 20}} );
/> };
<View style={{flex: 1 , padding:0 , margin:0, height:30}}>
<TextInput
placeholder="Tìm kiếm"
style={[styles.text, {height:30 , padding:0, marginRight:15}]}
value={searchQuery}
onChangeText={setSearchQuery}
/>
</View>
</View>
<View style={{flex: 0.1}}></View>
<View style={{flex: 1}}> const renderListItem = () => {
<Dropdown title={'Tìm kiếm'} height={30} /> return (
</View> <FlatList
</View> data={dataList}
<FlatList renderItem={renderListView}
data={dataList} keyExtractor={item => item.id.toString()}
renderItem={renderListView} showsVerticalScrollIndicator={false}
keyExtractor={item => item.id.toString()} />
showsVerticalScrollIndicator={false} );
/> };
const renderBody = () =>{
return (
<View style={styles.body}>
{renderTabView()}
{renderCard()}
<View style={{marginBottom: 15, flex: 1}}>
{renderFilter()}
{renderListItem()}
</View> </View>
</View> </View>
)
}
return (
<View style={styles.container}>
<Header title={'Danh sách công việc'} isBack />
{renderBody()}
{shouldShowFAB && ( {shouldShowFAB && (
<FAB> <FAB>
<SubButton <SubButton
onPress={onAddWork} onPress={onAddWork}
label={currentTabKey === ROLE.ASSIGNEE ? "Tạo công việc" : "Tạo giám sát"} label={
currentTabKey === ROLE.ASSIGNEE ? 'Tạo công việc' : 'Tạo giám sát'
}
images={R.images.icMenuEdit} images={R.images.icMenuEdit}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
/> />
</FAB> </FAB>
)} )}
<AddWorkModal <AddWorkModal
visible={modalDeliverToMeVisible} visible={modalDeliverToMeVisible}
onClose={onCloseDeliverToMeModal} onClose={onCloseDeliverToMeModal}
......
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