steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +00:00
Code Activity

🔧 Make GroupCreateBox collapsible

Browse source
This commit is contained in:
Steffo 2021-10-11 18:30:07 +02:00
parent f256b2886e
commit 0a00f63b54
1 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/components/group/GroupCreateBox.tsx
View file

@ -1,4 +1,4 @@
import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react" import {Box, Details, Form, useFormState} from "@steffo/bluelib-react"
import * as React from "react" import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization" import {useAuthorizationContext} from "../../contexts/authorization"
import {ManagedViewSet, useManagedViewSet} from "../../hooks/useManagedViewSet" import {ManagedViewSet, useManagedViewSet} from "../../hooks/useManagedViewSet"
@ -66,33 +66,37 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
return ( return (
<Box> <Box>
<Heading level={3}> <Details>
Create a new group <Details.Summary>
</Heading> Create a new group
<Form> </Details.Summary>
<Form.Field label={"Name"} {...name}/> <Details.Content>
<Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/> <Form>
<Form.Area label={"Description"} {...description}/> <Form.Field label={"Name"} {...name}/>
<Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/> <Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
<Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/> <Form.Area label={"Description"} {...description}/>
<Form.Select <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
label={"Access"} <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
options={{ <Form.Select
"": undefined, label={"Access"}
"⛔️ Collaborators must be added manually": "MANUAL", options={{
"✳️ Users can join the group freely": "OPEN", "": undefined,
}} "⛔️ Collaborators must be added manually": "MANUAL",
{...access} "✳️ Users can join the group freely": "OPEN",
/> }}
<Form.Row> {...access}
<ErrorBox error={viewSet.operationError ?? undefined}/> />
</Form.Row> <Form.Row>
<Form.Row> <ErrorBox error={viewSet.operationError ?? undefined}/>
<Form.Button onClick={doCreate}> </Form.Row>
Create <Form.Row>
</Form.Button> <Form.Button onClick={doCreate}>
</Form.Row> Create
</Form> </Form.Button>
</Form.Row>
</Form>
</Details.Content>
</Details>
</Box> </Box>
) )
} }