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.

Sign up for GitHub

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

Page 4 family fix #728

Merged
merged 7 commits into from
Oct 19, 2023
Merged

Page 4 family fix #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b1d706
Add numLinkedAccount in family page 4
SimNed Oct 19, 2023
a899792
remove arrow icon in family page 4
SimNed Oct 19, 2023
722cfd5
remove arrow in family page 4 students row
SimNed Oct 19, 2023
dccfe38
hide student linked users in family page 4
SimNed Oct 19, 2023
b4d8cfb
fix: users condition if null in createData in CollapsibleTable
SimNed Oct 19, 2023
85c07f5
remove console.log
SimNed Oct 19, 2023
01f1800
comment unused import and variable
SimNed Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 27 additions & 18 deletions src/components/table/CollapsibleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
// import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import { Button, Checkbox } from '@mui/material';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
// import Collapse from '@mui/material/Collapse';
// import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
Expand All @@ -14,21 +14,21 @@ import TableRow from '@mui/material/TableRow';
import { useContext, useEffect, useState } from 'react';
import * as React from 'react';

import { DeleteButton } from '../buttons/DeleteButton';
import { deleteUserStudentRelation } from 'src/api/student/student.delete';
// import { DeleteButton } from '../buttons/DeleteButton';
// import { deleteUserStudentRelation } from 'src/api/student/student.delete';
import { ClassroomContext } from 'src/contexts/classroomContext';

function createData(
name: string,
numAccountLinked: number,
numLinkedAccount: number,
studentCode: string | undefined,
users: { id: number; email: string; firstname: string; lastname: string }[],
studentId: number,
selected: boolean,
) {
return {
name,
numAccountLinked,
numLinkedAccount,
studentCode,
users,
studentId,
Expand All @@ -45,8 +45,9 @@ function Row(props: {
isKeywordMissing: boolean;
handleDeleteUser: (studentId: number, userId: number) => void;
}) {
const { row, isSelected, handleToggle, onPrint, isKeywordMissing, handleDeleteUser } = props;
const [open, setOpen] = useState(false);
const { row, isSelected, handleToggle, onPrint, isKeywordMissing } = props;
// const { row, isSelected, handleToggle, onPrint, isKeywordMissing, handleDeleteUser } = props;
// const [open, setOpen] = useState(false);

const createPrintHandler = (studentId?: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
Expand All @@ -63,10 +64,10 @@ function Row(props: {
{row.name}
</TableCell>
<TableCell align="right">
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} disabled={isKeywordMissing}>
{/* <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} disabled={isKeywordMissing}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
{row.numAccountLinked}
</IconButton> */}
{row.numLinkedAccount}
</TableCell>
<TableCell align="right">{row.studentCode}</TableCell>
<TableCell align="right">
Expand All @@ -75,7 +76,7 @@ function Row(props: {
</Button>
</TableCell>
</TableRow>
<TableRow>
{/* <TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0, paddingLeft: 0, paddingRight: 0 }} align="right" colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1, marginLeft: 0 }}>
Expand All @@ -87,6 +88,7 @@ function Row(props: {
index, // replace 'users' with 'row.users'
) => (
<TableRow key={index}>
<TableCell>{row.users}</TableCell>
<TableCell style={{ fontSize: '0.8rem' }}>{user.email}</TableCell>
<TableCell style={{ fontSize: '0.8rem' }}>{user.firstname}</TableCell>
<TableCell style={{ fontSize: '0.8rem' }}>{user.lastname}</TableCell>
Expand All @@ -113,7 +115,7 @@ function Row(props: {
</Box>
</Collapse>
</TableCell>
</TableRow>
</TableRow> */}
</React.Fragment>
);
}
Expand All @@ -127,7 +129,7 @@ export default function CollapsibleTable() {
const [rows, setRows] = useState<
{
name: string;
numAccountLinked: number;
numLinkedAccount: number;
studentCode: string | undefined;
users: {
id: number;
Expand Down Expand Up @@ -166,7 +168,14 @@ export default function CollapsibleTable() {
useEffect(() => {
const newRows = students.map((student) => {
const users = student.users || [];
return createData(student.firstname + ' ' + student.lastname, users.length, student.hashedCode, users, student.id, isSelected(student.id));
return createData(
student.firstname + ' ' + student.lastname,
student.numLinkedAccount || 0,
student.hashedCode,
users,
student.id,
isSelected(student.id),
);
});

setRows(newRows);
Expand All @@ -177,7 +186,7 @@ export default function CollapsibleTable() {
if (row.studentId === studentId) {
const newUsers = row.users.filter((user) => user.id !== userId);
const newNumAccountLinked = newUsers.length;
return { ...row, users: newUsers, numAccountLinked: newNumAccountLinked };
return { ...row, users: newUsers, numLinkedAccount: newNumAccountLinked };
}
return row;
});
Expand Down
11 changes: 6 additions & 5 deletions src/pages/familles/4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import AccessControl from 'src/components/AccessControl';
import { Base } from 'src/components/Base';
import { Steps } from 'src/components/Steps';
import { StepsButton } from 'src/components/StepsButtons';
import PelicoReflechit from 'src/svg/pelico/pelico_reflechit.svg';
import CollapsibleTable from 'src/components/table/CollapsibleTable';
// import PelicoReflechit from 'src/svg/pelico/pelico_reflechit.svg';

const ClassroomParamStep4 = () => {
return (
Expand All @@ -16,12 +17,12 @@ const ClassroomParamStep4 = () => {
urls={['/familles/1?edit', '/familles/2', '/familles/3', '/familles/4']}
activeStep={3}
/>
<div className="width-900" style={{ marginTop: '20px', marginBottom: '50px' }}>
{/* <div className="width-900" style={{ marginTop: '20px', marginBottom: '50px' }}>
<h1> Vous pourrez bientôt visualiser sur cette page les familles qui ont activé leur compte. </h1>
<PelicoReflechit style={{ marginTop: '50px', width: '50%', height: 'auto', maxWidth: '360px' }} />
<p className="text"></p>
</div>
{/* <div className="width-900">
</div> */}
<div className="width-900">
<h1> Gérer les identifiants des familles </h1>
<span>
Chaque ligne de ce tableau correspond à un élève de votre classe.
Expand All @@ -38,7 +39,7 @@ const ClassroomParamStep4 = () => {
</span>

<CollapsibleTable />
</div> */}
</div>
<StepsButton prev="/familles/3" />
</div>
</AccessControl>
Expand Down
Loading