diff --git a/frontend/package.json b/frontend/package.json index 8112b80..098bf8e 100644 --- a/frontend/package.json +++ b/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.4", + "@steffo/bluelib-react": "^4.0.5", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1db2de7..33c68e2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -57,6 +57,7 @@ function App({..._}: RouteComponentProps) { groupPk={selection.value.slug} unselectedRoute={({viewSet}) => <> + } selectedRoute={({selection}) => <> + viewSet?: ManagedViewSet, + resource?: ManagedResource, } -export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | null { +export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null { const instance = useInstanceContext() const authorization = useAuthorizationContext() const cache = useCacheContext() const name = - useFormState("", val => val.length > 0 ? true : undefined) + useFormState(resource?.value.name ?? "", val => val.length > 0 ? true : undefined) const description = - useFormState("", val => val.length > 0 ? true : undefined) + useFormState(resource?.value.description ?? "", val => val.length > 0 ? true : undefined) const membersOptions: { [key: string]: number } | undefined = React.useMemo( @@ -37,30 +37,65 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu ) const members = - useFormState([], arr => arr.length > 0 ? true : undefined) + useFormState(resource?.value.members ?? [], arr => arr.length > 0 ? true : undefined) const access = - useFormState<"OPEN" | "MANUAL" | undefined>(undefined, val => ( - val?.length - ) ? true : undefined) + useFormState<"OPEN" | "MANUAL" | undefined>(resource?.value.access ?? undefined, val => ( + val?.length + ) ? true : undefined) const slug = name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase() - const doCreate = + const onSubmit = React.useCallback( async () => { - await viewSet.create({ - name: name.value, - slug: slug, - description: description.value, - members: members.value, - access: access.value, - }) + if(resource) { + await resource.update({ + name: name.value, + slug: slug, + description: description.value, + members: members.value, + access: access.value, + }) + } + else if(viewSet) { + await viewSet.create({ + name: name.value, + slug: slug, + description: description.value, + members: members.value, + access: access.value, + }) + } }, - [viewSet, name, slug, description, members, access], + [viewSet, resource, name, slug, description, members, access], ) - const canCreate = + const trueMembers = + React.useMemo( + () => resource ? [...new Set([resource.value.owner, ...resource.value.members])] : undefined, + [resource], + ) + + const canEdit = + React.useMemo( + () => !resource || + ( + authorization && authorization.state.user && trueMembers?.includes(authorization.state.user.id) + ), + [authorization, resource], + ) + + const canAdministrate = + React.useMemo( + () => !resource || + ( + authorization && authorization.state.user && authorization.state.user.id === resource.value.owner + ), + [authorization, resource], + ) + + const canSubmit = React.useMemo( () => name.validity === true && access.validity === true && Boolean(authorization?.state.user?.username), [name, access, authorization], @@ -69,22 +104,31 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu if(!authorization?.state.token) { return null } + if(!( + viewSet || resource + )) { + return null + } + if(!canEdit) { + return null + } return (
- Create a new group + {resource ? <>Edit {resource.value.name} : "Create a new group"}
- + 0 ? true : undefined}/> - - + + - { - viewSet.operationError ? - - - - : null - } - - Create + + {resource ? "Edit" : "Create"} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index de9f918..7f862ad 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1617,10 +1617,10 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@steffo/bluelib-react@^4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.4.tgz#1a4f4ccd3ee185603a95b7a0a183a919f29e9d32" - integrity sha512-ZwnAqbZ4LaYbQu56fMX0OIKBJA1X4LUfTIJsxnkJbPrr2qX0D+zQUl2vI2Jm/wlZdltvwm5ftCTLDwpqg/1h/g== +"@steffo/bluelib-react@^4.0.5": + version "4.0.5" + resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.5.tgz#6128454b03fc1888c4e7f4dbb1675f71fba2153c" + integrity sha512-W2TguaP5vixV0C1/chQ+SO69YydBMLWG+ml7TVgRIHoRtr3cKHpp8VVij8qxovdZ1dnkBMD9/z3skcdoRpToag== dependencies: "@babel/runtime" "^7.15.3" classnames "^2.3.1"