diff --git a/public/locales/en/common.json b/public/locales/en/common.json index d3eef23..4ca6adb 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,14 +1,19 @@ { "Activate": "Activate", + "Add": "Add", + "AddDomain": "Add Domain", + "Address": "Address", "Admin": "Admin", "AnEmailWithPasswordResetLinkHasBeenSent": "An email with a password reset link has been sent.", "AnErrorOccurred": "An error occurred", "Application": "Application", "Applications": "Applications", + "Allowed": "Allowed", "AuditLog": "Audit Logs", "AuditLogs": "Audit Logs", "BlockedIPAddresses": "Blocked IP addresses", "BlockedIPs": "Blocked IPs", + "Cancel": "Cancel", "Changes": "Changes", "ClientDomainManager": "Client Domain Manager", "ClientDomains": "Client Domains", @@ -18,6 +23,8 @@ "CustomFields": "Custom Fields", "DisableAuthenticator": "Disable Authenticator", "DisplayName": "Display Name", + "Edit": "Edit", + "EditDomain": "Edit Domain", "e-print": "e-print", "e-suite": "e-suite", "e-suiteLogo": "e-suite logo", @@ -29,14 +36,18 @@ "FieldType": "Field Type", "Forms": "Forms", "FormTemplateManager": "Form Template Manager", + "General": "General", "Glossaries": "Glossaries", "GlossaryManager": "Glossary Manager", + "Group": "Group", "Home": "Home", "Id": "Id", "IPAddress": "IP Address", "IPAddressUnblocked": "IP Address '{{ip}}' unblocked.", + "Items": "Items", "Loading": "Loading", "LoggingOut": "Logging out", + "MailTemplates": "Mail Templates", "Message": "Message", "Name": "Name", "NewPassword": "New Password", @@ -51,6 +62,9 @@ "PasswordsMustMatch": "You need to confirm by typing exactly the same as the new password", "PressAgainToUnblock": "Press again to unblock", "ResetPassword": "Reset Password", + "RoleAccess": "Role Access", + "RoleAccessUpdated": "Role access updated successfully.", + "SecurityRoles": "Security Roles", "Save": "Save", "Sequence": "Sequence", "SequenceManager": "Sequence Manager", @@ -60,14 +74,17 @@ "SpecificationManager": "Specification Manager", "SsoManager": "Sso Manager", "StackTrace": "Stack Trace", + "Status": "Status", "Support": "Support", "SupportingData": "Supporting Data", "Timing": "Timing", "Type": "Type", + "Up": "Up", "UnblockedInMinutes": "Unblocked In (Minutes)", "UserManager": "User Manager", "UserName": "User Name", "UsernameIsRequired": "Username is required", + "Version": "Version", "UsernameMustBeValidEmail": "Username must be a valid email", "Users": "Users" } diff --git a/src/modules/manager/customfields/customFields.tsx b/src/modules/manager/customfields/customFields.tsx index a471211..bcc4355 100644 --- a/src/modules/manager/customfields/customFields.tsx +++ b/src/modules/manager/customfields/customFields.tsx @@ -1,99 +1,150 @@ -import React, { Component } from 'react'; -import Column from '../../../components/common/columns'; -import { Paginated } from '../../../services/Paginated'; -import CustomFieldsTable from './components/CustomFieldsTable'; -import customFieldsService, { CustomField } from './services/customFieldsService'; -import Button, { ButtonType } from '../../../components/common/Button'; -import Loading from '../../../components/common/Loading'; -import Permission from '../../../components/common/Permission'; +import React, { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import Column from "../../../components/common/columns"; +import { Paginated } from "../../../services/Paginated"; +import CustomFieldsTable from "./components/CustomFieldsTable"; +import customFieldsService, { + CustomField, +} from "./services/customFieldsService"; +import Button, { ButtonType } from "../../../components/common/Button"; +import Loading from "../../../components/common/Loading"; +import Permission from "../../../components/common/Permission"; -interface CustomFieldsState { - loaded: boolean, - pagedData: Paginated, - sortColumn: Column, - filters: Map; -} +const initialPagedData: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; -class CustomFields extends Component { - state = { - loaded: false, - pagedData: { - page: 1, - pageSize: 10, - count: 0, - totalPages: 1, - data: [] - }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() - } +const initialSortColumn: Column = { + key: "name", + label: "Name", + order: "asc", +}; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; +const CustomFields: React.FC = () => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = + useState>(initialPagedData); + const [sortColumn, setSortColumn] = + useState>(initialSortColumn); + const [filters, setFilters] = useState>( + () => new Map(), + ); - await this.changePage(page, pageSize); - } - - changePage = async (page: number, pageSize: number) => { - const { sortColumn, filters } = this.state; - - const pagedData = await customFieldsService.getFields(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } - } - - onSort = async (sortColumn: Column) => { - const { page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const pagedData = await customFieldsService.getFields(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } - } - - onSearch = async (name: string, value: string) => { - const { page, pageSize } = this.state.pagedData; - const { sortColumn, filters } = this.state; - filters.set(name, value); - - const pagedData = await customFieldsService.getFields(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } + useEffect(() => { + const loadInitial = async () => { + const pagedDataResult = await customFieldsService.getFields( + initialPagedData.page, + initialPagedData.pageSize, + initialSortColumn.key, + initialSortColumn.order === "asc", + new Map(), + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + } else { + setLoaded(false); + } }; - onDelete = async (item?: CustomField) => { - const response = await customFieldsService.deleteField(item?.id, item?.guid); - if (response) { - this.componentDidMount(); - } - } + void loadInitial(); + }, []); - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - -
- -
- -
- - - ); + const changePage = async (page: number, pageSize: number) => { + const pagedDataResult = await customFieldsService.getFields( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + } else { + setLoaded(false); } + }; + + const onSort = async (nextSortColumn: Column) => { + const { page, pageSize } = pagedData; + const pagedDataResult = await customFieldsService.getFields( + page, + pageSize, + nextSortColumn.key, + nextSortColumn.order === "asc", + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + setSortColumn(nextSortColumn); + } else { + setLoaded(false); + } + }; + + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const nextFilters = new Map(filters); + nextFilters.set(name, value); + + const pagedDataResult = await customFieldsService.getFields( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + nextFilters, + ); + if (pagedDataResult) { + setLoaded(true); + setFilters(nextFilters); + setPagedData(pagedDataResult); + } else { + setLoaded(false); + } + }; + + const onDelete = async (item?: CustomField) => { + const response = await customFieldsService.deleteField( + item?.id, + item?.guid, + ); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); + } + }; + + const translatedSortColumn = useMemo( + () => ({ ...sortColumn, label: t("Name") }), + [sortColumn, t], + ); + + return ( + + +
+ +
+ +
+ + + ); }; export default CustomFields; diff --git a/src/modules/manager/domains/Domains.tsx b/src/modules/manager/domains/Domains.tsx index 2d346b5..dc08981 100644 --- a/src/modules/manager/domains/Domains.tsx +++ b/src/modules/manager/domains/Domains.tsx @@ -1,97 +1,130 @@ -import React, { Component } from 'react'; -import Column from '../../../components/common/columns'; -import { Paginated } from '../../../services/Paginated'; -import DomainsTable from './components/domainsTable'; -import domainsService, { GetDomain } from './serrvices/domainsService'; -import Button, { ButtonType } from '../../../components/common/Button'; -import Loading from '../../../components/common/Loading'; -import Permission from '../../../components/common/Permission'; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import Column from "../../../components/common/columns"; +import { Paginated } from "../../../services/Paginated"; +import DomainsTable from "./components/domainsTable"; +import domainsService, { GetDomain } from "./serrvices/domainsService"; +import Button, { ButtonType } from "../../../components/common/Button"; +import Loading from "../../../components/common/Loading"; +import Permission from "../../../components/common/Permission"; -interface DomainsState{ - loaded: boolean; - pagedData : Paginated, - sortColumn : Column, - filters: Map; -} +const initialPagedData: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; -class Domains extends Component< any, any, DomainsState> { - state = { - loaded : false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() - } +const Domains: React.FC = () => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = + useState>(initialPagedData); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + () => new Map(), + ); - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); - } - - changePage = async(page: number, pageSize : number) =>{ - const { sortColumn, filters } = this.state; - - const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } - } - - onSort = async(sortColumn : Column) => { - const {page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } - } - - onSearch = async ( name: string, value: string) => { - const {page, pageSize } = this.state.pagedData; - const {sortColumn, filters } = this.state; - filters.set(name, value); - - const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } + useEffect(() => { + const loadInitial = async () => { + await changePage(initialPagedData.page, initialPagedData.pageSize); }; - onDelete = async ( keyValue? : GetDomain) => { - const response = await domainsService.deleteDomain( keyValue?.id, keyValue?.guid); - if (response) { - this.componentDidMount(); - } - } + void loadInitial(); + }, []); - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - -
- -
- -
- - - ); + const changePage = async (page: number, pageSize: number) => { + const pagedDataResult = await domainsService.getDomains( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + } else { + setLoaded(false); } + }; + + const onSort = async (nextSortColumn: Column) => { + const { page, pageSize } = pagedData; + const pagedDataResult = await domainsService.getDomains( + page, + pageSize, + nextSortColumn.key, + nextSortColumn.order === "asc", + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + setSortColumn(nextSortColumn); + } else { + setLoaded(false); + } + }; + + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const nextFilters = new Map(filters); + nextFilters.set(name, value); + + const pagedDataResult = await domainsService.getDomains( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + nextFilters, + ); + if (pagedDataResult) { + setLoaded(true); + setFilters(nextFilters); + setPagedData(pagedDataResult); + } else { + setLoaded(false); + } + }; + + const onDelete = async (keyValue?: GetDomain) => { + const response = await domainsService.deleteDomain( + keyValue?.id, + keyValue?.guid, + ); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); + } + }; + + const translatedSortColumn = { ...sortColumn, label: t("Name") }; + + return ( + + +
+ +
+ +
+ + + ); }; export default Domains; diff --git a/src/modules/manager/domains/DomainsDetails.tsx b/src/modules/manager/domains/DomainsDetails.tsx index 4cdbe5d..ae1da79 100644 --- a/src/modules/manager/domains/DomainsDetails.tsx +++ b/src/modules/manager/domains/DomainsDetails.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { useTranslation } from "react-i18next"; import HorizontalTabs from "../../../components/common/HorizionalTabs"; import Tab from "../../../components/common/Tab"; import authentication from "../../frame/services/authenticationService"; @@ -7,54 +8,47 @@ import MailTemplatesTab from "./components/MailTemplatesTab"; import SecurityRolesTab from "./components/SecurityRolesTab"; interface DomainsDetailsProps { - editMode : boolean; + editMode: boolean; } -class DomainsDetails extends React.Component { - isEditMode = () => { - const { editMode } = this.props; - return editMode; - }; +const DomainsDetails: React.FC = ({ editMode }) => { + const { t } = useTranslation(); - render() { - const isEditMode = this.isEditMode(); - const canViewMailTemplates = authentication.hasAccess("ViewDomain") - const canViewSecurityRoles = authentication.hasAccess("ViewRole") + const canViewMailTemplates = authentication.hasAccess("ViewDomain"); + const canViewSecurityRoles = authentication.hasAccess("ViewRole"); - let mode = "Add"; - if (isEditMode) mode = "Edit"; + const heading = editMode ? t("EditDomain") : t("AddDomain"); + const tabs: JSX.Element[] = []; - let tabs : JSX.Element[] = []; + tabs.push( + + + , + ); - tabs.push( - - ); - - if (isEditMode) { - if (canViewMailTemplates) { - tabs.push( - - - ); - } - if (canViewSecurityRoles) { - tabs.push( - - - ); - } - } - - return ( -
-

{mode} Domain

- - {tabs} - -
- ); + if (editMode) { + if (canViewMailTemplates) { + tabs.push( + + + , + ); } -} + if (canViewSecurityRoles) { + tabs.push( + + + , + ); + } + } + return ( +
+

{heading}

+ {tabs} +
+ ); +}; export default DomainsDetails; diff --git a/src/modules/manager/domains/components/MailTemplatesTab.tsx b/src/modules/manager/domains/components/MailTemplatesTab.tsx index c86f65b..31a461b 100644 --- a/src/modules/manager/domains/components/MailTemplatesTab.tsx +++ b/src/modules/manager/domains/components/MailTemplatesTab.tsx @@ -1,82 +1,80 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import withRouter, { RouterProps } from "../../../../utils/withRouter"; import mailTemplatesService from "../serrvices/mailTemplatesService"; import HOCEmailTemplateEditor from "./EmailTemplateEditor"; import Loading from "../../../../components/common/Loading"; -interface MailType{ - mailType : string; - description : string; +interface MailType { + mailType: string; + description: string; } -interface MailTemplatesTabState{ - loaded : boolean; - currentMailType : string; - types : MailType[] -} +interface MailTemplatesTabProps extends RouterProps {} -interface MailTemplatesTabProps extends RouterProps{ - -} +const MailTemplatesTabNoRouter: React.FC = ({ + router, +}) => { + const [loaded, setLoaded] = useState(false); + const [currentMailType, setCurrentMailType] = useState(""); + const [types, setTypes] = useState([]); -class MailTemplatesTabNoRouter extends React.Component { - state : MailTemplatesTabState = { - loaded : false, - currentMailType : "", - types: [] - } + useEffect(() => { + const loadTypes = async () => { + const response = await mailTemplatesService.getTypes(0, 10, "", true); + if (response) { + const nextTypes = response.data as MailType[]; + setTypes(nextTypes); - async componentDidMount() { - const types = await mailTemplatesService.getTypes(0,10,"",true); - if (types) { - this.setState({ types: types.data as MailType[] }); - - if ((types.data as MailType[])?.length > 0) { - this.SelectTemplate((types.data as MailType[])[0].mailType); - } + if (nextTypes.length > 0) { + setLoaded(true); + setCurrentMailType(nextTypes[0].mailType); } - } - - onClick = (e: React.MouseEvent) => { - const { target } = e; - - const value = (target as HTMLElement).getAttribute("value"); - - this.SelectTemplate(value!); + } }; - SelectTemplate = ( emailType : string) => { - const { currentMailType } = this.state; + void loadTypes(); + }, []); - if (currentMailType !== emailType) - { - console.log("Selecting", emailType); - this.setState({ loaded: true, currentMailType : emailType}); - } + const selectTemplate = (emailType: string) => { + if (currentMailType !== emailType) { + setLoaded(true); + setCurrentMailType(emailType); } + }; - render() { - const { domainId } = this.props.router.params; - const { loaded, types, currentMailType } = this.state; - - return ( - -
-
-
    - { types.map( (x) => { - return
  • {x.description}
    • - })} -
-
-
- -
-
- - ); + const onClick = (e: React.MouseEvent) => { + const value = (e.target as HTMLElement).getAttribute("value"); + if (value) { + selectTemplate(value); } -} + }; + + const { domainId } = router.params; + + return ( + +
+
+
    + {types.map((x) => { + return ( +
  • + {x.description} +
    • + ); + })} +
+
+
+ +
+
+ + ); +}; const MailTemplatesTab = withRouter(MailTemplatesTabNoRouter); diff --git a/src/modules/manager/domains/components/RoleAccessEditor.tsx b/src/modules/manager/domains/components/RoleAccessEditor.tsx index a5b97e9..b9b0615 100644 --- a/src/modules/manager/domains/components/RoleAccessEditor.tsx +++ b/src/modules/manager/domains/components/RoleAccessEditor.tsx @@ -1,166 +1,186 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import Column from "../../../../components/common/columns"; import { Paginated } from "../../../../services/Paginated"; import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef"; import withRouter, { RouterProps } from "../../../../utils/withRouter"; -import roleService, { GetRoleSecurityAccess, GetSecurityAccess } from "../serrvices/rolesService"; +import roleService, { + GetRoleSecurityAccess, + GetSecurityAccess, +} from "../serrvices/rolesService"; import RollAccessTable from "./RollAccessTable"; import Loading from "../../../../components/common/Loading"; -interface RoleAccessEditorState{ - loaded: boolean, - accessList : Paginated, - accessRightsForRole : Paginated, - pagedData : Paginated, - sortColumn : Column, - filters: Map; +const initialPagedData: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; + +const initialAccessList: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; + +interface RoleAccessEditorProps extends RouterProps { + role: any | undefined; } -interface RoleAccessEditorProps extends RouterProps{ - role : any | undefined -} +const RoleAccessEditorNoRouter: React.FC = ({ + role, + router, +}) => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [accessList, setAccessList] = + useState>(initialAccessList); + const [accessRightsForRole, setAccessRightsForRole] = + useState>(initialPagedData); + const [pagedData, setPagedData] = + useState>(initialPagedData); + const [sortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); -class RoleAccessEditorNoRouter extends React.Component { - state : RoleAccessEditorState = { - loaded : false, - accessList : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - accessRightsForRole : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() + const isItemSelected = ( + securityAccess: string, + roleAccessList: unknown[] | undefined, + ): boolean => { + if (roleAccessList === undefined) return false; + + const filtered = roleAccessList.filter( + (x) => (x as any).securityAccess === securityAccess, + ); + return filtered.length > 0; + }; + + const compileAccessRightsPagedData = ( + masterList: GetSecurityAccess[] | undefined, + roleAccessList: unknown[] | undefined, + ): Paginated => { + if (masterList === undefined) { + return initialPagedData; } - componentDidMount = async () => { - await this.updatePage(); + if (roleAccessList === undefined) { + return { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: masterList as GetRoleSecurityAccess[], + }; } - async componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { - if (prevProps.role?.id !== this.props.role?.id) { - await this.updatePage(); - } + const accessRightsForRoleData = masterList.map((value) => { + const item: any = value; + item.selected = isItemSelected(item.securityAccess, roleAccessList); + return item; + }); + + return { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: accessRightsForRoleData, + }; + }; + + const changePage = async (nextAccessList?: Paginated) => { + const list = nextAccessList || accessList; + + const roleAccessFilters = new Map(); + roleAccessFilters.set("roleId", String(role?.id)); + const accessRightsResponse = await roleService.getRoleAccess( + 0, + 10, + "name", + true, + roleAccessFilters, + ); + + if (accessRightsResponse) { + const nextPagedData = compileAccessRightsPagedData( + list?.data, + accessRightsResponse?.data, + ); + if (nextPagedData) { + setLoaded(true); + setAccessRightsForRole(accessRightsResponse); + setPagedData(nextPagedData); + } + } else { + setLoaded(false); + } + }; + + const updatePage = async (nextAccessList?: Paginated) => { + if (nextAccessList && nextAccessList.count === 0) { + const list = await roleService.getAccessList(0, 10, "name", true); + setAccessList(list); + await changePage(list); + } else { + await changePage(nextAccessList); + } + }; + + useEffect(() => { + const loadInitial = async () => { + let list = accessList; + if (list.count === 0) { + list = await roleService.getAccessList(0, 10, "name", true); + setAccessList(list); + } + await updatePage(list); + }; + + void loadInitial(); + }, [role?.id]); + + const handleSave = async (additions: string[], deletions: string[]) => { + const roleGeneralIdRef = MakeGeneralIdRef(role?.id, role?.guid); + let response = undefined; + + if (additions.length > 0) { + response = await roleService.addRoleAccess(roleGeneralIdRef, additions); } - updatePage = async() => - { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); + if (deletions.length > 0) { + response = await roleService.deleteRoleAccess( + roleGeneralIdRef, + deletions, + ); } - changePage = async(page: number, pageSize : number) => { - let { accessList } = this.state; - const { role } = this.props; - - if (accessList?.count === 0) - { - accessList = await roleService.getAccessList(0, 10, "name", true ); - this.setState({ accessList }); - } - - const roleAccessfilters = new Map(); - roleAccessfilters.set( "roleId", String(role?.id)); - const accessRightsForRole = await roleService.getRoleAccess(0,10,"name",true, roleAccessfilters); - if (accessRightsForRole) { - const pagedData = this.complieAccessRightsPagedData(accessList?.data, accessRightsForRole?.data); - if (pagedData) { - this.setState({ loaded: true, accessRightsForRole, pagedData }); - } - } - else { - this.setState({ loaded: false }); - } + if (response) { + toast.info(t("RoleAccessUpdated")); + await updatePage(accessList); } + }; - IsItemSelected = (securityAccess: string, roleAccess: unknown[] | undefined) : boolean => { - if (roleAccess === undefined) - return false; + const isAdministrator = role?.isAdministrator || role?.isSuperUser; - const filtered = roleAccess?.filter( (x) => (x as any).securityAccess === securityAccess); - - return filtered!.length > 0; - } - - complieAccessRightsPagedData = (masterList: GetSecurityAccess[] | undefined, roleAccess: unknown[] | undefined) : Paginated => { - if ( masterList === undefined ) { - return { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] } - } - - if (roleAccess === undefined) { - return { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: (masterList as GetRoleSecurityAccess[]) } - } - - const accessrightsForRole : Paginated = { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] - } - - accessrightsForRole.data = masterList.map( value => { - let item : any = value - item.selected = this.IsItemSelected(item.securityAccess, roleAccess); - return item - }) - - return accessrightsForRole; - } - - handleSave = async ( additions : string[], deletions : string[] ) => { - const { role } = this.props; - - const roleGeneralIdRef = MakeGeneralIdRef(role?.id, role?.guid); - let response = undefined; - if (additions.length > 0) - { - response = await roleService.addRoleAccess( roleGeneralIdRef, additions); - } - - if (deletions.length > 0) - { - response = await roleService.deleteRoleAccess( roleGeneralIdRef, deletions); - } - if (response) { - toast.info("Role access updated successfully.") - await this.updatePage(); - } - } - - render() { - const { loaded, pagedData } = this.state; - - const { role } = this.props; - const isAdministrator = role.isAdministrator || role.isSuperUser; - - return ( - - - - ); - } -} + return ( + + + + ); +}; const RoleAccessEditor = withRouter(RoleAccessEditorNoRouter); export default RoleAccessEditor; - diff --git a/src/modules/manager/domains/components/RolesEditor.tsx b/src/modules/manager/domains/components/RolesEditor.tsx index b1b659b..1f33203 100644 --- a/src/modules/manager/domains/components/RolesEditor.tsx +++ b/src/modules/manager/domains/components/RolesEditor.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; import { Paginated } from "../../../../services/Paginated"; import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef"; @@ -9,132 +10,160 @@ import Button, { ButtonType } from "../../../../components/common/Button"; import Loading from "../../../../components/common/Loading"; import Permission from "../../../../components/common/Permission"; -interface RolesEditorState{ - loaded : boolean, - pagedData : Paginated, - sortColumn : Column, - filters: Map; +const initialPagedData: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; + +interface RolesEditorProps extends RouterProps { + selectedRole?: GetRoleResponse; + onSelectRole?: (keyValue: any) => void; + onUnselectRole?: () => void; } -interface RolesEditorProps extends RouterProps{ - selectedRole? : GetRoleResponse; - onSelectRole?: (keyValue: any) => void; - onUnselectRole?: () => void; -} +const RolesEditorTabNoRouter: React.FC = ({ + selectedRole, + onSelectRole, + onUnselectRole, + router, +}) => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = + useState>(initialPagedData); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + () => new Map(), + ); -class RolesEditorTabNoRouter extends React.Component { - state : RolesEditorState = { - loaded : false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() - } + const { domainId } = router.params; + const domainGeneralIdRef = MakeGeneralIdRef(domainId); - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); - } - - changePage = async(page: number, pageSize : number) =>{ - const { sortColumn, filters } = this.state; - const { domainId } = this.props.router.params; - - const domainGeneralIdRef = MakeGeneralIdRef( domainId); - - const pagedData = await roleService.getRoles(page, pageSize, sortColumn.key, sortColumn.order === "asc", domainGeneralIdRef, filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } - } - - onSort = async(sortColumn : Column) => { - const {page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const { domainId } = this.props.router.params; - - const domainGeneralIdRef = MakeGeneralIdRef( domainId); - const pagedData = await roleService.getRoles(page, pageSize, sortColumn.key, sortColumn.order === "asc", domainGeneralIdRef, filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } - } - - onSearch = async ( name: string, value: string) => { - const {page, pageSize } = this.state.pagedData; - const {sortColumn, filters } = this.state; - const { domainId } = this.props.router.params; - const domainGeneralIdRef = MakeGeneralIdRef( domainId); - - filters.set(name, value); - - const pagedData = await roleService.getRoles(page, pageSize, sortColumn.key, sortColumn.order === "asc", domainGeneralIdRef, filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } + useEffect(() => { + const loadInitial = async () => { + await changePage(initialPagedData.page, initialPagedData.pageSize); }; - canEdit = ( keyValue : any) => { - return keyValue.canDelete; + void loadInitial(); + }, [domainId]); + + const changePage = async (page: number, pageSize: number) => { + const pagedDataResult = await roleService.getRoles( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + domainGeneralIdRef, + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + } else { + setLoaded(false); } + }; - canDelete = ( keyValue : any) => { - return keyValue.canDelete; + const onSort = async (nextSortColumn: Column) => { + const { page, pageSize } = pagedData; + + const pagedDataResult = await roleService.getRoles( + page, + pageSize, + nextSortColumn.key, + nextSortColumn.order === "asc", + domainGeneralIdRef, + filters, + ); + if (pagedDataResult) { + setLoaded(true); + setPagedData(pagedDataResult); + setSortColumn(nextSortColumn); + } else { + setLoaded(false); } + }; - onDelete = async ( keyValue? : GetRoleResponse) => { - const response = await roleService.deleteRole( keyValue!.id, keyValue!.guid); - if (response) { - this.componentDidMount(); - } + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const nextFilters = new Map(filters); + nextFilters.set(name, value); + + const pagedDataResult = await roleService.getRoles( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + domainGeneralIdRef, + nextFilters, + ); + if (pagedDataResult) { + setLoaded(true); + setFilters(nextFilters); + setPagedData(pagedDataResult); + } else { + setLoaded(false); } + }; - onSelectRow = ( id : GetRoleResponse ) => - { - const { onSelectRole } = this.props; + const canEdit = (keyValue: any) => { + return keyValue.canDelete; + }; - if (onSelectRole !== undefined){ - onSelectRole(id); - } + const canDelete = (keyValue: any) => { + return keyValue.canDelete; + }; + + const onDelete = async (keyValue?: GetRoleResponse) => { + const response = await roleService.deleteRole(keyValue!.id, keyValue!.guid); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); } + }; - onUnselectRole = () => { - const { onUnselectRole } = this.props; - - if (onUnselectRole !== undefined) { - onUnselectRole(); - } + const onSelectRow = (id: GetRoleResponse) => { + if (onSelectRole !== undefined) { + onSelectRole(id); } + }; - render() { - const { loaded, pagedData, sortColumn } = this.state; + const translatedSortColumn = { ...sortColumn, label: t("Name") }; - const { selectedRole, onUnselectRole } = this.props; - - return ( - - - - -
- - - ); - } -} + return ( + + + + +
+ + + ); +}; const RolesEditor = withRouter(RolesEditorTabNoRouter); diff --git a/src/modules/manager/domains/components/RolesTable.tsx b/src/modules/manager/domains/components/RolesTable.tsx index d76319c..23c77c7 100644 --- a/src/modules/manager/domains/components/RolesTable.tsx +++ b/src/modules/manager/domains/components/RolesTable.tsx @@ -1,35 +1,71 @@ import React from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { GetRoleResponse } from "../serrvices/rolesService"; -class RolesTable extends React.Component> { - columns : Column[] = [ - { key: "name", label: "Name", order: "asc" } - ]; +const RolesTable: React.FC> = (props) => { + const { t } = useTranslation(); - raiseSort = (sortColumn : Column) => { - this.setState({sortColumn}); - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); - } + const columns: Column[] = [ + { key: "name", label: t("Name"), order: "asc" }, + ]; - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Domain.Role", - primaryKey : "{\"Id\":"+item.id+"}" - } - } + const raiseSort = (sortColumn: Column) => { + if (props.onSort !== undefined) props.onSort(sortColumn); + }; - render() { - const { data, sortColumn, selectedRow, onChangePage, onSearch, onSelectRow, canEdit, canDelete, onDelete, onUnselectRow } = this.props; - const editPath = authentication.hasAccess("EditRole") ? "editRole/{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteRole") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Domain.Role", + primaryKey: '{"Id":' + item.id + "}", + }; + }; - return ; - } -} - -export default RolesTable; \ No newline at end of file + const { + data, + sortColumn, + selectedRow, + onChangePage, + onSearch, + onSelectRow, + canEdit, + canDelete, + onDelete, + onUnselectRow, + } = props; + const editPath = authentication.hasAccess("EditRole") + ? "editRole/{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteRole") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; + + return ( +
+ ); +}; + +export default RolesTable; diff --git a/src/modules/manager/domains/components/RollAccessTable.tsx b/src/modules/manager/domains/components/RollAccessTable.tsx index 4e1bf1d..a0725dd 100644 --- a/src/modules/manager/domains/components/RollAccessTable.tsx +++ b/src/modules/manager/domains/components/RollAccessTable.tsx @@ -1,150 +1,150 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import Button, { ButtonType } from "../../../../components/common/Button"; import { GetSecurityAccess } from "../serrvices/rolesService"; import authentication from "../../../frame/services/authenticationService"; -interface RollAccessTableProps extends PublishedTableProps{ - role : any; - isAdministrator : boolean; - onSave: ( additions : string[], deletions : string[] ) => void; +interface RollAccessTableProps extends PublishedTableProps { + role: any; + isAdministrator: boolean; + onSave: (additions: string[], deletions: string[]) => void; } -interface RollAccessTableState{ - deltaAdditions : string[]; - deltaDeletions : string[]; -} +const RollAccessTable: React.FC = ({ + role, + isAdministrator, + onSave, + onSort, + data, +}) => { + const { t } = useTranslation(); + const [deltaAdditions, setDeltaAdditions] = useState([]); + const [deltaDeletions, setDeltaDeletions] = useState([]); -class RollAccessTable extends React.Component { + useEffect(() => { + setDeltaAdditions([]); + setDeltaDeletions([]); + }, [role]); - state : RollAccessTableState = { - deltaAdditions : [], - deltaDeletions : [] - }; + const itemIsSelected = (item: any): boolean => { + if (isAdministrator) return true; - ResetState = () => { - this.setState( { - deltaAdditions : [], - deltaDeletions : [] - } ); + let selected = item.selected; + + if (selected === true) { + selected = !( + deltaDeletions.filter((x) => x === item.securityAccess).length > 0 + ); + } else { + selected = + deltaAdditions.filter((x) => x === item.securityAccess).length > 0; } - componentDidMount = async () => { - this.ResetState(); - } + return selected; + }; - componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { - if (prevProps.role !== this.props.role) { - this.ResetState(); + const checkboxChange = (e: any) => { + const accessKey = e.target.id; + const newSelectedState = e.target.checked; + + const filteredData = data.data?.filter( + (x: any) => x.securityAccess === accessKey, + ); + + if (filteredData?.length === 1) { + const item: any = filteredData[0]; + const oldSelectedState = item.selected; + + if (oldSelectedState === true) { + if (newSelectedState === true) { + setDeltaDeletions(deltaDeletions.filter((x) => x !== accessKey)); + } else { + setDeltaDeletions([...deltaDeletions, accessKey]); } - } - - checkboxChange = (e : any) => { - const accessKey = e.target.id; - const newSelectedState = e.target.checked; - let { deltaAdditions, deltaDeletions } = this.state; - - const { data } = this.props; - const filteredData = data.data?.filter( (x: any) => x.securityAccess === accessKey ); - - if (filteredData?.length === 1) - { - const item : any = filteredData[0]; - const oldSelectedState = item.selected; - - if (oldSelectedState===true) { - if (newSelectedState===true){ - deltaDeletions = deltaDeletions.filter( x => x !== accessKey); - } - else { - deltaDeletions.push(accessKey); - } - } - else { - if (newSelectedState===true){ - deltaAdditions.push(accessKey); - } - else { - deltaAdditions = deltaAdditions.filter( x => x !== accessKey); - } - } + } else { + if (newSelectedState === true) { + setDeltaAdditions([...deltaAdditions, accessKey]); + } else { + setDeltaAdditions(deltaAdditions.filter((x) => x !== accessKey)); } - - this.setState( { deltaAdditions, deltaDeletions }) + } } + }; - itemIsSelected = (item : any) => { - const { deltaAdditions, deltaDeletions } = this.state; - const { isAdministrator } = this.props; - if (isAdministrator) - return true; + const columns: Column[] = [ + { + key: "selected", + label: t("Allowed"), + order: "asc", + content: (item: any) => { + return ( + <> + + + ); + }, + }, + { key: "name", label: t("Name"), order: "asc" }, + { key: "groupName", label: t("Group"), order: "asc" }, + { key: "description", label: t("Description"), order: "asc" }, + ]; - let selected = item.selected; + const raiseSort = (sortColumn: Column) => { + if (onSort !== undefined) onSort(sortColumn); + }; - if (selected === true) { - selected = !(deltaDeletions.filter( x => x === item.securityAccess).length > 0); - } - else { - selected = (deltaAdditions.filter( x => x === item.securityAccess).length > 0); - } + const handleClickCancel = () => { + setDeltaAdditions([]); + setDeltaDeletions([]); + }; - return selected; - } + const handleClickSave = () => { + onSave(deltaAdditions, deltaDeletions); + setDeltaAdditions([]); + setDeltaDeletions([]); + }; - columns : Column[] = [ - { key: "selected", label: "Allowed", order: "asc", content:(item : any) => { - return <> } }, //todo refactor this to use the normal forms code? - { key: "name", label: "Name", order: "asc" }, - { key: "groupName", label: "Group", order: "asc" }, - { key: "description", label: "Description", order: "asc" } - ]; + const canEditRoleAccess = authentication.hasAccess("EditRoleAccess"); + const canChangeRoleAccess = isAdministrator || canEditRoleAccess; + const hasChanges = !(deltaAdditions.length + deltaDeletions.length === 0); - raiseSort = (sortColumn : Column) => { - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); - } + return ( + <> +
+ {canChangeRoleAccess && ( + <> + + + + )} + + ); +}; - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Domain.UserRole", - primaryKey : "{\"Id\":"+item.id+"}" - } - } - - HandleClickCancel = () => { - this.setState( { deltaAdditions : [], deltaDeletions : [] }) - } - - HandleClickSave = () => { - const { onSave } = this.props; - const { deltaAdditions, deltaDeletions } = this.state; - - onSave(deltaAdditions, deltaDeletions); - - this.setState( { deltaAdditions : [], deltaDeletions : [] }) - } - - render() { - const { deltaAdditions, deltaDeletions } = this.state; - const { data, isAdministrator } = this.props; - const canEditRoleAccess = authentication.hasAccess("EditRoleAccess"); - const canChangeRoleAccess = isAdministrator || canEditRoleAccess; - - const hasChanges = !(deltaAdditions.length + deltaDeletions.length === 0); - - return <> -
- {canChangeRoleAccess && <> - - - } - ; - } -} - -export default RollAccessTable; \ No newline at end of file +export default RollAccessTable; diff --git a/src/modules/manager/domains/components/SecurityRolesTab.tsx b/src/modules/manager/domains/components/SecurityRolesTab.tsx index c9b60c5..be4ecb7 100644 --- a/src/modules/manager/domains/components/SecurityRolesTab.tsx +++ b/src/modules/manager/domains/components/SecurityRolesTab.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; import HorizontalTabs from "../../../../components/common/HorizionalTabs"; import Tab from "../../../../components/common/Tab"; import withRouter, { RouterProps } from "../../../../utils/withRouter"; @@ -8,65 +9,60 @@ import UserRoleEditor from "./UserRoleEditor"; import { GetRoleResponse } from "../serrvices/rolesService"; import authentication from "../../../frame/services/authenticationService"; -interface SecurityRolesTabState{ - selectedRole? : GetRoleResponse -} +interface SecurityRolesTabProps extends RouterProps {} -interface SecurityRolesTabProps extends RouterProps{ - -} +const SecurityRolesTabNoRouter: React.FC = () => { + const { t } = useTranslation(); + const [selectedRole, setSelectedRole] = useState( + undefined, + ); -class SecurityRolesTabNoRouter extends React.Component { - state : SecurityRolesTabState = { - selectedRole: undefined - } - - async componentDidMount() { - } + const onSelectRow = (id: any) => { + setSelectedRole(id); + }; - onSelectRow = ( id : any ) => - { - this.setState({selectedRole:id}); - } + const onUnselectRow = () => { + setSelectedRole(undefined); + }; - onUnselectRow =() => { - this.setState({ selectedRole: undefined }); - } + const canViewRoleAccess = authentication.hasAccess("ViewRoleAccess"); + const canViewRoleUsers = authentication.hasAccess("ViewRoleUsers"); - render() { - const { selectedRole } = this.state; - const canViewRoleAccess = authentication.hasAccess("ViewRoleAccess") - const canViewRoleUsers = authentication.hasAccess("ViewRoleUsers") + const tabs: JSX.Element[] = []; - let tabs : JSX.Element[] = []; + if (canViewRoleAccess) { + tabs.push( + + + , + ); + } + if (canViewRoleUsers) { + tabs.push( + + + , + ); + } - if (canViewRoleAccess) { - tabs.push( - - ); - } - if (canViewRoleUsers) { - tabs.push( - - ); - } - - return ( -
-
- -
-
- {((selectedRole !== undefined) && (canViewRoleAccess || canViewRoleUsers)) && - {tabs} - - } -
-
- - ); - } -} + return ( +
+
+ +
+
+ {selectedRole !== undefined && + (canViewRoleAccess || canViewRoleUsers) && ( + {tabs} + )} +
+
+ ); +}; const SecurityRolesTab = withRouter(SecurityRolesTabNoRouter); diff --git a/src/modules/manager/domains/components/UserRoleEditor.tsx b/src/modules/manager/domains/components/UserRoleEditor.tsx index 9b44b31..7ab3ecc 100644 --- a/src/modules/manager/domains/components/UserRoleEditor.tsx +++ b/src/modules/manager/domains/components/UserRoleEditor.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; import { Paginated } from "../../../../services/Paginated"; import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef"; @@ -9,107 +10,127 @@ 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, - sortColumn : Column, - filters: Map; +const initialPagedData: Paginated = { + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], +}; + +interface UserRoleEditorProps extends RouterProps { + role: any | undefined; } -interface UserRoleEditorProps extends RouterProps{ - role : any | undefined -} +const UserRoleEditorNoRouter: React.FC = ({ + role, + router, +}) => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = + useState>(initialPagedData); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + () => new Map(), + ); -class UserRoleEditorNoRouter extends React.Component { - state : UserRoleEditorState = { - loaded : false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() + const roleGeneralIdRef = MakeGeneralIdRef(role?.id, role?.guid); + + const getRoleUsers = async ( + page: number, + pageSize: number, + nextSortColumn: Column, + nextFilters: Map, + ) => { + 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); } + }; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); - } - - async componentDidUpdate(prevProps: Readonly, prevState: Readonly, 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) => { - 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); + useEffect(() => { + const loadInitial = async () => { + await getRoleUsers( + initialPagedData.page, + initialPagedData.pageSize, + sortColumn, + new Map(), + ); }; - getRoleUsers = async ( page : number, pageSize : number, sortColumn : Column, filters : Map) => { + void loadInitial(); + }, [role?.id]); - 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 }); - } + const changePage = async (page: number, pageSize: number) => { + await getRoleUsers(page, pageSize, sortColumn, filters); + }; + + const onSort = async (nextSortColumn: Column) => { + 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); } + }; - onDelete = async ( user? : RoleUser) => { - const { role } = this.props; + const addLink = "editRole/" + role?.id + "/addUserToRole"; - 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 ( - - -
- -
- -
- - - ); - } -} + return ( + + +
+ +
+ +
+ + + ); +}; const UserRoleEditor = withRouter(UserRoleEditorNoRouter); diff --git a/src/modules/manager/domains/components/UserRolesTable.tsx b/src/modules/manager/domains/components/UserRolesTable.tsx index 9a52a65..6d99d1a 100644 --- a/src/modules/manager/domains/components/UserRolesTable.tsx +++ b/src/modules/manager/domains/components/UserRolesTable.tsx @@ -1,34 +1,61 @@ import React from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { RoleUser } from "../serrvices/rolesService"; -class UserRolesTable extends React.Component> { - columns : Column[] = [ - { key: "displayName", label: "Name", order: "asc" } - ]; +const UserRolesTable: React.FC> = (props) => { + const { t } = useTranslation(); - raiseSort = (sortColumn : Column) => { - this.setState({sortColumn}); - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); - } + const columns: Column[] = [ + { key: "displayName", label: t("Name"), order: "asc" }, + ]; - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Domain.UserRole", - primaryKey : "{\"Id\":"+item.id+"}" - } - } + const raiseSort = (sortColumn: Column) => { + if (props.onSort !== undefined) props.onSort(sortColumn); + }; - render() { - const { data, sortColumn, selectedRow, onChangePage, onSearch, onSelectRow, onDelete } = this.props; - const doDelete = authentication.hasAccess("DeleteRoleUser") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Domain.UserRole", + primaryKey: '{"Id":' + item.id + "}", + }; + }; - return
; - } -} - -export default UserRolesTable; \ No newline at end of file + const { + data, + sortColumn, + selectedRow, + onChangePage, + onSearch, + onSelectRow, + onDelete, + } = props; + const doDelete = authentication.hasAccess("DeleteRoleUser") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; + + return ( +
+ ); +}; + +export default UserRolesTable; diff --git a/src/modules/manager/domains/components/domainsTable.tsx b/src/modules/manager/domains/components/domainsTable.tsx index 32dc6d5..929037a 100644 --- a/src/modules/manager/domains/components/domainsTable.tsx +++ b/src/modules/manager/domains/components/domainsTable.tsx @@ -1,35 +1,55 @@ import React from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { GetDomain } from "../serrvices/domainsService"; -class DomainsTable extends React.Component> { - columns : Column[] = [ - { key: "name", label: "Name", order: "asc" } - ]; +const DomainsTable: React.FC> = (props) => { + const { t } = useTranslation(); - raiseSort = (sortColumn : Column) => { - this.setState({sortColumn}); - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); - } + const columns: Column[] = [ + { key: "name", label: t("Name"), order: "asc" }, + ]; - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Domain.Domain", - primaryKey : "{\"Id\":"+item.id+"}" - } - } + const raiseSort = (sortColumn: Column) => { + if (props.onSort !== undefined) props.onSort(sortColumn); + }; - render() { - const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props; - const editPath = authentication.hasAccess("EditDomain") ? "edit/{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteDomain") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Domain.Domain", + primaryKey: '{"Id":' + item.id + "}", + }; + }; - return
; - } -} - -export default DomainsTable; \ No newline at end of file + const { data, sortColumn, onChangePage, onSearch, onDelete } = props; + const editPath = authentication.hasAccess("EditDomain") + ? "edit/{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteDomain") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; + + return ( +
+ ); +}; + +export default DomainsTable; diff --git a/src/modules/manager/forms/Forms.tsx b/src/modules/manager/forms/Forms.tsx index 77c2aa1..5166afb 100644 --- a/src/modules/manager/forms/Forms.tsx +++ b/src/modules/manager/forms/Forms.tsx @@ -1,97 +1,120 @@ -import { Component } from 'react'; -import Button, { ButtonType } from '../../../components/common/Button'; -import Column from '../../../components/common/columns'; -import Permission from '../../../components/common/Permission'; -import { Paginated } from '../../../services/Paginated'; -import FormsTable from './components/formsTable'; -import formsService, { GetFormResponse } from './services/formsService'; -import Loading from '../../../components/common/Loading'; +import { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import Button, { ButtonType } from "../../../components/common/Button"; +import Column from "../../../components/common/columns"; +import Permission from "../../../components/common/Permission"; +import { Paginated } from "../../../services/Paginated"; +import FormsTable from "./components/formsTable"; +import formsService, { GetFormResponse } from "./services/formsService"; +import Loading from "../../../components/common/Loading"; -interface FormsState{ - loaded: boolean; - pagedData : Paginated, - sortColumn : Column, - filters: Map; -} +const Forms: React.FC = () => { + const { t } = useTranslation(); -class Forms extends Component< any, any, FormsState> { - state = { - loaded: false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = useState>({ + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], + }); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + new Map(), + ); + + const changePage = async (page: number, pageSize: number) => { + const data = await formsService.getForms( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (data) { + setLoaded(true); + setPagedData(data); + } else { + setLoaded(false); } + }; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); + const onSort = async (newSortColumn: Column) => { + const { page, pageSize } = pagedData; + const data = await formsService.getForms( + page, + pageSize, + newSortColumn.key, + newSortColumn.order === "asc", + filters, + ); + if (data) { + setLoaded(true); + setPagedData(data); + setSortColumn(newSortColumn); + } else { + setLoaded(false); } + }; - changePage = async(page: number, pageSize : number) =>{ - const { sortColumn, filters } = this.state; - - const pagedData = await formsService.getForms(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const newFilters = new Map(filters); + newFilters.set(name, value); + + const data = await formsService.getForms( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + newFilters, + ); + if (data) { + setLoaded(true); + setFilters(newFilters); + setPagedData(data); + } else { + setLoaded(false); } + }; - onSort = async(sortColumn : Column) => { - const {page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const pagedData = await formsService.getForms(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } + const onDelete = async (item?: GetFormResponse) => { + const response = await formsService.deleteForm(item?.id, item?.guid); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); } + }; - onSearch = async ( name: string, value: string) => { - const {page, pageSize } = this.state.pagedData; - const {sortColumn, filters } = this.state; - filters.set(name, value); + useEffect(() => { + const { page, pageSize } = pagedData; + changePage(page, pageSize); + }, [pagedData]); - const pagedData = await formsService.getForms(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } - }; - - onDelete = async ( item? : GetFormResponse) => { - const response = await formsService.deleteForm( item?.id, item?.guid); - if (response) { - this.componentDidMount(); - } - } - - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - -
- -
- -
- - - ); - } -} + return ( + + +
+ +
+ +
+ + + ); +}; export default Forms; diff --git a/src/modules/manager/forms/components/formsTable.tsx b/src/modules/manager/forms/components/formsTable.tsx index 1355885..c7de8b4 100644 --- a/src/modules/manager/forms/components/formsTable.tsx +++ b/src/modules/manager/forms/components/formsTable.tsx @@ -1,36 +1,67 @@ -import React from "react"; +import React, { useMemo } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { GetFormResponse } from "../services/formsService"; -class FormsTable extends React.Component> { - columns : Column[] = [ - { key: "name", label: "Name", order: "asc" }, - { key: "version", label: "Version", order: "asc" } - ]; +const FormsTable: React.FC> = ({ + data, + sortColumn, + onChangePage, + onSearch, + onDelete, + onSort, +}) => { + const { t } = useTranslation(); - raiseSort = (sortColumn : Column) => { - this.setState({sortColumn}); - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); + const columns: Column[] = useMemo( + () => [ + { key: "name", label: t("Name"), order: "asc" }, + { key: "version", label: t("Version"), order: "asc" }, + ], + [t], + ); + + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Forms.FormTemplate", + primaryKey: `{"Id":${item.id}}`, + }; + }; + + const raiseSort = (sortCol: Column) => { + if (onSort !== undefined) { + onSort(sortCol); } + }; - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Forms.FormTemplate", - primaryKey : "{\"Id\":"+item.id+"}" - } - } + const editPath = authentication.hasAccess("EditFormTemplate") + ? "edit/{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteFormTemplate") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; - render() { - const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props; - const editPath = authentication.hasAccess("EditFormTemplate") ? "edit/{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteFormTemplate") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; + return ( +
+ ); +}; - return
; - } -} - -export default FormsTable; \ No newline at end of file +export default FormsTable; diff --git a/src/modules/manager/glossary/Glossary.tsx b/src/modules/manager/glossary/Glossary.tsx index 4d2f13c..ca04bca 100644 --- a/src/modules/manager/glossary/Glossary.tsx +++ b/src/modules/manager/glossary/Glossary.tsx @@ -1,168 +1,164 @@ -import React, { Component } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { Link } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef"; import withRouter from "../../../utils/withRouter"; import GlossariesTable from "./components/GlossariesTable"; -import glossariesService, { Glossary, SystemGlossaries } from "./services/glossaryService"; +import glossariesService, { + Glossary, + SystemGlossaries, +} from "./services/glossaryService"; import { GeneralIdRef } from "./../../../utils/GeneralIdRef"; -import equal from "fast-deep-equal"; import Button, { ButtonType } from "../../../components/common/Button"; import Loading from "../../../components/common/Loading"; import Permission from "../../../components/common/Permission"; -interface GlossariesState { - loaded: boolean; - data: Glossary | undefined; - // sortColumn : Column, - // filters: Map; - parentAddress: string; -} +const Glossaries: React.FC = (props) => { + const { t } = useTranslation(); + const glossaryId = props?.router?.params?.glossaryId; -class Glossaries extends Component { - state: GlossariesState = { - loaded: false, - data: undefined, - // sortColumn: { key: "name", label: "Name", order: "asc" }, - // filters: new Map() - parentAddress: "", - }; + const [loaded, setLoaded] = useState(false); + const [data, setData] = useState(undefined); + const [parentAddress, setParentAddress] = useState(""); - componentDidMount = () => { - this.loadData(); - }; + const loadData = useCallback(async () => { + setLoaded(false); + let parentItem: GeneralIdRef = SystemGlossaries; - componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: GlossariesState | undefined): void { - if (!equal(this.props?.router?.params?.glossaryId, prevProps?.router?.params?.glossaryId)){ - this.setState({ loaded: false }); - this.loadData(); - } + if (glossaryId !== undefined) { + parentItem = MakeGeneralIdRef(glossaryId); } - loadData = async () => { - let parentItem: GeneralIdRef = SystemGlossaries; + const result = await glossariesService.getGlossaryItem(parentItem); + if (result) { + let nextParentAddress = "/glossaries"; + if ( + result.parent?.guid?.toLowerCase() !== + SystemGlossaries.guid?.toLowerCase() + ) { + nextParentAddress += "/" + result.parent?.id; + } - const { glossaryId } = this.props.router.params; - - if (glossaryId !== undefined) - parentItem = MakeGeneralIdRef(glossaryId); - - const data = await glossariesService.getGlossaryItem(parentItem); - if (data) { - let parentAddress = "/glossaries"; - if (data.parent?.guid?.toLowerCase() !== SystemGlossaries.guid?.toLowerCase()) - parentAddress += "/" + data.parent?.id; - - this.setState({ loaded: true, data, parentAddress }); - } - else { - this.setState({ loaded: false }); - } - }; - - onDelete = async (keyValue: any) => { - const response = await glossariesService.deleteGlossaryItem(keyValue.id); - if (response) { - this.componentDidMount(); - } - }; - - render(): JSX.Element { - const { loaded, data, parentAddress } = this.state; - - const id = data?.id; - - let table = <>; - let upButton = <>; - let editButton = <>; - - table = ( -
- Items - -
- ); - - if (data?.parent) - { - if (data.parent?.id !== BigInt(0) ) { - upButton = ( - - ); - } - - if (data.parent?.id !== BigInt(0) ) { - editButton = ( - - ); - } - } - - const addPath = concatinate( ["/glossaries/add", id], "/"); - - let pathBlock = this.createPathBlock(); - - return ( - -
- - {upButton} - - - - - - {editButton} - -
-
- {pathBlock} - {table} - - ); + setData(result); + setParentAddress(nextParentAddress); + setLoaded(true); + } else { + setLoaded(false); } - - createPathBlock = () : JSX.Element | undefined => - { - const { data } = this.state; + }, [glossaryId]); - let item : Glossary | undefined = data; - const empty = <>; - let pathBlock : JSX.Element = empty; - - while (item !== undefined && (item?.guid.toLowerCase() !== SystemGlossaries.guid && item.id !== BigInt(0)) ){ - let divider = pathBlock === empty ? <> : <>/; + useEffect(() => { + loadData(); + }, [loadData]); - pathBlock = <>{item?.name}{divider}{pathBlock}; - - item = item?.parent; - } - - if (pathBlock === undefined) - { - pathBlock = <>; - } - - pathBlock = <>Glossaries/{pathBlock} - - return pathBlock; + const onDelete = async (keyValue: any) => { + const response = await glossariesService.deleteGlossaryItem(keyValue.id); + if (response) { + loadData(); } -} + }; + + const createPathBlock = (): JSX.Element | undefined => { + let item: Glossary | undefined = data; + const empty = <>; + let pathBlock: JSX.Element = empty; + + while ( + item !== undefined && + item.guid.toLowerCase() !== SystemGlossaries.guid && + item.id !== BigInt(0) + ) { + const divider = pathBlock === empty ? <> : <>/; + + pathBlock = ( + <> + + {item.name} + + {divider} + {pathBlock} + + ); + + item = item.parent; + } + + if (pathBlock === undefined) { + pathBlock = <>; + } + + pathBlock = ( + <> + {t("Glossaries")}/{pathBlock} + + ); + + return pathBlock; + }; + + const id = data?.id; + const addPath = concatinate(["/glossaries/add", id], "/"); + + const table = ( +
+ {t("Items")} + +
+ ); + + let upButton = <>; + let editButton = <>; + + if (data?.parent) { + if (data.parent.id !== BigInt(0)) { + upButton = ( + + ); + editButton = ( + + ); + } + } + + const pathBlock = createPathBlock(); + + return ( + +
+ {upButton} + + + + {editButton} +
+
+ {pathBlock} + {table} + + ); +}; const HOCGlossaries = withRouter(Glossaries); export default HOCGlossaries; -function concatinate( args : (unknown | undefined)[], seperator : string) : string { - let result = "" - for( const arg of args) - { - if (arg !== undefined){ - if ( result !== "") - result += seperator; - result += arg; - } +function concatinate(args: (unknown | undefined)[], seperator: string): string { + let result = ""; + for (const arg of args) { + if (arg !== undefined) { + if (result !== "") result += seperator; + result += arg; } + } - return result; + return result; } - diff --git a/src/modules/manager/glossary/components/GlossariesTable.tsx b/src/modules/manager/glossary/components/GlossariesTable.tsx index d66a9cb..cb6e5ec 100644 --- a/src/modules/manager/glossary/components/GlossariesTable.tsx +++ b/src/modules/manager/glossary/components/GlossariesTable.tsx @@ -1,127 +1,140 @@ -import React from "react"; +import React, { useState, useEffect, useMemo } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; import Table from "../../../../components/common/Table"; -import { Paginated } from "../../../../services/Paginated"; import { Glossary } from "../services/glossaryService"; -import equal from 'fast-deep-equal'; import authentication from "../../../frame/services/authenticationService"; -export interface GlossaryParams{ - id : number +export interface GlossaryParams { + id: number; } -interface GlossariesTableProps{ - data? : Glossary, - onDelete?: ( keyValue : any ) => void; - params : GlossaryParams; +interface GlossariesTableProps { + data?: Glossary; + onDelete?: (keyValue: any) => void; + params: GlossaryParams; } -interface CustomColumn extends Column{ - isCustom : boolean; +interface CustomColumn extends Column { + isCustom: boolean; } interface customField { - [key: string]: any + [key: string]: any; } -class GlossariesTable extends React.Component { - findValueById = (data: Glossary, key: string) => { - if (data.customFieldValues){ - for( const value of data.customFieldValues ){ - if (String(value.id.id) === key) - { - const displayValue : string = value.values[0].displayValue ?? ""; +const GlossariesTable: React.FC = ({ + data, + onDelete, +}) => { + const { t } = useTranslation(); - return displayValue; - } - } + const [columnsList, setColumnsList] = useState([]); + + const baseColumns: CustomColumn[] = useMemo( + () => [ + { + key: "name", + label: t("Name"), + order: "asc", + link: "/glossaries/{0}", + isCustom: false, + }, + ], + [t], + ); + + const findValueById = (glossaryData: Glossary, key: string) => { + if (glossaryData.customFieldValues) { + for (const value of glossaryData.customFieldValues) { + if (String(value.id.id) === key) { + const displayValue: string = value.values[0].displayValue ?? ""; + return displayValue; } + } + } + return undefined; + }; - return undefined; + const paginatedData = useMemo(() => { + if (!data) { + return { + count: 0, + page: 1, + pageSize: 1, + totalPages: 0, + data: [], + }; } - state = { columnsList: ([] as CustomColumn[]) } + const pagedData = data.children.map((x) => { + const dataItem: customField = { + id: x.id, + name: x.name, + }; - columns : CustomColumn[] = [ - { key: "name", label: "Name", order: "asc", link:"/glossaries/{0}", isCustom: false } - ]; - - PaginatedData = () => { - const { data } = this.props; - const { columnsList } = this.state; - - const pagedData = data!.children.map( (x) => { - let dataItem : customField = { - id: x.id, - name : x.name } - - for( const column of columnsList) { - if (column.isCustom){ - dataItem[column.key] = this.findValueById(x, column.key); - } - } - - return dataItem; - } ) - - let paginated : Paginated = { - count : 1, - page: 1, - pageSize: 1, - totalPages: 1, - data : pagedData + for (const column of columnsList) { + if (column.isCustom) { + dataItem[column.key] = findValueById(x, column.key); } - - return paginated; + } + + return dataItem; + }); + + return { + count: 1, + page: 1, + pageSize: 1, + totalPages: 1, + data: pagedData, + }; + }, [data, columnsList]); + + useEffect(() => { + const newColumnsList = [...baseColumns]; + + if (data?.childCustomFieldDefinition) { + for (const customfield of data.childCustomFieldDefinition) { + newColumnsList.push({ + key: String(customfield.id), + label: customfield.name, + order: "asc", + isCustom: true, + }); + } } - componentDidMount = () => { - this.CompileColumns(); - } + setColumnsList(newColumnsList); + }, [baseColumns, data]); - componentDidUpdate(prevProps: Readonly, prevState: Readonly<{}>, snapshot?: any): void { - if(!equal(this.props.data, prevProps.data)) - this.CompileColumns(); - } + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Glossaries.Glossary", + primaryKey: `{"Id":${item.id}}`, + }; + }; - CompileColumns = () => { - const { data } = this.props; + const editPath = authentication.hasAccess("EditGlossary") + ? "/glossaries/edit/{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteGlossary") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; - let columnsList = [...this.columns]; + return ( +
+ ); +}; - if (data?.childCustomFieldDefinition) - { - for( const customfield of data?.childCustomFieldDefinition) - { - columnsList.push({ - key: String(customfield.id), - label: customfield.name, - order: "asc", - isCustom: true - }) - } - } - - this.setState({columnsList}); - } - - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Glossaries.Glossary", - primaryKey : "{\"Id\":"+item.id+"}" - } - } - - render() { - const { onDelete } = this.props; - const { columnsList } = this.state; - const editPath = authentication.hasAccess("EditGlossary") ? "/glossaries/edit/{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteGlossary") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; - - const paginated = this.PaginatedData(); - return
; - } -} - -export default GlossariesTable; \ No newline at end of file +export default GlossariesTable; diff --git a/src/modules/manager/organisations/Organisations.tsx b/src/modules/manager/organisations/Organisations.tsx index d0ba037..36fbd5b 100644 --- a/src/modules/manager/organisations/Organisations.tsx +++ b/src/modules/manager/organisations/Organisations.tsx @@ -1,97 +1,123 @@ -import { Component } from 'react'; -import Button, { ButtonType } from '../../../components/common/Button'; -import Column from '../../../components/common/columns'; -import Permission from '../../../components/common/Permission'; -import { Paginated } from '../../../services/Paginated'; -import OrganisationsTable from './components/OrganisationsTable'; -import organisationsService, { ReadOrganisation } from './services/organisationsService'; -import Loading from '../../../components/common/Loading'; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import Button, { ButtonType } from "../../../components/common/Button"; +import Column from "../../../components/common/columns"; +import Permission from "../../../components/common/Permission"; +import { Paginated } from "../../../services/Paginated"; +import OrganisationsTable from "./components/OrganisationsTable"; +import organisationsService, { + ReadOrganisation, +} from "./services/organisationsService"; +import Loading from "../../../components/common/Loading"; -interface OrganisationsState{ - loaded: boolean, - pagedData : Paginated, - sortColumn : Column, - filters: Map; -} +const Organisations: React.FC = () => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = useState>({ + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], + }); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + new Map(), + ); -class Organisations extends Component { - state = { - loaded : false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] - }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() + const changePage = async (page: number, pageSize: number) => { + const data = await organisationsService.getOrganisations( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (data) { + setLoaded(true); + setPagedData(data); + } else { + setLoaded(false); } + }; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; + const onSort = async (newSortColumn: Column) => { + const { page, pageSize } = pagedData; + const data = await organisationsService.getOrganisations( + page, + pageSize, + newSortColumn.key, + newSortColumn.order === "asc", + filters, + ); - await this.changePage(page, pageSize); + if (data) { + setLoaded(true); + setPagedData(data); + setSortColumn(newSortColumn); + } else { + setLoaded(false); } + }; - changePage = async (page: number, pageSize: number) => { - const { sortColumn, filters } = this.state; - - const pagedData = await organisationsService.getOrganisations(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const newFilters = new Map(filters); + newFilters.set(name, value); + + const data = await organisationsService.getOrganisations( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + newFilters, + ); + if (data) { + setLoaded(true); + setFilters(newFilters); + setPagedData(data); + } else { + setLoaded(false); } + }; - onSort = async (sortColumn: Column) => { - const { page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const pagedData = await organisationsService.getOrganisations(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - - if (pagedData) { - this.setState({loaded: true, pagedData, sortColumn}); - } - else { - this.setState({ loaded: false }); - } + const onDelete = async (item?: ReadOrganisation) => { + const response = await organisationsService.deleteOrganisation( + item?.id, + item?.guid, + ); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); } + }; - onSearch = async (name: string, value: string) => { - const { page, pageSize } = this.state.pagedData; - const { sortColumn, filters } = this.state; - filters.set(name, value); + useEffect(() => { + const { page, pageSize } = pagedData; + changePage(page, pageSize); + }); - const pagedData = await organisationsService.getOrganisations(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState( { loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } - }; - - onDelete = async (item?: ReadOrganisation) => { - const response = await organisationsService.deleteOrganisation(item?.id, item?.guid); - if (response) { - this.componentDidMount(); - } - } - - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - - - -
- - - ); - } + return ( + + + + +
+ + + ); }; export default Organisations; diff --git a/src/modules/manager/organisations/components/OrganisationsTable.tsx b/src/modules/manager/organisations/components/OrganisationsTable.tsx index ccc646e..ed707d7 100644 --- a/src/modules/manager/organisations/components/OrganisationsTable.tsx +++ b/src/modules/manager/organisations/components/OrganisationsTable.tsx @@ -1,51 +1,77 @@ -import React from "react"; +import React, { useMemo } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { ReadOrganisation } from "../services/organisationsService"; -class OrganisationsTable extends React.Component> { - canViewSite = authentication.hasAccess("ViewSite"); +const OrganisationsTable: React.FC> = ({ + data, + sortColumn, + onChangePage, + onSearch, + onDelete, + onSort, +}) => { + const { t } = useTranslation(); + const canViewSite = authentication.hasAccess("ViewSite"); - columns: Column[] = [ - { key: "name", label: "Name", order: "asc", link: this.canViewSite ? "/site/{0}" : undefined }, - { key: "address", label: "Address", order: "asc" }, - { key: "status", label: "Status", order: "asc", searchable: false }, - ]; + const columns: Column[] = useMemo( + () => [ + { + key: "name", + label: t("Name"), + order: "asc", + link: canViewSite ? "/site/{0}" : undefined, + }, + { key: "address", label: t("Address"), order: "asc" }, + { + key: "status", + label: t("Status"), + order: "asc", + searchable: false, + }, + ], + [t, canViewSite], + ); - raiseSort = (sortColumn: Column) => { - this.setState({ sortColumn }); - if (this.props.onSort !== undefined) this.props.onSort(sortColumn); + const raiseSort = (sortCol: Column) => { + if (onSort !== undefined) onSort(sortCol); + }; + + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Printer.Organisation", + primaryKey: `{"Id":${item.id}}`, }; + }; - handleAuditParams = (item: any) => { - return { - entityName: "e_suite.Database.Core.Tables.Printer.Organisation", - primaryKey: '{"Id":' + item.id + "}", - }; - }; + const editPath = authentication.hasAccess("EditOrganisation") + ? "{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteOrganisation") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; - render() { - const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props; - const editPath = authentication.hasAccess("EditOrganisation") ? "{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteOrganisation") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; - - return ( -
- ); - } -} + return ( +
+ ); +}; export default OrganisationsTable; diff --git a/src/modules/manager/sequence/components/squenceTable.tsx b/src/modules/manager/sequence/components/squenceTable.tsx index 4c30eef..3fa4e60 100644 --- a/src/modules/manager/sequence/components/squenceTable.tsx +++ b/src/modules/manager/sequence/components/squenceTable.tsx @@ -1,35 +1,62 @@ -import React from "react"; +import React, { useMemo } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import authentication from "../../../frame/services/authenticationService"; import { ReadSequence } from "../services/sequenceService"; -class SequenceTable extends React.Component> { - columns : Column[] = [ - { key: "name", label: "Name", order: "asc" } - ]; +const SequenceTable: React.FC> = ({ + data, + sortColumn, + onChangePage, + onSearch, + onDelete, + onSort, +}) => { + const { t } = useTranslation(); - raiseSort = (sortColumn : Column) => { - this.setState({sortColumn}); - if ( this.props.onSort !== undefined) - this.props.onSort(sortColumn); - } + const columns: Column[] = useMemo( + () => [{ key: "name", label: t("Name"), order: "asc" }], + [t], + ); - handleAuditParams = (item: any) => { - return { - entityName : "e_suite.Database.Core.Tables.Sequences.Sequence", - primaryKey : "{\"Id\":"+item.id+"}" - } - } + const raiseSort = (sortCol: Column) => { + if (onSort !== undefined) onSort(sortCol); + }; - render() { - const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props; - const editPath = authentication.hasAccess("EditSequence") ? "edit/{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteSequence") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Sequences.Sequence", + primaryKey: `{"Id":${item.id}}`, + }; + }; - return
; - } -} - -export default SequenceTable; \ No newline at end of file + const editPath = authentication.hasAccess("EditSequence") + ? "edit/{0}" + : undefined; + const doDelete = authentication.hasAccess("DeleteSequence") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; + + return ( +
+ ); +}; + +export default SequenceTable; diff --git a/src/modules/manager/sequence/sequence.tsx b/src/modules/manager/sequence/sequence.tsx index 8b1bc88..12a3442 100644 --- a/src/modules/manager/sequence/sequence.tsx +++ b/src/modules/manager/sequence/sequence.tsx @@ -1,99 +1,119 @@ -import React, { Component } from 'react'; -import sequenceService, { ReadSequence } from './services/sequenceService'; -import SequenceTable from './components/squenceTable'; -import Column from '../../../components/common/columns'; -import { Paginated } from '../../../services/Paginated'; -import Button, { ButtonType } from '../../../components/common/Button'; -import Loading from '../../../components/common/Loading'; -import Permission from '../../../components/common/Permission'; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import sequenceService, { ReadSequence } from "./services/sequenceService"; +import SequenceTable from "./components/squenceTable"; +import Column from "../../../components/common/columns"; +import { Paginated } from "../../../services/Paginated"; +import Button, { ButtonType } from "../../../components/common/Button"; +import Loading from "../../../components/common/Loading"; +import Permission from "../../../components/common/Permission"; -interface sequenceState { - loaded: boolean, - pagedData: Paginated, - sortColumn: Column, - filters: Map; -} +const Sequence: React.FC = () => { + const { t } = useTranslation(); + const [loaded, setLoaded] = useState(false); + const [pagedData, setPagedData] = useState>({ + page: 1, + pageSize: 10, + count: 0, + totalPages: 1, + data: [], + }); + const [sortColumn, setSortColumn] = useState>({ + key: "name", + label: t("Name"), + order: "asc", + }); + const [filters, setFilters] = useState>( + new Map(), + ); -class Sequence extends Component { - state = { - loaded: false, - pagedData: { - page: 1, - pageSize: 10, - count: 0, - totalPages: 1, - data: [] - }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() + const changePage = async (page: number, pageSize: number) => { + const data = await sequenceService.getSequences( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (data) { + setLoaded(true); + setPagedData(data); + } else { + setLoaded(false); } + }; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - - await this.changePage(page, pageSize); + const onSort = async (newSortColumn: Column) => { + const { page, pageSize } = pagedData; + const data = await sequenceService.getSequences( + page, + pageSize, + newSortColumn.key, + newSortColumn.order === "asc", + filters, + ); + if (data) { + setLoaded(true); + setPagedData(data); + setSortColumn(newSortColumn); + } else { + setLoaded(false); } + }; - changePage = async (page: number, pageSize: number) => { - const { sortColumn, filters } = this.state; + const onSearch = async (name: string, value: string) => { + const { page, pageSize } = pagedData; + const newFilters = new Map(filters); + newFilters.set(name, value); - const pagedData = await sequenceService.getSequences(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData }); - } - else { - this.setState({ loaded: false }); - } + const data = await sequenceService.getSequences( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + newFilters, + ); + if (data) { + setLoaded(true); + setFilters(newFilters); + setPagedData(data); + } else { + setLoaded(false); } + }; - onSort = async (sortColumn: Column) => { - const { page, pageSize } = this.state.pagedData; - const { filters } = this.state; - const pagedData = await sequenceService.getSequences(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } + const onDelete = async (item?: ReadSequence) => { + const response = await sequenceService.deleteSequence(item?.id, item?.guid); + if (response) { + await changePage(pagedData.page, pagedData.pageSize); } + }; - onSearch = async (name: string, value: string) => { - const { page, pageSize } = this.state.pagedData; - const { sortColumn, filters } = this.state; - filters.set(name, value); + useEffect(() => { + const { page, pageSize } = pagedData; + changePage(page, pageSize); + }, []); - const pagedData = await sequenceService.getSequences(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } - }; - - onDelete = async (item?: ReadSequence) => { - const response = await sequenceService.deleteSequence(item?.id, item?.guid); - if (response) { - this.componentDidMount(); - } - } - - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - -
- -
- -
- - - ); - } + return ( + + +
+ +
+ +
+ + + ); }; export default Sequence; diff --git a/src/modules/manager/sites/Sites.tsx b/src/modules/manager/sites/Sites.tsx index 2d5aad9..89536b2 100644 --- a/src/modules/manager/sites/Sites.tsx +++ b/src/modules/manager/sites/Sites.tsx @@ -1,107 +1,127 @@ -import React, { Component } from 'react'; -import Column from '../../../components/common/columns'; -import { Paginated } from '../../../services/Paginated'; -import Button, { ButtonType } from '../../../components/common/Button'; -import withRouter from '../../../utils/withRouter'; -import siteService, { ReadSite } from './services/sitessService'; -import SitesTable from './components/SitesTable'; -import Loading from '../../../components/common/Loading'; -import Permission from '../../../components/common/Permission'; +import React, { Component } from "react"; +import Column from "../../../components/common/columns"; +import { Paginated } from "../../../services/Paginated"; +import Button, { ButtonType } from "../../../components/common/Button"; +import withRouter from "../../../utils/withRouter"; +import siteService, { ReadSite } from "./services/sitessService"; +import SitesTable from "./components/SitesTable"; +import Loading from "../../../components/common/Loading"; +import Permission from "../../../components/common/Permission"; -interface SitesState{ - loaded: boolean; - pagedData : Paginated, - sortColumn : Column, - filters: Map; +interface SitesState { + loaded: boolean; + pagedData: Paginated; + sortColumn: Column; + filters: Map; } -class LocSites extends Component< any, any, SitesState> { - state = { - loaded: false, - pagedData : { page: 1, - pageSize : 10, - count: 0, - totalPages: 1, - data: [] }, - sortColumn: { key: "name", label: "Name", order: "asc" }, - filters: new Map() +class LocSites extends Component { + state = { + loaded: false, + pagedData: { page: 1, pageSize: 10, count: 0, totalPages: 1, data: [] }, + sortColumn: { key: "name", label: "Name", order: "asc" }, + filters: new Map(), + }; + + componentDidMount = async () => { + const { page, pageSize } = this.state.pagedData; + await this.changePage(page, pageSize); + }; + + changePage = async (page: number, pageSize: number) => { + const { sortColumn, filters } = this.state; + const { organisationId } = this.props.router.params; + + filters.set("organisationId", organisationId); + + const pagedData = await siteService.getSites( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (pagedData) { + this.setState({ loaded: true, pagedData, filters }); + } else { + this.setState({ loaded: false }); } + }; - componentDidMount = async () => { - const { page, pageSize } = this.state.pagedData; - await this.changePage(page, pageSize); + onSort = async (sortColumn: Column) => { + const { page, pageSize } = this.state.pagedData; + const { filters } = this.state; + + const { organisationId } = this.props.router.params; + filters.set("organisationId", organisationId); + + const pagedData = await siteService.getSites( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (pagedData) { + this.setState({ loaded: true, pagedData, sortColumn }); + } else { + this.setState({ loaded: false }); } + }; - changePage = async(page: number, pageSize : number) =>{ - const { sortColumn, filters } = this.state; - const { organisationId } = this.props.router.params; + onSearch = async (name: string, value: string) => { + const { page, pageSize } = this.state.pagedData; + const { sortColumn, filters } = this.state; + filters.set(name, value); - filters.set("organisationId", organisationId); + const { organisationId } = this.props.router.params; + filters.set("organisationId", organisationId); - const pagedData = await siteService.getSites(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, filters }); - } - else { - this.setState({ loaded: false }); - } + const pagedData = await siteService.getSites( + page, + pageSize, + sortColumn.key, + sortColumn.order === "asc", + filters, + ); + if (pagedData) { + this.setState({ loaded: true, filters, pagedData }); + } else { + this.setState({ loaded: false }); } + }; - onSort = async(sortColumn : Column) => { - const {page, pageSize } = this.state.pagedData; - const { filters } = this.state; + onDelete = async (item?: ReadSite) => { + await siteService.deleteSite(item?.id, item?.guid); - const { organisationId } = this.props.router.params; - filters.set("organisationId", organisationId); + this.componentDidMount(); + }; - const pagedData = await siteService.getSites(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, pagedData, sortColumn }); - } - else { - this.setState({ loaded: false }); - } - } + render(): JSX.Element { + const { loaded, pagedData, sortColumn } = this.state; - onSearch = async ( name: string, value: string) => { - const {page, pageSize } = this.state.pagedData; - const {sortColumn, filters } = this.state; - filters.set(name, value); - - const { organisationId } = this.props.router.params; - filters.set("organisationId", organisationId); - - const pagedData = await siteService.getSites(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters); - if (pagedData) { - this.setState({ loaded: true, filters, pagedData }); - } - else { - this.setState({ loaded: false }); - } - }; - - onDelete = async ( item? : ReadSite) => { - await siteService.deleteSite( item?.id, item?.guid); - - this.componentDidMount(); - } - - render(): JSX.Element { - const { loaded, pagedData, sortColumn } = this.state; - - return ( - - -
- -
- -
- - - ); - } -}; + return ( + + +
+ +
+ +
+ + + ); + } +} const Sites = withRouter(LocSites); diff --git a/src/modules/manager/sites/components/SitesTable.tsx b/src/modules/manager/sites/components/SitesTable.tsx index 10d0b44..5aa49d6 100644 --- a/src/modules/manager/sites/components/SitesTable.tsx +++ b/src/modules/manager/sites/components/SitesTable.tsx @@ -1,65 +1,78 @@ -import React from "react"; +import React, { useMemo } from "react"; +import { useTranslation } from "react-i18next"; import Column from "../../../../components/common/columns"; -import Table, { PublishedTableProps } from "../../../../components/common/Table"; +import Table, { + PublishedTableProps, +} from "../../../../components/common/Table"; import { ReadSite } from "../services/sitessService"; import Button, { ButtonType } from "../../../../components/common/Button"; import authentication from "../../../frame/services/authenticationService"; -class SitesTable extends React.Component> { - canViewSpecification = authentication.hasAccess("ViewSpecification"); +const SitesTable: React.FC> = ({ + data, + sortColumn, + onChangePage, + onSearch, + onDelete, + onSort, +}) => { + const { t } = useTranslation(); + const canViewSpecification = authentication.hasAccess("ViewSpecification"); - columns: Column[] = [ - { - key: "name", - label: "Name", - order: "asc", - content: (item) => { - return ( - <> - - - ); - }, - }, - { key: "address", label: "Address", order: "asc" }, - { key: "status", label: "Status", order: "asc" }, - ]; + const columns: Column[] = useMemo( + () => [ + { + key: "name", + label: t("Name"), + order: "asc", + content: (item) => ( + + ), + }, + { key: "address", label: t("Address"), order: "asc" }, + { key: "status", label: t("Status"), order: "asc" }, + ], + [t, canViewSpecification], + ); - raiseSort = (sortColumn: Column) => { - this.setState({ sortColumn }); - if (this.props.onSort !== undefined) this.props.onSort(sortColumn); + const raiseSort = (sortCol: Column) => { + if (onSort !== undefined) onSort(sortCol); + }; + + const handleAuditParams = (item: any) => { + return { + entityName: "e_suite.Database.Core.Tables.Printer.Site", + primaryKey: `{"Id":${item.id}}`, }; + }; - handleAuditParams = (item: any) => { - return { - entityName: "e_suite.Database.Core.Tables.Printer.Site", - primaryKey: '{"Id":' + item.id + "}", - }; - }; + const editPath = authentication.hasAccess("EditSite") ? "{0}" : undefined; + const doDelete = authentication.hasAccess("DeleteSite") + ? onDelete + : undefined; + const showAudit = authentication.hasAccess("ViewAuditLog") + ? handleAuditParams + : undefined; - render() { - const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props; - const editPath = authentication.hasAccess("EditSite") ? "{0}" : undefined; - const doDelete = authentication.hasAccess("DeleteSite") ? onDelete : undefined; - const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined; - - return ( -
- ); - } -} + return ( +
+ ); +}; export default SitesTable;