Skip to content

Commit

Permalink
Merge pull request #813 from parlemonde/adding-label-page1-id-fam
Browse files Browse the repository at this point in the history 
Adding label page1 id fam
  • Loading branch information
@MarineChillaud
MarineChillaud authored Nov 21, 2023
2 parents 3bddd5f + eb01998 commit f666042
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 58 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,4 @@ docker-compose.bdd.yml

*.http

docker-compose-windows.yml
40 changes: 39 additions & 1 deletion src/contexts/classroomContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import React from 'react';

import { Card, CircularProgress } from '@mui/material';

import { UserContext } from './userContext';
import { VillageContext } from './villageContext';
import { primaryColor } from 'src/styles/variables.const';
import { serializeToQueryUrl } from 'src/utils';
import { axiosRequest } from 'src/utils/axiosRequest';
import type { Classroom, ClassroomAsFamilly } from 'types/classroom.type';
Expand Down Expand Up @@ -45,6 +48,8 @@ export const ClassroomContextProvider = ({ children }: ClassroomContextProviderP
const { user } = React.useContext(UserContext);
const { village } = React.useContext(VillageContext);
const [students, setStudents] = React.useState<Student[]>([]);
const [modalStep, setModalStep] = React.useState(0);
const modalStepTimeout = React.useRef<number | undefined>(undefined);
const [classroom, setClassroom] = React.useState<Classroom | null>(null);
const [parentClassroom, setParentClassroom] = React.useState<ClassroomAsFamilly | null>(null);

Expand Down Expand Up @@ -145,6 +150,16 @@ export const ClassroomContextProvider = ({ children }: ClassroomContextProviderP
data: { ...data },
})
.then((response) => {
if (response.status === 200) {
setModalStep(2);
modalStepTimeout.current = window.setTimeout(() => {
setModalStep(0);
}, 2000);
if (response.status !== 200) {
clearTimeout(modalStepTimeout.current);
setModalStep(1);
}
}
return response.data.classroom;
})
.catch((err) => {
Expand Down Expand Up @@ -174,6 +189,16 @@ export const ClassroomContextProvider = ({ children }: ClassroomContextProviderP
})
.then((response) => {
setStudents([...students, response.data]);
if (response.status === 200) {
setModalStep(3);
modalStepTimeout.current = window.setTimeout(() => {
setModalStep(0);
}, 2000);
if (response.status !== 200) {
clearTimeout(modalStepTimeout.current);
setModalStep(1);
}
}
})
.catch((err) => {
return err.message;
Expand Down Expand Up @@ -314,7 +339,20 @@ export const ClassroomContextProvider = ({ children }: ClassroomContextProviderP
setStudents,
],
);
return <ClassroomContext.Provider value={value}>{children}</ClassroomContext.Provider>;
return (
<ClassroomContext.Provider value={value}>
{children}
{modalStep > 0 && (
<div style={{ position: 'fixed', bottom: '1rem', right: '4.5rem' }}>
<Card style={{ backgroundColor: primaryColor, color: 'white', padding: '0.25rem 0.5rem', display: 'flex', alignItems: 'center' }}>
{modalStep === 1 && <CircularProgress color="inherit" size="1.25rem" />}
{modalStep === 2 && <span className="text text--small">Paramètres enregistrés</span>}
{modalStep === 3 && <span className="text text--small">Liste mise à jour</span>}
</Card>
</div>
)}
</ClassroomContext.Provider>
);
};

export interface ClassroomUpdateData {
Expand Down
141 changes: 85 additions & 56 deletions src/pages/familles/1.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// TODO : keep this import for delayed days logic
// import debounce from 'lodash.debounce';
import { useRouter } from 'next/router';
import React, { useContext, useEffect, useReducer } from 'react';

import { Button, CircularProgress, FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
import { Button, Card, CircularProgress, FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';

import AccessControl from 'src/components/AccessControl';
import { Base } from 'src/components/Base';
Expand All @@ -18,6 +20,7 @@ import { UserContext } from 'src/contexts/userContext';
import { VillageContext } from 'src/contexts/villageContext';
import { useActivities } from 'src/services/useActivities';
import { useVillageUsers } from 'src/services/useVillageUsers';
import { primaryColor } from 'src/styles/variables.const';
import EyeClosed from 'src/svg/eye-closed.svg';
import EyeVisibility from 'src/svg/eye-visibility.svg';
import { axiosRequest } from 'src/utils/axiosRequest';
Expand Down Expand Up @@ -97,13 +100,15 @@ const ClassroomParamStep1 = () => {
ownClassTimeDelay: { delayedDays: classroom?.delayedDays || 1, hasVisibilitySetToClass: true },
});

const [isDisabled, setIsDisabled] = React.useState({
default: false,
timeDelay: false,
ownClass: false,
ownClassTimeDelay: false,
});
// const [isDisabled, setIsDisabled] = React.useState({
// default: false,
// timeDelay: false,
// ownClass: false,
// ownClassTimeDelay: false,
// });
const [radioValue, setRadioValue] = React.useState('default');
const [modalStep, setModalStep] = React.useState(0);
const modalStepTimeout = React.useRef<number | undefined>(undefined);
const { updateClassroomParameters } = React.useContext(ClassroomContext);
const { village, selectedPhase } = React.useContext(VillageContext);
const { user } = React.useContext(UserContext);
Expand Down Expand Up @@ -181,53 +186,48 @@ const ClassroomParamStep1 = () => {
// }
// };

const handleRadioSelect = (event: React.ChangeEvent<HTMLInputElement>): void => {
const value = (event.target as HTMLInputElement).value;
setRadioValue(value);
// TODO handle delayed days with this debounce function
// const debouncedhandleRadioSelect = React.useRef(
// debounce((value: any) => {
// updateClassroomParameters(value);
// }, 1500),
// ).current;

const handleRadioSelect = (key: string): void => {
setRadioValue(key);

switch (value) {
case 'default':
dispatch({ type: 'default', data: 0 });
setIsDisabled({ ...isDisabled, timeDelay: true, ownClass: true, ownClassTimeDelay: true });
break;
case 'timeDelay':
dispatch({ type: 'timeDelay', data: classroom?.delayedDays || 1 });
setIsDisabled({ ...isDisabled, default: true, ownClass: true, ownClassTimeDelay: true });
break;
case 'ownClass':
dispatch({ type: 'ownClass', data: 0 });
setIsDisabled({ ...isDisabled, default: true, timeDelay: true, ownClassTimeDelay: true });
break;
case 'ownClassTimeDelay':
dispatch({ type: 'ownClassTimeDelay', data: classroom?.delayedDays || 1 });
setIsDisabled({ ...isDisabled, default: true, timeDelay: true, ownClass: true });
break;
// default:
// dispatch({ type: 'default', data: 0 });
// setIsDisabled({ ...isDisabled, timeDelay: true, ownClass: true, ownClassTimeDelay: true });
// break;
}
};
const handleSelectionVisibility = (key: string) => {
let newState: StateType;

switch (key) {
case 'default':
newState = state.default;
dispatch({ type: 'default', data: 0 });
// setIsDisabled({ ...isDisabled, timeDelay: true, ownClass: true, ownClassTimeDelay: true });
break;
case 'timeDelay':
newState = state.timeDelay;
dispatch({ type: 'timeDelay', data: classroom?.delayedDays || 1 });
// handleDaysDelay()
// setIsDisabled({ ...isDisabled, default: true, ownClass: true, ownClassTimeDelay: true });
break;
case 'ownClass':
newState = state.ownClass;
dispatch({ type: 'ownClass', data: 0 });
// setIsDisabled({ ...isDisabled, default: true, timeDelay: true, ownClassTimeDelay: true });
break;
case 'ownClassTimeDelay':
newState = state.ownClassTimeDelay;
dispatch({ type: 'ownClassTimeDelay', data: classroom?.delayedDays || 1 });
// handleDaysDelay()
// setIsDisabled({ ...isDisabled, default: true, timeDelay: true, ownClass: true });
break;
default:
newState = state.default;
break;
}
//debouncedhandleRadioSelect(newState);
updateClassroomParameters(newState);

if (activities) {
const isVisibleToParent = newState.hasVisibilitySetToClass || key === 'default';
activities.forEach((activity) => {
Expand All @@ -236,6 +236,7 @@ const ClassroomParamStep1 = () => {
}
});
}

setClassroom((prevState) => {
if (!prevState) {
return {
Expand All @@ -246,26 +247,29 @@ const ClassroomParamStep1 = () => {
return { ...prevState, ...newState };
});
};
// const isRadioSelected = (value: string): boolean | undefined => radioValue === value;

const handleActivityVisibility = (id: number) => {
axiosRequest({
method: 'PUT',
url: `/teachers/set-activity-visibility/${id}`,
}).then(() => {
}).then((response) => {
if (response.status === 204) {
setModalStep(2);
modalStepTimeout.current = window.setTimeout(() => {
setModalStep(0);
}, 2000);
if (response.status !== 204) {
clearTimeout(modalStepTimeout.current);
setModalStep(1);
}
}
refetch();
});
};
// const toggleInput = (key: string, bool: boolean) => {
// setIsDisabled({ ...isDisabled, [key]: bool });
// };

// React.useEffect(() => {
// if (user && user.type === UserType.TEACHER) {
// updateClassroomValidator());
// }
// }, [updateClassroomValidator]);

const onNext = () => {
router.push('/familles/2');
};
Expand Down Expand Up @@ -308,13 +312,17 @@ const ClassroomParamStep1 = () => {
ligne. Vous avez la possibilité de définir ce que les familles voient sur la plateforme. Choisissez parmi ces 2 options :
</p>
<FormControl>
<RadioGroup aria-label="visibility" onChange={handleRadioSelect} value={radioValue}>
<RadioGroup
aria-label="visibility"
onChange={(e: { target: { value: string } }) => handleRadioSelect(e.target.value)}
value={radioValue}
>
<FormControlLabel
value="default"
name="default"
control={<Radio />}
label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication"
onFocus={() => handleSelectionVisibility('default')}
// onFocus={() => handleSelectionVisibility('default')}
style={radioValue !== 'default' ? { color: '#CCC' } : {}}
/>
{/* <FormControlLabel
Expand All @@ -323,23 +331,34 @@ const ClassroomParamStep1 = () => {
control={<Radio />}
label={
<TextnInputContainer
{...content1}
onChange={(event) => handleDaysDelay('timeDelay', event)}
onBlur={() => handleSelectionVisibility('timeDelay')}
value={state.timeDelay.delayedDays}
disabled={radioValue !== 'timeDelay'}
/>
}
onClick={() => toggleInput('timeDelay', false)}
disabled={isDisabled?.timeDelay}
style={radioValue !== 'timeDelay' ? { color: '#CCC' } : {}}
/> */}
{...content1}
onClick={(event) => {
handleDaysDelay('timeDelay', event);
debouncedhandleRadioSelect('timeDelay');
}}
onChange={(event) => {
handleDaysDelay('timeDelay', event);
debouncedhandleRadioSelect('timeDelay');
}}
onBlur={() => handleSelectionVisibility('timeDelay')}
value={state.timeDelay.delayedDays}
disabled={radioValue !== 'timeDelay'}
/>
}
onFocus={(event: unknown) => {
handleDaysDelay('timeDelay', event as unknown as React.ChangeEvent<HTMLInputElement>);
debouncedhandleSelVisibility('timeDelay')
}}
onClick={() => toggleInput('timeDelay', false)}
disabled={isDisabled?.timeDelay}
style={radioValue !== 'timeDelay' ? { color: '#CCC' } : {}}
/> */}
<FormControlLabel
value="ownClass"
name="ownClass"
control={<Radio />}
label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication, mais seulement celles publiées par notre classe"
onFocus={() => handleSelectionVisibility('ownClass')}
// onFocus={() => handleSelectionVisibility('ownClass')}
style={radioValue !== 'ownClass' ? { color: '#CCC' } : {}}
/>
{/* <FormControlLabel
Expand Down Expand Up @@ -421,6 +440,16 @@ const ClassroomParamStep1 = () => {
</Button>
))
.reverse()}
{modalStep > 0 && (
<div style={{ position: 'fixed', bottom: '1rem', right: '4.5rem' }}>
<Card
style={{ backgroundColor: primaryColor, color: 'white', padding: '0.25rem 0.5rem', display: 'flex', alignItems: 'center' }}
>
{modalStep === 1 && <CircularProgress color="inherit" size="1.25rem" />}
{modalStep === 2 && <span className="text text--small">Paramètres enregistrés</span>}
</Card>
</div>
)}
</>
)}
</OverflowContainer>
Expand Down
1 change: 0 additions & 1 deletion src/pages/familles/2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ const ClassroomParamStep2 = () => {
useEffect(() => {
setIsDisabled(inputValues.firstname === '' || inputValues.lastname === '');
}, [inputValues]);

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();

Expand Down

0 comments on commit f666042

Please sign in to comment.