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;
src/screens/list_work/deliver_to_me/detail/modal_add_report/view.js
import React, {useState} from 'react';
import {
Modal,
View,
Text,
TouchableOpacity,
Image,
} from 'react-native';
import React from 'react';
import {Modal, View, Text, TouchableOpacity, Image} from 'react-native';
import TextMulti from '../../../../../components/Input/TextMulti';
import R from '../../../../../assets/R';
import Button from '../../../../../components/Button';
import styles from './style';
const WorkReportModal = ({visible, onClose, onSubmit}) => {
const [reportContent, setReportContent] = useState('');
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
setReportContent('');
onClose();
}
};
const handleCancel = () => {
setReportContent('');
onClose();
};
const WorkReportModalView = ({
visible,
onClose,
reportContent,
onContentChange,
onSubmit,
onCancel,
onAddAttachment,
}) => {
return (
<Modal
......@@ -41,10 +29,12 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
title="Nội dung báo cáo"
required={true}
containerMarginBottom={10}
value={reportContent}
onChangeText={onContentChange}
/>
<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} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
......@@ -57,7 +47,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
backgroundColor={R.colors.orange}
borderRadius={100}
fontSize={R.fontsize.fontSizeContent}
onPress={handleCancel}
onPress={onCancel}
txtStyle={{
color: R.colors.white,
fontWeight: '600',
......@@ -72,7 +62,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
backgroundColor={R.colors.blue}
borderRadius={100}
fontSize={R.fontsize.fontSizeContent}
onPress={handleSubmit}
onPress={onSubmit}
txtStyle={{
color: R.colors.white,
fontWeight: '600',
......@@ -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;
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 {
Modal,
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native';
import React from 'react';
import {Modal, View, Text, TouchableOpacity, Image} from 'react-native';
import R from '../../../../../assets/R';
import Button from '../../../../../components/Button';
import styles from './style';
const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
const [reportContent, setReportContent] = useState(initialContent);
const handleSubmit = () => {
if (reportContent.trim()) {
onSubmit(reportContent);
onClose();
}
};
const handleCancel = () => {
setReportContent(initialContent);
onClose();
};
const EditReportModalView = ({
visible,
onClose,
reportContent,
onContentChange,
onSubmit,
onCancel,
onDeleteAttachment,
onAddAttachment,
}) => {
return (
<Modal
......@@ -50,12 +39,12 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
<Text style={styles.fileName}>
Quyết định thông báo đào tạo - QD347583
</Text>
<TouchableOpacity>
<TouchableOpacity onPress={onDeleteAttachment}>
<Image source={R.images.icCancel} style={styles.deleteIcon} />
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.attachmentContainer}>
<TouchableOpacity style={styles.attachmentContainer} onPress={onAddAttachment}>
<Image source={R.images.icDocument} style={styles.uploadIcon} />
<Text style={styles.attachmentText}>Thêm tài liệu</Text>
</TouchableOpacity>
......@@ -63,7 +52,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
<View style={styles.buttonContainer}>
<Button
title="Hủy"
onPress={handleCancel}
onPress={onCancel}
backgroundColor={R.colors.orange}
width={100}
height={35}
......@@ -74,7 +63,7 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
/>
<Button
title="Cập nhật"
onPress={handleSubmit}
onPress={onSubmit}
backgroundColor={R.colors.blue}
width={100}
height={35}
......@@ -89,112 +78,4 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
);
};
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 EditReportModal;
export default EditReportModalView;
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;
src/screens/list_work/modal_add_deliver_to_me/view.js
import React, {useState} from 'react';
import React from 'react';
import {
Modal,
View,
......@@ -15,88 +15,26 @@ import TextMulti from '../../../components/Input/TextMulti';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button';
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 handleSave = () => {
onSave(formData);
onClose();
};
const handleCancel = () => {
setFormData({
title: '',
content: '',
category: null,
responsible: null,
deadline: null,
assignee: null,
implementer: null,
attachments: [],
});
onClose();
};
const AddWorkModalView = props => {
const {
visible,
formData,
dataList,
categoryData,
items,
responsibleData,
assigneeData,
implementerData,
updateFormData,
handleSave,
handleCancel,
handleItemPress,
handleDropdownSelect,
} = props;
const renderItem_1 = ({item, onPress}) => {
return (
<View style={styles.chip}>
<TouchableOpacity style={styles.containerIcon} onPress={onPress}>
<TouchableOpacity style={styles.containerIcon} onPress={() => handleItemPress(item)}>
<Image
resizeMode="cover"
source={R.images.icCancel}
......@@ -113,7 +51,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
visible={visible}
animationType="slide"
transparent={true}
onRequestClose={onClose}>
onRequestClose={handleCancel}>
<View style={styles.overlay}>
<View style={styles.modalContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
......@@ -126,6 +64,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
title="Tiêu đề"
required
value={formData.title}
onChangeText={(value) => updateFormData('title', value)}
containerMarginBottom={10}
/>
......@@ -133,6 +72,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
title="Mô tả"
required
value={formData.content}
onChangeText={(value) => updateFormData('content', value)}
containerMarginBottom={10}
fontFamily={R.fonts.fontMedium}
titleFontSize={R.fontsize.fontSizeContent}
......@@ -156,7 +96,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
height={35}
items={items}
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>
<Text style={[styles.text_2, {marginBottom: 3}]}>
......@@ -194,7 +134,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
height={35}
items={items}
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>
<Text style={[styles.text_2, {marginBottom: 3}]}>
......@@ -217,7 +157,8 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<TextField
title="Ngày đến hạn"
required
value={formData.title}
value={formData.deadline}
onChangeText={(value) => updateFormData('deadline', value)}
containerMarginBottom={10}
/>
......@@ -238,7 +179,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<Dropdown
height={35}
items={items}
onSelect={item => console.log('Bạn đã chọn:', item)}
onSelect={item => handleDropdownSelect(item, 'supervisor')}
/>
</View>
<Text style={[styles.text_2, {marginBottom: 3}]}>
......@@ -275,7 +216,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
<Dropdown
height={35}
items={items}
onSelect={item => console.log('Bạn đã chọn:', item)}
onSelect={item => handleDropdownSelect(item, 'implementer')}
/>
</View>
<Text style={[styles.text_2, {marginBottom: 3}]}>
......@@ -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;
src/screens/list_work/modal_add_monitoring/view.js
import React, {useState} from 'react';
import React from 'react';
import {
Modal,
View,
......@@ -15,92 +15,18 @@ import TextMulti from '../../../components/Input/TextMulti';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button';
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));
};
const AddMonitoringModalView = props => {
const {
visible,
formData,
dataList,
selectedItems,
updateFormData,
handleSave,
handleClose,
handleSelectItem,
handleRemoveItem,
} = props;
const renderItem = ({item}) => {
const isSelected = selectedItems.some(selected => selected.id === item.id);
......@@ -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({
justifyContent: 'center',
borderColor: R.colors.grayBorderInputTextHeader,
},
container_tab_view:{
marginVertical:5
container_tab_view: {
marginVertical: 5,
},
item_tab_view:{
backgroundColor: R.colors.gray,
marginHorizontal: 5,
borderRadius: 10,
width: 107,
justifyContent: 'center',
alignItems: 'center',
item_tab_view: {
backgroundColor: R.colors.gray,
marginHorizontal: 5,
borderRadius: 10,
width: 107,
justifyContent: 'center',
alignItems: 'center',
},
active_tab_view:{
active_tab_view: {
backgroundColor: R.colors.blue,
},
text_tab_view:{
text_tab_view: {
color: R.colors.white,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
......
src/screens/list_work/view.js
......@@ -39,7 +39,7 @@ const ListWorkView = props => {
onReportAction,
onApprovalAction,
getStatusColor,
getButtonsForStatus
getButtonsForStatus,
} = props;
const renderTabView = () => {
......@@ -143,61 +143,80 @@ const ListWorkView = props => {
);
};
return (
<View style={styles.container}>
<Header title={'Danh sách công việc'} isBack />
<View style={styles.body}>
{renderTabView()}
const renderCard = () => {
return (
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard}>
<Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
</TouchableOpacity>
</View>
);
};
<View style={{marginBottom: 15, flex: 1}}>
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard}>
<Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
</TouchableOpacity>
const renderFilter = () => {
return (
<View style={styles.box_3}>
<View style={styles.searchBox}>
<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 style={{flex: 0.1}}></View>
<View style={styles.box_3}>
<View style={styles.searchBox}>
<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 style={{flex: 0.1}}></View>
<View style={{flex: 1}}>
<Dropdown title={'Tìm kiếm'} height={30} />
</View>
</View>
);
};
<View style={{flex: 1}}>
<Dropdown title={'Tìm kiếm'} height={30} />
</View>
</View>
<FlatList
data={dataList}
renderItem={renderListView}
keyExtractor={item => item.id.toString()}
showsVerticalScrollIndicator={false}
/>
const renderListItem = () => {
return (
<FlatList
data={dataList}
renderItem={renderListView}
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>
)
}
return (
<View style={styles.container}>
<Header title={'Danh sách công việc'} isBack />
{renderBody()}
{shouldShowFAB && (
<FAB>
<SubButton
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}
backgroundColor={R.colors.blue}
/>
</FAB>
)}
<AddWorkModal
visible={modalDeliverToMeVisible}
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