y0rune
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

transfer

This commit is contained in:
wrzesinski-hubert 2021-01-19 17:04:07 +01:00
parent f9fa6412ef
commit 6748309fbd
1 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/Transfer.tsx
View File

@ -84,7 +84,7 @@ const TransferInputStyled = styled.div`
`; `;
const SaveWrapper = styled.div` const SaveWrapper = styled.div`
margin-top:40px; margin-top: 40px;
`; `;
const SaveButton = styled.div` const SaveButton = styled.div`
@ -97,7 +97,7 @@ const SaveButton = styled.div`
cursor: pointer; cursor: pointer;
height: 40px; height: 40px;
width: 150px; width: 150px;
font-size:12px; font-size: 12px;
letter-spacing: 0.1ch; letter-spacing: 0.1ch;
line-height: normal; line-height: normal;
&:hover { &:hover {
@ -114,9 +114,9 @@ const SaveButton = styled.div`
`; `;
const ExchangesWrapper = styled.div` const ExchangesWrapper = styled.div`
flex:5; flex: 4;
overflow-y: scroll; overflow-y: scroll;
width:100%; width: 100%;
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 10px;
} }
@ -128,11 +128,12 @@ const ExchangesWrapper = styled.div`
border-radius: 10px; border-radius: 10px;
background-color: #4b4b4b; background-color: #4b4b4b;
} }
border-top: 1px solid;
`; `;
const ExchangesRow = styled.div` const ExchangesRow = styled.div`
display:flex; display: flex;
flex-direction:row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
`; `;
@ -145,14 +146,12 @@ const Icon = styled.img`
const Exchange = styled.div` const Exchange = styled.div`
background-color: #b5d2e0; background-color: #b5d2e0;
border-radius: 10px; border-radius: 10px;
width:200px; width: 300px;
margin:10px; margin: 10px;
height:50px; display: flex;
display:flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
` `;
const deleteExchange = async (id: number) => { const deleteExchange = async (id: number) => {
try { try {
@ -234,7 +233,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
console.log('open changed'); console.log('open changed');
getExchanges(); getExchanges();
getAssignmentsGroups(); getAssignmentsGroups();
}, [isTransferOpen,save]); }, [isTransferOpen, save]);
const createExchange = async (groupsIds: Array<number>) => { const createExchange = async (groupsIds: Array<number>) => {
console.log('groups ids are: ', groupsIds); console.log('groups ids are: ', groupsIds);
@ -276,9 +275,19 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
> >
{assignmentsClasses.map((el) => { {assignmentsClasses.map((el) => {
return ( return (
<MenuItem key={el.id} value={el} > <MenuItem
key={el.id}
value={el}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
}}
>
{`${el.name} `} {`${el.name} `}
<br></br>{`(${dayMapping[el.day]} ${el.time} ${el.endTime})`} <br></br>
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
</MenuItem> </MenuItem>
); );
})} })}
@ -287,50 +296,68 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
</TransferInputStyled> </TransferInputStyled>
</TransferGiveStyled> </TransferGiveStyled>
<SaveWrapper> <SaveWrapper>
{' '} {' '}
<SaveButton <SaveButton
onClick={() => { onClick={() => {
createExchange([selectedAssignmentsClasses.id, selectedGroup.id]); createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
}} }}
> >
Zaproponuj wymianę Zaproponuj wymianę
</SaveButton> </SaveButton>
</SaveWrapper> </SaveWrapper>
<TransferReceiveStyled> <TransferReceiveStyled>
<TransferTextStyled>Przyjmę</TransferTextStyled> <TransferTextStyled>Przyjmę</TransferTextStyled>
<TransferInputStyled> <TransferInputStyled>
<Select <FormControl disabled>
labelId="demo-simple-select-label" <Select
id="assignments-groups" labelId="demo-simple-select-label"
value={selectedGroup} id="assignments-groups"
onChange={handleGroupsChange} value={selectedGroup}
placeholder="Wyszukaj..." onChange={handleGroupsChange}
style={{ width: '200px' }} placeholder="Wyszukaj..."
> style={{ width: '200px' }}
{groups.map((el: any, index: number) => { >
return ( {groups.map((el: any, index: number) => {
<MenuItem key={index} value={el}> return (
{`${selectedAssignmentsClasses.name} ${el.time} ${el.endTime} ${dayMapping[el.day]}`} <MenuItem
</MenuItem> key={index}
); value={el}
})} style={{
</Select> display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
}}
>
{`${selectedAssignmentsClasses.name} `}
<br></br>
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
</MenuItem>
);
})}
</Select>
</FormControl>
</TransferInputStyled> </TransferInputStyled>
</TransferReceiveStyled> </TransferReceiveStyled>
</InputWrapper> </InputWrapper>
<ExchangesWrapper> <ExchangesWrapper>
{exchanges ? ( {exchanges ? (
exchanges.map((name: any) => ( exchanges.map((name: any) => (
<ExchangesRow> <ExchangesRow>
<Exchange> <Exchange>
{name.desiredGroup.id} </Exchange> <Icon alt="transfer" src={TransferIcon} /><Exchange>{name.ownedAssignment.id} {name.desiredGroup.lecturer} <br></br> {dayMapping[name.desiredGroup.day]} <br></br>{' '}
</Exchange> {name.desiredGroup.time} - {name.desiredGroup.endTime}
</ExchangesRow> </Exchange>{' '}
)) <Icon alt="transfer" src={TransferIcon} />
) : ( <Exchange>
<div></div> {name.ownedAssignment.lecturer} <br></br> {dayMapping[name.ownedAssignment.day]} <br></br>{' '}
)} {name.ownedAssignment.time} - {name.ownedAssignment.endTime}</Exchange>
</ExchangesRow>
))
) : (
<div></div>
)}
</ExchangesWrapper> </ExchangesWrapper>
</TransferStyled> </TransferStyled>
</Fade> </Fade>