COM-3851: manon's review

CompaniTech · Dec 11, 2024 · a4c546a · a4c546a
1 parent 28d561d
commit a4c546a
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 55 deletions.
diff --git a/src/components/AttendanceEndScreen/index.tsx b/src/components/AttendanceEndScreen/index.tsx
@@ -5,38 +5,34 @@ import styles from './styles';
 import NiPrimaryButton from '../form/PrimaryButton';
 import { PINK } from '../../styles/colors';
 
-interface AttendanceSheetSelectionFormProps {
+interface AttendanceEndScreenProps {
   traineeName: string,
   failUpload: boolean,
   goToNextScreen: () => void,
 }
 
-const AttendanceSheetSumary = ({ traineeName, failUpload, goToNextScreen }: AttendanceSheetSelectionFormProps) => (
+const AttendanceSheetSumary = ({ traineeName, failUpload, goToNextScreen }: AttendanceEndScreenProps) => (
   <SafeAreaView style={styles.safeArea} edges={['top']}>
-    <View style={styles.container}>
-      {failUpload
-        ? <View style={styles.errorContainer}>
-          <Text style={styles.title}>Echec de l&apos;envoi de l&apos;émargement de {traineeName}</Text>
-          <MaterialIcons style={styles.icon} size={200} name={'warning'} color={PINK[500]} />
-          <Text style={styles.text}>Veuillez réitérer votre émargement</Text>
+    {failUpload
+      ? <View style={styles.errorContainer}>
+        <Text style={styles.title}>Echec de l&apos;envoi de la demande à {traineeName}</Text>
+        <MaterialIcons style={styles.icon} size={200} name={'warning'} color={PINK[500]} />
+        <Text style={styles.text}>Veuillez réitérer votre demande</Text>
+      </View>
+      : <>
+        <View style={styles.upperContainer}>
+          <Text style={styles.title}>Une demande d&apos;émargement a été envoyée à {traineeName}</Text>
         </View>
-        : <>
-          <View style={styles.upperContainer}>
-            <Text style={styles.title}>Une demande d&apos;émargement a été envoyée à {traineeName}</Text>
-          </View>
-          <Text style={styles.text}>Elle est disponible sur la page de sa formation sur son application mobile</Text>
-          <Image source={require('../../../assets/images/aux_fierte.webp')} style={styles.image} />
-          <Text style={styles.text}>
-            N&apos;oubliez pas de reporter les émargements dans le tableau prévu à cette effet sur l&apos;application
+        <Text style={styles.text}>Elle est disponible sur la page de la formation sur son application mobile</Text>
+        <Image source={require('../../../assets/images/aux_fierte.webp')} style={styles.image} />
+        <Text style={styles.text}>
+            N&apos;oubliez pas de reporter les émargements dans le tableau prévu à cet effet sur l&apos;application
             web Compani
-          </Text>
-        </>
-      }
-      <View style={styles.lowerContainer}>
-        <View style={styles.button}>
-          <NiPrimaryButton caption={'Terminer'} onPress={goToNextScreen} />
-        </View>
-      </View>
+        </Text>
+      </>
+    }
+    <View style={styles.footer}>
+      <NiPrimaryButton caption={'Terminer'} onPress={goToNextScreen} />
     </View>
   </SafeAreaView>
 );

diff --git a/src/components/AttendanceEndScreen/styles.ts b/src/components/AttendanceEndScreen/styles.ts
@@ -5,11 +5,8 @@ import { GREY, PINK } from '../../styles/colors';
 
 const styles = StyleSheet.create({
   safeArea: {
-    flex: 1,
-    backgroundColor: GREY[100],
-  },
-  container: {
     flexGrow: 1,
+    backgroundColor: GREY[100],
     marginHorizontal: MARGIN.LG,
     justifyContent: 'space-between',
   },
@@ -24,14 +21,16 @@ const styles = StyleSheet.create({
     marginVertical: MARGIN.LG,
     textAlign: 'center',
   },
-  button: {
+  footer: {
     marginHorizontal: MARGIN.MD,
     marginBottom: MARGIN.MD,
+    justifyContent: 'flex-end',
   },
   image: {
     height: 160,
     resizeMode: 'contain',
     marginTop: MARGIN.XL,
+    alignSelf: 'center',
   },
   icon: {
     alignContent: 'center',
@@ -45,9 +44,6 @@ const styles = StyleSheet.create({
   upperContainer: {
     justifyContent: 'flex-start',
   },
-  lowerContainer: {
-    justifyContent: 'flex-end',
-  },
 });
 
 export default styles;
diff --git a/src/components/AttendanceSheetSummary/index.tsx b/src/components/AttendanceSheetSummary/index.tsx
@@ -13,9 +13,9 @@ import { DataOptionsType } from '../../store/attendanceSheets/slice';
 import Checkbox from '../form/Checkbox';
 import { ErrorStateType } from '../../reducers/error';
 
-interface AttendanceSheetSelectionFormProps {
+interface AttendanceSheetSummaryProps {
   goToNextScreen: () => void,
-  stepsName: any,
+  stepsName: string[],
   slotsOptions: DataOptionsType[][],
   signature: string,
   isLoading: boolean,
@@ -35,8 +35,9 @@ const AttendanceSheetSumary = ({
   confirmation,
   error,
   traineeName,
-}: AttendanceSheetSelectionFormProps) => {
+}: AttendanceSheetSummaryProps) => {
   const navigation = useNavigation();
+  const checkedList = slotsOptions.flat().map(option => option.value);
 
   const hardwareBackPress = useCallback(() => {
     navigation.goBack();
@@ -55,9 +56,8 @@ const AttendanceSheetSumary = ({
     </View>
     <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
       <Text style={styles.title}>Emargements pour {traineeName}</Text>
-      <MultipleCheckboxList optionsGroups={slotsOptions} disabled
-        groupTitles={stepsName}
-        setOptions={() => {}} checkedList={slotsOptions.flat().map(option => option.value as string)} />
+      <MultipleCheckboxList optionsGroups={slotsOptions} disabled groupTitles={stepsName} setOptions={() => {}}
+        checkedList={checkedList} />
       <Image source={{ uri: signature }} style={styles.image} />
     </ScrollView>
     <View style={styles.checkboxContainer}>

diff --git a/src/components/AttendanceSheetSummary/styles.ts b/src/components/AttendanceSheetSummary/styles.ts
@@ -28,14 +28,15 @@ const styles = StyleSheet.create({
     bottom: 2 * INPUT_HEIGHT,
     left: 0,
     right: 0,
+    backgroundColor: GREY[100],
   },
   button: {
     marginHorizontal: MARGIN.MD,
     marginBottom: MARGIN.MD,
   },
   image: {
-    height: '40%',
-    resizeMode: 'center',
+    height: 300,
+    resizeMode: 'contain',
   },
 });
 

diff --git a/src/components/form/Checkbox/index.tsx b/src/components/form/Checkbox/index.tsx
@@ -1,23 +1,35 @@
 import { Text, TouchableOpacity } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useState } from 'react';
 import { GREY, PINK } from '../../../styles/colors';
 import styles from './styles';
 
 interface RenderItemProps {
   itemLabel: string,
   isChecked: boolean,
-  disabled?: boolean,
   onPressCheckbox: () => void
+  disabled?: boolean,
 }
 
-const Checkbox = ({ itemLabel, isChecked, disabled = false, onPressCheckbox }: RenderItemProps) => {
+const Checkbox = ({ itemLabel, isChecked, onPressCheckbox, disabled = false }: RenderItemProps) => {
   const iconName = isChecked ? 'check-box' : 'check-box-outline-blank';
-  const iconColor = isChecked ? PINK[500] : GREY[600];
-  const textStyle = isChecked ? styles.text : { ...styles.text, color: GREY[600] };
+  const [iconColor, setIconColor] = useState<string>(GREY[600]);
+  const [textStyle, setTextStyle] = useState<object>({ ...styles.text, color: GREY[600] });
+
+  useEffect(() => {
+    if (isChecked) {
+      if (disabled) {
+        setIconColor(PINK[300]);
+        setTextStyle({ ...styles.text, color: GREY[500] });
+      } else {
+        setIconColor(PINK[500]);
+        setTextStyle(styles.text);
+      }
+    }
+  }, [disabled, isChecked]);
 
   return (
-    <TouchableOpacity style={styles.itemContainer} onPress={onPressCheckbox}
-      disabled={disabled}>
+    <TouchableOpacity style={styles.itemContainer} onPress={onPressCheckbox} disabled={disabled}>
       <MaterialIcons style={styles.icon} size={24} name={iconName} color={iconColor} />
       <Text style={textStyle}>{itemLabel}</Text>
     </TouchableOpacity>

diff --git a/src/screens/courses/profile/CreateAttendanceSheet/index.tsx b/src/screens/courses/profile/CreateAttendanceSheet/index.tsx
@@ -13,6 +13,7 @@ import {
   useGetMissingAttendanceSheets,
   useGetGroupedSlotsToBeSigned,
 } from '../../../../store/attendanceSheets/hooks';
+import { DataOptionsType } from '../../../../store/attendanceSheets/slice';
 import CompaniDate from '../../../../core/helpers/dates/companiDates';
 import { ascendingSort } from '../../../../core/helpers/dates/utils';
 import { formatPayload } from '../../../../core/helpers/pictures';
@@ -48,6 +49,7 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
   const [confirmation, setConfirmation] = useState<boolean>(false);
   const [traineeName, setTraineeName] = useState<string>('');
   const [failUpload, setFailUpload] = useState<boolean>(false);
+  const [selectedSlotsOptions, setSelectedSlotsOptions] = useState<DataOptionsType[][]>([]);
   const [errorData, dispatchErrorData] = useReducer(errorReducer, initialErrorState);
   const [errorSlots, dispatchErrorSlots] = useReducer(errorReducer, initialErrorState);
   const [errorSignature, dispatchErrorSignature] = useReducer(errorReducer, initialErrorState);
@@ -90,7 +92,7 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
     if (option) dispatchErrorData({ type: RESET_ERROR });
   }, [course, isSingle, missingAttendanceSheets]);
 
-  const setSlotOptions = useCallback((options: string[]) => {
+  const setSlotsOptions = useCallback((options: string[]) => {
     setSlotsToAdd(options);
     if (options.length) dispatchErrorSlots({ type: RESET_ERROR });
   }, []);
@@ -128,6 +130,9 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
       dispatchErrorSignature({ type: SET_ERROR, payload: 'Veuillez signer dans l\'encadré' });
     } else {
       dispatchErrorSignature({ type: RESET_ERROR });
+      setSelectedSlotsOptions(
+        slotsOptions.map(group => group.filter(opt => slotsToAdd.includes(opt.value))).filter(g => g.length)
+      );
       navigation.navigate(ATTENDANCE_SUMARY);
     }
   };
@@ -170,9 +175,8 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
   );
 
   const renderSlotSelection = () => (
-    <AttendanceSheetSelectionForm title={slotSelectionTitle}
-      error={errorSlots} goToNextScreen={goToUploadMethod}>
-      <MultipleCheckboxList optionsGroups={slotsOptions} groupTitles={stepsName} setOptions={setSlotOptions}
+    <AttendanceSheetSelectionForm title={slotSelectionTitle} error={errorSlots} goToNextScreen={goToUploadMethod}>
+      <MultipleCheckboxList optionsGroups={slotsOptions} groupTitles={stepsName} setOptions={setSlotsOptions}
         checkedList={slotsToAdd}/>
     </AttendanceSheetSelectionForm>
   );
@@ -190,8 +194,7 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
   const renderSumary = () => (
     <AttendanceSheetSumary signature={signature} goToNextScreen={saveAndGoToEndScreen} error={errorConfirmation}
       stepsName={stepsName} isLoading={isLoading} setConfirmation={setConfirmationCheckbox} confirmation={confirmation}
-      traineeName={traineeName} slotsOptions={slotsOptions
-        .map(group => group.filter(opt => slotsToAdd.includes(opt.value))).filter(g => g.length)} />
+      traineeName={traineeName} slotsOptions={selectedSlotsOptions} />
   );
   const renderEndScreen = () => (
     <AttendanceEndScreen goToNextScreen={navigation.goBack} traineeName={traineeName} failUpload={failUpload} />
@@ -204,9 +207,13 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
       <Stack.Screen key={0} name={DATA_SELECTION}>{renderDataSelection}</Stack.Screen>
       {isSingle && <Stack.Screen key={1} name={SLOTS_SELECTION}>{renderSlotSelection}</Stack.Screen>}
       <Stack.Screen key={2} name={UPLOAD_METHOD}>{renderUploadMethod}</Stack.Screen>
-      <Stack.Screen key={3} name={ATTENDANCE_SIGNATURE}>{renderSignatureContainer}</Stack.Screen>
-      <Stack.Screen key={4} name={ATTENDANCE_SUMARY}>{renderSumary}</Stack.Screen>
-      <Stack.Screen key={5} name={END_SCREEN}>{renderEndScreen}</Stack.Screen>
+      {isSingle && <>
+        <Stack.Screen options={{ gestureEnabled: false }} key={3} name={ATTENDANCE_SIGNATURE}>
+          {renderSignatureContainer}
+        </Stack.Screen>
+        <Stack.Screen key={4} name={ATTENDANCE_SUMARY}>{renderSumary}</Stack.Screen>
+        <Stack.Screen options={{ gestureEnabled: false }} key={5} name={END_SCREEN}>{renderEndScreen}</Stack.Screen>
+      </>}
     </Stack.Navigator>
   );
 };