From 8b563d3e70e36b5f7d07d354f64883666e4287af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Mon, 18 Jan 2021 00:57:01 +0100 Subject: [PATCH] modal setup --- src/components/DropdownModal.tsx | 111 ++++++++++++++++++++++++ src/components/Transfer.tsx | 139 ++++++++++++++++++++++++++++--- src/contexts/CoursesProvider.tsx | 22 +++-- yarn.lock | 5 ++ 4 files changed, 259 insertions(+), 18 deletions(-) create mode 100644 src/components/DropdownModal.tsx diff --git a/src/components/DropdownModal.tsx b/src/components/DropdownModal.tsx new file mode 100644 index 0000000..c3df388 --- /dev/null +++ b/src/components/DropdownModal.tsx @@ -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>([]); + + 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 ( + + {open && ( + <> + { +
+ {filteredCourses.map(({ name, id }, index) => ( + +

{name}

+ + ))} +
+ } + + )} + + ); +}; diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 18f02a7..ac30265 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -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) => 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) => { + 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>([]); + const [selectedAssignmentsGroup, setSelectedAssignmentsGroup] = useState(''); + const [selectedGroup, setSelectedGroup] = useState(''); + const [exchanges, setExchanges] = useState(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) => 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 (
@@ -83,22 +160,60 @@ export const Transfer = ({ handleClose, isOpen }: TransferProps) => { Oddam - {' '} - + + + Przyjmę - {' '} - + {assignmentsGroups.map((el) => { + return ( + + {el.name} + + ); + })} + */} + { + handleShowDropdown(); + }} + /> + diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 89bc8df..6462757 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -33,6 +33,7 @@ interface CourseContext { selectBasketNames: () => Array; selectBasketCourses: () => Array; selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined }; + selectGroups: () => Array; getNewestStudentTimetable: (studentId: string) => void; getStudentTimetablesHistory: (studentId: string) => void; changeDataLoading: (isLoading: boolean) => void; @@ -99,7 +100,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { }, [] as Array); }; - 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; + }; + 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, diff --git a/yarn.lock b/yarn.lock index 08f4e6a..ddd6e73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"