feat: adjustments.

client/src/containers/Items/InventoryAdjustmentDataTable.js

@@ -7,38 +7,42 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 import classNames from 'classnames';
-import {
-  DataTable,
-  If,
-  Money,
-  Choose,
-  Icon,
-  LoadingIndicator,
-} from 'components';
+import { DataTable, Icon, LoadingIndicator } from 'components';
 import { CLASSES } from 'common/classes';
 import { useIsValuePassed } from 'hooks';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-// withInventoryAdjustments
-// withInventoryAdjustmentsActions
+import withInventoryAdjustments from './withInventoryAdjustments';
+import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
 
 import { compose, saveInvoke } from 'utils';
 import { withRouter } from 'react-router-dom';
 
 function InventoryAdjustmentDataTable({
+  // withInventoryAdjustments
+  inventoryAdjustmentItems,
+  inventoryAdjustmentCurrentPage,
+  inventoryAdjustmentLoading,
+  inventoryAdjustmentsPagination,
+
+  // withInventoryAdjustmentsActions
+  addInventoryAdjustmentTableQueries,
+
   // #ownProps
   onDeleteInventoryAdjustment,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
+  const isLoadedBefore = useIsValuePassed(inventoryAdjustmentLoading, false);
 
   const handleDeleteInventoryAdjustment = useCallback(
-    (_inventory) => {
-      saveInvoke(onDeleteInventoryAdjustment, _inventory);
+    (_adjustment) => () => {
+      saveInvoke(onDeleteInventoryAdjustment, _adjustment);
     },
     [onDeleteInventoryAdjustment],
   );
@@ -53,9 +57,9 @@ function InventoryAdjustmentDataTable({
         <MenuDivider />
         <MenuItem
           text={formatMessage({ id: 'delete_adjustment' })}
-          icon={<Icon icon="trash-16" iconSize={16} />}
           intent={Intent.DANGER}
           onClick={handleDeleteInventoryAdjustment(adjustment)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
     ),
@@ -79,41 +83,53 @@ function InventoryAdjustmentDataTable({
       {
         id: 'type',
         Header: formatMessage({ id: 'type' }),
-        accessor: 'type',
+        accessor: (row) =>
+          row.type ? (
+            <Tag minimal={true} round={true} intent={Intent.NONE}>
+              {formatMessage({ id: row.type })}
+            </Tag>
+          ) : (
+            ''
+          ),
         className: 'type',
         width: 100,
       },
       {
         id: 'reason',
         Header: formatMessage({ id: 'reason' }),
-        // accessor: (r) => (
-        //   <Tooltip
-        //     content={}
-        //     position={Position.RIGHT_BOTTOM}
-        //   >
-        //   </Tooltip>
-        // ),
+        accessor: 'reason',
         className: 'reason',
         width: 115,
       },
       {
-        id: 'reference',
-        Header: formatMessage({ id: 'reference' }),
-        accessor: (row) => `#${row.reference}`,
-        className: 'reference',
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        className: 'reference_no',
         width: 100,
       },
       {
-        id: 'status',
+        id: 'publish',
         Header: formatMessage({ id: 'status' }),
-        accessor: 'status',
+        accessor: (r) => {
+          return r.is_published ? (
+            <Tag minimal={true}>
+              <T id={'published'} />
+            </Tag>
+          ) : (
+            <Tag minimal={true} intent={Intent.WARNING}>
+              <T id={'draft'} />
+            </Tag>
+          );
+        },
         width: 95,
-        className: 'status',
+        className: 'publish',
       },
 
       {
         id: 'description',
         Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
         disableSorting: true,
         width: 85,
         className: 'description',
@@ -144,6 +160,23 @@ function InventoryAdjustmentDataTable({
     [actionMenuList, formatMessage],
   );
 
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      addInventoryAdjustmentTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page: pageIndex + 1,
+      });
+    },
+    [addInventoryAdjustmentTableQueries],
+  );
+  
+
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
       saveInvoke(
@@ -160,11 +193,23 @@ function InventoryAdjustmentDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator
-
-      // loading={}
-      >
-        <DataTable noInitialFetch={true} columns={columns} data={[]} />
+      <LoadingIndicator loading={inventoryAdjustmentLoading && !isLoadedBefore}>
+        <DataTable
+          columns={columns}
+          data={inventoryAdjustmentItems}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          autoResetSortBy={false}
+          autoResetPage={false}
+          pagesCount={inventoryAdjustmentsPagination.pagesCount}
+          initialPageSize={inventoryAdjustmentsPagination.pageSize}
+          initialPageIndex={inventoryAdjustmentsPagination.page - 1}
+        />
       </LoadingIndicator>
     </div>
   );
@@ -173,4 +218,18 @@ function InventoryAdjustmentDataTable({
 export default compose(
   withRouter,
   withDialogActions,
+  withInventoryAdjustmentActions,
+  withInventoryAdjustments(
+    ({
+      inventoryAdjustmentLoading,
+      inventoryAdjustmentItems,
+      inventoryAdjustmentCurrentPage,
+      inventoryAdjustmentsPagination,
+    }) => ({
+      inventoryAdjustmentLoading,
+      inventoryAdjustmentItems,
+      inventoryAdjustmentCurrentPage,
+      inventoryAdjustmentsPagination,
+    }),
+  ),
 )(InventoryAdjustmentDataTable);

client/src/containers/Items/InventoryAdjustmentList.js

@@ -3,13 +3,15 @@ import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
+import AppToaster from 'components/AppToaster';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import InventoryAdjustmentDataTable from './InventoryAdjustmentDataTable';
-
+import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
+import withInventoryAdjustments from './withInventoryAdjustments';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-//withInventoryAdjustmentsActions
+
 import { compose } from 'utils';
 import { Route, Switch } from 'react-router-dom';
 
@@ -19,7 +21,13 @@ import { Route, Switch } from 'react-router-dom';
 function InventoryAdjustmentList({
   // #withDashboardActions
   changePageTitle,
+
+  // #withInventoryAdjustments
+  inventoryAdjustmentTableQuery,
+
   // #withInventoryAdjustmentsActions
+  requestFetchInventoryAdjustmentTable,
+  requestDeleteInventoryAdjustment,
 }) {
   const { formatMessage } = useIntl();
   const [selectedRows, setSelectedRows] = useState([]);
@@ -32,8 +40,8 @@ function InventoryAdjustmentList({
   }, [changePageTitle, formatMessage]);
 
   const fetchInventoryAdjustments = useQuery(
-    ['inventory-adjustment-list'],
-    () => {},
+    ['inventory-adjustment-list' ,inventoryAdjustmentTableQuery],
+    (key, query) => requestFetchInventoryAdjustmentTable({ ...query }),
   );
 
   // Handle selected rows change.
@@ -55,7 +63,25 @@ function InventoryAdjustmentList({
     setDeleteInventoryAdjustment(false);
   }, [setDeleteInventoryAdjustment]);
 
-  const handleConfirmInventoryAdjustmentDelete = useCallback(() => {}, []);
+  const handleConfirmInventoryAdjustmentDelete = useCallback(() => {
+    requestDeleteInventoryAdjustment(deleteInventoryAdjustment.id)
+      .then(() => {
+        setDeleteInventoryAdjustment(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_adjustment_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setDeleteInventoryAdjustment(false);
+      });
+  }, [
+    deleteInventoryAdjustment,
+    requestDeleteInventoryAdjustment,
+    formatMessage,
+  ]);
 
   // Calculates the data table selected rows count.
   const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
@@ -63,7 +89,7 @@ function InventoryAdjustmentList({
   ]);
 
   return (
-    <DashboardInsider>
+    <DashboardInsider name={'inventory_adjustments'}>
       <DashboardPageContent>
         <Switch>
           <Route exact={true}>
@@ -73,9 +99,32 @@ function InventoryAdjustmentList({
             />
           </Route>
         </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteInventoryAdjustment}
+          onCancel={handleCancelInventoryAdjustmentDelete}
+          onConfirm={handleConfirmInventoryAdjustmentDelete}
+        >
+          <p>
+            <T
+              id={
+                'once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it'
+              }
+            />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
 }
 
-export default compose(withDashboardActions)(InventoryAdjustmentList);
+export default compose(
+  withDashboardActions,
+  withInventoryAdjustmentActions,
+  withInventoryAdjustments(({ inventoryAdjustmentTableQuery }) => ({
+    inventoryAdjustmentTableQuery,
+  })),
+)(InventoryAdjustmentList);

client/src/containers/Items/ItemsDataTable.js

@@ -75,6 +75,17 @@ function ItemsDataTable({
     [addItemsTableQueries],
   );
 
+  const handleMakeAdjustment = useCallback(
+    (item) => () => {
+      openDialog('inventory-adjustment-form', {
+        action: 'make_adjustment',
+        item_id: item.id,
+        quantity_on_hand: item.quantity_on_hand,
+      });
+    },
+    [openDialog],
+  );
+
   const handleEditItem = useCallback(
     (item) => () => {
       onEditItem && onEditItem(item);
@@ -89,10 +100,6 @@ function ItemsDataTable({
     [onDeleteItem],
   );
 
-  const handleMakeAdjustment = useCallback(() => {
-    openDialog('inventory-adjustment-form', {});
-  }, [openDialog]);
-
   const actionMenuList = useCallback(
     (item) => (
       <Menu>
@@ -120,11 +127,11 @@ function ItemsDataTable({
             onClick={() => onActivateItem(item)}
           />
         </If>
-        
+
         <If condition={item.type === 'inventory'}>
           <MenuItem
             text={formatMessage({ id: 'make_adjustment' })}
-            onClick={handleMakeAdjustment}
+            onClick={handleMakeAdjustment(item)}
           />
         </If>
         <MenuItem

client/src/containers/Items/withInventoryAdjustmentActions.js

@@ -7,7 +7,7 @@ import {
 import t from 'store/types';
 
 const mapDispatchToProps = (dispatch) => ({
-  requestSubmitInventoryAdjustment: (form) =>
+  requestSubmitInventoryAdjustment: ({ form }) =>
     dispatch(submitInventoryAdjustment({ form })),
   requestFetchInventoryAdjustmentTable: (query = {}) =>
     dispatch(fetchInventoryAdjustmentsTable({ query: { ...query } })),

client/src/containers/Items/withInventoryAdjustments.js

@@ -1,4 +1,34 @@
 import { connect } from 'react-redux';
+import {
+  getInvoiceTableQueryFactory,
+  getInventoryAdjustmentCurrentPageFactory,
+  getInventoryAdjustmentPaginationMetaFactory,
+} from 'store/inventoryAdjustments/inventoryAdjustment.selector';
 
+export default (mapState) => {
+  const getInventoryAdjustmentItems = getInventoryAdjustmentCurrentPageFactory();
+  const getInventoryAdjustmentTableQuery = getInvoiceTableQueryFactory();
+  const getInventoryAdjustmentsPaginationMeta = getInventoryAdjustmentPaginationMetaFactory();
 
+  const mapStateToProps = (state, props) => {
+    const query = getInventoryAdjustmentTableQuery(state, props);
 
+    const mapped = {
+      inventoryAdjustmentCurrentPage: getInventoryAdjustmentItems(
+        state,
+        props,
+        query,
+      ),
+      inventoryAdjustmentItems: Object.values(state.inventoryAdjustments.items),
+      inventoryAdjustmentTableQuery: query,
+      inventoryAdjustmentsPagination: getInventoryAdjustmentsPaginationMeta(
+        state,
+        props,
+        query,
+      ),
+      inventoryAdjustmentLoading: state.inventoryAdjustments.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};