downloading file

2021-01-19 16:10:43 +01:00
parent 26a54912cd
commit f9fa6412ef
6 changed files with 315 additions and 116 deletions
--- 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<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,51 +202,60 @@ 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>
-        <Form onSubmit={uploadFile}>
-          <div>
-            <div>Start pierwszej tury:</div>{' '}
+        {xd !== true ? (
+          <Form onSubmit={uploadFile}>
            <div>
-              <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+              <div>Start pierwszej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+              </div>
+              <div>Koniec pierwszej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+              </div>
            </div>
-            <div>Koniec pierwszej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+              <div>Start drugiej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+              </div>
            </div>
-          </div>
-          <div>
-            <div>Start drugiej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+              <div>Koniec drugiej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
+              </div>
            </div>
-          </div>
-          <div>
-            <div>Koniec drugiej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
+              <input
+                type="file"
+                onChange={(e) => {
+                  if (e.target.files && e.target.files[0]) {
+                    const file = e.target.files[0];
+                    setSelectedFile(file);
+                  }
+                }}
+              />
            </div>
-          </div>
-          <div>
-            <input
-              type="file"
-              onChange={(e) => {
-                if (e.target.files && e.target.files[0]) {
-                  const file = e.target.files[0];
-                  setSelectedFile(file);
-                }
-              }}
-            />
-          </div>
-          <div>
-            <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
-          </div>
-        </Form>
+            <div>
+              <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
+            </div>
+          </Form>
+        ) : (
+          <DownloadSection>
+            <SaveButton onClick={downloadFile}>Pobierz dane.csv</SaveButton>
+          </DownloadSection>
+        )}
      </Wrap>
    </AdministratorWrapper>
  );
--- 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>{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} />
-        <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
+        <Icon alt="logout" src={LogoutIcon} onClick={logout} />
+        {/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
      </IconWrapper>
    </Topbar>
  );
--- 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<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.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<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,57 +261,77 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
      >
        <Fade in={isTransferOpen}>
          <TransferStyled>
-            <TransferGiveStyled>
-              <TransferTextStyled>Oddam</TransferTextStyled>
-              <TransferInputStyled>
-                <FormControl>
+            <InputWrapper>
+              <TransferGiveStyled>
+                <TransferTextStyled>Oddam</TransferTextStyled>
+                <TransferInputStyled>
+                  <FormControl>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      id="assignments-groups"
+                      value={selectedAssignmentsClasses}
+                      onChange={handleSelectedAssignmentsGroupChange}
+                      placeholder="Wyszukaj..."
+                      style={{ width: '200px' }}
+                    >
+                      {assignmentsClasses.map((el) => {
+                        return (
+                          <MenuItem key={el.id} value={el} >
+                            {`${el.name}  `}
+                            <br></br>{`(${dayMapping[el.day]} ${el.time} ${el.endTime})`}
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                </TransferInputStyled>
+              </TransferGiveStyled>
+              <SaveWrapper>
+              {' '}
+              <SaveButton
+                onClick={() => {
+                  createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
+                }}
+              >
+                Zaproponuj wymianę
+              </SaveButton>
+            </SaveWrapper>
+              <TransferReceiveStyled>
+                <TransferTextStyled>Przyjmę</TransferTextStyled>
+                <TransferInputStyled>
                  <Select
                    labelId="demo-simple-select-label"
                    id="assignments-groups"
-                    value={selectedAssignmentsClasses}
-                    onChange={handleSelectedAssignmentsGroupChange}
+                    value={selectedGroup}
+                    onChange={handleGroupsChange}
                    placeholder="Wyszukaj..."
                    style={{ width: '200px' }}
                  >
-                    {assignmentsClasses.map((el) => {
+                    {groups.map((el: any, index: number) => {
                      return (
-                        <MenuItem key={el.id} value={el}>
-                          {`${el.name}  (${dayMapping[el.day]} ${el.time} ${el.endTime})`}
+                        <MenuItem key={index} value={el}>
+                          {`${selectedAssignmentsClasses.name} ${el.time} ${el.endTime} ${dayMapping[el.day]}`}
                        </MenuItem>
                      );
                    })}
                  </Select>
-                </FormControl>
-              </TransferInputStyled>
-            </TransferGiveStyled>
-            <TransferReceiveStyled>
-              <TransferTextStyled>Przyjmę</TransferTextStyled>
-              <TransferInputStyled>
-                <Select
-                  labelId="demo-simple-select-label"
-                  id="assignments-groups"
-                  value={selectedGroup}
-                  onChange={handleGroupsChange}
-                  placeholder="Wyszukaj..."
-                  style={{ width: '200px' }}
-                >
-                  {groups.map((el: any, index: number) => {
-                    return (
-                      <MenuItem key={index} value={el}>
-                        {`${selectedAssignmentsClasses.name} ${el.time} ${el.endTime} ${dayMapping[el.day]}`}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </TransferInputStyled>
-            </TransferReceiveStyled>
-            <SaveButton
-              onClick={() => {
-                createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
-              }}
-            >
-              WYŚLIJ
-            </SaveButton>
+                </TransferInputStyled>
+              </TransferReceiveStyled>
+            </InputWrapper>
+            
+            <ExchangesWrapper>
+            {exchanges ? (
+              exchanges.map((name: any) => (
+                <ExchangesRow>
+                  <Exchange>
+                    {name.desiredGroup.id} </Exchange> <Icon alt="transfer" src={TransferIcon} /><Exchange>{name.ownedAssignment.id}
+                  </Exchange>
+                </ExchangesRow>
+              ))
+            ) : (
+              <div></div>
+            )}
+            </ExchangesWrapper>
          </TransferStyled>
        </Fade>
      </Modal>