modal setup

This commit is contained in:
Maciek Głowacki
2021-01-18 00:57:01 +01:00
parent 429c58befb
commit 8b563d3e70
4 changed files with 259 additions and 18 deletions

View File

@ -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>