Notes

/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import React from 'react';

import { makeStyles } from '@material-ui/core';
import { PeopleOutlineOutlined } from '@material-ui/icons';

import SecondaryNavigation from '~componentGroups/SecondaryNavigation';
import { mergeClasses } from '~styles/utils';

import styles from './Permission.styles';
import { PermissionProps, PermissionSearchProps } from './Permission.types';
import PermissionGrid from './components/PermissionGrid';
import {
DEFAULT_TABS,
GROUP_TABLE_HEADER_CONFIG,
ROLE_TABLE_HEADER_CONFIG,
USER_TABLE_HEADER_CONFIG,
} from './utils';

const useStyle = makeStyles(styles, {
meta: 'HiRaPermission',
name: 'HiRaPermission',
});

const Permission = ({
tabConfig,
defaultTab,
tabProps,
searchProps,
data,
columns,
crudProps = {},
classes: customClasses = {},
}: PermissionProps) => {
const baseClasses = useStyle();
const classes = mergeClasses(baseClasses, customClasses);

const [activeTab, setActiveTab] = React.useState<string>(
defaultTab || 'user',
);
const [selectedRows, setSelectedRows] = React.useState<Record<
string,
Array<string | number>
> | null>(null);

const handleSelectedRows = (ids, type) => {
setSelectedRows((prev) => ({ ...prev, [type]: ids }));
};

const getTabComponent = (
config: Record<string, unknown>,
searchProps: PermissionSearchProps,
{
data,
totalRows,
onSelectedRowsChange,
selectedRowsIds,
...rest
}: {
data: Array<Record<string, unknown>>;
totalRows: undefined | number;
onSelectedRowsChange: (...any) => void;
selectedRowsIds: Array<string | number>;
},
crudProps = {},
type: string,
): JSX.Element | null => {
switch (config.type) {
case 'User':
return (
<PermissionGrid
key={`${type}-userGrid`}
columns={[...USER_TABLE_HEADER_CONFIG, ...(columns?.user || [])]}
rows={data}
totalRows={totalRows}
onSelectedRowsChange={onSelectedRowsChange}
selectedRowsIds={selectedRowsIds}
errorConfig={{
graphicType: 'icon',
iconComponent: (
<PeopleOutlineOutlined className={classes.errorIcon} />
),
link: false,
button: false,
description:
'Type to search for registered users you want to give permissions',
headerLabel: '',
}}
searchProps={searchProps}
{...tabConfig?.users}
{...rest}
{...crudProps}
/>
);
case 'User Groups':
return (
<PermissionGrid
key={`${type}-groupGrid`}
columns={[...GROUP_TABLE_HEADER_CONFIG, ...(columns?.groups || [])]}
rows={data}
totalRows={totalRows}
onSelectedRowsChange={onSelectedRowsChange}
selectedRowsIds={selectedRowsIds}
errorConfig={{
graphicType: 'icon',
iconComponent: (
<PeopleOutlineOutlined className={classes.errorIcon} />
),
link: false,
button: false,
description:
'Type to search for user groups you want to give permissions',
headerLabel: '',
}}
searchProps={searchProps}
{...tabConfig?.groups}
{...rest}
{...crudProps}
/>
);
case 'User Roles':
return (
<PermissionGrid
key={`${type}-roleGrid`}
columns={[...ROLE_TABLE_HEADER_CONFIG, ...(columns?.roles || [])]}
rows={data}
totalRows={totalRows}
onSelectedRowsChange={onSelectedRowsChange}
selectedRowsIds={selectedRowsIds}
errorConfig={{
graphicType: 'icon',
iconComponent: (
<PeopleOutlineOutlined className={classes.errorIcon} />
),
link: false,
button: false,
description:
'Type to search for user roles you want to give permissions',
headerLabel: '',
}}
searchProps={searchProps}
{...tabConfig?.roles}
{...rest}
{...crudProps}
/>
);
case 'Custom': {
if (React.isValidElement(config.component as Record<string, never>))
return React.cloneElement(config?.component as React.ReactElement, {
...config,
activeTab,
...searchProps,
data,
totalRows,
...rest,
...crudProps,
});
return null;
}
default:
return null;
}
};

const getExtraTabs = (tabConfig: Record<string, Record<string, unknown>>) => {
const temp: Record<string, Record<string, unknown>> = {
...(tabConfig || {}),
};
DEFAULT_TABS.forEach((tab) => {
delete temp?.[tab];
});
return Object.keys(temp)?.reduce(
(acc: Record<string, unknown>, cur: string) => ({
...acc,
[cur]: {
...temp[cur],
component: getTabComponent(
temp[cur],
temp[cur]?.searchProps as PermissionSearchProps,
{
...data?.[cur],
data: data?.[cur]?.data as Array<Record<string, unknown>>,
totalRows: data?.[cur]?.count as number,
selectedRowsIds: selectedRows?.[cur] || [],
onSelectedRowsChange: (ids) => handleSelectedRows(ids, cur),
},
crudProps?.[cur],
cur,
),
},
}),
{},
);
};

const tabComponents: Record<string, unknown> = React.useMemo(() => {
return {
user: {
label: 'Registered User',
component: getTabComponent(
tabConfig?.user,
searchProps?.user,
{
...data?.user,
data: data?.user?.data as Array<Record<string, unknown>>,
totalRows: data?.user.count as number,
selectedRowsIds: selectedRows?.user || [],
onSelectedRowsChange: (ids) => handleSelectedRows(ids, 'user'),
},
crudProps?.user,
'user',
),
},

groups: {
label: 'User Groups',
component: getTabComponent(
tabConfig?.groups,
searchProps?.groups,
{
...data?.groups,
data: data?.groups?.data as Array<Record<string, unknown>>,
totalRows: data?.groups?.count as number,
selectedRowsIds: selectedRows?.groups || [],
onSelectedRowsChange: (ids) => handleSelectedRows(ids, 'groups'),
},
crudProps?.groups,
'groups',
),
},

roles: {
label: 'User Roles',
component: getTabComponent(
tabConfig?.roles,
searchProps?.roles,
{
...data?.roles,
data: data?.roles?.data as Array<Record<string, unknown>>,
totalRows: data?.roles?.count as number,
selectedRowsIds: selectedRows?.roles || [],
onSelectedRowsChange: (ids) => {
handleSelectedRows(ids, 'roles');
},
},
crudProps?.roles,
'roles',
),
},
...getExtraTabs(tabConfig),
};
}, [tabConfig, data, searchProps, selectedRows]);

return (
<div>
<SecondaryNavigation
tabComponent={tabComponents}
activeTab={activeTab}
handleChange={(_e, value) => setActiveTab(value)}
disableSlide
{...tabProps}
/>
</div>
);
};

export default Permission;