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 575 additions and 395 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/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