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

🔧 Enable the create button only if all required fields have been filled

Browse source
This commit is contained in:
Steffo 2021-10-11 18:50:03 +02:00
parent 7c0bef7aa0
commit 36c5ead53d
1 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -59,6 +59,11 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
[viewSet, name, slug, description, members, access], [viewSet, name, slug, description, members, access],
) )
const canCreate =
React.useMemo(
() => name.validity === true && access.validity === true && Boolean(authorization?.state.user?.username),
[name, access, authorization],
)
if(!authorization?.state.token) { if(!authorization?.state.token) {
return null return null
@ -72,11 +77,11 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
</Details.Summary> </Details.Summary>
<Details.Content> <Details.Content>
<Form> <Form>
<Form.Field label={"Name"} {...name}/> <Form.Field label={"Name"} required {...name}/>
<Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/> <Form.Field label={"Slug"} required disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
<Form.Area label={"Description"} {...description}/> <Form.Area label={"Description"} {...description}/>
<Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/> <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
<Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/> <Form.Field label={"Owner"} required disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
<Form.Select <Form.Select
label={"Access"} label={"Access"}
options={{ options={{
@ -94,7 +99,7 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
: null : null
} }
<Form.Row> <Form.Row>
<Form.Button onClick={doCreate}> <Form.Button type={"button"} onClick={doCreate} disabled={!canCreate}>
Create Create
</Form.Button> </Form.Button>
</Form.Row> </Form.Row>