117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import Column from "../../../../components/common/columns";
|
|
import { Paginated } from "../../../../services/Paginated";
|
|
import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
|
|
import withRouter, { RouterProps } from "../../../../utils/withRouter";
|
|
import UserRolesTable from "./UserRolesTable";
|
|
import roleService, { RoleUser } from "../serrvices/rolesService";
|
|
import Button, { ButtonType } from "../../../../components/common/Button";
|
|
import Loading from "../../../../components/common/Loading";
|
|
import Permission from "../../../../components/common/Permission";
|
|
|
|
interface UserRoleEditorState{
|
|
loaded: boolean,
|
|
pagedData : Paginated<RoleUser>,
|
|
sortColumn : Column<RoleUser>,
|
|
filters: Map<string, string>;
|
|
}
|
|
|
|
interface UserRoleEditorProps extends RouterProps{
|
|
role : any | undefined
|
|
}
|
|
|
|
class UserRoleEditorNoRouter extends React.Component<UserRoleEditorProps, UserRoleEditorState> {
|
|
state : UserRoleEditorState = {
|
|
loaded : false,
|
|
pagedData : { page: 1,
|
|
pageSize : 10,
|
|
count: 0,
|
|
totalPages: 1,
|
|
data: [] },
|
|
sortColumn: { key: "name", label: "Name", order: "asc" },
|
|
filters: new Map<string, string>()
|
|
}
|
|
|
|
componentDidMount = async () => {
|
|
const { page, pageSize } = this.state.pagedData;
|
|
|
|
await this.changePage(page, pageSize);
|
|
}
|
|
|
|
async componentDidUpdate(prevProps: Readonly<UserRoleEditorProps>, prevState: Readonly<UserRoleEditorState>, snapshot?: any) {
|
|
if (prevProps.role?.id !== this.props.role?.id) {
|
|
this.componentDidMount();
|
|
}
|
|
}
|
|
|
|
changePage = async(page: number, pageSize : number) =>{
|
|
const { sortColumn, filters } = this.state;
|
|
|
|
await this.getRoleUsers(page, pageSize, sortColumn, filters);
|
|
}
|
|
|
|
onSort = async(sortColumn : Column<RoleUser>) => {
|
|
const {page, pageSize } = this.state.pagedData;
|
|
const { filters } = this.state;
|
|
|
|
await this.getRoleUsers(page, pageSize, sortColumn, filters);
|
|
}
|
|
|
|
onSearch = async ( name: string, value: string) => {
|
|
const {page, pageSize } = this.state.pagedData;
|
|
const {sortColumn, filters } = this.state;
|
|
filters.set(name, value);
|
|
|
|
await this.getRoleUsers(page, pageSize, sortColumn, filters);
|
|
};
|
|
|
|
getRoleUsers = async ( page : number, pageSize : number, sortColumn : Column<RoleUser>, filters : Map<string, string>) => {
|
|
|
|
const { role } = this.props;
|
|
const roleGeneralIdRef = MakeGeneralIdRef( role?.id, role?.guid);
|
|
const pagedData = await roleService.getRoleUsers(page, pageSize, sortColumn.key, sortColumn.order === "asc", roleGeneralIdRef, filters);
|
|
if (pagedData) {
|
|
this.setState({ loaded: true, filters, pagedData, sortColumn });
|
|
}
|
|
else {
|
|
this.setState({ loaded: false });
|
|
}
|
|
}
|
|
|
|
onDelete = async ( user? : RoleUser) => {
|
|
const { role } = this.props;
|
|
|
|
const roleId = MakeGeneralIdRef(role?.id, role?.guid);
|
|
const userId = MakeGeneralIdRef(user?.id, user?.guid);
|
|
|
|
const response = await roleService.deleteRoleUser(userId, roleId);
|
|
if (response) {
|
|
this.componentDidMount();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {loaded, pagedData, sortColumn } = this.state;
|
|
|
|
const { role } = this.props;
|
|
|
|
const addLink = "editRole/" + role.id + "/addUserToRole";
|
|
|
|
return (
|
|
<Loading loaded={loaded}>
|
|
<Permission privilegeKey="AddRoleUser">
|
|
<div>
|
|
<Button id="btnAddUserToRole" buttonType={ButtonType.primary} to={addLink}>Add</Button>
|
|
</div>
|
|
</Permission>
|
|
<hr/>
|
|
<UserRolesTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete}/>
|
|
</Loading>
|
|
);
|
|
}
|
|
}
|
|
|
|
const UserRoleEditor = withRouter(UserRoleEditorNoRouter);
|
|
|
|
export default UserRoleEditor;
|