Fix: Styling Item Categories Table

client/src/containers/Items/ItemCategoriesList.js

@@ -9,6 +9,7 @@ import {
 } from 'react-intl';
 
 import AppToaster from 'components/AppToaster';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
@@ -156,7 +157,7 @@ const ItemCategoryList = ({
 
   return (
     <DashboardInsider
-      loading={fetchResourceFields.isFetching}
+      loading={fetchResourceFields.isFetching || fetchCategories.isFetching}
       name={'item-category-list'}
     >
       <ItemsCategoryActionsBar
@@ -164,50 +165,50 @@ const ItemCategoryList = ({
         onFilterChanged={handleFilterChanged}
         onBulkDelete={handleBulkDelete}
       />
+      <DashboardPageContent>
+        <ItemCategoriesDataTable
+          onEditCategory={handleEditCategory}
+          onFetchData={handleFetchData}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          onDeleteCategory={handleDeleteCategory}
+        />
 
-      <ItemCategoriesDataTable
+        <Alert
-        onEditCategory={handleEditCategory}
+          cancelButtonText={<T id={'cancel'} />}
-        onFetchData={handleFetchData}
+          confirmButtonText={<T id={'delete'} />}
-        onSelectedRowsChange={handleSelectedRowsChange}
+          icon="trash"
-        onDeleteCategory={handleDeleteCategory}
+          intent={Intent.DANGER}
-        loading={fetchCategories.isFetching}
+          isOpen={deleteCategory}
-      />
+          onCancel={handleCancelItemDelete}
+          onConfirm={handleConfirmItemDelete}
+        >
+          <p>
+            <FormattedHTMLMessage
+              id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+            />
+          </p>
+        </Alert>
 
-      <Alert
+        <Alert
-        cancelButtonText={<T id={'cancel'} />}
+          cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
+          confirmButtonText={`${formatMessage({
-        icon="trash"
+            id: 'delete',
-        intent={Intent.DANGER}
+          })} (${selectedRowsCount})`}
-        isOpen={deleteCategory}
+          icon="trash"
-        onCancel={handleCancelItemDelete}
+          intent={Intent.DANGER}
-        onConfirm={handleConfirmItemDelete}
+          isOpen={bulkDelete}
-      >
+          onCancel={handleCancelBulkDelete}
-        <p>
+          onConfirm={handleConfirmBulkDelete}
-          <FormattedHTMLMessage
+        >
-            id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+          <p>
-          />
+            <FormattedHTMLMessage
-        </p>
+              id={
-      </Alert>
+                'once_delete_these_item_categories_you_will_not_able_restore_them'
-
+              }
-      <Alert
+            />
-        cancelButtonText={<T id={'cancel'} />}
+          </p>
-        confirmButtonText={`${formatMessage({
+        </Alert>
-          id: 'delete',
+      </DashboardPageContent>
-        })} (${selectedRowsCount})`}
-        icon="trash"
-        intent={Intent.DANGER}
-        isOpen={bulkDelete}
-        onCancel={handleCancelBulkDelete}
-        onConfirm={handleConfirmBulkDelete}
-      >
-        <p>
-          <FormattedHTMLMessage
-            id={
-              'once_delete_these_item_categories_you_will_not_able_restore_them'
-            }
-          />
-        </p>
-      </Alert>
     </DashboardInsider>
   );
 };

client/src/containers/Items/ItemCategoriesTable.js

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