From 9fce06ea695b70ed15c01481b057ad9e89495e25 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Tue, 22 Jun 2021 16:02:37 +0200
Subject: [PATCH] Added EditableTag to the project details
---
.../components/navigation/Dropdown/index.tsx | 12 +++++++-
client/src/components/ui/EditableTag/tag.scss | 4 ---
.../pages/Projects/ProjectDetail/index.tsx | 28 +++++++++++++++----
3 files changed, 34 insertions(+), 10 deletions(-)
diff --git a/client/src/components/navigation/Dropdown/index.tsx b/client/src/components/navigation/Dropdown/index.tsx
index 50f7481..6fc87e1 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 7550256..94057f3 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 0060bf5..2d4e7e3 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} />
--
GitLab