138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Column from "../../../../components/common/columns";
|
|
import { Paginated } from "../../../../services/Paginated";
|
|
import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
|
|
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";
|
|
|
|
const initialPagedData: Paginated<RoleUser> = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 0,
|
|
totalPages: 1,
|
|
data: [],
|
|
};
|
|
|
|
interface UserRoleEditorProps {
|
|
role: any | undefined;
|
|
}
|
|
|
|
const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
|
|
const { t } = useTranslation();
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [pagedData, setPagedData] =
|
|
useState<Paginated<RoleUser>>(initialPagedData);
|
|
const [sortColumn, setSortColumn] = useState<Column<RoleUser>>({
|
|
key: "name",
|
|
label: t("Name"),
|
|
order: "asc",
|
|
});
|
|
const [filters, setFilters] = useState<Map<string, string>>(
|
|
() => new Map<string, string>(),
|
|
);
|
|
|
|
const roleGeneralIdRef = useMemo(
|
|
() => MakeGeneralIdRef(role?.id, role?.guid),
|
|
[role?.id, role?.guid],
|
|
);
|
|
|
|
const getRoleUsers = useCallback(
|
|
async (
|
|
page: number,
|
|
pageSize: number,
|
|
nextSortColumn: Column<RoleUser>,
|
|
nextFilters: Map<string, string>,
|
|
) => {
|
|
const pagedDataResult = await roleService.getRoleUsers(
|
|
page,
|
|
pageSize,
|
|
nextSortColumn.key,
|
|
nextSortColumn.order === "asc",
|
|
roleGeneralIdRef,
|
|
nextFilters,
|
|
);
|
|
if (pagedDataResult) {
|
|
setLoaded(true);
|
|
setFilters(nextFilters);
|
|
setPagedData(pagedDataResult);
|
|
setSortColumn(nextSortColumn);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
},
|
|
[roleGeneralIdRef],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const loadInitial = async () => {
|
|
await getRoleUsers(
|
|
initialPagedData.page,
|
|
initialPagedData.pageSize,
|
|
sortColumn,
|
|
new Map<string, string>(),
|
|
);
|
|
};
|
|
|
|
void loadInitial();
|
|
}, [getRoleUsers, role?.id, sortColumn]);
|
|
|
|
const changePage = async (page: number, pageSize: number) => {
|
|
await getRoleUsers(page, pageSize, sortColumn, filters);
|
|
};
|
|
|
|
const onSort = async (nextSortColumn: Column<RoleUser>) => {
|
|
const { page, pageSize } = pagedData;
|
|
await getRoleUsers(page, pageSize, nextSortColumn, filters);
|
|
};
|
|
|
|
const onSearch = async (name: string, value: string) => {
|
|
const { page, pageSize } = pagedData;
|
|
const nextFilters = new Map(filters);
|
|
nextFilters.set(name, value);
|
|
|
|
await getRoleUsers(page, pageSize, sortColumn, nextFilters);
|
|
};
|
|
|
|
const onDelete = async (user?: RoleUser) => {
|
|
const userId = MakeGeneralIdRef(user?.id, user?.guid);
|
|
|
|
const response = await roleService.deleteRoleUser(userId, roleGeneralIdRef);
|
|
if (response) {
|
|
await changePage(pagedData.page, pagedData.pageSize);
|
|
}
|
|
};
|
|
|
|
const addLink = "editRole/" + role?.id + "/addUserToRole";
|
|
|
|
return (
|
|
<Loading loaded={loaded}>
|
|
<Permission privilegeKey="AddRoleUser">
|
|
<div>
|
|
<Button
|
|
id="btnAddUserToRole"
|
|
buttonType={ButtonType.primary}
|
|
to={addLink}
|
|
>
|
|
{t("Add")}
|
|
</Button>
|
|
</div>
|
|
</Permission>
|
|
<hr />
|
|
<UserRolesTable
|
|
data={pagedData}
|
|
sortColumn={sortColumn}
|
|
onChangePage={changePage}
|
|
onSort={onSort}
|
|
onSearch={onSearch}
|
|
onDelete={onDelete}
|
|
/>
|
|
</Loading>
|
|
);
|
|
};
|
|
|
|
export default UserRoleEditor;
|