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

src/screens/list_work/monitoring/index.js

@@ -4,8 +4,7 @@ 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,
@@ -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

@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 20,
     alignItems: 'center',
-    marginTop:3,
+    marginTop: 3,
     marginBottom: 50,
   },
   uploadIcon: {

src/screens/list_work/monitoring/view.js

@@ -19,8 +19,16 @@ 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) {
@@ -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}