modal setup
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user