Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Com 3851 #692

Merged
merged 14 commits into from
Dec 13, 2024
Prev Previous commit
Next Next commit
COM-3851: end screen
ulysseferreira committed Dec 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit b5eeb8c58ad39f4e87592068da224f4221d2eb61
38 changes: 28 additions & 10 deletions src/components/AttendanceEndScreen/index.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,41 @@
import { View, Text } from 'react-native';
import { View, Text, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { MaterialIcons } from '@expo/vector-icons';
import styles from './styles';
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
import NiPrimaryButton from '../form/PrimaryButton';
import { PINK } from '../../styles/colors';

interface AttendanceSheetSelectionFormProps {
traineeName: string,
failUpload: boolean,
goToNextScreen: () => void,
}

const AttendanceSheetSumary = ({ goToNextScreen }: AttendanceSheetSelectionFormProps) => (
const AttendanceSheetSumary = ({ traineeName, failUpload, goToNextScreen }: AttendanceSheetSelectionFormProps) => (
<SafeAreaView style={styles.safeArea} edges={['top']}>
<View style={styles.container}>
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
<Text style={styles.title}>Une demande d&apos;émargement a été envoyée</Text>
<Text>Elle est disponible sur la page de sa formation sur son application mobile</Text>
<Text>
N&apos;oubliez pas de reporter les émargements dans le tableau prévu à cette effet sur l&apos;application web
Compani
</Text>
<View style={styles.button}>
<NiPrimaryButton caption={'Terminer'} onPress={goToNextScreen} />
{failUpload
? <View style={styles.errorContainer}>
<Text style={styles.title}>Echec de l&apos;envoi de l&apos;émargement de {traineeName}</Text>
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
<MaterialIcons style={styles.icon} size={200} name={'warning'} color={PINK[500]} />
<Text style={styles.text}>Veuillez réitérer votre émargement</Text>
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
</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>
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
<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
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
web Compani
</Text>
</>
}
<View style={styles.lowerContainer}>
<View style={styles.button}>
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
<NiPrimaryButton caption={'Terminer'} onPress={goToNextScreen} />
</View>
</View>
</View>
</SafeAreaView>
32 changes: 30 additions & 2 deletions src/components/AttendanceEndScreen/styles.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { StyleSheet } from 'react-native';
import { MARGIN } from '../../styles/metrics';
import { FIRA_SANS_BOLD } from '../../styles/fonts';
import { GREY } from '../../styles/colors';
import { FIRA_SANS_BLACK, FIRA_SANS_BOLD } from '../../styles/fonts';
import { GREY, PINK } from '../../styles/colors';

const styles = StyleSheet.create({
safeArea: {
@@ -11,15 +11,43 @@ const styles = StyleSheet.create({
container: {
flexGrow: 1,
marginHorizontal: MARGIN.LG,
justifyContent: 'space-between',
},
title: {
...FIRA_SANS_BOLD.LG,
marginVertical: MARGIN.LG,
textAlign: 'center',
},
text: {
...FIRA_SANS_BLACK.MD,
color: PINK[600],
marginVertical: MARGIN.LG,
textAlign: 'center',
},
button: {
marginHorizontal: MARGIN.MD,
marginBottom: MARGIN.MD,
},
image: {
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
height: 160,
resizeMode: 'contain',
marginTop: MARGIN.XL,
},
icon: {
alignContent: 'center',
marginHorizontal: MARGIN.MD,
},
errorContainer: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
},
upperContainer: {
justifyContent: 'flex-start',
},
lowerContainer: {
justifyContent: 'flex-end',
},
});

export default styles;
4 changes: 3 additions & 1 deletion src/components/AttendanceSheetSummary/index.tsx
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@ interface AttendanceSheetSelectionFormProps {
setConfirmation: () => void,
confirmation: boolean,
error: ErrorStateType,
traineeName: string,
}

const AttendanceSheetSumary = ({
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
@@ -34,6 +35,7 @@ const AttendanceSheetSumary = ({
setConfirmation,
confirmation,
error,
traineeName,
}: AttendanceSheetSelectionFormProps) => {
const navigation = useNavigation();

@@ -53,7 +55,7 @@ const AttendanceSheetSumary = ({
<FeatherButton name='arrow-left' onPress={() => navigation.goBack()} size={ICON.MD} color={GREY[600]} />
</View>
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
<Text style={styles.title}>Emargements</Text>
<Text style={styles.title}>Emargements pour {traineeName}</Text>
<MultipleCheckboxList optionsGroups={slotsOptions} disabled
groupTitles={stepsName}
setOptions={() => {}} checkedList={slotsOptions.flat().map(option => option.value as string)} />
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
28 changes: 21 additions & 7 deletions src/screens/courses/profile/CreateAttendanceSheet/index.tsx
Original file line number Diff line number Diff line change
@@ -39,12 +39,15 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
const course = useGetCourse();
const missingAttendanceSheets = useGetMissingAttendanceSheets();
const groupedSlotsToBeSigned = useGetGroupedSlotsToBeSigned();
const [title, setTitle] = useState<string>('');
const [dataSelectionTitle, setDataSelectionTitle] = useState<string>('');
const [slotSelectionTitle, setSlotSelectionTitle] = useState<string>('');
const [attendanceSheetToAdd, setAttendanceSheetToAdd] = useState<string>('');
const [slotsToAdd, setSlotsToAdd] = useState<string[]>([]);
const [signature, setSignature] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(false);
const [confirmation, setConfirmation] = useState<boolean>(false);
const [traineeName, setTraineeName] = useState<string>('');
const [failUpload, setFailUpload] = useState<boolean>(false);
const [errorData, dispatchErrorData] = useReducer(errorReducer, initialErrorState);
const [errorSlots, dispatchErrorSlots] = useReducer(errorReducer, initialErrorState);
const [errorSignature, dispatchErrorSignature] = useReducer(errorReducer, initialErrorState);
@@ -65,7 +68,7 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
[groupedSlotsToBeSigned]);

useEffect(() => {
setTitle(
setDataSelectionTitle(
course?.type === INTER_B2B
? 'Pour quel stagiaire souhaitez-vous charger une feuille d\'émargement ?'
: 'Pour quelle date souhaitez-vous charger une feuille d\'émargement ?'
@@ -74,8 +77,18 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps

const setDataOption = useCallback((option: string) => {
setAttendanceSheetToAdd(option);
if (course?.type === INTER_B2B) {
const name = missingAttendanceSheets.find(as => as.value === option)?.label || '';
setTraineeName(name);
if (isSingle) {
const title =
'Pour quels créneaux souhaitez-vous charger une feuille d\'émargement ou envoyer une demande de signature'
+ ` à ${name} ?`;
setSlotSelectionTitle(title);
}
}
if (option) dispatchErrorData({ type: RESET_ERROR });
}, []);
}, [course, isSingle, missingAttendanceSheets]);

const setSlotOptions = useCallback((options: string[]) => {
setSlotsToAdd(options);
@@ -133,6 +146,7 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
await AttendanceSheets.upload(data);
setIsLoading(false);
} catch (e) {
setFailUpload(true);
console.error(e);
}
};
@@ -148,15 +162,15 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
};

const renderDataSelection = () => (
<AttendanceSheetSelectionForm title={title} error={errorData}
<AttendanceSheetSelectionForm title={dataSelectionTitle} error={errorData}
goToNextScreen={isSingle ? goToSlotSelection : goToUploadMethod}>
<RadioButtonList options={missingAttendanceSheets} setOption={setDataOption}
checkedRadioButton={attendanceSheetToAdd} />
</AttendanceSheetSelectionForm>
);

const renderSlotSelection = () => (
<AttendanceSheetSelectionForm title={'Pour quels créneaux souhaitez-vous charger une feuille d\'émargement ?'}
<AttendanceSheetSelectionForm title={slotSelectionTitle}
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
error={errorSlots} goToNextScreen={goToUploadMethod}>
<MultipleCheckboxList optionsGroups={slotsOptions} groupTitles={stepsName} setOptions={setSlotOptions}
checkedList={slotsToAdd}/>
@@ -176,11 +190,11 @@ const CreateAttendanceSheet = ({ route, navigation }: CreateAttendanceSheetProps
const renderSumary = () => (
<AttendanceSheetSumary signature={signature} goToNextScreen={saveAndGoToEndScreen} error={errorConfirmation}
stepsName={stepsName} isLoading={isLoading} setConfirmation={setConfirmationCheckbox} confirmation={confirmation}
slotsOptions={slotsOptions
traineeName={traineeName} slotsOptions={slotsOptions
manonpalin marked this conversation as resolved.
Show resolved Hide resolved
.map(group => group.filter(opt => slotsToAdd.includes(opt.value))).filter(g => g.length)} />
);
const renderEndScreen = () => (
<AttendanceEndScreen goToNextScreen={navigation.goBack} />
<AttendanceEndScreen goToNextScreen={navigation.goBack} traineeName={traineeName} failUpload={failUpload} />
);

const Stack = createStackNavigator<RootCreateAttendanceSheetParamList>();