61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
import Add from "@mui/icons-material/Add";
|
|
import { DataState } from "@/shared/ui/DataState.jsx";
|
|
import {
|
|
AdminActionIconButton,
|
|
AdminListBody,
|
|
AdminListPage,
|
|
AdminListToolbar,
|
|
} from "@/shared/ui/AdminListLayout.jsx";
|
|
import { RoleFormDrawer } from "@/features/roles/components/RoleFormDrawer.jsx";
|
|
import { RoleTable } from "@/features/roles/components/RoleTable.jsx";
|
|
import { useRolesPage } from "@/features/roles/hooks/useRolesPage.js";
|
|
|
|
export function RoleManagementPage() {
|
|
const page = useRolesPage();
|
|
|
|
return (
|
|
<>
|
|
<AdminListPage>
|
|
<AdminListToolbar
|
|
actions={
|
|
page.abilities.canCreate ? (
|
|
<AdminActionIconButton label="新增角色" primary onClick={page.openCreate}>
|
|
<Add fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null
|
|
}
|
|
/>
|
|
|
|
<DataState error={page.error} loading={page.loading} onRetry={page.reload}>
|
|
<AdminListBody>
|
|
<RoleTable
|
|
abilities={page.abilities}
|
|
query={page.query}
|
|
onEdit={page.openEdit}
|
|
onQueryChange={page.changeQuery}
|
|
onRemove={page.remove}
|
|
roles={page.roles}
|
|
/>
|
|
<div className="pagination-bar">
|
|
<span>{page.roles.length} 条</span>
|
|
</div>
|
|
</AdminListBody>
|
|
</DataState>
|
|
</AdminListPage>
|
|
|
|
<RoleFormDrawer
|
|
abilities={page.abilities}
|
|
editingRole={page.editingRole}
|
|
form={page.form}
|
|
onClose={page.closeDrawer}
|
|
onSubmit={page.submit}
|
|
onTogglePermissionGroup={page.togglePermissionGroup}
|
|
onTogglePermission={page.togglePermission}
|
|
open={page.drawerOpen}
|
|
permissionGroups={page.permissionGroups}
|
|
setForm={page.setForm}
|
|
/>
|
|
</>
|
|
);
|
|
}
|