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

🚧 Start working on the GroupCreateBox

Browse source
This commit is contained in:
Steffo 2021-10-10 17:40:14 +02:00
parent e1a9af4cff
commit 90e8a11904
2 changed files with 66 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/App.tsx
View file

@ -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}

61
frontend/src/components/group/GroupCreateBox.tsx Normal file
View file

@ -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>
)
}