From 90e8a11904bb7e6ab2c50b0b04264a8f1f835023 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 10 Oct 2021 17:40:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Start=20working=20on=20the=20`Gr?=
 =?UTF-8?q?oupCreateBox`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          |  6 +-
 .../src/components/group/GroupCreateBox.tsx   | 61 +++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/group/GroupCreateBox.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index eaccdd9..1d75e0f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import {AuthorizationRouter} from "./components/authorization/AuthorizationRoute
 import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage"
 import {SophonFooter} from "./components/elements/SophonFooter"
 import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
+import {GroupCreateBox} from "./components/group/GroupCreateBox"
 import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
@@ -37,7 +38,10 @@ function App({..._}: RouteComponentProps) {
                             </>}
                             selectedRoute={() => <>
                                 <GroupRouter
-                                    unselectedRoute={(props) => <GroupListBox viewSet={props.viewSet}/>}
+                                    unselectedRoute={(props) => <>
+                                        <GroupListBox viewSet={props.viewSet}/>
+                                        <GroupCreateBox viewSet={props.viewSet}/>
+                                    </>}
                                     selectedRoute={(props) => <>
                                         <ProjectRouter
                                             groupPk={props.selection.value.slug}
diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx
new file mode 100644
index 0000000..fa9fc04
--- /dev/null
+++ b/frontend/src/components/group/GroupCreateBox.tsx
@@ -0,0 +1,61 @@
+import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useAuthorizationContext} from "../../contexts/authorization"
+import {ManagedViewSet, useManagedViewSet} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup, SophonUser} from "../../types/SophonTypes"
+
+
+export interface GroupCreateBoxProps {
+    viewSet: ManagedViewSet<SophonResearchGroup>
+}
+
+
+export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | null {
+    const authorization = useAuthorizationContext()
+
+    const name = useFormState<string>("", val => val.length > 0 ? true : undefined)
+
+    const slug = name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
+
+    const description = useFormState<string>("", val => val.length > 0 ? true : undefined)
+
+    const availableMembers = useManagedViewSet<SophonUser>("/api/core/users/", "id", authorization?.state.token !== undefined)
+    const membersOptions = React.useMemo(
+        () => availableMembers.resources?.filter(m => m.value.id !== authorization?.state.user?.id).map(m => <Form.Select.Option value={m.value.username}/>),
+        [availableMembers],
+    )
+    const members = useFormState<string[]>([], arr => arr.length > 0 ? true : undefined)
+
+    const access = useFormState<string>("", val => val.length > 0 ? true : undefined)
+
+    if(!authorization?.state.token) {
+        return null
+    }
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Create a new group
+            </Heading>
+            <Form>
+                <Form.Field label={"Name"} {...name}/>
+                <Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
+                <Form.Area label={"Description"} {...description}/>
+                <Form.Multiselect label={"Members"} {...members}>
+                    {membersOptions}
+                </Form.Multiselect>
+                <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username}/>
+                <Form.Select label={"Access"} {...access}>
+                    <Form.Select.Option value={""}/>
+                    <Form.Select.Option value={"⛔️ Collaborators must be added manually"}/>
+                    <Form.Select.Option value={"✳️ Users can join the group freely"}/>
+                </Form.Select>
+                <Form.Row>
+                    <Form.Button>
+                        Create
+                    </Form.Button>
+                </Form.Row>
+            </Form>
+        </Box>
+    )
+}