Added EditableTag to the project details

client/src/components/navigation/Dropdown/index.tsx

 
-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)}>

client/src/components/ui/EditableTag/tag.scss

@@ -15,10 +15,6 @@
             transform: translateY(80%);
             visibility: visible;
         }
-
-        .icon {
-            transform: rotate(180deg);
-        }
     }
 
     .tag-dropdown {

client/src/pages/Projects/ProjectDetail/index.tsx

 
 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} />