TODO: Đã làm xong modal của list work với role là người giám sát

src/screens/home/view.js

@@ -16,6 +16,7 @@ import ItemGrid from './item';
 import styles from './style';
 import {useNavigation} from '@react-navigation/native';
 import * as SCREENNAME from '../../routers/ScreenNames';
+import { LogBox } from 'react-native';
 
 const HomeView = ({
   menuActivity,
@@ -27,6 +28,11 @@ const HomeView = ({
   onSearchChange,
 }) => {
   const navigate = useNavigation();
+  LogBox.ignoreLogs([
+    'VirtualizedLists should never be nested', 
+    'Bottom Tab Navigator',
+    'Stack Navigator',
+  ]);
 
   const renderMenuItem = ({item}) => {
     return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;

src/screens/list_work/modal_add_monitoring/style.js

@@ -33,6 +33,10 @@ const styles = StyleSheet.create({
     color: R.colors.black,
     marginBottom: 5,
   },
+  flatListSelect: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
   required: {
     color: R.colors.red,
   },
@@ -48,16 +52,17 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: 5,
   },
-  chip: {
-    backgroundColor: R.colors.grayLight,
-    borderRadius: 20,
-    paddingHorizontal: 15,
-    paddingVertical: 8,
-    margin: 5,
-    borderWidth: 1,
-    borderColor: R.colors.gray,
-    flex: 0.48,
+ chip: {
+    flexDirection: 'row',
     alignItems: 'center',
+    // position: 'relative',
+    paddingLeft: 10,
+    paddingRight: 10,
+    height: 25,
+    borderRadius: 10,
+    marginBottom: 10,
+    marginRight: 5,
+    backgroundColor: R.colors.blue2,
   },
   chipSelected: {
     backgroundColor: R.colors.blue1,
@@ -77,9 +82,9 @@ const styles = StyleSheet.create({
   },
   textChip: {
     fontSize: R.fontsize.fontSizeContent,
-    color: R.colors.black,
-    textAlign: 'center',
-    flex: 1,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.blueTextChip,
   },
   textChipSelected: {
     color: R.colors.blue,

src/screens/list_work/modal_add_monitoring/view.js

@@ -28,25 +28,10 @@ const AddMonitoringModalView = props => {
     handleRemoveItem,
   } = props;
 
-  const renderItem = ({item}) => {
-    const isSelected = selectedItems.some(selected => selected.id === item.id);
+  const renderItem_1 = ({item, onPress}) => {
     return (
-      <TouchableOpacity
-        style={[styles.chip, isSelected && styles.chipSelected]}
-        onPress={() => handleSelectItem(item)}>
-        <Text style={[styles.textChip, isSelected && styles.textChipSelected]}>
-          {item.name}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
-
-  const renderSelectedItem = ({item}) => {
-    return (
-      <View style={styles.selectedChip}>
-        <TouchableOpacity
-          style={styles.containerIcon}
-          onPress={() => handleRemoveItem(item.id)}>
+      <View style={styles.chip}>
+        <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
           <Image
             resizeMode="cover"
             source={R.images.icCancel}
@@ -54,7 +39,7 @@ const AddMonitoringModalView = props => {
             tintColor={R.colors.blue}
           />
         </TouchableOpacity>
-        <Text style={styles.textChip}>{item.name}</Text>
+        <Text style={styles.textChip}> {`${item.id}, ${item.name}`}</Text>
       </View>
     );
   };
@@ -68,53 +53,42 @@ const AddMonitoringModalView = props => {
       <View style={styles.overlay}>
         <View style={styles.modalContainer}>
           <ScrollView showsVerticalScrollIndicator={false}>
-            <Text style={styles.title}>Tạo công việc giám sát</Text>
+            <Text style={styles.title}>Thêm công việc</Text>
 
             <TextField
-              title="Tiêu đề công việc"
-              placeholder="Nhập tiêu đề công việc"
+              title="Tiêu đề"
               required={true}
               value={formData.title}
               onChangeText={value => updateFormData('title', value)}
-              containerMarginBottom={15}
+              containerMarginBottom={10}
             />
 
-            <View style={styles.containerDropdown}>
-              <Text style={styles.label}>
-                Loại công việc <Text style={styles.required}>*</Text>
-              </Text>
-              <Dropdown
-                height={35}
-                placeholder="Chọn loại công việc"
-                onSelect={item => updateFormData('category', item)}
-              />
-            </View>
+            <TextMulti
+              title="Nội dung công việc"
+              required={true}
+              value={formData.content}
+              onChangeText={value => updateFormData('content', value)}
+              containerMarginBottom={10}
+            />
 
             <View style={styles.containerDropdown}>
-              <Text style={styles.label}>
-                Người chịu trách nhiệm <Text style={styles.required}>*</Text>
-              </Text>
+              <Text style={styles.label}>Thẻ</Text>
               <Dropdown
                 height={35}
-                placeholder="Chọn người chịu trách nhiệm"
                 onSelect={item => updateFormData('responsible', item)}
               />
             </View>
 
             <View style={styles.containerDropdown}>
-              <Text style={styles.label}>
-                Thời hạn hoàn thành <Text style={styles.required}>*</Text>
-              </Text>
+              <Text style={styles.label}>Văn bản liên quan</Text>
               <Dropdown
                 height={35}
-                placeholder="Chọn thời hạn"
                 onSelect={item => updateFormData('deadline', item)}
               />
             </View>
 
-            <TextMulti
-              title="Nội dung công việc"
-              placeholder="Nhập nội dung chi tiết công việc cần giám sát"
+            <TextField
+              title="Ngày đến hạn"
               required={true}
               value={formData.content}
               onChangeText={value => updateFormData('content', value)}
@@ -123,39 +97,53 @@ const AddMonitoringModalView = props => {
 
             <View style={styles.containerDropdown}>
               <Text style={styles.label}>
-                Người thực hiện <Text style={styles.required}>*</Text>
+                Người theo dõi <Text style={styles.required}>*</Text>
               </Text>
               <Dropdown
                 height={35}
-                placeholder="Chọn người thực hiện"
                 onSelect={item => updateFormData('implementer', item)}
               />
             </View>
 
-            <Text style={styles.label}>Danh sách người thực hiện:</Text>
+            <Text style={styles.label}>Danh sách người theo dõi :</Text>
             <FlatList
               data={dataList}
-              renderItem={renderItem}
-              keyExtractor={item => item.id.toString()}
+              renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+              keyExtractor={(item, index) =>
+                item.id?.toString() || index.toString()
+              }
               numColumns={2}
-              style={styles.flatList}
-              showsVerticalScrollIndicator={false}
-              columnWrapperStyle={styles.flatListRow}
+              style={{maxHeight: 150, marginBottom: 10}}
+              showsVerticalScrollIndicator={true}
+              columnWrapperStyle={styles.flatListSelect}
               nestedScrollEnabled={true}
-              scrollEnabled={false}
+              scrollEnabled={true}
             />
 
-            <Text style={styles.label}>Đã chọn:</Text>
+            <View style={styles.containerDropdown}>
+              <Text style={styles.label}>
+                Người thực hiện công việc <Text style={styles.required}>*</Text>
+              </Text>
+              <Dropdown
+                height={35}
+                onSelect={item => updateFormData('implementer', item)}
+              />
+            </View>
+            <Text style={styles.label}>
+              Danh sách người thực hiện công việc :
+            </Text>
             <FlatList
-              data={selectedItems}
-              renderItem={renderSelectedItem}
-              keyExtractor={item => item.id.toString()}
+              data={dataList}
+              renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+              keyExtractor={(item, index) =>
+                item.id?.toString() || index.toString()
+              }
               numColumns={2}
-              style={styles.selectedFlatList}
-              showsVerticalScrollIndicator={false}
-              columnWrapperStyle={styles.flatListRow}
+              style={{maxHeight: 150, marginBottom: 10}}
+              showsVerticalScrollIndicator={true}
+              columnWrapperStyle={styles.flatListSelect}
               nestedScrollEnabled={true}
-              scrollEnabled={false}
+              scrollEnabled={true}
             />
 
             <Text style={styles.label}>Tài liệu đính kèm</Text>