From 8b7e9d74317d815766893ded32c7b3f6b809b06a Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 26 Jan 2021 22:15:57 +0200 Subject: [PATCH] fix: inventory adjustment alert. --- .../Item/InventoryAdjustmentDeleteAlert.js | 81 +++++++++++++++++ .../Items/InventoryAdjustmentDataTable.js | 13 +-- .../Items/InventoryAdjustmentList.js | 89 ++++--------------- client/src/containers/Items/ItemsAlerts.js | 2 + .../Items/withInventoryAdjustments.js | 1 + .../inventoryAdjustment.reducer.js | 5 ++ .../inventoryAdjustment.type.js | 3 +- 7 files changed, 113 insertions(+), 81 deletions(-) create mode 100644 client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js diff --git a/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js b/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js new file mode 100644 index 000000000..57f862073 --- /dev/null +++ b/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { queryCache } from 'react-query'; +import { AppToaster } from 'components'; + +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; +import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions'; + +import { compose } from 'utils'; + +/** + * Inventory Adjustment delete alerts. + */ +function InventoryAdjustmentDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { inventoryId }, + // #withInventoryAdjustmentActions + requestDeleteInventoryAdjustment, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel delete alert. + const handleCancelInventoryAdjustmentDelete = () => { + closeAlert(name); + }; + + const handleConfirmInventoryAdjustmentDelete = () => { + requestDeleteInventoryAdjustment(inventoryId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_adjustment_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('inventory-adjustment-list'); + }) + .catch((errors) => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelInventoryAdjustmentDelete} + onConfirm={handleConfirmInventoryAdjustmentDelete} + > +

+ +

+ + ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withInventoryAdjustmentActions, +)(InventoryAdjustmentDeleteAlert); diff --git a/client/src/containers/Items/InventoryAdjustmentDataTable.js b/client/src/containers/Items/InventoryAdjustmentDataTable.js index 9b898592d..141de6bb2 100644 --- a/client/src/containers/Items/InventoryAdjustmentDataTable.js +++ b/client/src/containers/Items/InventoryAdjustmentDataTable.js @@ -175,22 +175,15 @@ function InventoryAdjustmentDataTable({ }, [addInventoryAdjustmentTableQueries], ); - - + const handleSelectedRowsChange = useCallback( (selectedRows) => { - saveInvoke( - onSelectedRowsChange, - selectedRows.map((s) => s.original), - ); + onSelectedRowsChange && + onSelectedRowsChange(selectedRows.map((s) => s.original)); }, [onSelectedRowsChange], ); - // const showEmptyStatus = [ - - // ].every((condition) => condition === true); - return (
diff --git a/client/src/containers/Items/InventoryAdjustmentList.js b/client/src/containers/Items/InventoryAdjustmentList.js index 6cea5e604..f96093bb7 100644 --- a/client/src/containers/Items/InventoryAdjustmentList.js +++ b/client/src/containers/Items/InventoryAdjustmentList.js @@ -1,19 +1,20 @@ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; import { useQuery } from 'react-query'; -import { Alert, Intent } from '@blueprintjs/core'; +import { Route, Switch } from 'react-router-dom'; 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 ItemsAlerts from './ItemsAlerts'; import InventoryAdjustmentDataTable from './InventoryAdjustmentDataTable'; + import withInventoryAdjustmentActions from './withInventoryAdjustmentActions'; import withInventoryAdjustments from './withInventoryAdjustments'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; import { compose } from 'utils'; -import { Route, Switch } from 'react-router-dom'; /** * Inventory Adjustment List. @@ -25,69 +26,33 @@ function InventoryAdjustmentList({ // #withInventoryAdjustments inventoryAdjustmentTableQuery, + // #withAlertsActions. + openAlert, + // #withInventoryAdjustmentsActions requestFetchInventoryAdjustmentTable, - requestDeleteInventoryAdjustment, + setSelectedRowsInventoryAdjustments, }) { const { formatMessage } = useIntl(); - const [selectedRows, setSelectedRows] = useState([]); - const [deleteInventoryAdjustment, setDeleteInventoryAdjustment] = useState( - false, - ); useEffect(() => { changePageTitle(formatMessage({ id: 'inventory_adjustment_list' })); }, [changePageTitle, formatMessage]); const fetchInventoryAdjustments = useQuery( - ['inventory-adjustment-list' ,inventoryAdjustmentTableQuery], + ['inventory-adjustment-list', inventoryAdjustmentTableQuery], (key, query) => requestFetchInventoryAdjustmentTable({ ...query }), ); // Handle selected rows change. - const handleSelectedRowsChange = useCallback( - (inventory) => { - setSelectedRows(inventory); - }, - [setSelectedRows], - ); - - const handleDeleteInventoryAdjustment = useCallback( - (adjustment) => { - setDeleteInventoryAdjustment(adjustment); - }, - [setDeleteInventoryAdjustment], - ); - - const handleCancelInventoryAdjustmentDelete = useCallback(() => { - setDeleteInventoryAdjustment(false); - }, [setDeleteInventoryAdjustment]); - - const handleConfirmInventoryAdjustmentDelete = useCallback(() => { - requestDeleteInventoryAdjustment(deleteInventoryAdjustment.id) - .then(() => { - setDeleteInventoryAdjustment(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_adjustment_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch((errors) => { - setDeleteInventoryAdjustment(false); - }); - }, [ - deleteInventoryAdjustment, - requestDeleteInventoryAdjustment, - formatMessage, - ]); - - // Calculates the data table selected rows count. - const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [ - selectedRows, - ]); + const handleSelectedRowsChange = (selectedRows) => { + const selectedRowsIds = selectedRows.map((r) => r.id); + setSelectedRowsInventoryAdjustments(selectedRowsIds); + }; + const handleDeleteInventoryAdjustment = ({ id }) => { + openAlert('inventory-adjustment-delete', { inventoryId: id }); + }; return ( @@ -95,27 +60,10 @@ function InventoryAdjustmentList({ - } - confirmButtonText={} - icon={'trash'} - intent={Intent.DANGER} - isOpen={deleteInventoryAdjustment} - onCancel={handleCancelInventoryAdjustmentDelete} - onConfirm={handleConfirmInventoryAdjustmentDelete} - > -

- -

- + ); @@ -127,4 +75,5 @@ export default compose( withInventoryAdjustments(({ inventoryAdjustmentTableQuery }) => ({ inventoryAdjustmentTableQuery, })), + withAlertsActions, )(InventoryAdjustmentList); diff --git a/client/src/containers/Items/ItemsAlerts.js b/client/src/containers/Items/ItemsAlerts.js index 76211db35..26482550a 100644 --- a/client/src/containers/Items/ItemsAlerts.js +++ b/client/src/containers/Items/ItemsAlerts.js @@ -5,6 +5,7 @@ import ItemActivateAlert from 'containers/Alerts/Item/ItemActivateAlert'; import ItemBulkDeleteAlert from 'containers/Alerts/Item/ItemBulkDeleteAlert'; import ItemCategoryDeleteAlert from 'containers/Alerts/Item/ItemCategoryDeleteAlert'; import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Item/ItemCategoryBulkDeleteAlert'; +import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Item/InventoryAdjustmentDeleteAlert'; /** * Items alert. @@ -18,6 +19,7 @@ export default function ItemsAlerts() { +
); } diff --git a/client/src/containers/Items/withInventoryAdjustments.js b/client/src/containers/Items/withInventoryAdjustments.js index c35b646a0..cbd3077e3 100644 --- a/client/src/containers/Items/withInventoryAdjustments.js +++ b/client/src/containers/Items/withInventoryAdjustments.js @@ -27,6 +27,7 @@ export default (mapState) => { query, ), inventoryAdjustmentLoading: state.inventoryAdjustments.loading, + inventoryAdjustmentsSelectedRows: state.inventoryAdjustments.selectedRows, }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js index 6ebdc0b71..5c36769ff 100644 --- a/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js +++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js @@ -14,6 +14,7 @@ const initialState = { page_size: 12, page: 1, }, + selectedRows: [], }; export default createReducer(initialState, { @@ -62,6 +63,10 @@ export default createReducer(initialState, { [t.INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW]: (state, action) => { state.currentViewId = action.currentViewId; }, + [t.INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET]: (state, action) => { + const { selectedRows } = action.payload; + state.selectedRows = selectedRows; + }, ...viewPaginationSetReducer(t.INVENTORY_ADJUSTMENTS_PAGINATION_SET), ...createTableQueryReducers('INVENTORY_ADJUSTMENTS'), diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js index 677e6ed22..0ffd5b4c0 100644 --- a/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js +++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js @@ -6,9 +6,10 @@ export default { INVENTORY_ADJUSTMENTS_PAGINATION_SET: 'INVENTORY_ADJUSTMENTS_PAGINATION_SET', - INVENTORY_ADJUSTMENTS_TABLE_QUERIES_ADD: 'INVENTORY_ADJUSTMENTS/TABLE_QUERIES_ADD', INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW: 'INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW', + INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET: + 'INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET', };