From b0baf55bb555ad090fb640dc98b3595b8a2d167e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 22 Sep 2021 01:42:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Start=20working=20on=20"Create?=
 =?UTF-8?q?=20object"=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/NewResearchGroupPanel.tsx  | 32 +++++++++++++++++++
 .../src/components/ObjectPanel.module.css     |  3 +-
 frontend/src/components/ObjectPanel.tsx       |  4 +--
 .../ResearchProjectsByGroupListBox.tsx        |  8 +++--
 4 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/NewResearchGroupPanel.tsx

diff --git a/frontend/src/components/NewResearchGroupPanel.tsx b/frontend/src/components/NewResearchGroupPanel.tsx
new file mode 100644
index 0000000..9283899
--- /dev/null
+++ b/frontend/src/components/NewResearchGroupPanel.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+import {Field, Button, Select} from "@steffo/bluelib-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {ObjectPanel} from "./ObjectPanel";
+
+
+export function NewResearchGroupPanel(): JSX.Element {
+
+    return (
+        <ObjectPanel>
+            <ObjectPanel.Icon>
+                <Select>
+                    <Select.Option value={"🌐"}/>
+                    <Select.Option value={"🎓"}/>
+                    <Select.Option value={"🔒"}/>
+                </Select>
+            </ObjectPanel.Icon>
+            <ObjectPanel.Name>
+                <Field placeholder={"Project name"} required/>
+            </ObjectPanel.Name>
+            <ObjectPanel.Text>
+
+            </ObjectPanel.Text>
+            <ObjectPanel.Buttons>
+                <Button>
+                    <FontAwesomeIcon icon={faPlus}/>&nbsp;Create
+                </Button>
+            </ObjectPanel.Buttons>
+        </ObjectPanel>
+    )
+}
diff --git a/frontend/src/components/ObjectPanel.module.css b/frontend/src/components/ObjectPanel.module.css
index 059f19b..4d96289 100644
--- a/frontend/src/components/ObjectPanel.module.css
+++ b/frontend/src/components/ObjectPanel.module.css
@@ -1,7 +1,8 @@
 .ObjectPanel {
     display: grid;
     grid-template-areas: "icon name text buttons";
-    grid-template-columns: auto 1fr 4fr auto;
+    /* Not sure about this, there probably is a better way */
+    grid-template-columns: auto minmax(25%, 1fr) auto auto;
     grid-gap: 8px;
 
     justify-content: center;
diff --git a/frontend/src/components/ObjectPanel.tsx b/frontend/src/components/ObjectPanel.tsx
index 00dad4f..550e308 100644
--- a/frontend/src/components/ObjectPanel.tsx
+++ b/frontend/src/components/ObjectPanel.tsx
@@ -6,8 +6,8 @@ import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
 import classNames from "classnames"
 
 
-interface ObjectPanelProps extends PanelProps {}
-interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
+export interface ObjectPanelProps extends PanelProps {}
+export interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
 
 
 export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {
diff --git a/frontend/src/components/ResearchProjectsByGroupListBox.tsx b/frontend/src/components/ResearchProjectsByGroupListBox.tsx
index 1ebe9c0..5dcaf3e 100644
--- a/frontend/src/components/ResearchProjectsByGroupListBox.tsx
+++ b/frontend/src/components/ResearchProjectsByGroupListBox.tsx
@@ -1,11 +1,12 @@
 import * as React from "react"
-import * as ReactDOM from "react-dom"
 import {useDRFManagedList} from "../hooks/useDRF";
-import {ResearchGroup, ResearchProject} from "../types";
+import {ResearchProject} from "../types";
 import {Loading} from "./Loading";
-import {ResearchGroupPanel} from "./ResearchGroupPanel";
 import {Box, Heading} from "@steffo/bluelib-react";
 import {ResearchProjectPanel} from "./ResearchProjectPanel";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {NewResearchGroupPanel} from "./NewResearchGroupPanel";
 
 
 interface ProjectsListBoxProps {
@@ -35,6 +36,7 @@ export function ResearchProjectsByGroupListBox({group_pk}: ProjectsListBoxProps)
             </Heading>
             <div>
                 {groups}
+                <NewResearchGroupPanel/>
             </div>
         </Box>
     )