From 01f82b136516bb03c5a25b290b1af47be4246e1e Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 28 Jul 2023 13:32:20 +0200 Subject: [PATCH] init editSubmission design and profile data and manage research --- src/components/generic/PopUp.js | 4 +- src/components/generic/Table/Table.js | 20 +++- .../components/DeletePopUp/DeletePopUp.js | 1 + .../Table/components/EditPopUp/EditPopUp.js | 61 ++++++++++ .../Table/components/EditPopUp/index.js | 1 + .../TableRowFooter/TableRowFooter.js | 4 +- src/components/navigation/LoggedBar.js | 106 +++++++++++------- src/services/KeyCloakService.js | 6 + src/utils/colors.js | 2 + 9 files changed, 161 insertions(+), 44 deletions(-) create mode 100644 src/components/generic/Table/components/EditPopUp/EditPopUp.js create mode 100644 src/components/generic/Table/components/EditPopUp/index.js diff --git a/src/components/generic/PopUp.js b/src/components/generic/PopUp.js index 85fda61..c642544 100644 --- a/src/components/generic/PopUp.js +++ b/src/components/generic/PopUp.js @@ -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 ( 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 ( @@ -49,11 +56,18 @@ const Table = ({ item={item} setDeletePopUp={setDeletePopUp} deletePopUp={deletePopUp} - deleteItem={() => editSubmission(7355, '1,2,3', 'ssiema siema')} + deleteItem={deleteItem} + /> + setDeletePopUp(true)} + editItem={() => setEditPopUp(true)} rowFooter={rowFooter} item={item} i={i} diff --git a/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js b/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js index 9028cef..2ff2834 100644 --- a/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js +++ b/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js @@ -12,6 +12,7 @@ const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => { width="30%" height="30vh" padding="32px" + backgroundColor={theme.colors.dark003} closeHandler={() => setDeletePopUp(false)} > diff --git a/src/components/generic/Table/components/EditPopUp/EditPopUp.js b/src/components/generic/Table/components/EditPopUp/EditPopUp.js new file mode 100644 index 0000000..01bade3 --- /dev/null +++ b/src/components/generic/Table/components/EditPopUp/EditPopUp.js @@ -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( + setEditPopUp(false)} + > + +

Editing submission

+ { + console.log(value); + }} + /> + console.log('siema')} + tags={[]} + submissionTags={[]} + /> + + + + + + , + document.body + ); + } +}; + +export default EditPopUp; diff --git a/src/components/generic/Table/components/EditPopUp/index.js b/src/components/generic/Table/components/EditPopUp/index.js new file mode 100644 index 0000000..d008205 --- /dev/null +++ b/src/components/generic/Table/components/EditPopUp/index.js @@ -0,0 +1 @@ +export { default } from './EditPopUp'; diff --git a/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js index d74fa99..168d152 100644 --- a/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js +++ b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js @@ -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 ( console.log('edit') }, + { icon: pensilIco, handler: () => editItem(item) }, { icon: deleteIco, handler: () => deleteItem(item) }, ]} /> diff --git a/src/components/navigation/LoggedBar.js b/src/components/navigation/LoggedBar.js index 4f8c3eb..aec534c 100644 --- a/src/components/navigation/LoggedBar.js +++ b/src/components/navigation/LoggedBar.js @@ -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 ( - - - - - - {props.username} - - - - console.log('profile click')} - gap='24px' padding='32px 24px' alignmentX='flex-start'> - - - - Profile - - - - - - Sign out - - - - - - ); + return ( + + + + + {props.username} + + + + + + Profile + + + + Sign out + + + + + ); }; -export default LoggedBar; \ No newline at end of file +export default LoggedBar; diff --git a/src/services/KeyCloakService.js b/src/services/KeyCloakService.js index 47e15b9..9a6c3d2 100644 --- a/src/services/KeyCloakService.js +++ b/src/services/KeyCloakService.js @@ -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; diff --git a/src/utils/colors.js b/src/utils/colors.js index 6507da4..40180a2 100644 --- a/src/utils/colors.js +++ b/src/utils/colors.js @@ -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)',