TODO: Bổ sung chức năng lưu và xử lý dữ liệu cho màn hình đăng ký bù lịch dạy;…

TODO: Bổ sung chức năng lưu và xử lý dữ liệu cho màn hình đăng ký bù lịch dạy; cải thiện giao diện và hiển thị thông tin phản hồi.

src/screens/compensate/register/index.js

@@ -3,7 +3,34 @@ import {Text, View, StyleSheet} from 'react-native';
 import CompensateRegisterView from './view';
 
 const CompensateRegister = props => {
+    const initFormData ={
+   numberOfPeriods: '',
+    makeUpDay: '',
+    note: '',
+  }
   const [isShow, setShowSchedule] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [formData, setFormData] = useState(initFormData);
+
+  const handleSave = async ()=>{
+    //1. Validate ở đây
+    //2. 
+    try {
+      //Gọi api ở đây
+      console.log('Lưu thành công:',formData);
+      setFormData({...initFormData});
+    } catch (error) {
+      console.log('Xảy ra lỗi',error);
+    }finally{
+      setIsSaving(false);
+    }
+  }
+
+  const onChange = key => value => {
+  setFormData(prev => ({ ...prev, [key]: value }));
+};
+
+
 
   const [scheduleData, setScheduleData] = useState([
     {
@@ -676,12 +703,21 @@ const CompensateRegister = props => {
     });
   };
 
+  const handleToggle = () => {
+    setShowSchedule(prev => !prev);
+  };
+
   return (
     <CompensateRegisterView
       isShow={isShow}
+      isSaving={isSaving}
+      formData={formData}
+      handleToggle={handleToggle}
       setShowSchedule={setShowSchedule}
       scheduleData={scheduleData}
       onCheckboxChange={handleCheckboxChange}
+      onSave={handleSave}
+      onChange={onChange}
     />
   );
 };

src/screens/compensate/register/view.js

 import React from 'react';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  ScrollView,
-} from 'react-native';
+import {Text, View, ScrollView} from 'react-native';
 import styles from './style';
 import Header from '../../../components/Header/Header';
 import TextField from '../../../components/Input/TextField';
@@ -15,7 +9,17 @@ import TextMulti from '../../../components/Input/TextMulti';
 import Button from '../../../components/Button';
 import CheckBox from '../../../components/CheckBox';
 const CompensateRegisterView = props => {
-  const {isShow, setShowSchedule, scheduleData, onCheckboxChange} = props;
+  const {
+    isShow,
+    scheduleData,
+    onCheckboxChange,
+    handleToggle,
+    onSave,
+    onChange,
+    formData,
+  } = props;
+
+  console.log(props?.formData);
 
   const getCheckColor = item => {
     if (item?.breakTime === item?.totalSession && item?.percent === '100%') {
@@ -24,9 +28,6 @@ const CompensateRegisterView = props => {
     return R.colors.red;
   };
 
-  const handleToggleSchedule = () => {
-    setShowSchedule(prevState => !prevState);
-  };
   //Header Lịch học
   const renderHeaderSchedule = () => {
     return (
@@ -46,77 +47,9 @@ const CompensateRegisterView = props => {
     );
   };
 
-  //Render một dòng của bảng lịch
-  const renderRow = (dayData, index) => {
-    return (
-      <View key={index} style={styles.dataRow}>
-        <View style={styles.dateBody}>
-          <Text
-            style={[
-              styles.dateText,
-              {textAlign: 'center', paddingHorizontal: 2},
-            ]}>
-            {dayData.date}
-          </Text>
-        </View>
-
-        {dayData.periods.map((period, periodIndex) => (
-          <View key={periodIndex} style={styles.periodBody}>
-            <View
-              style={[
-                styles.periodCell,
-                period.available && styles.availableCell,
-              ]}>
-              <CheckBox
-                checked={period.available}
-                value={period.available}
-                onValueChange={value =>
-                  onCheckboxChange(index, periodIndex, value)
-                }
-                size={20}
-                labelStyle={styles.label}
-                checkedColor={R.colors.main}
-                tickColor={R.colors.white}
-              />
-              <View style={{flexDirection: 'row'}}>
-                <Text
-                  style={[
-                    styles.percentText,
-                    period.available && styles.availableText,
-                    {color: getCheckColor(period)},
-                  ]}>
-                  {period.percent}
-                </Text>
-                <Text
-                  style={[
-                    styles.codeText,
-                    {color: getCheckColor(period), marginLeft: 3},
-                    period.available && styles.availableText,
-                  ]}>
-                  ({period.breakTime}/{period.totalSession})
-                </Text>
-              </View>
-            </View>
-          </View>
-        ))}
-      </View>
-    );
-  };
-
-  const renderSchedule = item => {
-    if (!isShow) return null;
+  const renderForm = () => {
     return (
-      <View style={styles.tableContainer}>
-        {renderHeaderSchedule()}
-        {scheduleData.map((dayData, index) => renderRow(dayData, index))}
-      </View>
-    );
-  };
-  return (
-    <View style={styles.container}>
-      <Header title={'Đăng kí báo bù'} isBack />
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.body}>
+      <View>
         <View style={styles.containerInput}>
           <TextField
             title={'Học kì'}
@@ -124,6 +57,7 @@ const CompensateRegisterView = props => {
             fontSize={R.sizes.sm}
             backgroundColor={R.colors.gray}
             required
+            editable={false}
             fontSizeTitle={R.sizes.sm}
             containerBackgroundColor={R.colors.white}
             width={'48%'}
@@ -133,6 +67,7 @@ const CompensateRegisterView = props => {
             title={'Năm học'}
             color={R.colors.black}
             fontSize={R.sizes.sm}
+            editable={false}
             backgroundColor={R.colors.gray}
             required
             fontSizeTitle={R.sizes.sm}
@@ -144,6 +79,7 @@ const CompensateRegisterView = props => {
           <TextField
             title={'Mã CBGV'}
             color={R.colors.black}
+            editable={false}
             fontSize={R.sizes.sm}
             required
             backgroundColor={R.colors.gray}
@@ -154,9 +90,7 @@ const CompensateRegisterView = props => {
         </View>
         <View style={styles.containerDropDown}>
           <View style={{flexDirection: 'row'}}>
-              <Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
-                Mã lớp{' '}
-              </Text>
+            <Text style={[styles.txtSubtitle, {marginBottom: 5}]}>Mã lớp </Text>
             <Text style={{color: R.colors.red}}>*</Text>
           </View>
           <Dropdown title={'Giảng viên thay thế'} />
@@ -173,6 +107,8 @@ const CompensateRegisterView = props => {
         <View style={styles.containerInput}>
           <TextField
             title={'Số tiết đã nghỉ'}
+            value={formData.numberOfPeriods}
+            onChangeText={onChange('numberOfPeriods')}
             color={R.colors.black}
             fontSize={R.sizes.sm}
             backgroundColor={R.colors.white}
@@ -184,6 +120,8 @@ const CompensateRegisterView = props => {
           <TextField
             title={'Ngày học bù'}
             color={R.colors.black}
+            value={formData.makeUpDay}
+            onChangeText={onChange('makeUpDay')}
             fontSize={R.sizes.sm}
             backgroundColor={R.colors.white}
             required
@@ -195,6 +133,8 @@ const CompensateRegisterView = props => {
         <TextMulti
           title={'Ghi chú'}
           color={R.colors.black}
+          value={formData.note}
+          onChangeText={onChange('note')}
           fontSize={R.sizes.sm}
           titleFontSize={R.sizes.sm}
           containerMarginBottom={15}
@@ -204,7 +144,7 @@ const CompensateRegisterView = props => {
           <Button
             title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
             textColor={R.colors.white}
-              onPress={handleToggleSchedule}
+            onPress={handleToggle}
             backgroundColor={R.colors.blue}
             fontSize={R.sizes.sm}
             fontFamily={R.fonts.fontMedium}
@@ -212,24 +152,110 @@ const CompensateRegisterView = props => {
             containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
           />
         </View>
+      </View>
+    );
+  };
 
-          <ScrollView showsHorizontalScrollIndicator={false} horizontal>
-            {renderSchedule()}
-          </ScrollView>
+  const renderRow = (dayData, index) => {
+    return (
+      <View key={index} style={styles.dataRow}>
+        <View style={styles.dateBody}>
+          <Text
+            style={[
+              styles.dateText,
+              {textAlign: 'center', paddingHorizontal: 2},
+            ]}>
+            {dayData.date}
+          </Text>
+        </View>
+
+        {dayData.periods.map((period, periodIndex) => (
+          <View key={periodIndex} style={styles.periodBody}>
+            <View
+              style={[
+                styles.periodCell,
+                period.available && styles.availableCell,
+              ]}>
+              <CheckBox
+                checked={period.available}
+                value={period.available}
+                onValueChange={value =>
+                  onCheckboxChange(index, periodIndex, value)
+                }
+                size={20}
+                labelStyle={styles.label}
+                checkedColor={R.colors.main}
+                tickColor={R.colors.white}
+              />
+              <View style={{flexDirection: 'row'}}>
+                <Text
+                  style={[
+                    styles.percentText,
+                    period.available && styles.availableText,
+                    {color: getCheckColor(period)},
+                  ]}>
+                  {period.percent}
+                </Text>
+                <Text
+                  style={[
+                    styles.codeText,
+                    {color: getCheckColor(period), marginLeft: 3},
+                    period.available && styles.availableText,
+                  ]}>
+                  ({period.breakTime}/{period.totalSession})
+                </Text>
+              </View>
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const renderSchedule = item => {
+    if (!isShow) return null;
+    return (
+      <View style={styles.tableContainer}>
+        {renderHeaderSchedule()}
+        {scheduleData.map((dayData, index) => renderRow(dayData, index))}
+      </View>
+    );
+  };
+
+  const renderButton = () => {
+    return (
       <View style={styles.btnRegister2}>
         <Button
           title={'Đăng kí dạy bù'}
           backgroundColor={R.colors.blue}
           textColor={R.colors.white}
-              onPress={() => {}}
+          onPress={() => onSave(formData)}
           fontSize={R.sizes.sm}
           fontFamily={R.fonts.fontMedium}
           height={35}
           containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
         />
       </View>
+    );
+  };
+
+  const renderBody = () => {
+    return (
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.body}>
+          {renderForm()}
+          <ScrollView showsHorizontalScrollIndicator={false} horizontal>
+            {renderSchedule()}
+          </ScrollView>
+          {renderButton()}
         </View>
       </ScrollView>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Đăng kí báo bù'} isBack />
+      {renderBody()}
     </View>
   );
 };

src/screens/feedback/detail/view.js

@@ -2,8 +2,6 @@ import React from 'react';
 import {
   Text,
   View,
-  TouchableOpacity,
-  StyleSheet,
   FlatList,
   ScrollView,
 } from 'react-native';
@@ -12,7 +10,6 @@ import Header from '../../../components/Header/Header';
 import R from '../../../assets/R';
 const DetailFeedBackView = props => {
   const {teacher, dataListQuestion} = props;
-  console.log(props);
 
   const renderTableRow = (item, index) => {
     return (
@@ -60,10 +57,9 @@ const DetailFeedBackView = props => {
     );
   };
 
+  const renderBodyHeader = () => {
     return (
-    <View style={styles.container}>
-      <Header title={'Đánh giá giảng dạy'} isBack />
-      <View style={styles.body}>
+      <View>
         <Text style={styles.textSubTitle}>
           Feedback của sinh viên lớp {teacher.class} môn {teacher.subject} đối
           với giảng viên {teacher.teacher}.
@@ -78,7 +74,12 @@ const DetailFeedBackView = props => {
             vertical
           />
         </View>
+      </View>
+    );
+  };
 
+  const renderTable = () => {
+    return (
       <ScrollView
         showsVerticalScrollIndicator={false}
         style={styles.tableContainer}>
@@ -110,6 +111,15 @@ const DetailFeedBackView = props => {
           renderTableRow(item, index),
         )}
       </ScrollView>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Đánh giá giảng dạy'} isBack />
+      <View style={styles.body}>
+        {renderBodyHeader()}
+        {renderTable()}
       </View>
     </View>
   );

src/screens/feedback/index.js

 import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
 import FeedBackView from './view';
 
 const FeedBack = props => {

src/screens/feedback/style.js

@@ -61,6 +61,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   btnRight: {},
+  containerEmpty: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textEmpty: {
+    color: R.colors.red,
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
+  }
 });
 
 export default styles;

src/screens/feedback/view.js

@@ -15,6 +15,15 @@ import * as ScreenName from '../../routers/ScreenNames';
 const FeedBackView = props => {
   const {dataList, setDataList} = props;
   const navigation = useNavigation();
+  const renderCard = () => {
+    return (
+      <View style={styles.card}>
+        <TouchableOpacity style={styles.btnCard}>
+          <Text style={[styles.text, {fontFamily: R.fonts.fontMedium, fontWeight: '600'}]}>Học kỳ 2, Năm 2025</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
   const renderItem = ({item}) => {
     return (
       <TouchableOpacity
@@ -58,16 +67,9 @@ const FeedBackView = props => {
       </TouchableOpacity>
     );
   };
-  return (
-    <View style={styles.container}>
-      <Header title={'Đánh giá giảng dạy'} isBack />
-      <View style={styles.body}>
-        <View style={styles.card}>
-          <TouchableOpacity style={styles.btnCard}>
-            <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
-          </TouchableOpacity>
-        </View>
 
+  const renderList = () => {
+    return (
       <FlatList
         data={dataList || []}
         renderItem={renderItem}
@@ -75,7 +77,33 @@ const FeedBackView = props => {
         vertical
         keyExtractor={(item, index) => `${index}`}
       />
+    );
+  };
+
+  const renderItemEmpty = () => {
+    return (
+      <View style={styles.containerEmpty}>
+        <Image source={R.images.icNoData} maxWidth={50} maxHeight={50} />
+        <Text style={styles.textEmpty}>Không có dữ liệu</Text>
+      </View>
+    );
+  };
+
+  const renderBody = () => {
+    return (
+      <View style={styles.body}>
+        {renderCard()}
+        <View style={{flex: 1, justifyContent: 'center'}}>
+          {dataList.length === 0 ? renderItemEmpty() : renderList()}
+        </View>
       </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Đánh giá giảng dạy'} isBack />
+      {renderBody()}
     </View>
   );
 };