init editSubmission design and profile data and manage research

2023-07-28 13:32:20 +02:00 · 2023-07-28 13:32:20 +02:00 · 01f82b1365
commit 01f82b1365
parent afd2361689
9 changed files with 161 additions and 44 deletions
--- 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 (
    <PopUpStyle
+      backgroundColor={props.backgroundColor}
      padding={props.padding}
      width={props.width}
      height={props.height}
--- a/src/components/generic/Table/Table.js
+++ b/src/components/generic/Table/Table.js
@ -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}
--- 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)}
      >
        <FlexColumn width="100%" height="100%" gap="48px">
--- a/src/components/generic/Table/components/EditPopUp/EditPopUp.js
+++ 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(
+      <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;
--- a/src/components/generic/Table/components/EditPopUp/index.js
+++ b/src/components/generic/Table/components/EditPopUp/index.js
@ -0,0 +1 @@
+export { default } from './EditPopUp';
--- 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 (
      <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) },
          ]}
        />
--- 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};
      }
    }

@ -48,31 +54,55 @@ 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>
+    <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>
+        <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
+            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>
--- 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;
--- 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)',