62 lines
1.8 KiB
TypeScript
Executable File
62 lines
1.8 KiB
TypeScript
Executable File
import {useRole} from '../requests/use-role';
|
|
import {FullPageLoader} from '../../../ui/progress/full-page-loader';
|
|
import {Role} from '../../../auth/role';
|
|
import {Trans} from '../../../i18n/trans';
|
|
import {useForm} from 'react-hook-form';
|
|
import {Tabs} from '../../../ui/tabs/tabs';
|
|
import {Tab} from '../../../ui/tabs/tab';
|
|
import {TabList} from '../../../ui/tabs/tab-list';
|
|
import {TabPanel, TabPanels} from '../../../ui/tabs/tab-panels';
|
|
import {useUpdateRole} from '../requests/use-update-role';
|
|
import {CrupdateResourceLayout} from '../../crupdate-resource-layout';
|
|
import {CrupdateRolePageSettingsPanel} from './crupdate-role-settings-panel';
|
|
import {EditRolePageUsersPanel} from './edit-role-page-users-panel';
|
|
|
|
export function EditRolePage() {
|
|
const query = useRole();
|
|
|
|
if (query.status !== 'success') {
|
|
return <FullPageLoader />;
|
|
}
|
|
|
|
return <PageContent role={query.data.role} />;
|
|
}
|
|
|
|
interface PageContentProps {
|
|
role: Role;
|
|
}
|
|
function PageContent({role}: PageContentProps) {
|
|
const form = useForm<Role>({defaultValues: role});
|
|
const updateRole = useUpdateRole();
|
|
|
|
return (
|
|
<CrupdateResourceLayout
|
|
form={form}
|
|
onSubmit={values => {
|
|
updateRole.mutate(values);
|
|
}}
|
|
title={<Trans message="Edit “:name“ role" values={{name: role.name}} />}
|
|
isLoading={updateRole.isPending}
|
|
>
|
|
<Tabs isLazy>
|
|
<TabList>
|
|
<Tab>
|
|
<Trans message="Settings" />
|
|
</Tab>
|
|
<Tab>
|
|
<Trans message="Users" />
|
|
</Tab>
|
|
</TabList>
|
|
<TabPanels className="pt-20">
|
|
<TabPanel>
|
|
<CrupdateRolePageSettingsPanel isInternal={role.internal} />
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<EditRolePageUsersPanel role={role} />
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</CrupdateResourceLayout>
|
|
);
|
|
}
|