From f9fa6412ef9153064963c122d116be3028f7bfdb Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Tue, 19 Jan 2021 16:10:43 +0100 Subject: [PATCH] downloading file --- src/assets/logout.svg | 51 +++++++ src/assets/switch.svg | 1 + src/assets/transfer.svg | 1 + src/components/Administrator.tsx | 121 +++++++++++---- src/components/Topbar.tsx | 12 +- src/components/Transfer.tsx | 245 +++++++++++++++++++++---------- 6 files changed, 315 insertions(+), 116 deletions(-) create mode 100644 src/assets/logout.svg create mode 100644 src/assets/switch.svg create mode 100644 src/assets/transfer.svg diff --git a/src/assets/logout.svg b/src/assets/logout.svg new file mode 100644 index 0000000..16d4527 --- /dev/null +++ b/src/assets/logout.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/switch.svg b/src/assets/switch.svg new file mode 100644 index 0000000..7884f2c --- /dev/null +++ b/src/assets/switch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/transfer.svg b/src/assets/transfer.svg new file mode 100644 index 0000000..fa14aa1 --- /dev/null +++ b/src/assets/transfer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Administrator.tsx b/src/components/Administrator.tsx index dcc802e..1b74fea 100644 --- a/src/components/Administrator.tsx +++ b/src/components/Administrator.tsx @@ -1,10 +1,12 @@ import { format } from 'date-fns'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useContext } from 'react'; import styled from 'styled-components/macro'; import { axiosInstance } from '../utils/axiosInstance'; import { useSnackbar } from 'notistack'; import CloseIcon from '@material-ui/icons/Close'; import { SyncLoader } from 'react-spinners'; +import { CASContext } from '../contexts/CASProvider'; +import LogoutIcon from '../assets/logout.svg'; const StyledCloseIcon = styled(CloseIcon)` color: #000000; @@ -14,6 +16,18 @@ const StyledCloseIcon = styled(CloseIcon)` } `; +const Icon = styled.img` + width: 40px; + margin-left: 40px; + cursor: pointer; + @media only screen and (max-width: 670px) { + width: 35px; + } + position:absolute; + top:10px; + right:10px; +`; + const SaveButton = styled.button` display: flex; justify-content: center; @@ -80,7 +94,22 @@ const Form = styled.form` } `; +const DownloadSection = styled.div` + flex: 1; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + input { + padding: 5px; + margin-top: 10px; + margin-bottom: 10px; + width: 210px; + } +`; export const Administrator = () => { + const { logout } = useContext(CASContext)!; const { enqueueSnackbar } = useSnackbar(); const { closeSnackbar } = useSnackbar(); @@ -98,6 +127,27 @@ export const Administrator = () => { const [endSecondDate, setEndSecondDate] = useState(null); const [loading, setLoading] = useState(false); + const downloadFile = async () => { + + const {data} = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/export/csv`,{responseType:"blob"}); + + console.log("123",xd); + + const downloadUrl = window.URL.createObjectURL(new Blob([data])); + + const link = document.createElement('a'); + + link.href = downloadUrl; + + link.setAttribute('download', 'file.csv'); + + document.body.appendChild(link); + + link.click(); + + link.remove(); + + }; const uploadFile = async (event: React.FormEvent) => { const action = (key: any) => ( @@ -152,51 +202,60 @@ export const Administrator = () => { setLoading(false); }; + const xd = true; + return ( + plan na plan -
-
-
Start pierwszej tury:
{' '} + {xd !== true ? ( +
- setStartFirstDate(e.target.valueAsDate)} /> +
Start pierwszej tury:
{' '} +
+ setStartFirstDate(e.target.valueAsDate)} /> +
+
Koniec pierwszej tury:
{' '} +
+ setEndFirstDate(e.target.valueAsDate)} /> +
-
Koniec pierwszej tury:
{' '}
- setEndFirstDate(e.target.valueAsDate)} /> +
Start drugiej tury:
{' '} +
+ setStartSecondDate(e.target.valueAsDate)} /> +
-
-
-
Start drugiej tury:
{' '}
- setStartSecondDate(e.target.valueAsDate)} /> +
Koniec drugiej tury:
{' '} +
+ setEndSecondDate(e.target.valueAsDate)} /> +
-
-
-
Koniec drugiej tury:
{' '}
- setEndSecondDate(e.target.valueAsDate)} /> + { + if (e.target.files && e.target.files[0]) { + const file = e.target.files[0]; + setSelectedFile(file); + } + }} + />
-
-
- { - if (e.target.files && e.target.files[0]) { - const file = e.target.files[0]; - setSelectedFile(file); - } - }} - /> -
-
- {loading === false ? 'Zapisz' : } -
-
+
+ {loading === false ? 'Zapisz' : } +
+ + ) : ( + + Pobierz dane.csv + + )} ); diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 6675357..38c2bd9 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -1,6 +1,7 @@ import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext, useRef } from 'react'; import { ReactComponent as Close } from '../assets/close.svg'; -import ProfileIcon from '../assets/account.svg'; +import LogoutIcon from '../assets/logout.svg'; +import TransferIcon from '../assets/transfer.svg'; import { Profile } from './Profile'; import { Dropdown } from './Dropdown'; import styled from 'styled-components/macro'; @@ -113,7 +114,7 @@ const IconWrapper = styled.div` const Icon = styled.img` width: 40px; - margin: 5px; + margin-left: 40px; cursor: pointer; @media only screen and (max-width: 670px) { width: 35px; @@ -137,6 +138,7 @@ interface TopbarProps { } export default function ({ handleTransfer }: TopbarProps) { + const { logout } = useContext(CASContext)!; const { selectedStudent } = useContext(studentsContext)!; const { role } = useContext(CASContext)!; const [clearInput, setClearInput] = useState(false); @@ -213,10 +215,10 @@ export default function ({ handleTransfer }: TopbarProps) { {selectedStudent?.email.replace(/@st.amu.edu.pl/, '')} {/* Maciej Głowacki */} - + {/* */} - - + + {/* */} ); diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 276c72d..546b39c 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -10,6 +10,7 @@ import { coursesContext } from '../contexts/CoursesProvider'; import { Dropdown } from './Dropdown'; import { DropdownModal } from './DropdownModal'; import { dayMapping } from '../constants'; +import TransferIcon from '../assets/switch.svg'; interface TransferProps { handleClose: (e: React.MouseEvent) => void; @@ -25,30 +26,11 @@ const useStyles = makeStyles({ }, }); -const SaveButton = styled.div` - display: flex; - justify-content: center; - align-items: center; - user-select: none; - background-color: #43a047; - border-radius: 10px; - cursor: pointer; - height: 40px; - margin-bottom: 10px; - &:hover { - color: #ffffff; - box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24); - } - - &:active { - background-color: #54c457; - } - - box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); -`; const TransferStyled = styled.div` display: flex; - flex-direction: row; + flex-direction: column; + justify-content: center; + align-items: center; outline: none; min-width: 35%; height: 70%; @@ -57,22 +39,29 @@ const TransferStyled = styled.div` box-shadow: 0px 0px 0px 4px #006b96; margin: 0 auto; border-radius: 5px; - text-transform: uppercase; - letter-spacing: 0.3ch; + letter-spacing: 0.2ch; +`; + +const InputWrapper = styled.div` + display: flex; + flex-direction: row; + flex: 1; `; const TransferGiveStyled = styled.div` - flex-grow: 1; + flex: 1; display: flex; flex-direction: column; align-items: center; + text-transform: uppercase; `; const TransferReceiveStyled = styled.div` - flex-grow: 1; + flex: 1; display: flex; flex-direction: column; align-items: center; + text-transform: uppercase; `; const TransferTextStyled = styled.div` @@ -91,8 +80,80 @@ const TransferInputStyled = styled.div` font-weight: bold; text-align: center; } + text-transform: none; `; +const SaveWrapper = styled.div` + margin-top:40px; +`; + +const SaveButton = styled.div` + display: flex; + justify-content: center; + align-items: center; + user-select: none; + background-color: #43a047; + border-radius: 10px; + cursor: pointer; + height: 40px; + width: 150px; + font-size:12px; + letter-spacing: 0.1ch; + line-height: normal; + &:hover { + color: #ffffff; + box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24); + } + + &:active { + background-color: #54c457; + } + + text-transform: uppercase; + box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); +`; + +const ExchangesWrapper = styled.div` + flex:5; + overflow-y: scroll; + width:100%; + ::-webkit-scrollbar-track { + border-radius: 10px; + } + ::-webkit-scrollbar { + width: 5px; + border-style: none; + } + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #4b4b4b; + } +`; + +const ExchangesRow = styled.div` + display:flex; + flex-direction:row; + align-items: center; + justify-content: center; +`; + +const Icon = styled.img` + width: 20px; + cursor: pointer; +`; + +const Exchange = styled.div` + background-color: #b5d2e0; + border-radius: 10px; + width:200px; + margin:10px; + height:50px; + display:flex; + + align-items: center; + justify-content: center; +` + const deleteExchange = async (id: number) => { try { const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`); @@ -102,19 +163,6 @@ const deleteExchange = async (id: number) => { } }; -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({ assignment: groupsIds[0], group: groupsIds[1] }), - ); - console.log('create exchange response is: ', response); - } catch (e) { - console.log(e); - } -}; - export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { const { basket, selectBasketCourses } = useContext(coursesContext)!; // const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.name), []); @@ -130,6 +178,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { const [groups, setGroups] = useState([]); const [selectedGroup, setSelectedGroup] = useState(''); const [exchanges, setExchanges] = useState(null); + const [save, setSave] = useState(false); // const allGroups const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => { console.log('it is: ', event.target.value); @@ -166,10 +215,12 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/all`); console.log('exchanges: ', data); setExchanges(data); + console.log('123', exchanges); } catch (e) { console.log(e); } }; + const getAssignmentsGroups = async () => { try { const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/assignments`); @@ -183,7 +234,21 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { console.log('open changed'); getExchanges(); getAssignmentsGroups(); - }, [isTransferOpen]); + }, [isTransferOpen,save]); + + 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({ assignment: groupsIds[0], group: groupsIds[1] }), + ); + console.log('create exchange response is: ', response); + } catch (e) { + console.log(e); + } + setSave(!save); + }; return (
@@ -196,57 +261,77 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { > - - Oddam - - + + + Oddam + + + + + + + + {' '} + { + createExchange([selectedAssignmentsClasses.id, selectedGroup.id]); + }} + > + Zaproponuj wymianę + + + + Przyjmę + - - - - - Przyjmę - - - - - { - createExchange([selectedAssignmentsClasses.id, selectedGroup.id]); - }} - > - WYŚLIJ - + + + + + + {exchanges ? ( + exchanges.map((name: any) => ( + + + {name.desiredGroup.id} {name.ownedAssignment.id} + + + )) + ) : ( +
+ )} +