-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore [QCMPLUS-38][UI-USER-ROLE] - show users history exam and update
Signed-off-by: Teclit <[email protected]>
- Loading branch information
Showing
16 changed files
with
247 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| .exam-taken-list .carousel-control-next-icon { | ||
| background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23ffffff%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M11.354 8l-4.646 4.646-.708-.708L10.293 8 6 3.707l.708-.708L11.354 8z%27/%3E%3C/svg%3E') !important; | ||
| background-color: var(--bg-default-dark-hover-color); | ||
| } | ||
|
|
||
| .exam-taken-list .carousel-control-prev-icon { | ||
| background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23ffffff%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M4.646 8l4.646-4.646.708.708L5.707 8l4.293 4.293-.708.708L4.646 8z%27/%3E%3C/svg%3E') !important; | ||
| background-color: var(--bg-default-dark-hover-color); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React, {useCallback, useEffect, useState} from 'react'; | ||
| import {Card, Carousel} from 'react-bootstrap'; | ||
| import './ExamHistory.css'; | ||
| import {getAllUserExamHistory} from "../../services/ExamService"; | ||
|
|
||
| const ExamTaken = ({userId}) => { | ||
| const [examsTaken, setExamsTaken] = useState([]); | ||
| const [error, setError] = useState(null); | ||
|
|
||
| const Img = ({title}) => { | ||
| const link = title ? `Images/${title}.jpg` : 'Images/default.jpg'; | ||
| return ( | ||
| <div className="img-container"> | ||
| <img src={link} alt={title || 'Default Image'} className="img-fluid"/> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const fetchExams = useCallback(async () => { | ||
| try { | ||
| const response = await getAllUserExamHistory(userId); | ||
| setExamsTaken(response.data); | ||
| } catch (error) { | ||
| console.error('Error fetching exams:', error); | ||
| setError('Failed to load exams. Please try again later.'); | ||
| } | ||
| }, [userId]); | ||
|
|
||
| useEffect(() => { | ||
| fetchExams(); | ||
| }, [fetchExams]); | ||
|
|
||
| if (error) { | ||
| return <div className="alert alert-danger">{error}</div>; | ||
| } | ||
|
|
||
| const chunkArray = (array, size) => { | ||
| const chunkedArr = []; | ||
| for (let i = 0; i < array.length; i += size) { | ||
| chunkedArr.push(array.slice(i, i + size)); | ||
| } | ||
| return chunkedArr; | ||
| }; | ||
|
|
||
| const formatDate = (dateString) => { | ||
| const date = new Date(dateString); | ||
| const day = String(date.getDate()).padStart(2, '0'); | ||
| const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based | ||
| const year = String(date.getFullYear()).slice(-2); | ||
| const hours = String(date.getHours()).padStart(2, '0'); | ||
| const minutes = String(date.getMinutes()).padStart(2, '0'); | ||
| const seconds = String(date.getSeconds()).padStart(2, '0'); | ||
|
|
||
| return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`; | ||
| } | ||
|
|
||
| const chunkedExamsTaken = chunkArray(examsTaken, 4); | ||
|
|
||
| return ( | ||
| <> | ||
| <h3 className="text-bold text-center p-4">Evaluate Your Skills: Take the Quiz</h3> | ||
| <Carousel className="exam-taken-list" indicators={false}> | ||
| {chunkedExamsTaken.map((examChunk, index) => ( | ||
| <Carousel.Item key={index}> | ||
| <div className="d-flex justify-content-center"> | ||
| {examChunk.map((exam, examIndex) => ( | ||
| <Card key={examIndex} className="m-2" style={{width: '18rem'}}> | ||
| <Img title={exam.quiz ? exam.quiz.title : null}/> | ||
| <Card.Body className="text-center"> | ||
| <Card.Title className="text-bold text-decoration-underline"> | ||
| {exam.quiz ? exam.quiz.title : 'No Title Available'} | ||
| </Card.Title> | ||
| <Card.Text>Result: {exam.score}</Card.Text> | ||
| <Card.Text>Time Spent: {exam.timeSpent}h</Card.Text> | ||
| <Card.Text>Date: {formatDate(exam.dateExam)}</Card.Text> | ||
| </Card.Body> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| </Carousel.Item> | ||
| ))} | ||
| </Carousel> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExamTaken; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.