Fix: Styling Item Categories Table

This commit is contained in:
elforjani3
2020-11-14 18:51:44 +02:00
parent 173f13fc60
commit d1ab8070b4
2 changed files with 53 additions and 51 deletions

View File

@@ -9,6 +9,7 @@ import {
} from 'react-intl'; } from 'react-intl';
import AppToaster from 'components/AppToaster'; import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider'; import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable'; import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar'; import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
@@ -156,7 +157,7 @@ const ItemCategoryList = ({
return ( return (
<DashboardInsider <DashboardInsider
loading={fetchResourceFields.isFetching} loading={fetchResourceFields.isFetching || fetchCategories.isFetching}
name={'item-category-list'} name={'item-category-list'}
> >
<ItemsCategoryActionsBar <ItemsCategoryActionsBar
@@ -164,13 +165,12 @@ const ItemCategoryList = ({
onFilterChanged={handleFilterChanged} onFilterChanged={handleFilterChanged}
onBulkDelete={handleBulkDelete} onBulkDelete={handleBulkDelete}
/> />
<DashboardPageContent>
<ItemCategoriesDataTable <ItemCategoriesDataTable
onEditCategory={handleEditCategory} onEditCategory={handleEditCategory}
onFetchData={handleFetchData} onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange} onSelectedRowsChange={handleSelectedRowsChange}
onDeleteCategory={handleDeleteCategory} onDeleteCategory={handleDeleteCategory}
loading={fetchCategories.isFetching}
/> />
<Alert <Alert
@@ -208,6 +208,7 @@ const ItemCategoryList = ({
/> />
</p> </p>
</Alert> </Alert>
</DashboardPageContent>
</DashboardInsider> </DashboardInsider>
); );
}; };

View File

@@ -21,6 +21,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
const ItemsCategoryList = ({ const ItemsCategoryList = ({
// #withItemCategories // #withItemCategories
categoriesList, categoriesList,
categoriesTableLoading,
// #withDialogActions. // #withDialogActions.
openDialog, openDialog,
@@ -72,21 +73,21 @@ const ItemsCategoryList = ({
id: 'name', id: 'name',
Header: formatMessage({ id: 'category_name' }), Header: formatMessage({ id: 'category_name' }),
accessor: 'name', accessor: 'name',
width: 150, width: 220,
}, },
{ {
id: 'description', id: 'description',
Header: formatMessage({ id: 'description' }), Header: formatMessage({ id: 'description' }),
accessor: 'description', accessor: 'description',
className: 'description', className: 'description',
width: 150, width: 220,
}, },
{ {
id: 'count', id: 'count',
Header: formatMessage({ id: 'count' }), Header: formatMessage({ id: 'count' }),
accessor: 'count', accessor: 'count',
className: 'count', className: 'count',
width: 50, width: 180,
}, },
{ {
id: 'actions', id: 'actions',
@@ -94,14 +95,13 @@ const ItemsCategoryList = ({
Cell: ({ cell }) => ( Cell: ({ cell }) => (
<Popover <Popover
content={actionMenuList(cell.row.original)} content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM} position={Position.RIGHT_TOP}
> >
<Button icon={<Icon icon="more-h-16" iconSize={16} />} /> <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover> </Popover>
), ),
className: 'actions', className: 'actions',
width: 50, width: 50,
disableResizing: false,
}, },
], ],
[actionMenuList, formatMessage], [actionMenuList, formatMessage],
@@ -148,9 +148,9 @@ const ItemsCategoryList = ({
manualSortBy={true} manualSortBy={true}
selectionColumn={selectionColumn} selectionColumn={selectionColumn}
expandable={true} expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange} onSelectedRowsChange={handleSelectedRowsChange}
treeGraph={true} loading={categoriesTableLoading}
spinnerProps={{ size: 30 }}
rowContextMenu={handleRowContextMenu} rowContextMenu={handleRowContextMenu}
/> />
</LoadingIndicator> </LoadingIndicator>
@@ -158,8 +158,9 @@ const ItemsCategoryList = ({
}; };
export default compose( export default compose(
withItemCategories(({ categoriesList }) => ({ withItemCategories(({ categoriesList, categoriesTableLoading }) => ({
categoriesList, categoriesList,
categoriesTableLoading,
})), })),
withDialogActions, withDialogActions,
)(ItemsCategoryList); )(ItemsCategoryList);