✨ Implement group creation

.idea/inspectionProfiles/Project_Default.xml

@@ -6,11 +6,13 @@
     <inspection_tool class="ES6ConvertVarToLetConst" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="HttpUrlsUsage" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="InconsistentLineSeparators" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="JSNonASCIINames" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="JupyterPackageInspection" enabled="true" level="ERROR" enabled_by_default="true" />
     <inspection_tool class="LessResolvedByNameOnly" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="LessUnresolvedMixin" enabled="true" level="ERROR" enabled_by_default="true" />
     <inspection_tool class="LessUnresolvedVariable" enabled="true" level="ERROR" enabled_by_default="true" />
     <inspection_tool class="LongLine" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="NonAsciiCharacters" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="ProblematicWhitespace" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="PyAbstractClassInspection" enabled="true" level="ERROR" enabled_by_default="true" />
     <inspection_tool class="PyAttributeOutsideInitInspection" enabled="true" level="WARNING" enabled_by_default="true" />

frontend/package.json

@@ -8,7 +8,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.15",
         "@reach/router": "^1.3.4",
-        "@steffo/bluelib-react": "^4.0.0",
+        "@steffo/bluelib-react": "^4.0.4",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",

frontend/src/components/group/GroupCreateBox.tsx

@@ -3,6 +3,7 @@ import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {ManagedViewSet, useManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup, SophonUser} from "../../types/SophonTypes"
+import {ErrorBox} from "../errors/ErrorBox"
 
 
 export interface GroupCreateBoxProps {
@@ -13,20 +14,51 @@ export interface GroupCreateBoxProps {
 export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | null {
     const authorization = useAuthorizationContext()
 
-    const name = useFormState<string>("", val => val.length > 0 ? true : undefined)
+    const name =
+        useFormState<string>("", val => val.length > 0 ? true : undefined)
+
+    const description =
+        useFormState<string>("", val => val.length > 0 ? true : undefined)
+
+    const availableMembers =
+        useManagedViewSet<SophonUser>("/api/core/users/", "id", authorization?.state.token !== undefined)
+
+    const membersOptions: { [key: string]: number } | undefined =
+        React.useMemo(
+            () => availableMembers.resources?.filter(m => m.value.id !== authorization?.state.user?.id).map(m => {
+                const obj: { [key: string]: number } = {}
+                obj[m.value.username] = m.value.id
+                return obj
+            }).reduce((a, b) => {
+                return {...a, ...b}
+            }),
+            [availableMembers, authorization],
+        )
+
+    const members =
+        useFormState<number[]>([], arr => arr.length > 0 ? true : undefined)
+
+    const access =
+        useFormState<"OPEN" | "MANUAL" | undefined>(undefined, val => (
+                                                                          val?.length
+                                                                      ) ? true : undefined)
 
     const slug = name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
 
-    const description = useFormState<string>("", val => val.length > 0 ? true : undefined)
+    const doCreate =
+        React.useCallback(
+            async () => {
+                await viewSet.create({
+                    name: name.value,
+                    slug: slug,
+                    description: description.value,
+                    members: members.value,
+                    access: access.value,
+                })
+            },
+            [viewSet, name, slug, description, members, access],
+        )
 
-    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
@@ -41,17 +73,22 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                 <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}>
+                <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
-                    {membersOptions}
+                <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
-                </Form.Multiselect>
+                <Form.Select
-                <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username}/>
+                    label={"Access"}
-                <Form.Select label={"Access"} {...access}>
+                    options={{
-                    <Form.Select.Option value={""}/>
+                        "": undefined,
-                    <Form.Select.Option value={"⛔️ Collaborators must be added manually"}/>
+                        "⛔️ Collaborators must be added manually": "MANUAL",
-                    <Form.Select.Option value={"✳️ Users can join the group freely"}/>
+                        "✳️ Users can join the group freely": "OPEN",
-                </Form.Select>
+                    }}
+                    {...access}
+                />
                 <Form.Row>
-                    <Form.Button>
+                    <ErrorBox error={viewSet.operationError ?? undefined}/>
+                </Form.Row>
+                <Form.Row>
+                    <Form.Button onClick={doCreate}>
                         Create
                     </Form.Button>
                 </Form.Row>

frontend/yarn.lock

@@ -1617,10 +1617,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@steffo/bluelib-react@^4.0.0":
+"@steffo/bluelib-react@^4.0.4":
-  version "4.0.0"
+  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.0.tgz#0956558e2fabac934a7e16ec8c1778f2dad414f0"
+  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.4.tgz#1a4f4ccd3ee185603a95b7a0a183a919f29e9d32"
-  integrity sha512-yymuz6Rt8nKlE3JScuMq5wB+FRAhUq2cRmcx8BBeg/MDfBWYwUlyxzzp8tPQrSrqctFsNewGydfeuiTNPi30Ug==
+  integrity sha512-ZwnAqbZ4LaYbQu56fMX0OIKBJA1X4LUfTIJsxnkJbPrr2qX0D+zQUl2vI2Jm/wlZdltvwm5ftCTLDwpqg/1h/g==
   dependencies:
     "@babel/runtime" "^7.15.3"
     classnames "^2.3.1"