disable switch for votes

This commit is contained in:
OxSaitama 2023-09-05 09:35:45 +02:00
parent 30b5d1cd87
commit cdfc5fc29d
3 changed files with 15 additions and 6 deletions

View File

@ -3,6 +3,12 @@
gap: 16px; gap: 16px;
cursor: pointer; cursor: pointer;
width: fit-content; width: fit-content;
.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.switch-container { .switch-container {
position: relative; position: relative;
width: 46px; width: 46px;

View File

@ -7,8 +7,9 @@ type IProps = {
onChange?: (checked: boolean) => void; onChange?: (checked: boolean) => void;
checked?: boolean; checked?: boolean;
label: string; label: string;
disabled?: boolean;
}; };
export default function Switch({ onChange, checked, label }: IProps) { export default function Switch({ onChange, checked, label, disabled }: IProps) {
const [isChecked, setIsChecked] = useState<boolean>(checked ? checked : false); const [isChecked, setIsChecked] = useState<boolean>(checked ? checked : false);
useEffect(() => { useEffect(() => {
@ -21,10 +22,12 @@ export default function Switch({ onChange, checked, label }: IProps) {
}, [isChecked, onChange]); }, [isChecked, onChange]);
return ( return (
<div className={classes["root"]} onClick={handleChange}> <div className={classes["root"]}>
<div className={disabled ? classes["disabled"] : classes["root"]} onClick={disabled ? () => {} : handleChange}>
<div className={classes["switch-container"]} data-checked={isChecked.toString()}> <div className={classes["switch-container"]} data-checked={isChecked.toString()}>
<div className={classes["round"]} /> <div className={classes["round"]} />
</div> </div>
</div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
{label} {label}
</Typography> </Typography>

View File

@ -81,7 +81,7 @@ export default function UserInformations(props: IProps) {
useEffect(() => { useEffect(() => {
if (!userSelected) return; if (!userSelected) return;
setCurrentAppointment(userSelected?.appointment?.find((appointment) => appointment.status === EAppointmentStatus.OPEN) ?? null); setCurrentAppointment(userSelected?.appointment?.find((appointment) => appointment.status === EAppointmentStatus.OPEN && appointment.votes?.length != 0) ?? null);
}, [userSelected]); }, [userSelected]);
/** Functions for the admin modal */ /** Functions for the admin modal */
@ -282,7 +282,7 @@ export default function UserInformations(props: IProps) {
</div> </div>
<div className={classes["second-line"]}> <div className={classes["second-line"]}>
<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} /> <Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
<Switch label="Super-admin LeCoffre.io" checked={isSuperAdminChecked} onChange={handleSuperAdminChanged} /> <Switch label="Super-admin LeCoffre.io" checked={isSuperAdminChecked} disabled={userHasVoted()} onChange={handleSuperAdminChanged} />
{currentAppointment && ( {currentAppointment && (
<div className={classes["votes-block"]}> <div className={classes["votes-block"]}>
<div className={classes["left"]}> <div className={classes["left"]}>