2020-11-22 18:22:07 +01:00
|
|
|
import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
|
2020-08-17 23:56:34 +02:00
|
|
|
import { coursesContext } from '../contexts/CoursesProvider';
|
2020-12-12 19:57:16 +01:00
|
|
|
import { studentsContext } from '../contexts/StudentsProvider';
|
|
|
|
import { Course, Student } from '../types';
|
2020-08-17 23:56:34 +02:00
|
|
|
import styled from 'styled-components';
|
|
|
|
|
2020-10-21 20:42:18 +02:00
|
|
|
const DropdownContainer = styled.div`
|
2020-11-02 00:15:30 +01:00
|
|
|
position: relative;
|
|
|
|
z-index: 99999999;
|
2020-11-21 14:15:58 +01:00
|
|
|
max-height: 396px;
|
2020-11-02 00:15:30 +01:00
|
|
|
border-radius: 3px;
|
|
|
|
overflow-y: auto;
|
2020-11-25 01:47:58 +01:00
|
|
|
opacity: 0.97;
|
2020-11-02 00:15:30 +01:00
|
|
|
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
|
2020-10-01 19:51:06 +02:00
|
|
|
scroll-snap-type: y mandatory;
|
|
|
|
scroll-behavior: smooth;
|
2020-10-08 20:21:52 +02:00
|
|
|
::-webkit-scrollbar-track {
|
2020-11-22 17:22:13 +01:00
|
|
|
background-color: #f2f4f7;
|
2020-10-08 20:21:52 +02:00
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
2020-11-22 17:22:13 +01:00
|
|
|
background-color: #f2f4f7;
|
|
|
|
width: 5px;
|
2020-11-25 01:47:58 +01:00
|
|
|
border-style: none;
|
2020-10-08 20:21:52 +02:00
|
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
border-radius: 10px;
|
2020-11-22 17:22:13 +01:00
|
|
|
background-color: #4b4b4b;
|
2020-10-08 20:21:52 +02:00
|
|
|
}
|
2020-10-01 19:51:06 +02:00
|
|
|
`;
|
|
|
|
|
2020-10-21 20:42:18 +02:00
|
|
|
const CourseContainer = styled.div`
|
2020-08-17 23:56:34 +02:00
|
|
|
padding: 5px;
|
|
|
|
padding-left: 20px;
|
2020-10-30 00:42:40 +01:00
|
|
|
background-color: #f2f4f7;
|
2020-11-21 14:15:58 +01:00
|
|
|
font-size: 16px;
|
2020-10-30 00:42:40 +01:00
|
|
|
font-weight: 500;
|
2020-12-04 15:05:54 +01:00
|
|
|
scroll-snap-align: end;
|
2020-08-17 23:56:34 +02:00
|
|
|
:hover {
|
2020-11-02 00:15:30 +01:00
|
|
|
background-color: #eceef4;
|
2020-08-17 23:56:34 +02:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-08-20 18:14:28 +02:00
|
|
|
interface DropdownProps {
|
2020-11-02 00:15:30 +01:00
|
|
|
open: boolean;
|
|
|
|
input: string;
|
|
|
|
handleCloseDropdown: () => void;
|
2020-12-05 18:06:26 +01:00
|
|
|
selectedOption: string;
|
2020-08-20 18:14:28 +02:00
|
|
|
}
|
|
|
|
|
2020-12-05 18:06:26 +01:00
|
|
|
export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
|
2021-01-05 23:46:51 +01:00
|
|
|
const { courses, selectBasketNames, addCourseToBasket, changeStudent, getStudentTimetablesHistory } = useContext(coursesContext)!;
|
2020-12-16 00:23:31 +01:00
|
|
|
const { students, changeSelectedStudent } = useContext(studentsContext)!;
|
2020-11-22 18:22:07 +01:00
|
|
|
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
|
2020-11-21 04:02:38 +01:00
|
|
|
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
|
2020-12-12 19:57:16 +01:00
|
|
|
const [filteredStudents, setFilteredStudents] = useState<Array<Student>>([]);
|
2020-12-10 21:26:09 +01:00
|
|
|
|
2020-11-21 04:02:38 +01:00
|
|
|
const onCourseClick = (event: MouseEvent) => {
|
|
|
|
const target = event.currentTarget;
|
|
|
|
if (target.id && target.textContent) {
|
|
|
|
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
|
|
|
|
addCourseToBasket(course);
|
|
|
|
handleCloseDropdown();
|
|
|
|
}
|
|
|
|
};
|
2020-11-02 00:15:30 +01:00
|
|
|
|
2020-12-05 18:32:37 +01:00
|
|
|
const onUserClick = (event: MouseEvent) => {
|
|
|
|
const target = event.currentTarget;
|
2020-12-16 00:23:31 +01:00
|
|
|
//to be moved to students provider
|
2020-12-12 20:32:09 +01:00
|
|
|
changeStudent(target.id);
|
2020-12-16 00:23:31 +01:00
|
|
|
changeSelectedStudent(Number(target.id));
|
2021-01-05 23:46:51 +01:00
|
|
|
|
2020-12-10 21:26:09 +01:00
|
|
|
handleCloseDropdown();
|
2020-12-05 18:32:37 +01:00
|
|
|
};
|
|
|
|
|
2020-08-17 23:56:34 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const filterCourses = (input: string) => {
|
2020-11-21 04:02:38 +01:00
|
|
|
const filteredCourses = courses.filter(
|
2020-10-22 23:04:00 +02:00
|
|
|
({ name }) =>
|
|
|
|
name
|
|
|
|
.toLowerCase()
|
|
|
|
.normalize('NFD')
|
|
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
|
|
.includes(
|
|
|
|
input
|
|
|
|
.toLowerCase()
|
|
|
|
.normalize('NFD')
|
|
|
|
.replace(/[\u0300-\u036f]/g, ''),
|
2020-11-21 04:02:38 +01:00
|
|
|
) && !basketNames.includes(name),
|
2020-08-17 23:56:34 +02:00
|
|
|
);
|
|
|
|
setFilteredCourses(filteredCourses);
|
|
|
|
};
|
|
|
|
filterCourses(input);
|
2020-11-22 18:22:07 +01:00
|
|
|
}, [basketNames, courses, input]);
|
2020-08-17 23:56:34 +02:00
|
|
|
|
2020-12-05 00:16:59 +01:00
|
|
|
useEffect(() => {
|
|
|
|
const filterUsers = (input: string) => {
|
2020-12-12 19:57:16 +01:00
|
|
|
const filteredUsers = students.filter(({ name, surname }) =>
|
2020-12-05 18:06:26 +01:00
|
|
|
(name + surname)
|
|
|
|
.toLowerCase()
|
|
|
|
.normalize('NFD')
|
|
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
|
|
.includes(
|
|
|
|
input
|
|
|
|
.toLowerCase()
|
|
|
|
.normalize('NFD')
|
|
|
|
.replace(/[\u0300-\u036f]/g, ''),
|
|
|
|
),
|
2020-12-05 00:16:59 +01:00
|
|
|
);
|
2020-12-12 19:57:16 +01:00
|
|
|
setFilteredStudents(filteredUsers);
|
2020-12-05 00:16:59 +01:00
|
|
|
};
|
|
|
|
filterUsers(input);
|
2020-12-12 19:57:16 +01:00
|
|
|
}, [students, input]);
|
2020-12-05 00:16:59 +01:00
|
|
|
|
2020-08-17 23:56:34 +02:00
|
|
|
return (
|
2020-11-08 13:40:11 +01:00
|
|
|
<DropdownContainer>
|
2020-11-02 00:15:30 +01:00
|
|
|
{open && (
|
2020-11-08 13:40:11 +01:00
|
|
|
<>
|
2020-12-05 18:06:26 +01:00
|
|
|
{selectedOption === 'studenci' ? (
|
|
|
|
<div>
|
2020-12-16 00:23:31 +01:00
|
|
|
{filteredStudents.map(({ email, id }, index) => (
|
2020-12-05 18:32:37 +01:00
|
|
|
<CourseContainer key={index} id={id.toString()} onClick={onUserClick}>
|
2020-12-16 00:23:31 +01:00
|
|
|
<p>{email}</p>
|
2020-12-05 18:06:26 +01:00
|
|
|
</CourseContainer>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
{filteredCourses.map(({ name, id }, index) => (
|
|
|
|
<CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
|
|
|
|
<p>{name} </p>
|
|
|
|
</CourseContainer>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)}
|
2020-11-08 13:40:11 +01:00
|
|
|
</>
|
2020-11-02 00:15:30 +01:00
|
|
|
)}
|
2020-11-08 13:40:11 +01:00
|
|
|
</DropdownContainer>
|
2020-08-17 23:56:34 +02:00
|
|
|
);
|
2020-11-21 04:02:38 +01:00
|
|
|
};
|