Skip to content

Commit 0a79e0f

Browse files
ashotnazaryanashotnazaryan
authored
Merge pull request #1014 from fossa-app/update-table-ui-enhancements
update: Enhance table UI
2 parents f7d42b7 + 28a7dfb commit 0a79e0f

15 files changed

Lines changed: 27 additions & 28 deletions

File tree

‎src/components/UI/Form/Form.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import * as React from 'react';
22
import { FormProvider as ReactHookFormProvider, useForm, DefaultValues, FieldErrors, FieldValues } from 'react-hook-form';
33
import Paper from '@mui/material/Paper';
44
import { Item, Module, SubModule } from 'shared/models';
5+
import { APP_CONFIG } from 'shared/constants';
56
import { deepEqual } from 'shared/helpers';
6-
import { CUSTOM_STYLES } from 'shared/themes';
77
import LinearLoader from '../LinearLoader';
88
import FormContext from './FormContext';
99
import FormHeader from './FormHeader';
@@ -66,7 +66,7 @@ const Form = <T extends Item>({
6666
flexDirection: 'column',
6767
flexGrow: 1,
6868
position: 'relative',
69-
height: CUSTOM_STYLES.scrollableContentHeight,
69+
height: APP_CONFIG.scrollableContentHeight,
7070
}}
7171
>
7272
<form

‎src/components/UI/Table/ActionsMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const ActionsMenu = <T extends Item>({ module, subModule, actions, context, user
4343
aria-label="Actions Menu"
4444
size="small"
4545
color="default"
46+
sx={{ p: { xs: 0, sm: 1 } }}
4647
onClick={handleOpenActionsMenu}
4748
>
4849
<MoreHorizIcon />

‎src/components/UI/Table/ResponsiveRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const ResponsiveRow = <T extends Item>({ module, subModule, item, columns, isMob
5555
data-cy={`${module}-${subModule}-table-body-cell-${item.id}-${column.field}`}
5656
key={column.field}
5757
align={column.align || 'left'}
58-
sx={{ width: column.width || 'auto' }}
58+
sx={{ width: column.width || 'auto', ...column.sx }}
5959
>
6060
{React.isValidElement(content) ? (
6161
content

‎src/components/UI/Table/Table.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Paper, { PaperProps } from '@mui/material/Paper';
99
import Box from '@mui/material/Box';
1010
import { useResponsive } from 'shared/hooks';
1111
import { Item, Module, SubModule } from 'shared/models';
12-
import { CUSTOM_STYLES } from 'shared/themes';
12+
import { APP_CONFIG } from 'shared/constants';
1313
import Page from 'components/UI/Page';
1414
import { Column } from './table.model';
1515
import { StyledTable } from './StyledTable';
@@ -81,12 +81,14 @@ const Table = <T extends Item>({
8181
pb: 1,
8282
pl: 3,
8383
position: 'relative',
84-
height: CUSTOM_STYLES.scrollableContentHeight,
84+
height: APP_CONFIG.scrollableContentHeight,
85+
maxWidth: '100%',
86+
width: APP_CONFIG.table.containerWidth,
8587
}}
8688
{...props}
8789
>
8890
{isMobile ? (
89-
<Box sx={{ flexGrow: 1, maxHeight: 'calc(100% - 70px)', overflow: 'auto' }}>
91+
<Box sx={{ flexGrow: 1, maxHeight: APP_CONFIG.table.containerMaxHeight, overflow: 'auto' }}>
9092
{noData ? (
9193
renderEmptyState()
9294
) : (
@@ -98,16 +100,16 @@ const Table = <T extends Item>({
98100
)}
99101
</Box>
100102
) : (
101-
<TableContainer sx={{ flexGrow: 1, maxHeight: 'calc(100% - 70px)' }}>
102-
<StyledTable stickyHeader>
103+
<TableContainer sx={{ flexGrow: 1, maxHeight: APP_CONFIG.table.containerMaxHeight }}>
104+
<StyledTable stickyHeader sx={{ minWidth: `calc(${APP_CONFIG.containerWidth}px - 34px)` }} aria-label="table">
103105
<TableHead>
104106
<TableRow>
105107
{columns.map((column) => (
106108
<TableCell
107109
data-cy={`${module}-${subModule}-table-header-cell-${column.field}`}
108110
key={column.field}
109111
align={column.align || 'left'}
110-
sx={{ width: column.width, fontSize: 16 }}
112+
sx={{ width: column.width || 'auto', ...column.sx }}
111113
>
112114
{column.name}
113115
</TableCell>

‎src/components/UI/Table/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export { default } from './Table';
22
export * from './Table';
3+
export { default as ActionsMenu } from './ActionsMenu';
34
export * from './ActionsMenu';
45
export * from './table.model';
6+
export * from './table.helpers';

src/shared/helpers/table.helpers.ts renamed to src/components/UI/Table/table.helpers.ts

File renamed without changes.

‎src/components/UI/Table/table.model.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ import * as React from 'react';
22
import { TableCellProps } from '@mui/material/TableCell';
33
import { Item, UserRole } from 'shared/models';
44

5-
export interface Column<T = Item> {
5+
export type Column<T = Item> = {
66
name: React.ReactNode;
77
field: string;
88
width?: number | string;
9-
align?: TableCellProps['align'];
109
roles?: UserRole[];
1110
renderBodyCell?: (item: T) => React.ReactNode;
12-
}
11+
} & TableCellProps;
1312

1413
export interface Action<T = Item> {
1514
name: React.ReactNode;

‎src/pages/Manage/Branch/pages/BranchCatalog.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ import {
1313
} from 'store/features';
1414
import { Branch, Module, PaginationParams, SubModule, UserRole } from 'shared/models';
1515
import { ACTION_FIELDS, APP_CONFIG, BRANCH_FIELDS, BRANCH_TABLE_ACTIONS_SCHEMA, BRANCH_TABLE_SCHEMA, ROUTES } from 'shared/constants';
16-
import { getTestSelectorByModule, mapTableActionsColumn } from 'shared/helpers';
16+
import { getTestSelectorByModule } from 'shared/helpers';
1717
import { useUnmount } from 'shared/hooks';
1818
import Page from 'components/UI/Page';
19-
import Table from 'components/UI/Table';
20-
import ActionsMenu from 'components/UI/Table/ActionsMenu';
19+
import Table, { mapTableActionsColumn, ActionsMenu } from 'components/UI/Table';
2120
import TableLayout from 'components/layouts/TableLayout';
2221
import { useSearch } from 'components/Search';
2322
import { renderPrimaryLinkText } from 'components/UI/helpers/renderPrimaryLinkText';

‎src/pages/Manage/Department/pages/DepartmentCatalog.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,10 @@ import {
2020
DEPARTMENT_TABLE_SCHEMA,
2121
ROUTES,
2222
} from 'shared/constants';
23-
import { getTestSelectorByModule, mapTableActionsColumn } from 'shared/helpers';
23+
import { getTestSelectorByModule } from 'shared/helpers';
2424
import { useUnmount } from 'shared/hooks';
2525
import Page from 'components/UI/Page';
26-
import Table from 'components/UI/Table';
27-
import ActionsMenu from 'components/UI/Table/ActionsMenu';
26+
import Table, { ActionsMenu, mapTableActionsColumn } from 'components/UI/Table';
2827
import TableLayout from 'components/layouts/TableLayout';
2928
import { useSearch } from 'components/Search';
3029
import { renderPrimaryLinkText } from 'components/UI/helpers/renderPrimaryLinkText';

‎src/pages/Manage/Employee/pages/EmployeeCatalog.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@ import {
1111
} from 'store/features';
1212
import { Employee, Module, PaginationParams, SubModule } from 'shared/models';
1313
import { ACTION_FIELDS, APP_CONFIG, EMPLOYEE_FIELDS, EMPLOYEE_TABLE_ACTIONS_SCHEMA, EMPLOYEE_TABLE_SCHEMA, ROUTES } from 'shared/constants';
14-
import { getTestSelectorByModule, mapTableActionsColumn } from 'shared/helpers';
14+
import { getTestSelectorByModule } from 'shared/helpers';
1515
import { useUnmount } from 'shared/hooks';
1616
import Page from 'components/UI/Page';
17-
import Table from 'components/UI/Table';
17+
import Table, { ActionsMenu, mapTableActionsColumn } from 'components/UI/Table';
1818
import TableLayout from 'components/layouts/TableLayout';
1919
import { useSearch } from 'components/Search';
20-
import ActionsMenu from 'components/UI/Table/ActionsMenu';
2120
import { renderPrimaryLinkText } from 'components/UI/helpers/renderPrimaryLinkText';
2221

2322
const testModule = Module.employeeManagement;

0 commit comments

Comments
 (0)