modal setup
This commit is contained in:
Maciek Głowacki
parent
429c58befb
commit
8b563d3e70
|
|
@ -0,0 +1,111 @@
|
|||
import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import { studentsContext } from '../contexts/StudentsProvider';
|
||||
import { Course, Student } from '../types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DropdownContainer = styled.div`
|
||||
position: relative;
|
||||
z-index: 99999999;
|
||||
max-height: 396px;
|
||||
border-radius: 3px;
|
||||
overflow-y: auto;
|
||||
opacity: 0.97;
|
||||
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f2f4f7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: #f2f4f7;
|
||||
width: 5px;
|
||||
border-style: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #4b4b4b;
|
||||
}
|
||||
`;
|
||||
|
||||
const CourseContainer = styled.div`
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
background-color: #f2f4f7;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
scroll-snap-align: end;
|
||||
:hover {
|
||||
background-color: #eceef4;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
interface DropdownProps {
|
||||
open: boolean;
|
||||
input: string;
|
||||
handleCloseDropdown: () => void;
|
||||
handleSelectedGroupChange: (event: React.ChangeEvent<{ value: unknown }>) => void;
|
||||
selectedOption: string;
|
||||
}
|
||||
|
||||
export const DropdownModal = ({
|
||||
open,
|
||||
input,
|
||||
handleCloseDropdown,
|
||||
selectedOption,
|
||||
handleSelectedGroupChange,
|
||||
}: DropdownProps) => {
|
||||
const { courses, selectBasketNames } = useContext(coursesContext)!;
|
||||
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
|
||||
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
|
||||
|
||||
const onCourseClick = (event: MouseEvent) => {
|
||||
const target = event.currentTarget;
|
||||
if (target.id && target.textContent) {
|
||||
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
|
||||
|
||||
handleSelectedGroupChange((course as unknown) as any);
|
||||
handleCloseDropdown();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const filterCourses = (input: string) => {
|
||||
const filteredCourses = courses.filter(
|
||||
({ name }) =>
|
||||
name
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.includes(
|
||||
input
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, ''),
|
||||
) && !basketNames.includes(name),
|
||||
);
|
||||
setFilteredCourses(filteredCourses);
|
||||
};
|
||||
filterCourses(input);
|
||||
}, [basketNames, courses, input]);
|
||||
|
||||
return (
|
||||
<DropdownContainer>
|
||||
{open && (
|
||||
<>
|
||||
{
|
||||
<div>
|
||||
{filteredCourses.map(({ name, id }, index) => (
|
||||
<CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
|
||||
<p>{name} </p>
|
||||
</CourseContainer>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)}
|
||||
</DropdownContainer>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
import React from 'react';
|
||||
import React, { ChangeEvent, useContext, useEffect, useState } from 'react';
|
||||
import Modal from '@material-ui/core/Modal';
|
||||
import Fade from '@material-ui/core/Fade';
|
||||
import Input from '@material-ui/core/Input';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import styled from 'styled-components';
|
||||
import { FormControl, MenuItem, Select, useControlled, useEventCallback } from '@material-ui/core';
|
||||
import { axiosInstance } from '../utils/axiosInstance';
|
||||
import { Group } from '../types';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import { Dropdown } from './Dropdown';
|
||||
import { DropdownModal } from './DropdownModal';
|
||||
|
||||
interface TransferProps {
|
||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
|
|
@ -19,6 +24,20 @@ const useStyles = makeStyles({
|
|||
},
|
||||
});
|
||||
|
||||
const Input = styled.input`
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: #f1f2f5;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin-left: 5px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const TransferStyled = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -66,8 +85,66 @@ const TransferInputStyled = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const deleteExchange = async (id: number) => {
|
||||
try {
|
||||
const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);
|
||||
console.log('delete exchange response: ', response);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const createExchange = async (groupsIds: Array<number>) => {
|
||||
console.log('groups ids are: ', groupsIds);
|
||||
try {
|
||||
const response = await axiosInstance.post(
|
||||
`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange`,
|
||||
JSON.stringify(groupsIds),
|
||||
);
|
||||
console.log('create exchange response is: ', response);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
|
||||
const { selectGroups } = useContext(coursesContext)!;
|
||||
const classes = useStyles();
|
||||
const groups = selectGroups();
|
||||
const [input, setInput] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [assignmentsGroups, setAssignmentsGroups] = useState<Array<any>>([]);
|
||||
const [selectedAssignmentsGroup, setSelectedAssignmentsGroup] = useState<any>('');
|
||||
const [selectedGroup, setSelectedGroup] = useState<any>('');
|
||||
const [exchanges, setExchanges] = useState<any>(null);
|
||||
// const allGroups
|
||||
const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
console.log('it is: ', event.target.value);
|
||||
setSelectedAssignmentsGroup(event.target.value);
|
||||
};
|
||||
|
||||
const handleSelectedGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
setSelectedGroup(event.target.value as any);
|
||||
};
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
||||
const handleShowDropdown = () => setOpen(true);
|
||||
|
||||
const handleCloseDropdown = () => setOpen(false);
|
||||
useEffect(() => {
|
||||
const getExchanges = async () => {
|
||||
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/all`);
|
||||
console.log('exchanges: ', data);
|
||||
setExchanges(data);
|
||||
};
|
||||
const getAssignmentsGroups = async () => {
|
||||
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/assignments`);
|
||||
console.log('assignments: ', data);
|
||||
setAssignmentsGroups(data);
|
||||
};
|
||||
getExchanges();
|
||||
getAssignmentsGroups();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -83,22 +160,60 @@ export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
|
|||
<TransferGiveStyled>
|
||||
<TransferTextStyled>Oddam</TransferTextStyled>
|
||||
<TransferInputStyled>
|
||||
{' '}
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ 'aria-label': 'description' }}
|
||||
className="top-bar__input-field"
|
||||
/>
|
||||
<FormControl>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="assignments-groups"
|
||||
value={selectedAssignmentsGroup}
|
||||
onChange={handleSelectedAssignmentsGroupChange}
|
||||
placeholder="Wyszukaj..."
|
||||
style={{ width: '200px' }}
|
||||
>
|
||||
{assignmentsGroups.map((el) => {
|
||||
return (
|
||||
<MenuItem key={el.id} value={el}>
|
||||
{el.name}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</TransferInputStyled>
|
||||
</TransferGiveStyled>
|
||||
<TransferReceiveStyled>
|
||||
<TransferTextStyled>Przyjmę</TransferTextStyled>
|
||||
<TransferInputStyled>
|
||||
{' '}
|
||||
<Input
|
||||
{/* <Select
|
||||
multiple
|
||||
labelId="demo-simple-select-label"
|
||||
id="assignments-groups"
|
||||
value={selectedGroups}
|
||||
onChange={handleSelectedGroupsChange}
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ 'aria-label': 'description' }}
|
||||
className="top-bar__input-field"
|
||||
style={{ width: '200px' }}
|
||||
>
|
||||
{assignmentsGroups.map((el) => {
|
||||
return (
|
||||
<MenuItem key={el.id} value={el}>
|
||||
{el.name}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Select> */}
|
||||
<Input
|
||||
placeholder={`Wyszukaj przedmioty...`}
|
||||
onChange={handleChange}
|
||||
value={input}
|
||||
onFocus={() => {
|
||||
handleShowDropdown();
|
||||
}}
|
||||
/>
|
||||
<DropdownModal
|
||||
handleSelectedGroupChange={handleSelectedGroupChange}
|
||||
open={open}
|
||||
input={input}
|
||||
handleCloseDropdown={handleCloseDropdown}
|
||||
selectedOption={'przedmioty'}
|
||||
/>
|
||||
</TransferInputStyled>
|
||||
</TransferReceiveStyled>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ interface CourseContext {
|
|||
selectBasketNames: () => Array<string>;
|
||||
selectBasketCourses: () => Array<Course>;
|
||||
selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
|
||||
selectGroups: () => Array<Group>;
|
||||
getNewestStudentTimetable: (studentId: string) => void;
|
||||
getStudentTimetablesHistory: (studentId: string) => void;
|
||||
changeDataLoading: (isLoading: boolean) => void;
|
||||
|
|
@ -99,7 +100,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||
}, [] as Array<SchedulerEvent>);
|
||||
};
|
||||
|
||||
|
||||
const selectBasketCourseGroups = (courseId: number) => {
|
||||
const course = basket.find(({ id }) => id === courseId);
|
||||
if (course !== undefined) {
|
||||
|
|
@ -109,6 +109,12 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||
}
|
||||
};
|
||||
|
||||
const selectGroups = () => {
|
||||
const groups = [];
|
||||
console.log('courses are: ', courses);
|
||||
return (courses as unknown) as Array<Group>;
|
||||
};
|
||||
|
||||
const changeHoveredGroup = (group: Group | null) => setHoveredGroup(group);
|
||||
|
||||
const changeDataLoading = (isLoading: boolean) => setIsDataLoading(isLoading);
|
||||
|
|
@ -166,14 +172,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||
|
||||
const changeGroupInBasket = (choosenGroup: any, courseId: number) => {
|
||||
const basketCourse = basket.filter((course) => course.id === courseId)[0];
|
||||
if (choosenGroup.lecture && choosenGroup.classes)
|
||||
{
|
||||
const prev = choosenGroup.prev==="lecture"?choosenGroup.lecture : choosenGroup.classes
|
||||
if (choosenGroup.lecture && choosenGroup.classes) {
|
||||
const prev = choosenGroup.prev === 'lecture' ? choosenGroup.lecture : choosenGroup.classes;
|
||||
setBasket(
|
||||
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup.lecture, classes:choosenGroup.classes } : basket)),
|
||||
basket.map((basket) =>
|
||||
basket.id === basketCourse.id
|
||||
? { ...basket, lecture: choosenGroup.lecture, classes: choosenGroup.classes }
|
||||
: basket,
|
||||
),
|
||||
);
|
||||
changeHoveredGroup(prev);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => {
|
||||
|
|
@ -296,6 +305,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||
selectBasketNames,
|
||||
selectBasketCourses,
|
||||
selectBasketCourseGroups,
|
||||
selectGroups,
|
||||
getNewestStudentTimetable,
|
||||
changeStudent,
|
||||
getStudentTimetablesHistory,
|
||||
|
|
|
|||
|
|
@ -4130,6 +4130,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
|
|||
whatwg-mimetype "^2.2.0"
|
||||
whatwg-url "^7.0.0"
|
||||
|
||||
date-fns@^2.16.1:
|
||||
version "2.16.1"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
|
||||
integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
|
||||
|
||||
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue