downloading file

src/assets/logout.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M255.15,468.625H63.787c-11.737,0-21.262-9.526-21.262-21.262V64.638c0-11.737,9.526-21.262,21.262-21.262H255.15
+			c11.758,0,21.262-9.504,21.262-21.262S266.908,0.85,255.15,0.85H63.787C28.619,0.85,0,29.47,0,64.638v382.724
+			c0,35.168,28.619,63.787,63.787,63.787H255.15c11.758,0,21.262-9.504,21.262-21.262
+			C276.412,478.129,266.908,468.625,255.15,468.625z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M505.664,240.861L376.388,113.286c-8.335-8.25-21.815-8.143-30.065,0.213s-8.165,21.815,0.213,30.065l92.385,91.173
+			H191.362c-11.758,0-21.262,9.504-21.262,21.262c0,11.758,9.504,21.263,21.262,21.263h247.559l-92.385,91.173
+			c-8.377,8.25-8.441,21.709-0.213,30.065c4.167,4.21,9.653,6.336,15.139,6.336c5.401,0,10.801-2.041,14.926-6.124l129.276-127.575
+			c4.04-3.997,6.336-9.441,6.336-15.139C512,250.302,509.725,244.88,505.664,240.861z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/switch.svg

@@ -0,0 +1 @@
+<svg id="bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m23.25 15c-.414 0-.75-.336-.75-.75 0-2.895-2.355-5.25-5.25-5.25h-7.25v3.25c0 .66-.794.994-1.268.542l-5.5-5.25c-.148-.141-.232-.337-.232-.542s.084-.401.232-.542l5.5-5.25c.476-.454 1.268-.116 1.268.542v3.25h6.25c4.273 0 7.75 3.477 7.75 7.75v1.5c0 .414-.336.75-.75.75z"/><path d="m14 22.25v-3.25h-6.25c-4.273 0-7.75-3.477-7.75-7.75v-1.5c0-.414.336-.75.75-.75s.75.336.75.75c0 2.895 2.355 5.25 5.25 5.25h7.25v-3.25c0-.657.791-.998 1.268-.542l5.5 5.25c.148.141.232.337.232.542s-.084.401-.232.542l-5.5 5.25c-.477.454-1.268.116-1.268-.542z"/></svg>

src/assets/transfer.svg

@@ -0,0 +1 @@
+<svg id="bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m20.25 11c-.414 0-.75-.336-.75-.75v-4.5c0-.689-.561-1.25-1.25-1.25h-7.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h7.5c1.517 0 2.75 1.233 2.75 2.75v4.5c0 .414-.336.75-.75.75z"/><path d="m20.25 11c-.192 0-.384-.073-.53-.22l-1.75-1.75c-.214-.214-.279-.537-.163-.817s.39-.463.693-.463h3.5c.303 0 .577.183.693.463s.052.603-.163.817l-1.75 1.75c-.146.147-.338.22-.53.22z"/><path d="m11.25 21h-5.5c-1.517 0-2.75-1.233-2.75-2.75v-4.5c0-.414.336-.75.75-.75s.75.336.75.75v4.5c0 .689.561 1.25 1.25 1.25h5.5c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m5.5 16.25h-3.5c-.303 0-.577-.183-.693-.463s-.052-.603.163-.817l1.75-1.75c.293-.293.768-.293 1.061 0l1.75 1.75c.214.214.279.537.163.817s-.391.463-.694.463z"/><circle cx="5" cy="2.5" r="2.5"/><path d="m7.25 6h-4.5c-1.517 0-2.75 1.233-2.75 2.75v.5c0 .414.336.75.75.75h8.5c.414 0 .75-.336.75-.75v-.5c0-1.517-1.233-2.75-2.75-2.75z"/><path d="m19 19c-1.378 0-2.5-1.122-2.5-2.5s1.122-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.122 2.5-2.5 2.5z"/><path d="m23.25 24h-8.5c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h4.5c1.517 0 2.75 1.233 2.75 2.75v.5c0 .414-.336.75-.75.75z"/></svg>

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<Date | null>(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<HTMLFormElement>) => {
     const action = (key: any) => (
@@ -152,13 +202,17 @@ export const Administrator = () => {
     setLoading(false);
   };
 
+  const xd = true;
+
   return (
     <AdministratorWrapper>
+                  <Icon alt="logout" src={LogoutIcon} onClick={logout}/>
       <Wrap>
         <LogoWrapper>
           <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
           <Text> plan na plan </Text>
         </LogoWrapper>
+        {xd !== true ? (
           <Form onSubmit={uploadFile}>
             <div>
               <div>Start pierwszej tury:</div>{' '}
@@ -197,6 +251,11 @@ export const Administrator = () => {
               <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
             </div>
           </Form>
+        ) : (
+          <DownloadSection>
+            <SaveButton onClick={downloadFile}>Pobierz dane.csv</SaveButton>
+          </DownloadSection>
+        )}
       </Wrap>
     </AdministratorWrapper>
   );

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>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
 
         {/* <Text>Maciej Głowacki</Text> */}
-        <Icon alt="transfer" src={ProfileIcon} onClick={handleTransfer} />
+        <Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
         {/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
-        <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
+        <Icon alt="logout" src={LogoutIcon} onClick={logout} />
-        <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
+        {/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
       </IconWrapper>
     </Topbar>
   );

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<HTMLButtonElement, 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.2ch;
-  letter-spacing: 0.3ch;
+`;
+
+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<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({ 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<any>([]);
   const [selectedGroup, setSelectedGroup] = useState<any>('');
   const [exchanges, setExchanges] = useState<any>(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<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({ assignment: groupsIds[0], group: groupsIds[1] }),
+      );
+      console.log('create exchange response is: ', response);
+    } catch (e) {
+      console.log(e);
+    }
+    setSave(!save);
+  };
 
   return (
     <div>
@@ -196,6 +261,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
       >
         <Fade in={isTransferOpen}>
           <TransferStyled>
+            <InputWrapper>
               <TransferGiveStyled>
                 <TransferTextStyled>Oddam</TransferTextStyled>
                 <TransferInputStyled>
@@ -210,8 +276,9 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
                     >
                       {assignmentsClasses.map((el) => {
                         return (
-                        <MenuItem key={el.id} value={el}>
+                          <MenuItem key={el.id} value={el} >
-                          {`${el.name}  (${dayMapping[el.day]} ${el.time} ${el.endTime})`}
+                            {`${el.name}  `}
+                            <br></br>{`(${dayMapping[el.day]} ${el.time} ${el.endTime})`}
                           </MenuItem>
                         );
                       })}
@@ -219,6 +286,16 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
                   </FormControl>
                 </TransferInputStyled>
               </TransferGiveStyled>
+              <SaveWrapper>
+              {' '}
+              <SaveButton
+                onClick={() => {
+                  createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
+                }}
+              >
+                Zaproponuj wymianę
+              </SaveButton>
+            </SaveWrapper>
               <TransferReceiveStyled>
                 <TransferTextStyled>Przyjmę</TransferTextStyled>
                 <TransferInputStyled>
@@ -240,13 +317,21 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
                   </Select>
                 </TransferInputStyled>
               </TransferReceiveStyled>
-            <SaveButton
+            </InputWrapper>
-              onClick={() => {
+            
-                createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
+            <ExchangesWrapper>
-              }}
+            {exchanges ? (
-            >
+              exchanges.map((name: any) => (
-              WYŚLIJ
+                <ExchangesRow>
-            </SaveButton>
+                  <Exchange>
+                    {name.desiredGroup.id} </Exchange> <Icon alt="transfer" src={TransferIcon} /><Exchange>{name.ownedAssignment.id}
+                  </Exchange>
+                </ExchangesRow>
+              ))
+            ) : (
+              <div></div>
+            )}
+            </ExchangesWrapper>
           </TransferStyled>
         </Fade>
       </Modal>