83 lines
3.9 KiB
JavaScript
83 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import { Table, Row, Col, Button, Form, Dropdown, DropdownButton, Breadcrumb, Spinner } from 'react-bootstrap';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import useClassDetail from '../hooks/useClassDetail';
|
|
|
|
const ClassDetail = () => {
|
|
const { classId } = useParams();
|
|
const { classData, nameClass, loading, error } = useClassDetail(classId);
|
|
|
|
if (error) {
|
|
return <>{error}</>;
|
|
}
|
|
|
|
return (
|
|
<div className='admin-teachers'>
|
|
<Row className='mb-45'>
|
|
<Col className="d-flex align-items-center breadcrumb-con">
|
|
<Button as={Link} className='btn btn-blue btn-square-back' to='/portal/class'>
|
|
<i className="bi bi-arrow-90deg-left"></i>
|
|
</Button>
|
|
<Breadcrumb className='custom-breadcrumb'>
|
|
<Breadcrumb.Item href="#">Academic</Breadcrumb.Item>
|
|
<Breadcrumb.Item href="/portal/class" className='text-capitalize'>Classes</Breadcrumb.Item>
|
|
<Breadcrumb.Item active>Class Details</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
</Col>
|
|
</Row>
|
|
<Row className='mb-45'>
|
|
<Col>
|
|
<div className="cards">
|
|
<div className="cards-title">
|
|
<h4>{nameClass}</h4>
|
|
</div>
|
|
<div className="cards-body">
|
|
<Table hover>
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>NISN</th>
|
|
<th>Student Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading?(
|
|
<tr>
|
|
<td colSpan={5} style={{height:"20vh"}}>
|
|
<Spinner animation="grow" variant="primary" />
|
|
<Spinner animation="grow" variant="secondary" />
|
|
<Spinner animation="grow" variant="success" />
|
|
<Spinner animation="grow" variant="danger" />
|
|
<Spinner animation="grow" variant="warning" />
|
|
<Spinner animation="grow" variant="info" />
|
|
</td>
|
|
</tr>
|
|
):(
|
|
classData.length > 0 ?(
|
|
classData.map((data, index) => (
|
|
<tr key={data.ID}>
|
|
<td>{index + 1}</td>
|
|
<td>{data.NISN}</td>
|
|
<td>{data.NAME_USERS}</td>
|
|
</tr>
|
|
))
|
|
):(
|
|
<tr>
|
|
<td colSpan={3} style={{height:'20vh'}}>
|
|
<h3>This class is empty</h3>
|
|
</td>
|
|
</tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ClassDetail;
|