modal setup

2021-01-18 00:57:01 +01:00 · 2021-01-18 00:57:01 +01:00 · 8b563d3e70
commit 8b563d3e70
parent 429c58befb
4 changed files with 259 additions and 18 deletions
--- a/src/components/DropdownModal.tsx
+++ 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<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>
+  );
+};
--- 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<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
+                <FormControl>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="assignments-groups"
+                    value={selectedAssignmentsGroup}
+                    onChange={handleSelectedAssignmentsGroupChange}
                    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>
+                </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>
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@ -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,11 +172,14 @@ 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);
    }
@ -296,6 +305,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
        selectBasketNames,
        selectBasketCourses,
        selectBasketCourseGroups,
+        selectGroups,
        getNewestStudentTimetable,
        changeStudent,
        getStudentTimetablesHistory,
--- 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"