fixing teacher feedback page
This commit is contained in:
parent
f5e8b7c566
commit
866b542e12
|
|
@ -92,7 +92,7 @@ const useProgress = () => {
|
|||
const getClassTopic = async (id) => {
|
||||
setLoadingModal(true);
|
||||
try {
|
||||
const classes = await progressService.getTopicByClass(id, '', '', '', 1000);
|
||||
const classes = await progressService.getTopicByClass(id);
|
||||
setSelected(classes.payload.data);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
|
|
|
|||
|
|
@ -78,12 +78,30 @@ const useProgressClass = (progressId) => {
|
|||
.replace(/\./g, ':') + ' WIB';
|
||||
}
|
||||
|
||||
const handleDownloadCSV = async () => {
|
||||
try {
|
||||
const response = await progressService.getCsvProgress();
|
||||
|
||||
const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = downloadUrl;
|
||||
link.download = `progress ${name}-${topic}.csv`;
|
||||
link.click();
|
||||
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
} catch (error) {
|
||||
console.error('Error downloading file:', error);
|
||||
alert('Gagal mengunduh file');
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
progress,
|
||||
section,
|
||||
topic,
|
||||
name,
|
||||
nisn,
|
||||
loading,
|
||||
error,
|
||||
|
||||
|
|
@ -94,7 +112,8 @@ const useProgressClass = (progressId) => {
|
|||
handlePageChange,
|
||||
handleLimitsChange,
|
||||
handleSearchChange,
|
||||
formatLocalDate
|
||||
formatLocalDate,
|
||||
handleDownloadCSV
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,13 @@ const useProgressStudent = (monitoringId) => {
|
|||
const [totalPages, setTotalPages] = useState(0);
|
||||
const [totalData, setTotalData] = useState(null);
|
||||
|
||||
|
||||
const [idMonitoring, setIdMonitoring] = useState(null);
|
||||
const [showFeedback, setShowFeedback] = useState(false);
|
||||
const [feedback, setFeedback] = useState("");
|
||||
const [successFeedback, setSuccessFeedback] = useState(false);
|
||||
const [loadingFeedback, setLoadingFeedback] = useState(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
|
|
@ -28,7 +35,8 @@ const useProgressStudent = (monitoringId) => {
|
|||
setProgress(data.payload.levels);
|
||||
setTotalPages(data.payload.totalPages);
|
||||
setTotalData(data.payload.totalItems);
|
||||
|
||||
|
||||
setIdMonitoring(data.payload.ID_MONITORING);
|
||||
setSection(data.payload.NAME_SECTION)
|
||||
setTopic(data.payload.NAME_TOPIC)
|
||||
setName(data.payload.NAME_USERS)
|
||||
|
|
@ -76,7 +84,33 @@ const useProgressStudent = (monitoringId) => {
|
|||
.replace(/\./g, ':') + ' WIB';
|
||||
}
|
||||
|
||||
const downloadPDF = () => {
|
||||
const handleShowFeedback = () => {
|
||||
setSuccessFeedback(false);
|
||||
setShowFeedback(true);
|
||||
}
|
||||
|
||||
const handleCloseFeedback = () => {
|
||||
setShowFeedback(false);
|
||||
setFeedback('');
|
||||
setSuccessFeedback(false);
|
||||
}
|
||||
|
||||
const handleSubmitFeedback = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoadingFeedback(true);
|
||||
setSuccessFeedback(false);
|
||||
try {
|
||||
await progressService.postFeedback(idMonitoring, feedback);
|
||||
setSuccessFeedback(true);
|
||||
setFeedback('');
|
||||
setLoadingFeedback(false);
|
||||
} catch (err) {
|
||||
// setError(err.message);
|
||||
console.log(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadCSV = () => {
|
||||
const doc = new jsPDF();
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
|
||||
|
|
@ -122,7 +156,16 @@ const useProgressStudent = (monitoringId) => {
|
|||
handleLimitsChange,
|
||||
handleSearchChange,
|
||||
formatLocalDate,
|
||||
downloadPDF
|
||||
handleDownloadCSV,
|
||||
|
||||
feedback,
|
||||
setFeedback,
|
||||
loadingFeedback,
|
||||
successFeedback,
|
||||
handleSubmitFeedback,
|
||||
showFeedback,
|
||||
handleShowFeedback,
|
||||
handleCloseFeedback,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ const getStudentById = async (id) => {
|
|||
}
|
||||
};
|
||||
|
||||
const getTopicByClass = async (id, search, sort, page, limit) => {
|
||||
const getTopicByClass = async (id) => {
|
||||
try {
|
||||
const response = await axiosInstance.get(`/monitoring/class/${id}?search=${search}&sort=${sort}&page=${page}&limit=${limit}`);
|
||||
const response = await axiosInstance.get(`/monitoring/class/${id}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching progress:', error);
|
||||
|
|
@ -52,7 +52,7 @@ const fetchDataStudentProgress = async (id, search, sort, page, limit) => {
|
|||
|
||||
const fetchDataClassProgress = async (dataId, search, sort, page, limit) => {
|
||||
try {
|
||||
const response = await axiosInstance.get(`/monitoring/class?search=${search}&sort=${sort}&page=${page}&limit=${limit}`, dataId);
|
||||
const response = await axiosInstance.post(`/monitoring/class?search=${search}&sort=${sort}&page=${page}&limit=${limit}`, dataId);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching progress:', error);
|
||||
|
|
@ -60,11 +60,39 @@ const fetchDataClassProgress = async (dataId, search, sort, page, limit) => {
|
|||
}
|
||||
};
|
||||
|
||||
const postFeedback = async (id, feedback) => {
|
||||
try {
|
||||
const response = await axiosInstance.post(`/monitoring/feedback/${id}`, feedback);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error post feedback:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const getCsvProgress = async () => {
|
||||
const configs = {
|
||||
headers: {
|
||||
Authorization: localStorage.getItem('token')
|
||||
},
|
||||
responseType: 'blob',
|
||||
};
|
||||
try {
|
||||
const response = await axiosInstance.get(`/monitoring/class/csv`, configs);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`Error get file:`, error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export default{
|
||||
fetchDataStudent,
|
||||
fetchDataClass,
|
||||
getStudentById,
|
||||
getTopicByClass,
|
||||
fetchDataStudentProgress,
|
||||
fetchDataClassProgress
|
||||
fetchDataClassProgress,
|
||||
getCsvProgress,
|
||||
postFeedback
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,12 +8,10 @@ const ClassFeedback = () => {
|
|||
const { progressId } = useParams();
|
||||
const {
|
||||
progress,
|
||||
name,
|
||||
section,
|
||||
topic,
|
||||
name,
|
||||
nisn,
|
||||
loading,
|
||||
error,
|
||||
|
||||
totalPages,
|
||||
totalData,
|
||||
|
|
@ -22,7 +20,8 @@ const ClassFeedback = () => {
|
|||
handlePageChange,
|
||||
handleLimitsChange,
|
||||
handleSearchChange,
|
||||
formatLocalDate
|
||||
formatLocalDate,
|
||||
handleDownloadCSV
|
||||
} = useProgressClass(progressId);
|
||||
return (
|
||||
<div className='admin-teachers'>
|
||||
|
|
@ -33,12 +32,12 @@ const ClassFeedback = () => {
|
|||
</Button>
|
||||
<Breadcrumb className='custom-breadcrumb'>
|
||||
<Breadcrumb.Item href="/portal/feedback">Monitoring Progress</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>Progress Details</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>Class Progress Details</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</Col>
|
||||
<Col sm={6} className="d-flex align-items-center justify-content-end">
|
||||
<Button variant="outline-blue" type="button" className='py-2 bg-white'>
|
||||
<i className="bi bi-download me-2"></i>Download PDF
|
||||
<Button variant="outline-blue" type="button" className='py-2 bg-white' onClick={(e) => { e.preventDefault(); handleDownloadCSV(); }}>
|
||||
<i className="bi bi-download me-2"></i>Download CSV
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -46,7 +45,7 @@ const ClassFeedback = () => {
|
|||
<Col>
|
||||
<div className="cards">
|
||||
<div className="cards-title">
|
||||
<h4 className='mb-2'>{nisn} - {name}</h4>
|
||||
<h4 className='mb-2'>{name}</h4>
|
||||
<span className='text-grey'>{section} / {topic}</span>
|
||||
</div>
|
||||
<div className="cards-body">
|
||||
|
|
@ -63,11 +62,11 @@ const ClassFeedback = () => {
|
|||
<Table hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>NISN</th>
|
||||
<th className='text-start'>NISN</th>
|
||||
<th>Full Name</th>
|
||||
<th>Level</th>
|
||||
<th>Score</th>
|
||||
<th>Feedback</th>
|
||||
<th>Start Exercise</th>
|
||||
<th>Finish Exercise</th>
|
||||
</tr>
|
||||
|
|
@ -75,7 +74,7 @@ const ClassFeedback = () => {
|
|||
<tbody>
|
||||
{loading?(
|
||||
<tr>
|
||||
<td colSpan={6} style={{height:"20vh"}}>
|
||||
<td colSpan={7} style={{height:"20vh"}}>
|
||||
<Spinner animation="grow" variant="primary" />
|
||||
<Spinner animation="grow" variant="secondary" />
|
||||
<Spinner animation="grow" variant="success" />
|
||||
|
|
@ -88,18 +87,18 @@ const ClassFeedback = () => {
|
|||
progress.length > 0?(
|
||||
progress.map((data, index) => (
|
||||
<tr key={index}>
|
||||
<td>{index + 1}</td>
|
||||
<td>{data.NISN}</td>
|
||||
<td className='text-start'>{data.NISN}</td>
|
||||
<td>{data.NAME_USERS}</td>
|
||||
<td>{data.NAME_LEVEL}</td>
|
||||
<td>{data.SCORE}</td>
|
||||
<td>{data.FEEDBACK_STUDENT ?? '-'}</td>
|
||||
<td>{formatLocalDate(data.STUDENT_START)}</td>
|
||||
<td>{formatLocalDate(data.STUDENT_FINISH)}</td>
|
||||
</tr>
|
||||
))
|
||||
):(
|
||||
<tr>
|
||||
<td colSpan={6} style={{height:'20vh'}}>
|
||||
<td colSpan={7} style={{height:'20vh'}}>
|
||||
<h3>Empty Data</h3>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ const Feedback = () => {
|
|||
|
||||
return (
|
||||
<div className='admin-students'>
|
||||
<h2 className='page-title strip'>Learning Progress</h2>
|
||||
<p className='page-desc'>Follow student activity closely and monitor their English learning journey.</p>
|
||||
<h2 className='page-title strip'>Feedback</h2>
|
||||
<p className='page-desc'>Make students more enthusiastic with feedback from you.</p>
|
||||
<Tab.Container id="left-tabs-example" defaultActiveKey="student">
|
||||
<Row className='mb-45'>
|
||||
<Col xs={12}>
|
||||
|
|
@ -206,13 +206,13 @@ const Feedback = () => {
|
|||
</Row>
|
||||
</Tab.Container>
|
||||
|
||||
<Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
|
||||
<Modal show={show} onHide={handleClose} className='modal-admin' size='xl' centered>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Select Topic</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
{loadingModal?(
|
||||
<div className='d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
|
||||
<div className='d-flex justify-content-center align-items-center' style={{height:"179px"}}>
|
||||
<Spinner animation="grow" variant="primary" />
|
||||
<Spinner animation="grow" variant="secondary" />
|
||||
<Spinner animation="grow" variant="success" />
|
||||
|
|
@ -238,7 +238,9 @@ const Feedback = () => {
|
|||
))}
|
||||
</Row>
|
||||
):(
|
||||
<h2 className='my-3 text-center'>No Progress from this class</h2>
|
||||
<div className='d-flex justify-content-center align-items-center' style={{height:"179px"}}>
|
||||
<h2 className='m-0 text-center'>No Progress from this class</h2>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</Modal.Body>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import React from 'react';
|
||||
import { Table, Row, Col, Button, Form, Dropdown, DropdownButton, Breadcrumb, Spinner } from 'react-bootstrap';
|
||||
import { Table, Row, Col, Button, Form, Modal, Breadcrumb, Spinner } from 'react-bootstrap';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import useProgressStudent from '../hooks/useProgressStudent';
|
||||
import TablePaginate from '../../../../components/ui/TablePaginate';
|
||||
|
||||
import successIllustration from '../../../../assets/images/illustration/successModal.png'
|
||||
|
||||
const StudentFeedback = () => {
|
||||
const { progressId } = useParams();
|
||||
const {
|
||||
|
|
@ -23,7 +25,16 @@ const StudentFeedback = () => {
|
|||
handleLimitsChange,
|
||||
handleSearchChange,
|
||||
formatLocalDate,
|
||||
downloadPDF
|
||||
handleDownloadCSV,
|
||||
|
||||
feedback,
|
||||
setFeedback,
|
||||
loadingFeedback,
|
||||
successFeedback,
|
||||
handleSubmitFeedback,
|
||||
showFeedback,
|
||||
handleShowFeedback,
|
||||
handleCloseFeedback,
|
||||
} = useProgressStudent(progressId);
|
||||
return (
|
||||
<div className='admin-teachers'>
|
||||
|
|
@ -38,7 +49,10 @@ const StudentFeedback = () => {
|
|||
</Breadcrumb>
|
||||
</Col>
|
||||
<Col sm={6} className="d-flex align-items-center justify-content-end">
|
||||
<Button variant="outline-blue" type="button" className='py-2 bg-white' onClick={downloadPDF}>
|
||||
<Button variant="outline-blue" type="button" className='py-2 me-3 bg-white' onClick={handleShowFeedback}>
|
||||
<i className="bi bi-chat-left-text me-2"></i>Give Feedback
|
||||
</Button>
|
||||
<Button variant="outline-blue" type="button" className='py-2 bg-white' onClick={(e) => { e.preventDefault(); handleDownloadCSV(); }}>
|
||||
<i className="bi bi-download me-2"></i>Download PDF
|
||||
</Button>
|
||||
</Col>
|
||||
|
|
@ -133,6 +147,42 @@ const StudentFeedback = () => {
|
|||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Modal centered show={showFeedback} onHide={handleCloseFeedback} size='lg'>
|
||||
{successFeedback?(
|
||||
<Modal.Body className='p-4 d-flex flex-column items-center'>
|
||||
<h4 className='mb-4 fw-bold text-dark'>Feedback <span className='text-blue'>sent</span>!</h4>
|
||||
<img src={successIllustration} alt="" />
|
||||
<p className='my-3 text-muted fw-light'>Thank you for letting us know. We’ll investigate the issue and work on resolving it promptly.</p>
|
||||
<Button variant="gd" className="py-2 px-5 mt-4 w-50 rounded-35" onClick={handleCloseFeedback}>Done</Button>
|
||||
</Modal.Body>
|
||||
):(
|
||||
<>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Feedback</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className='p-4 d-flex flex-column items-center'>
|
||||
<Form onSubmit={handleSubmitFeedback} className="w-100 p-3 border rounded-3">
|
||||
<Form.Group className="mb-3" controlId="feedbackTextarea">
|
||||
<Form.Label className="text-black fw-bold">What insights or comments would you like to share with the student?</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={5}
|
||||
placeholder="Type your feedback here..."
|
||||
value={feedback}
|
||||
onChange={(e) => setFeedback(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="gd" type="submit" className="py-2 px-5 w-100 rounded-35" disabled={loadingFeedback || !feedback}>
|
||||
{loadingFeedback ? <Spinner animation="border" size="sm" /> : 'SEND'}
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user