Skip to content

A
AppUms_Lecturer
Commit cbd22b47 by tungnq
Options

TODO: Tái cấu trúc component ListWork và ListWorkView để bổ sung modal báo cáo… 

TODO: Tái cấu trúc component ListWork và ListWorkView để bổ sung modal báo cáo và cải thiện xử lý sự kiện liên quan
parent 52722428
Showing with 68 additions and 132 deletions
src/screens/list_work/index.js
......@@ -7,22 +7,30 @@ import R from '../../assets/R';
const ListWork = props => {
const navigation = useNavigation();
const [searchQuery, setSearchQuery] = useState('');
const [currentTabKey, setCurrentTabKey] = useState(ROLE.ALL);
const [currentDropDownKey, setCurrentDropDownKey] = useState(
WORK_PROGRESS.ALL_WORK_PROGRESS,
);
const [modalDeliverToMeVisible, setModalDeliverToMeVisible] = useState(false);
const [modalMonitoringVisible, setModalMonitoringVisible] = useState(false);
const [modalRequestReportVisible, setModalRequestReportVisible] =
useState(false);
const [modalReportVisible, setmodalReportVisible] = useState(false);
const [currentTabKey, setCurrentTabKey] = useState(ROLE.ALL);
const [currentDropDownKey, setCurrentDropDownKey] = useState(
WORK_PROGRESS.ALL_WORK_PROGRESS,
);
const [tabView, setTabView] = useState([
{key: ROLE.ALL, label: 'Tất cả'},
{key: ROLE.ASSIGNEE, label: 'Giao cho tôi'},
{key: ROLE.SUPERVISOR, label: 'Đang giám sát'},
]);
const [dataList, setDataList] = useState([
{
id: 1,
title: 'Tạo thời khóa biểu cho sinh viên khai giảng và học kỳ 2 năm 2025',
status: 'Đang thực hiện', // hợp lệ cho cả 2 role
status: 'Đang thực hiện',
deadline: '2025-09-04',
assignedToMe: true,
supervisedByMe: false,
......@@ -36,7 +44,7 @@ const ListWork = props => {
{
id: 2,
title: 'Tạo thời khóa biểu cho sinh viên khai giảng và học kỳ 2 năm 2025',
status: 'Cần chỉnh sửa', // chỉ hợp lệ với role Giao cho tôi
status: 'Cần chỉnh sửa',
deadline: '2025-09-04',
assignedToMe: true,
supervisedByMe: false,
......@@ -50,7 +58,7 @@ const ListWork = props => {
{
id: 3,
title: 'Tạo thời khóa biểu cho sinh viên khai giảng và học kỳ 2 năm 2025',
status: 'Hoàn thành', // hợp lệ cho cả 2 role
status: 'Hoàn thành',
deadline: '2025-09-04',
assignedToMe: true,
supervisedByMe: false,
......@@ -64,7 +72,7 @@ const ListWork = props => {
{
id: 4,
title: 'Tạo thời khóa biểu cho sinh viên khai giảng và học kỳ 2 năm 2025',
status: 'Đợi báo cáo', // chỉ hợp lệ với role Đang giám sát
status: 'Đợi báo cáo',
deadline: '2025-09-04',
assignedToMe: false,
supervisedByMe: true,
......@@ -302,9 +310,6 @@ const ListWork = props => {
},
]);
// ==================== MODAL HANDLERS ====================
// Mở modal thêm công việc mới
const handleAddWork = () => {
if (currentTabKey === ROLE.ASSIGNEE) {
setModalDeliverToMeVisible(true);
......@@ -319,53 +324,36 @@ const ListWork = props => {
const handleReport = () => {
setmodalReportVisible(true);
}
};
// Đóng modal "Giao cho tôi"
const handleCloseDeliverToMeModal = () => {
setModalDeliverToMeVisible(false);
};
// Đóng modal "Đang giám sát"
const handleCloseMonitoringModal = () => {
setModalMonitoringVisible(false);
};
// Xử lý lưu công việc "Giao cho tôi"
const handleSaveDeliverToMeWork = workData => {
console.log('Đang lưu công việc giao cho tôi:', workData);
// TODO: Thêm logic lưu công việc giao cho tôi vào database
setModalDeliverToMeVisible(false);
};
// Xử lý lưu công việc "Đang giám sát"
const handleSaveMonitoringWork = workData => {
console.log('Đang lưu công việc giám sát:', workData);
// TODO: Thêm logic lưu công việc giám sát vào database
setModalMonitoringVisible(false);
};
// ==================== FILTER & SEARCH HANDLERS ====================
// Xử lý thay đổi bộ lọc tab
const handleFilterChange = item => {
setCurrentTabKey(item?.key || ROLE.ALL);
console.log('Tab changed to:', item?.key);
};
// Hiển thị dữ liệu sau khi chọn
const filterList = useMemo(() => {
let base = dataList;
// Lọc theo tab role
if (currentTabKey === ROLE.ASSIGNEE) {
base = base.filter(x => x.assignedToMe);
} else if (currentTabKey === ROLE.SUPERVISOR) {
base = base.filter(x => x.supervisedByMe);
}
// ROLE.ALL không cần filter
// Lọc theo search query
if (searchQuery && searchQuery.trim()) {
const q = searchQuery.trim().toLowerCase();
base = base.filter(
......@@ -375,100 +363,75 @@ const ListWork = props => {
);
}
// Lọc theo dropdown progress (chỉ khi không phải ALL)
if (currentDropDownKey === WORK_PROGRESS.SUCCESS_WORK_PROGRESS) {
base = base.filter(x => x.status === 'Đã hoàn thành');
} else if (currentDropDownKey === WORK_PROGRESS.CONTINUE_WORK_PROGRESS) {
base = base.filter(x => x.status !== 'Đã hoàn thành');
}
// WORK_PROGRESS.ALL_WORK_PROGRESS không cần filter
return base;
}, [dataList, currentTabKey, searchQuery, currentDropDownKey]);
// ==================== NAVIGATION HANDLERS ====================
// Điều hướng đến màn hình chi tiết công việc - conditional navigation
const handleViewDetailWork = item => {
// Nếu công việc được giao cho tôi (assignedToMe: true) -> đi vào màn hình detail như cũ
if (item.assignedToMe) {
navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item});
}
// Nếu tôi đang giám sát công việc này (supervisedByMe: true) -> đi vào màn hình monitoring
else if (item.supervisedByMe) {
} else if (item.supervisedByMe) {
navigation.navigate(ScreenName.DETAILWORKMONITORING, {workItem: item});
}
};
// Giữ lại function cũ để tương thích
const handleViewDetailDeliverToMe = item => {
handleViewDetailWork(item);
};
// ==================== ACTION HANDLERS ====================
// Xử lý các hành động báo cáo (báo cáo, yêu cầu báo cáo)
const handleReportAction = () => {
setmodalReportVisible(true);
};
// Xử lý các hành động phê duyệt (phê duyệt, yêu cầu chỉnh sửa)
const handleApprovalAction = (item, action) => {
console.log(`Thực hiện hành động ${action} cho công việc:`, item.id);
// TODO: Thêm logic xử lý phê duyệt
switch (action) {
case 'approve':
// Xử lý phê duyệt công việc
break;
case 'needsEdit':
// Xử lý yêu cầu chỉnh sửa
break;
default:
break;
}
};
// ==================== UTILITY FUNCTIONS ====================
// Lấy màu sắc theo trạng thái công việc
const getStatusColor = status => {
switch (status) {
case 'Đang thực hiện':
return '#FF9500'; // Cam
return '#FF9500';
case 'Chờ duyệt':
return '#007AFF'; // Xanh dương
return '#007AFF';
case 'Cần chỉnh sửa':
return '#FF9500'; // Cam (assignee)
return '#FF9500';
case 'Đợi chỉnh sửa':
return '#FF9500'; // Cam (supervisor)
return '#FF9500';
case 'Hoàn thành':
return '#34C759'; // Xanh lá
return '#34C759';
case 'Đợi báo cáo':
return '#007AFF'; // Xanh dương
return '#007AFF';
default:
return '#8E8E93'; // Xám
return '#8E8E93';
}
};
// Lấy danh sách button theo trạng thái công việc
const getButtonsForStatus = (status, workItem) => {
// Đang giám sát
if (currentTabKey === ROLE.SUPERVISOR) {
return getButtonsForSupervisor(status);
}
// Giao cho tôi
if (currentTabKey === ROLE.ASSIGNEE) {
return getButtonsForAssignee(status);
}
// Tất cả - hiển thị buttons theo role của từng công việc
if (currentTabKey === ROLE.ALL) {
// Nếu công việc được giao cho tôi
if (workItem.assignedToMe) {
return getButtonsForAssignee(status);
}
// Nếu tôi đang giám sát công việc này
if (workItem.supervisedByMe) {
return getButtonsForSupervisor(status);
}
......@@ -479,11 +442,9 @@ const ListWork = props => {
];
};
// Helper function cho buttons của Supervisor
const getButtonsForSupervisor = status => {
switch (status) {
case 'Đang thực hiện':
// Supervisor có thể yêu cầu báo cáo từ người được giao việc
return [
{
title: 'Yêu cầu báo cáo',
......@@ -493,12 +454,10 @@ const ListWork = props => {
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
case 'Đợi 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'},
];
case 'Chờ duyệt':
// Supervisor cần phê duyệt hoặc yêu cầu chỉnh sửa
return [
{
title: 'Cần chỉnh sửa',
......@@ -513,7 +472,6 @@ const ListWork = props => {
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
case 'Đợi 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'},
];
......@@ -526,11 +484,9 @@ const ListWork = props => {
}
};
// Helper function cho buttons của Assignee
const getButtonsForAssignee = status => {
switch (status) {
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
return [
{
title: 'Báo cáo',
......@@ -540,7 +496,6 @@ const ListWork = props => {
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
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
return [
{
title: 'Báo cáo',
......@@ -550,7 +505,6 @@ const ListWork = props => {
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
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
return [
{
title: 'Báo cáo',
......@@ -560,7 +514,6 @@ const ListWork = props => {
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
];
case 'Chờ duyệt':
// Đã nộp báo cáo, đang chờ supervisor duyệt, có thể sửa báo cáo
return [
{
title: 'Sửa báo cáo',
......@@ -578,41 +531,28 @@ const ListWork = props => {
}
};
const [tabView, setTabView] = useState([
{key: ROLE.ALL, label: 'Tất cả'},
{key: ROLE.ASSIGNEE, label: 'Giao cho tôi'},
{key: ROLE.SUPERVISOR, label: 'Đang giám sát'},
]);
const handleSubmitRequestReport = reportData => {
// Xử lý submit yêu cầu báo cáo
console.log('Report data:', reportData);
setModalRequestReportVisible(false);
// TODO: Gọi API để gửi yêu cầu báo cáo
};
const handleSubmitReport = () => {
setModalRequestReportVisible(false);
};
const handleCloseModalReport = () =>{
const handleCloseModalReport = () => {
setmodalReportVisible(false);
}
};
const handleCloseModalRequestReport = () => {
setModalRequestReportVisible(false);
};
// Kiểm tra có hiển thị FAB hay không
const shouldShowFAB = () => {
return currentTabKey !== ROLE.ALL;
};
// ==================== RENDER ====================
return (
<ListWorkView
// Dữ liệu
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
dataList={filterList}
......@@ -623,7 +563,6 @@ const ListWork = props => {
tabView={tabView}
currentTabKey={currentTabKey}
shouldShowFAB={shouldShowFAB()}
// Sự kiện
onFilterChange={handleFilterChange}
onAddWork={handleAddWork}
onOpenModalRequestReport={handleRequestReport}
......@@ -639,7 +578,6 @@ const ListWork = props => {
onViewDetailDeliverToMe={handleViewDetailDeliverToMe}
onReportAction={handleReportAction}
onApprovalAction={handleApprovalAction}
// Utils
getStatusColor={getStatusColor}
getButtonsForStatus={getButtonsForStatus}
/>
......
src/screens/list_work/monitoring/index.js
......@@ -4,9 +4,8 @@ import DetailListWorkMonitoringView from './view';
const DetailListWorkMonitoring = props => {
const {route} = props;
const workItem = route?.params?.workItem || {};
const [showRequestReport, setShowRequyestReport] = useState(false);
const [showModal, setShowModal] = useState(false);
const [showRequestReport, setShowRequestReport] = useState(false);
const [data, setData] = useState({
id: workItem.id || 1,
title: workItem.title || 'Công việc giám sát',
......@@ -37,24 +36,6 @@ const DetailListWorkMonitoring = props => {
workItem.content ||
'Nội dung công việc đang được giám sát và theo dõi tiến độ thực hiện',
});
const handleReportPress = () => {
if (data.status === 'Đang thực hiện') {
setShowModal(true);
}
};
const handleCloseModal = () => {
setShowModal(false);
};
const handleSubmitReport = (reportData) => {
// Xử lý submit yêu cầu báo cáo
console.log('Report data:', reportData);
setShowModal(false);
// TODO: Gọi API để gửi yêu cầu báo cáo
};
const [dataList, setDataList] = useState([
{id: 1, name: 'Nguyễn Minh Đức'},
......@@ -107,16 +88,29 @@ const DetailListWorkMonitoring = props => {
},
]);
const handleReportPress = () => {
if (data.status === 'Đang thực hiện') {
setShowRequestReport(true);
}
};
const handleCloseModalRequestReport = () => {
setShowRequestReport(false);
};
const handleSubmitRequestReport = reportData => {
setShowRequestReport(false);
};
return (
<DetailListWorkMonitoringView
data={data}
dataList={dataList}
dataReport={dataReport}
onHandleReportPress={handleReportPress}
setShowRequyestReport={setShowRequyestReport}
showModal={showModal}
onCloseModal={handleCloseModal}
onSubmitReport={handleSubmitReport}
onOpenModalRequestReport={handleReportPress}
showModalRequestReport={showRequestReport}
onCloseModalRequestReport={handleCloseModalRequestReport}
onSubmitRequestReport={handleSubmitRequestReport}
/>
);
};
......
src/screens/list_work/monitoring/modal_request_report/index.js
......@@ -4,7 +4,6 @@ import ModalRequestReportView from './view';
const ModalRequestReport = props => {
const {visible, onClose, onSubmitReport, workData} = props;
// State cho form trong modal
const [reportTitle, setReportTitle] = useState('');
const [reportContent, setReportContent] = useState('');
const [reportDeadline, setReportDeadline] = useState('');
......
src/screens/list_work/monitoring/style.js
......@@ -74,13 +74,13 @@ const styles = StyleSheet.create({
containerIcon: {
marginRight: 2,
},
attachmentContainer: {
attachmentContainer: {
borderWidth: 1,
borderColor: R.colors.blue,
borderRadius: 10,
padding: 20,
alignItems: 'center',
marginTop:3,
marginTop: 3,
marginBottom: 50,
},
uploadIcon: {
......
src/screens/list_work/monitoring/view.js
......@@ -19,9 +19,17 @@ import ModalRequestReport from './modal_request_report';
const DetailListWorkMonitoringView = props => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
const {data, dataList, dataReport, onHandleReportPress, setShowRequestReport, showModal, onCloseModal, onSubmitReport} = props;
console.log('data', props.data);
const {
data,
dataList,
dataReport,
onOpenModalRequestReport,
showModalRequestReport,
onCloseModalRequestReport,
onSubmitRequestReport,
} = props;
const getColor = status => {
switch (status) {
case 'Chờ duyệt':
......@@ -38,6 +46,7 @@ const DetailListWorkMonitoringView = props => {
return R.colors.gray;
}
};
const shouldShowFAB = () => {
return data.status === 'Đang thực hiện';
};
......@@ -67,7 +76,7 @@ const DetailListWorkMonitoringView = props => {
title={'Cập nhật thông tin công việc'}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
onPress={() => handleReportPress()}
onPress={() => ({})}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
......@@ -219,7 +228,6 @@ const DetailListWorkMonitoringView = props => {
);
};
return (
<View style={styles.container}>
<Header title={'Chi tiết công việc giám sát'} />
......@@ -230,7 +238,7 @@ const DetailListWorkMonitoringView = props => {
{shouldShowFAB() && (
<FAB>
<SubButton
onPress={onHandleReportPress}
onPress={onOpenModalRequestReport}
label={'Yêu cầu báo cáo'}
images={R.images.icEdit}
backgroundColor={R.colors.orange}
......@@ -239,9 +247,9 @@ const DetailListWorkMonitoringView = props => {
)}
<ModalRequestReport
visible={showModal}
onClose={onCloseModal}
onSubmitReport={onSubmitReport}
visible={showModalRequestReport}
onClose={onCloseModalRequestReport}
onSubmitReport={onSubmitRequestReport}
workData={data}
/>
</View>
......
src/screens/list_work/style.js
......@@ -103,7 +103,6 @@ const styles = StyleSheet.create({
fontWeight: '400',
color: R.colors.black,
},
// New styles moved from inline styles
listItemContainer: {
marginHorizontal: 15,
marginBottom:10
......
src/screens/list_work/view.js
......@@ -86,8 +86,6 @@ const ListWorkView = props => {
onOpenModalReport(item);
} else if (button.action === 'approve') {
onApprovalAction(item, 'approve');
} else {
onReportAction(item, button.action);
}
}}
backgroundColor={button.backgroundColor}
......
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