s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init editSubmission design and profile data and manage research

Browse Source
This commit is contained in:
Mateusz Tylka 2023-07-28 13:32:20 +02:00
parent afd2361689
commit 01f82b1365
9 changed files with 161 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/generic/PopUp.js
View File

@ -9,7 +9,8 @@ const PopUpStyle = styled(FlexColumn)`
z-index: 100;
width: 100%;
height: 100vh;
background-color: ${({ theme }) => theme.colors.dark01};
background-color: ${({ theme, backgroundColor }) =>
backgroundColor ? backgroundColor : theme.colors.dark01};
.PopUpStyle__body {
width: ${({ width }) => (width ? width : '60%')};
@ -31,6 +32,7 @@ const PopUp = (props) => {
return (
<PopUpStyle
backgroundColor={props.backgroundColor}
padding={props.padding}
width={props.width}
height={props.height}

20
src/components/generic/Table/Table.js
View File

@ -6,10 +6,11 @@ import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
import TableRowFooter from './components/TableRowFooter';
import deleteSubmission from '../../../api/deleteSubmission';
import theme from '../../../utils/theme';
import DeletePopUp from './components/DeletePopUp/DeletePopUp';
import MobileTable from './components/MobileTable/MobileTable';
import DeletePopUp from './components/DeletePopUp';
import MobileTable from './components/MobileTable';
import Media from 'react-media';
import editSubmission from '../../../api/editSubmission';
import EditPopUp from './components/EditPopUp';
const Table = ({
items,
@ -22,6 +23,8 @@ const Table = ({
const tableUpdate = React.useCallback(() => updateState({}), []);
const [deletedItems, setDeletedItems] = React.useState([]);
const [deletePopUp, setDeletePopUp] = React.useState(false);
const [editPopUp, setEditPopUp] = React.useState(false);
const itemsToRender = items.filter((item) => !deletedItems.includes(item));
const deleteItem = async (item) => {
@ -34,6 +37,10 @@ const Table = ({
);
};
const editItem = async (item) => {
editSubmission(7355, '1,2,3', 'ssiema siema');
};
const desktopRender = () => {
return (
<TableStyle rowFooter={rowFooter}>
@ -49,11 +56,18 @@ const Table = ({
item={item}
setDeletePopUp={setDeletePopUp}
deletePopUp={deletePopUp}
deleteItem={() => editSubmission(7355, '1,2,3', 'ssiema siema')}
deleteItem={deleteItem}
/>
<EditPopUp
item={item}
setEditPopUp={setEditPopUp}
editPopUp={editPopUp}
editItem={editItem}
/>
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<TableRowFooter
deleteItem={() => setDeletePopUp(true)}
editItem={() => setEditPopUp(true)}
rowFooter={rowFooter}
item={item}
i={i}

1
src/components/generic/Table/components/DeletePopUp/DeletePopUp.js
View File

@ -12,6 +12,7 @@ const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => {
width="30%"
height="30vh"
padding="32px"
backgroundColor={theme.colors.dark003}
closeHandler={() => setDeletePopUp(false)}
>
<FlexColumn width="100%" height="100%" gap="48px">

61
src/components/generic/Table/components/EditPopUp/EditPopUp.js Normal file
View File

@ -0,0 +1,61 @@
import { createPortal } from 'react-dom';
import PopUp from '../../../PopUp';
import Button from '../../../Button';
import { H3 } from '../../../../../utils/fonts';
import { FlexColumn, FlexRow } from '../../../../../utils/containers';
import theme from '../../../../../utils/theme';
import SubmitInput from '../../../SubmitInput';
import TagsChoose from '../../../../../pages/Submit/components/TagsChoose/TagsChoose';
const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
if (editPopUp) {
return createPortal(
<PopUp
width="30%"
height="50vh"
padding="32px"
backgroundColor={theme.colors.dark003}
closeHandler={() => setEditPopUp(false)}
>
<FlexColumn width="100%" height="100%" gap="48px">
<H3>Editing submission</H3>
<SubmitInput
label="Description"
handler={(value) => {
console.log(value);
}}
/>
<TagsChoose
label="Submission tags"
updateTags={() => console.log('siema')}
tags={[]}
submissionTags={[]}
/>
<FlexRow gap="48px">
<Button
width="100px"
height="32px"
handler={() => {
setEditPopUp(false);
editItem(item);
}}
>
Confirm
</Button>
<Button
width="100px"
height="32px"
handler={() => setEditPopUp(false)}
backgroundColor={theme.colors.dark}
>
Cancel
</Button>
</FlexRow>
</FlexColumn>
</PopUp>,
document.body
);
}
};
export default EditPopUp;

1
src/components/generic/Table/components/EditPopUp/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './EditPopUp';

4
src/components/generic/Table/components/TableRowFooter/TableRowFooter.js
View File

@ -5,14 +5,14 @@ import TableRowButtons from '../TableRowButtons/TableRowButtons';
import pensilIco from '../../../../../assets/pencil_ico.svg';
import deleteIco from '../../../../../assets/delete_ico.svg';
const TableRowFooter = ({ rowFooter, item, i, deleteItem }) => {
const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
if (rowFooter) {
return (
<FlexRow className="TableStyle__row-footer">
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => console.log('edit') },
{ icon: pensilIco, handler: () => editItem(item) },
{ icon: deleteIco, handler: () => deleteItem(item) },
]}
/>

104
src/components/navigation/LoggedBar.js
View File

@ -1,6 +1,12 @@
import React from 'react';
import {Container, FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
import {Body, Medium} from '../../utils/fonts';
import {
Container,
FlexColumn,
FlexRow,
Svg,
TransBack,
} from '../../utils/containers';
import { Body, Medium } from '../../utils/fonts';
import theme from '../../utils/theme';
import userIco from '../../assets/user_ico.svg';
import KeyCloakService from '../../services/KeyCloakService';
@ -15,8 +21,8 @@ const LoggedBarStyle = styled(FlexColumn)`
right: 0;
align-items: flex-start;
justify-content: flex-start;
background-color: ${({theme}) => theme.colors.white};
box-shadow: ${({theme}) => theme.shadow};
background-color: ${({ theme }) => theme.colors.white};
box-shadow: ${({ theme }) => theme.shadow};
z-index: 3;
button {
@ -32,11 +38,11 @@ const LoggedBarStyle = styled(FlexColumn)`
&:hover {
li {
color: ${({theme}) => theme.colors.green};
color: ${({ theme }) => theme.colors.green};
}
div {
background-color: ${({theme}) => theme.colors.green};
background-color: ${({ theme }) => theme.colors.green};
}
}
@ -47,37 +53,61 @@ const LoggedBarStyle = styled(FlexColumn)`
`;
const LoggedBar = (props) => {
return (
<TransBack transition='transform' translateX={props.visible}
onClick={props.loggedBarVisibleHandler} animTime='0.2s'>
<LoggedBarStyle onMouseEnter={props.loggedBarHoverTrue}
onMouseLeave={props.loggedBarHoverFalse}>
<FlexRow alignmentX='flex-start' alignmentY='flex-end'
gap='16px' width='100%' padding='12px 16px'>
<Svg src={userIco} width='32px' height='32px' backgroundColor={theme.colors.dark} size='cover'/>
<Medium as='p'>
{props.username}
</Medium>
</FlexRow>
<Container width='90%' backgroundColor={theme.colors.dark05} height='1px'/>
<FlexColumn as='ul' onClick={() => console.log('profile click')}
gap='24px' padding='32px 24px' alignmentX='flex-start'>
<FlexRow as='button' gap='16px'>
<Svg width='16px' height='16px' src={userIco} size='cover'/>
<Body as='li'>
Profile
</Body>
</FlexRow>
<FlexRow as='button' onClick={props.visible === '0' ? KeyCloakService.doLogout : null} gap='16px'>
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
<Body as='li'>
Sign out
</Body>
</FlexRow>
</FlexColumn>
</LoggedBarStyle>
</TransBack>
);
return (
<TransBack
transition="transform"
translateX={props.visible}
onClick={props.loggedBarVisibleHandler}
animTime="0.2s"
>
<LoggedBarStyle
onMouseEnter={props.loggedBarHoverTrue}
onMouseLeave={props.loggedBarHoverFalse}
>
<FlexRow
alignmentX="flex-start"
alignmentY="flex-end"
gap="16px"
width="100%"
padding="12px 16px"
>
<Svg
src={userIco}
width="32px"
height="32px"
backgroundColor={theme.colors.dark}
size="cover"
/>
<Medium as="p">{props.username}</Medium>
</FlexRow>
<Container
width="90%"
backgroundColor={theme.colors.dark05}
height="1px"
/>
<FlexColumn
as="ul"
onClick={KeyCloakService.goToProfile}
gap="24px"
padding="32px 24px"
alignmentX="flex-start"
>
<FlexRow as="button" gap="16px">
<Svg width="16px" height="16px" src={userIco} size="cover" />
<Body as="li">Profile</Body>
</FlexRow>
<FlexRow
as="button"
onClick={props.visible === '0' ? KeyCloakService.doLogout : null}
gap="16px"
>
<Svg width="16px" height="16px" src={loginIco} rotate="180deg" />
<Body as="li">Sign out</Body>
</FlexRow>
</FlexColumn>
</LoggedBarStyle>
</TransBack>
);
};
export default LoggedBar;

6
src/services/KeyCloakService.js
View File

@ -61,6 +61,11 @@ const getUsername = () => _kc.tokenParsed?.preferred_username;
const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
const goToProfile = () => {
console.log(_kc.loadUserProfile());
_kc.accountManagement();
};
const KeyCloakService = {
initKeycloak,
doLogin,
@ -71,6 +76,7 @@ const KeyCloakService = {
getUsername,
hasRole,
doRegister,
goToProfile,
};
export default KeyCloakService;

2
src/utils/colors.js
View File

@ -7,6 +7,8 @@ const colors = {
green05: 'rgba(27, 153, 139, 0.5)',
green08: 'rgba(27, 153, 139, 0.8)',
dark: '#343434',
dark003: 'rgba(52, 52, 52, 0.03)',
dark005: 'rgba(52, 52, 52, 0.05)',
dark01: 'rgba(52, 52, 52, 0.1)',
dark03: 'rgba(52, 52, 52, 0.3)',
dark04: 'rgba(52, 52, 52, 0.4)',