2024-10-31 02:32:14 +00:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
import { Table, Row, Col, Nav, Tab, Button, Form, InputGroup, OverlayTrigger, Tooltip, Spinner } from 'react-bootstrap';
|
|
|
|
|
import useExercises from '../hooks/useExercises';
|
2024-10-31 08:14:29 +00:00
|
|
|
import TablePaginate from '../../../../components/ui/TablePaginate';
|
2024-10-31 02:32:14 +00:00
|
|
|
|
|
|
|
|
const ManageExercises = () => {
|
|
|
|
|
const {
|
|
|
|
|
levels,
|
|
|
|
|
loading,
|
|
|
|
|
error,
|
|
|
|
|
page,
|
|
|
|
|
totalData,
|
|
|
|
|
totalPages,
|
|
|
|
|
setSearch,
|
|
|
|
|
handlePageChange,
|
|
|
|
|
handleLimitsChange,
|
|
|
|
|
handleSerachChange,
|
|
|
|
|
} = useExercises();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='admin-teachers'>
|
|
|
|
|
<h2 className='page-title strip'>Exercise</h2>
|
|
|
|
|
<p className='page-desc'>Description of Exercise.</p>
|
|
|
|
|
<Tab.Container id="left-tabs-example" defaultActiveKey="detail">
|
2024-11-04 19:23:26 +00:00
|
|
|
{/* <Row className='mb-45'>
|
2024-10-31 02:32:14 +00:00
|
|
|
<Col xs={12}>
|
|
|
|
|
<Nav variant="pills" className='col-tabs'>
|
|
|
|
|
<Nav.Item>
|
|
|
|
|
<Nav.Link eventKey="detail">View Entries</Nav.Link>
|
|
|
|
|
</Nav.Item>
|
|
|
|
|
<Nav.Item>
|
|
|
|
|
<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Select the level below </Tooltip>}>
|
|
|
|
|
<span className="d-inline-block">
|
|
|
|
|
<Nav.Link disabled onClick={(e)=>{e.preventDefault();}}>Create Data</Nav.Link>
|
|
|
|
|
</span>
|
|
|
|
|
</OverlayTrigger>
|
|
|
|
|
</Nav.Item>
|
|
|
|
|
</Nav>
|
|
|
|
|
</Col>
|
2024-11-04 19:23:26 +00:00
|
|
|
</Row> */}
|
2024-10-31 02:32:14 +00:00
|
|
|
<Row className='mb-45'>
|
|
|
|
|
<Col xs={12} className='col-tabs-content'>
|
|
|
|
|
<Tab.Content>
|
|
|
|
|
<Tab.Pane eventKey="detail">
|
|
|
|
|
<div className="cards">
|
|
|
|
|
<div className="cards-title">
|
|
|
|
|
<h4>Exercise List</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="cards-body">
|
|
|
|
|
<Form className="mb-3 d-flex align-items-strech" onSubmit={(e) => { e.preventDefault(); handleSerachChange(); }}>
|
|
|
|
|
<Form.Control type='search'
|
|
|
|
|
aria-label="Large"
|
|
|
|
|
aria-describedby="inputGroup-sizing-sm"
|
|
|
|
|
placeholder='Search'
|
|
|
|
|
className='table-input-search mb-0 me-2 rounded-3'
|
|
|
|
|
onChange={(e) => { setSearch(e.target.value); }}
|
|
|
|
|
/>
|
|
|
|
|
<Button type='submit' variant='blue rounded-3'>Search</Button>
|
|
|
|
|
</Form>
|
|
|
|
|
<Table hover>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>No</th>
|
2024-11-04 19:23:26 +00:00
|
|
|
<th>Section</th>
|
2024-10-31 02:32:14 +00:00
|
|
|
<th>Topic</th>
|
|
|
|
|
<th className='text-center'>Level</th>
|
|
|
|
|
<th className='text-center'>Action</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>
|
|
|
|
|
):(
|
2024-11-04 19:23:26 +00:00
|
|
|
levels.length > 0 ?(
|
|
|
|
|
levels.map((level, index) => (
|
|
|
|
|
<tr key={level.ID_LEVEL}>
|
|
|
|
|
<td>{index + 1}</td>
|
|
|
|
|
<td>{level.NAME_SECTION}</td>
|
|
|
|
|
<td>{level.NAME_TOPIC}</td>
|
|
|
|
|
<td className='text-center'>{level.NAME_LEVEL}</td>
|
|
|
|
|
<td className='text-center action-col d-flex justify-content-center'>
|
|
|
|
|
<Link className='btn btn-sm btn-edit' to={`update-exercise/${level.ID_LEVEL}`}>
|
|
|
|
|
<i className="bi bi-pencil-square"></i>
|
|
|
|
|
</Link>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))
|
|
|
|
|
):(
|
|
|
|
|
<tr>
|
|
|
|
|
<td colSpan={5} style={{height:'20vh'}}>
|
|
|
|
|
<h3>Empty Data</h3>
|
2024-10-31 02:32:14 +00:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
2024-11-04 19:23:26 +00:00
|
|
|
)
|
2024-10-31 02:32:14 +00:00
|
|
|
)}
|
|
|
|
|
</tbody>
|
|
|
|
|
</Table>
|
|
|
|
|
<div className="mt-2 w-100 d-flex justify-content-between align-items-center">
|
|
|
|
|
<div className='d-flex align-items-center'>
|
|
|
|
|
<small className="me-2">Item per page</small>
|
|
|
|
|
<Form.Select
|
|
|
|
|
size='sm'
|
|
|
|
|
className='py-0 px-1 me-2'
|
|
|
|
|
aria-label="Default select example"
|
|
|
|
|
defaultValue='7'
|
|
|
|
|
onChange={handleLimitsChange}
|
|
|
|
|
style={{ width: '50px' }}
|
|
|
|
|
>
|
|
|
|
|
<option value="7">7</option>
|
|
|
|
|
<option value="10">10</option>
|
|
|
|
|
<option value="20">20</option>
|
|
|
|
|
</Form.Select>
|
|
|
|
|
<small>of {totalData}</small>
|
|
|
|
|
</div>
|
|
|
|
|
<TablePaginate
|
|
|
|
|
totalPages={totalPages}
|
|
|
|
|
currentPage={page}
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Tab.Pane>
|
|
|
|
|
<Tab.Pane eventKey="create">
|
|
|
|
|
<div className="cards">
|
|
|
|
|
<div className="cards-title">
|
|
|
|
|
<h4>Add Material Data</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="cards-body">
|
|
|
|
|
<Form>
|
|
|
|
|
<Row className='mb-2'>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridEmail">
|
|
|
|
|
<Form.Label>Section<sup className='text-red fw-bold'>*</sup></Form.Label>
|
|
|
|
|
<InputGroup className="mb-2 input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-book"></i></InputGroup.Text>
|
|
|
|
|
<Form.Select aria-label="section select" defaultValue="" required>
|
|
|
|
|
<option value="" disabled hidden>Choose Section</option>
|
|
|
|
|
<option value="1">Grammar</option>
|
|
|
|
|
<option value="2">Listening</option>
|
|
|
|
|
<option value="3">Reading</option>
|
|
|
|
|
<option value="4">Vocabulary</option>
|
|
|
|
|
</Form.Select>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridEmail">
|
|
|
|
|
<Form.Label>Topic<sup className='text-red fw-bold'>*</sup></Form.Label>
|
|
|
|
|
<InputGroup className="mb-2 input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-card-list"></i></InputGroup.Text>
|
|
|
|
|
<Form.Select aria-label="topic select" defaultValue="" required>
|
|
|
|
|
<option value="" disabled hidden>Choose Topic</option>
|
|
|
|
|
<option value="1">Talking about Self</option>
|
|
|
|
|
<option value="2">Congratulating & Complimenting Others</option>
|
|
|
|
|
<option value="3">Talking About Intentions</option>
|
|
|
|
|
<option value="4">Presenting Information</option>
|
|
|
|
|
<option value="5">Describing a Place</option>
|
|
|
|
|
</Form.Select>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridEmail">
|
|
|
|
|
<Form.Label>Level<sup className='text-red fw-bold'>*</sup></Form.Label>
|
|
|
|
|
<InputGroup className="mb-2 input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-bar-chart"></i></InputGroup.Text>
|
|
|
|
|
<Form.Select aria-label="teacher select" defaultValue="" required>
|
|
|
|
|
<option value="" disabled hidden>Choose Level</option>
|
|
|
|
|
<option value="0">Pretest</option>
|
|
|
|
|
<option value="1">Level 1</option>
|
|
|
|
|
<option value="2">Level 2</option>
|
|
|
|
|
<option value="3">Level 3</option>
|
|
|
|
|
<option value="4">Level 4</option>
|
|
|
|
|
<option value="5">Level 5</option>
|
|
|
|
|
<option value="6">Level 6</option>
|
|
|
|
|
</Form.Select>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="mb-2">
|
|
|
|
|
<Form.Group as={Col} controlId="formGridEmail">
|
|
|
|
|
<Form.Label>Material Content<sup className='text-red fw-bold'>*</sup></Form.Label>
|
|
|
|
|
<Form.Control as="textarea" rows={5} className='mb-2' placeholder='Type the level description here...' />
|
|
|
|
|
</Form.Group>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className='mb-4'>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridPassword">
|
|
|
|
|
<Form.Label>Audio File (optional)</Form.Label>
|
|
|
|
|
<InputGroup className="input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-music-note-beamed"></i></InputGroup.Text>
|
|
|
|
|
<Form.Control
|
|
|
|
|
placeholder="Choose Audio"
|
|
|
|
|
aria-label="fullname"
|
|
|
|
|
aria-describedby="basic-addon1"
|
|
|
|
|
className='border-dashed'
|
|
|
|
|
/>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
<small>Ensure the file size is no larger than 5 MB</small>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridPassword">
|
|
|
|
|
<Form.Label>Image File (optional)</Form.Label>
|
|
|
|
|
<InputGroup className="input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-image"></i></InputGroup.Text>
|
|
|
|
|
<Form.Control
|
|
|
|
|
placeholder="Choose Image"
|
|
|
|
|
aria-label="fullname"
|
|
|
|
|
aria-describedby="basic-addon1"
|
|
|
|
|
className='border-dashed'
|
|
|
|
|
/>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
<small>Ensure the file size is no larger than 5 MB</small>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
<Form.Group as={Col} controlId="formGridPassword">
|
|
|
|
|
<Form.Label>Video File (optional)</Form.Label>
|
|
|
|
|
<InputGroup className="input-group-icon">
|
|
|
|
|
<InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-film"></i></InputGroup.Text>
|
|
|
|
|
<Form.Control
|
|
|
|
|
placeholder="Choose Video"
|
|
|
|
|
aria-label="fullname"
|
|
|
|
|
aria-describedby="basic-addon1"
|
|
|
|
|
className='border-dashed'
|
|
|
|
|
/>
|
|
|
|
|
</InputGroup>
|
|
|
|
|
<small>Ensure the file size is no larger than 10 MB</small>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
</Row>
|
|
|
|
|
<div className="d-flex justify-content-end">
|
|
|
|
|
<Button variant="outline-blue" type="reset" className='ms-auto py-2 rounded-35'>
|
|
|
|
|
reset
|
|
|
|
|
</Button>
|
|
|
|
|
<Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
|
|
|
|
|
Add
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Tab.Pane>
|
|
|
|
|
</Tab.Content>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Tab.Container>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ManageExercises;
|
