diff --git a/client/src/components/navigation/Dropdown/index.tsx b/client/src/components/navigation/Dropdown/index.tsx index 50f748179410d9c6a8ff327f41ba1425c8f5c621..6fc87e1cb5fabd94280584f8f6457d2b371409b9 100644 --- a/client/src/components/navigation/Dropdown/index.tsx +++ b/client/src/components/navigation/Dropdown/index.tsx @@ -1,5 +1,5 @@ -import { ReactNode, useState } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import Popup from 'components/ui/Popup'; @@ -28,6 +28,16 @@ export default function Dropdown({ children, items, position }: Props) { } }); + useEffect(() => { + if (isOpen) { + const onClick = () => setOpen(false); + document.addEventListener('click', onClick); + return () => { + document.removeEventListener('click', onClick); + } + } + }, [isOpen]); + return ( <> <div className={'dropdown-container' + (isOpen ? ' open' : '') + (items.length === 0 ? ' inactive' : '')} onClick={() => setOpen(state => !state)}> diff --git a/client/src/components/ui/EditableTag/tag.scss b/client/src/components/ui/EditableTag/tag.scss index 7550256df474ece437981e047c48118f9b07f323..94057f347f4b7c80c15ce834a0329acfc51d1d23 100644 --- a/client/src/components/ui/EditableTag/tag.scss +++ b/client/src/components/ui/EditableTag/tag.scss @@ -15,10 +15,6 @@ transform: translateY(80%); visibility: visible; } - - .icon { - transform: rotate(180deg); - } } .tag-dropdown { diff --git a/client/src/pages/Projects/ProjectDetail/index.tsx b/client/src/pages/Projects/ProjectDetail/index.tsx index 0060bf511e8ec9a7cc9cad3d32630fca613254c5..2d4e7e3a4740a8abac8e5d0120ad1f8c6b1e2f1b 100644 --- a/client/src/pages/Projects/ProjectDetail/index.tsx +++ b/client/src/pages/Projects/ProjectDetail/index.tsx @@ -1,12 +1,12 @@ import { Link } from 'react-router-dom'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useHistory, useParams } from 'react-router'; -import { StatusColors } from 'adapters/common'; -import { getProject, Project } from 'adapters/project'; +import { Status, StatusColors } from 'adapters/common'; +import { getProject, Project, updateProject } from 'adapters/project'; -import Tag from 'components/ui/Tag'; +import EditableTag from 'components/ui/EditableTag'; import LongText from 'components/ui/LongText'; import Tabs, { Tab } from 'components/navigation/Tabs'; import LoadingScreen from 'components/ui/LoadingScreen'; @@ -49,6 +49,19 @@ export default function ProjectDetail() { }); }, [history, projectId]) + const onStatusChange = useCallback((status: Status) => { + if (project) { + updateProject(project.id, { + status: status, + }).then(() => { + setProject({ + ...project, + status: status + }); + }); + } + }, [project]); + if (project) { return ( <div className={'project-detail-page theme-' + project.color}> @@ -56,7 +69,12 @@ export default function ProjectDetail() { arrow_back </Link> <div className="content-container"> - <Tag label={project.status} color={StatusColors.get(project.status)} /> + <EditableTag + label={project.status} + color={StatusColors.get(project.status)} + possible={Object.values(Status)} + onChange={onStatusChange} + /> <h1>{project.name}</h1> <div className="description-container"> <LongText text={project.text} />