QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-11-20 17:41:16 +02:00
parent d90b6ffbe7
commit 56e00d254b
71 changed files with 1167 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/webapp/src/containers/Alerts/Items/ItemBulkDeleteAlert.tsx
View File

@@ -1,68 +0,0 @@
// @ts-nocheck
import React from 'react';
import { AppToaster, FormattedMessage as T } from '@/components';
import intl from 'react-intl-universal';
import { Intent, Alert } from '@blueprintjs/core';
import { size } from 'lodash';
import { useBulkDeleteItems } from '@/hooks/query/items';
import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
import withAlertActions from '@/containers/Alert/withAlertActions';
import { compose } from '@/utils';
/**
* Item bulk delete alert.
*/
function ItemBulkDeleteAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { itemsIds },
// #withAlertActions
closeAlert,
}) {
const { mutateAsync: bulkDeleteItems, isLoading } = useBulkDeleteItems();
// handle cancel item bulk delete alert.
const handleCancelBulkDelete = () => {
closeAlert(name);
};
// Handle confirm items bulk delete.
const handleConfirmBulkDelete = () => {
bulkDeleteItems(itemsIds)
.then(() => {
AppToaster.show({
message: intl.get('the_items_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
closeAlert(name);
})
.catch((errors) => { });
};
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={
<T id={'delete_count'} values={{ count: size(itemsIds) }} />
}
icon="trash"
intent={Intent.DANGER}
isOpen={isOpen}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
loading={isLoading}
>
<p>
<T id={'once_delete_these_items_you_will_not_able_restore_them'} />
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ItemBulkDeleteAlert);

42
packages/webapp/src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx
View File

@@ -12,7 +12,6 @@ import {
import { useHistory } from 'react-router-dom';
import {
If,
Icon,
Can,
FormattedMessage as T,
@@ -29,7 +28,6 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
import withAlertActions from '@/containers/Alert/withAlertActions';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withSettings from '@/containers/Settings/withSettings';
import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -37,6 +35,8 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
import { isEmpty } from 'lodash';
import { useBulkDeleteCustomersDialog } from './hooks/use-bulk-delete-customers-dialog';
/**
* Customers actions bar.
@@ -50,9 +50,6 @@ function CustomerActionsBar({
setCustomersTableState,
accountsInactiveMode,
// #withAlertActions
openAlert,
// #withSettings
customersTableSize,
@@ -62,6 +59,9 @@ function CustomerActionsBar({
// #withDialogActions
openDialog,
}) {
const { openBulkDeleteDialog, isValidatingBulkDeleteCustomers } =
useBulkDeleteCustomersDialog();
// History context.
const history = useHistory();
@@ -80,7 +80,7 @@ function CustomerActionsBar({
// Handle Customers bulk delete button click.,
const handleBulkDelete = () => {
openAlert('customers-bulk-delete', { customersIds: customersSelectedRows });
openBulkDeleteDialog(customersSelectedRows);
};
const handleTabChange = (view) => {
@@ -118,6 +118,23 @@ function CustomerActionsBar({
downloadExportPdf({ resource: 'Customer' });
};
if (!isEmpty(customersSelectedRows)) {
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleBulkDelete}
disabled={isValidatingBulkDeleteCustomers}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -129,7 +146,7 @@ function CustomerActionsBar({
onChange={handleTabChange}
/>
<NavbarDivider />
<Can I={CustomerAction.Create} a={AbilitySubject.Item}>
<Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'plus'} />}
@@ -153,16 +170,6 @@ function CustomerActionsBar({
/>
</AdvancedFilterPopover>
<If condition={customersSelectedRows.length}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleBulkDelete}
/>
</If>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
@@ -217,6 +224,5 @@ export default compose(
withSettings(({ customersSettings }) => ({
customersTableSize: customersSettings?.tableSize,
})),
withAlertActions,
withDialogActions,
)(CustomerActionsBar);

4
packages/webapp/src/containers/Customers/CustomersLanding/CustomersList.tsx
View File

@@ -24,13 +24,15 @@ function CustomersList({
// #withCustomersActions
resetCustomersTableState,
resetCustomersSelectedRows,
}) {
// Resets the accounts table state once the page unmount.
useEffect(
() => () => {
resetCustomersTableState();
resetCustomersSelectedRows();
},
[resetCustomersTableState],
[resetCustomersSelectedRows, resetCustomersTableState],
);
return (

11
packages/webapp/src/containers/Customers/CustomersLanding/CustomersTable.tsx
View File

@@ -32,6 +32,7 @@ import { DRAWERS } from '@/constants/drawers';
function CustomersTable({
// #withCustomersActions
setCustomersTableState,
setCustomersSelectedRows,
// #withCustomers
customersTableState,
@@ -78,6 +79,14 @@ function CustomersTable({
[setCustomersTableState],
);
const handleSelectedRowsChange = React.useCallback(
(selectedFlatRows) => {
const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
setCustomersSelectedRows(selectedIds);
},
[setCustomersSelectedRows],
);
// Handles the customer delete action.
const handleCustomerDelete = ({ id }) => {
openAlert('customer-delete', { contactId: id });
@@ -140,6 +149,8 @@ function CustomersTable({
manualSortBy={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
onSelectedRowsChange={handleSelectedRowsChange}
autoResetSelectedRows={false}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}

14
packages/webapp/src/containers/Customers/CustomersLanding/hooks/use-bulk-delete-customers-dialog.ts Normal file
View File

@@ -0,0 +1,14 @@
// @ts-nocheck
import { DialogsName } from '@/constants/dialogs';
import { useValidateBulkDeleteCustomers } from '@/hooks/query/customers';
import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
export const useBulkDeleteCustomersDialog = () => {
const validateBulkDeleteMutation = useValidateBulkDeleteCustomers();
return useBulkDeleteDialog(
DialogsName.CustomerBulkDelete,
validateBulkDeleteMutation,
);
};

1
packages/webapp/src/containers/Customers/CustomersLanding/withCustomers.tsx
View File

@@ -12,6 +12,7 @@ export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
customersSelectedRows: state.customers.selectedRows,
customersTableState: getCustomersTableState(state, props),
customersTableStateChanged: customersTableStateChanged(state, props),
};

7
packages/webapp/src/containers/Customers/CustomersLanding/withCustomersActions.tsx
View File

@@ -2,12 +2,17 @@
import { connect } from 'react-redux';
import {
setCustomersTableState,
resetCustomersTableState
resetCustomersTableState,
setCustomersSelectedRows,
resetCustomersSelectedRows,
} from '@/store/customers/customers.actions';
export const mapDispatchToProps = (dispatch) => ({
setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
resetCustomersTableState: () => dispatch(resetCustomersTableState()),
setCustomersSelectedRows: (selectedRows) =>
dispatch(setCustomersSelectedRows(selectedRows)),
resetCustomersSelectedRows: () => dispatch(resetCustomersSelectedRows()),
});
export default connect(null, mapDispatchToProps);

2
packages/webapp/src/containers/Dialogs/Accounts/AccountBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteAccounts } from '@/hooks/query/accounts';
@@ -45,7 +44,6 @@ function AccountBulkDeleteDialog({
message: intl.get('the_accounts_has_been_successfully_deleted'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('accounts-table');
setAccountsSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/Bills/BillBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteBills } from '@/hooks/query/bills';
@@ -44,7 +43,6 @@ function BillBulkDeleteDialog({
message: intl.get('the_bills_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('bills-table');
setBillsSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/CreditNotes/CreditNoteBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteCreditNotes } from '@/hooks/query/creditNote';
@@ -45,7 +44,6 @@ function CreditNoteBulkDeleteDialog({
message: intl.get('the_credit_notes_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('credit-notes-table');
setCreditNotesSelectedRows([]);
closeDialog(dialogName);
})

104
packages/webapp/src/containers/Dialogs/Customers/CustomerBulkDeleteDialog.tsx Normal file
View File

@@ -0,0 +1,104 @@
// @ts-nocheck
import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteCustomers } from '@/hooks/query/customers';
import withDialogRedux from '@/components/DialogReduxConnect';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withCustomersActions from '@/containers/Customers/CustomersLanding/withCustomersActions';
import { compose } from '@/utils';
function CustomerBulkDeleteDialog({
dialogName,
isOpen,
payload: {
ids = [],
deletableCount = 0,
undeletableCount = 0,
totalSelected = ids.length,
} = {},
// #withCustomersActions
setCustomersSelectedRows,
// #withDialogActions
closeDialog,
}) {
const { mutateAsync: bulkDeleteCustomers, isLoading } =
useBulkDeleteCustomers();
const handleCancel = () => {
closeDialog(dialogName);
};
const handleConfirmBulkDelete = () => {
bulkDeleteCustomers({
ids,
skipUndeletable: true,
})
.then(() => {
AppToaster.show({
message: intl.get('the_customers_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
setCustomersSelectedRows([]);
closeDialog(dialogName);
})
.catch(() => {
AppToaster.show({
message: intl.get('something_went_wrong'),
intent: Intent.DANGER,
});
});
};
return (
<Dialog
title={
<T
id={'bulk_delete_dialog_title'}
values={{ resourcePlural: intl.get('resource_customer_plural') }}
/>
}
isOpen={isOpen}
onClose={handleCancel}
canEscapeKeyClose={!isLoading}
canOutsideClickClose={!isLoading}
>
<BulkDeleteDialogContent
totalSelected={totalSelected}
deletableCount={deletableCount}
undeletableCount={undeletableCount}
resourceSingularLabel={intl.get('resource_customer_singular')}
resourcePluralLabel={intl.get('resource_customer_plural')}
/>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancel} disabled={isLoading}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.DANGER}
onClick={handleConfirmBulkDelete}
loading={isLoading}
disabled={deletableCount === 0 || isLoading}
>
<T id={'delete_count'} values={{ count: deletableCount }} />
</Button>
</div>
</div>
</Dialog>
);
}
export default compose(
withDialogRedux(),
withDialogActions,
withCustomersActions,
)(CustomerBulkDeleteDialog);

2
packages/webapp/src/containers/Dialogs/Estimates/EstimateBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteEstimates } from '@/hooks/query/estimates';
@@ -45,7 +44,6 @@ function EstimateBulkDeleteDialog({
message: intl.get('the_estimates_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('estimates-table');
setEstimatesSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/Expenses/ExpenseBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteExpenses } from '@/hooks/query/expenses';
@@ -45,7 +44,6 @@ function ExpenseBulkDeleteDialog({
message: intl.get('the_expenses_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('expenses-table');
setExpensesSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/Invoices/InvoiceBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { FormattedMessage as T } from '@/components';
import intl from 'react-intl-universal';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import withDialogRedux from '@/components/DialogReduxConnect';
import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -50,7 +49,6 @@ function InvoiceBulkDeleteDialog({
message: intl.get('the_invoices_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('invoices-table');
resetInvoicesSelectedRows();
closeDialog(dialogName);
})

103
packages/webapp/src/containers/Dialogs/Items/ItemBulkDeleteDialog.tsx Normal file
View File

@@ -0,0 +1,103 @@
// @ts-nocheck
import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteItems } from '@/hooks/query/items';
import withDialogRedux from '@/components/DialogReduxConnect';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withItemsActions from '@/containers/Items/withItemsActions';
import { compose } from '@/utils';
function ItemBulkDeleteDialog({
dialogName,
isOpen,
payload: {
ids = [],
deletableCount = 0,
undeletableCount = 0,
totalSelected = ids.length,
} = {},
// #withItemsActions
setItemsSelectedRows,
// #withDialogActions
closeDialog,
}) {
const { mutateAsync: bulkDeleteItems, isLoading } = useBulkDeleteItems();
const handleCancel = () => {
closeDialog(dialogName);
};
const handleConfirmBulkDelete = () => {
bulkDeleteItems({
ids,
skipUndeletable: true,
})
.then(() => {
AppToaster.show({
message: intl.get('the_items_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
setItemsSelectedRows([]);
closeDialog(dialogName);
})
.catch(() => {
AppToaster.show({
message: intl.get('something_went_wrong'),
intent: Intent.DANGER,
});
});
};
return (
<Dialog
title={
<T
id={'bulk_delete_dialog_title'}
values={{ resourcePlural: intl.get('resource_item_plural') }}
/>
}
isOpen={isOpen}
onClose={handleCancel}
canEscapeKeyClose={!isLoading}
canOutsideClickClose={!isLoading}
>
<BulkDeleteDialogContent
totalSelected={totalSelected}
deletableCount={deletableCount}
undeletableCount={undeletableCount}
resourceSingularLabel={intl.get('resource_item_singular')}
resourcePluralLabel={intl.get('resource_item_plural')}
/>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancel} disabled={isLoading}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.DANGER}
onClick={handleConfirmBulkDelete}
loading={isLoading}
disabled={deletableCount === 0 || isLoading}
>
<T id={'delete_count'} values={{ count: deletableCount }} />
</Button>
</div>
</div>
</Dialog>
);
}
export default compose(
withDialogRedux(),
withDialogActions,
withItemsActions,
)(ItemBulkDeleteDialog);

2
packages/webapp/src/containers/Dialogs/ManualJournals/ManualJournalBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteManualJournals } from '@/hooks/query/manualJournals';
@@ -45,7 +44,6 @@ function ManualJournalBulkDeleteDialog({
message: intl.get('the_journals_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('manual-journals-table');
setManualJournalsSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/PaymentsReceived/PaymentReceivedBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeletePaymentReceives } from '@/hooks/query/paymentReceives';
@@ -47,7 +46,6 @@ function PaymentReceivedBulkDeleteDialog({
),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('payments-received-table');
setPaymentReceivesSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/Receipts/ReceiptBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteReceipts } from '@/hooks/query/receipts';
@@ -45,7 +44,6 @@ function ReceiptBulkDeleteDialog({
message: intl.get('the_receipts_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('sale-receipts-table');
setReceiptsSelectedRows([]);
closeDialog(dialogName);
})

2
packages/webapp/src/containers/Dialogs/VendorCredits/VendorCreditBulkDeleteDialog.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import { queryCache } from 'react-query';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteVendorCredits } from '@/hooks/query/vendorCredit';
@@ -47,7 +46,6 @@ function VendorCreditBulkDeleteDialog({
),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('vendor-credits-table');
setVendorsCreditNoteSelectedRows([]);
closeDialog(dialogName);
})

103
packages/webapp/src/containers/Dialogs/Vendors/VendorBulkDeleteDialog.tsx Normal file
View File

@@ -0,0 +1,103 @@
// @ts-nocheck
import React from 'react';
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, AppToaster } from '@/components';
import intl from 'react-intl-universal';
import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
import { useBulkDeleteVendors } from '@/hooks/query/vendors';
import withDialogRedux from '@/components/DialogReduxConnect';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withVendorsActions from '@/containers/Vendors/VendorsLanding/withVendorsActions';
import { compose } from '@/utils';
function VendorBulkDeleteDialog({
dialogName,
isOpen,
payload: {
ids = [],
deletableCount = 0,
undeletableCount = 0,
totalSelected = ids.length,
} = {},
// #withVendorsActions
setVendorsSelectedRows,
// #withDialogActions
closeDialog,
}) {
const { mutateAsync: bulkDeleteVendors, isLoading } = useBulkDeleteVendors();
const handleCancel = () => {
closeDialog(dialogName);
};
const handleConfirmBulkDelete = () => {
bulkDeleteVendors({
ids,
skipUndeletable: true,
})
.then(() => {
AppToaster.show({
message: intl.get('the_vendors_has_been_deleted_successfully'),
intent: Intent.SUCCESS,
});
setVendorsSelectedRows([]);
closeDialog(dialogName);
})
.catch(() => {
AppToaster.show({
message: intl.get('something_went_wrong'),
intent: Intent.DANGER,
});
});
};
return (
<Dialog
title={
<T
id={'bulk_delete_dialog_title'}
values={{ resourcePlural: intl.get('resource_vendor_plural') }}
/>
}
isOpen={isOpen}
onClose={handleCancel}
canEscapeKeyClose={!isLoading}
canOutsideClickClose={!isLoading}
>
<BulkDeleteDialogContent
totalSelected={totalSelected}
deletableCount={deletableCount}
undeletableCount={undeletableCount}
resourceSingularLabel={intl.get('resource_vendor_singular')}
resourcePluralLabel={intl.get('resource_vendor_plural')}
/>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancel} disabled={isLoading}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.DANGER}
onClick={handleConfirmBulkDelete}
loading={isLoading}
disabled={deletableCount === 0 || isLoading}
>
<T id={'delete_count'} values={{ count: deletableCount }} />
</Button>
</div>
</div>
</Dialog>
);
}
export default compose(
withDialogRedux(),
withDialogActions,
withVendorsActions,
)(VendorBulkDeleteDialog);

12
packages/webapp/src/containers/Items/ItemsActionsBar.tsx
View File

@@ -31,7 +31,6 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-
import withItems from './withItems';
import withItemsActions from './withItemsActions';
import withAlertActions from '@/containers/Alert/withAlertActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '../Dialog/withDialogActions';
@@ -39,6 +38,7 @@ import withDialogActions from '../Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { compose } from '@/utils';
import { isEmpty } from 'lodash';
import { useBulkDeleteItemsDialog } from './hooks/use-bulk-delete-items-dialog';
/**
* Items actions bar.
@@ -52,9 +52,6 @@ function ItemsActionsBar({
setItemsTableState,
itemsInactiveMode,
// #withAlertActions
openAlert,
// #withSettings
itemsTableSize,
@@ -64,6 +61,9 @@ function ItemsActionsBar({
// #withDialogActions
openDialog,
}) {
const { openBulkDeleteDialog, isValidatingBulkDeleteItems } =
useBulkDeleteItemsDialog();
// Items list context.
const { itemsViews, fields } = useItemsListContext();
@@ -88,7 +88,7 @@ function ItemsActionsBar({
// Handle cancel/confirm items bulk.
const handleBulkDelete = () => {
openAlert('items-bulk-delete', { itemsIds: itemsSelectedRows });
openBulkDeleteDialog(itemsSelectedRows);
};
// Handle inactive switch changing.
@@ -129,6 +129,7 @@ function ItemsActionsBar({
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleBulkDelete}
disabled={isValidatingBulkDeleteItems}
/>
</NavbarGroup>
</DashboardActionsBar>
@@ -224,6 +225,5 @@ export default compose(
itemsTableSize: itemsSettings.tableSize,
})),
withItemsActions,
withAlertActions,
withDialogActions,
)(ItemsActionsBar);

8
packages/webapp/src/containers/Items/ItemsAlerts.tsx
View File

@@ -13,10 +13,6 @@ const ItemActivateAlert = React.lazy(
() => import('@/containers/Alerts/Items/ItemActivateAlert'),
);
const ItemBulkDeleteAlert = React.lazy(
() => import('@/containers/Alerts/Items/ItemBulkDeleteAlert'),
);
const cancelUnlockingPartialAlert = React.lazy(
() =>
import(
@@ -40,8 +36,4 @@ export default [
name: 'item-activate',
component: ItemActivateAlert,
},
{
name: 'items-bulk-delete',
component: ItemBulkDeleteAlert,
},
];

14
packages/webapp/src/containers/Items/hooks/use-bulk-delete-items-dialog.ts Normal file
View File

@@ -0,0 +1,14 @@
// @ts-nocheck
import { DialogsName } from '@/constants/dialogs';
import { useValidateBulkDeleteItems } from '@/hooks/query/items';
import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
export const useBulkDeleteItemsDialog = () => {
const validateBulkDeleteMutation = useValidateBulkDeleteItems();
return useBulkDeleteDialog(
DialogsName.ItemBulkDelete,
validateBulkDeleteMutation,
);
};

42
packages/webapp/src/containers/Vendors/VendorsLanding/VendorActionsBar.tsx
View File

@@ -11,7 +11,6 @@ import {
} from '@blueprintjs/core';
import {
If,
Can,
Icon,
FormattedMessage as T,
@@ -28,6 +27,8 @@ import { useRefreshVendors } from '@/hooks/query/vendors';
import { useVendorsListContext } from './VendorsListProvider';
import { useHistory } from 'react-router-dom';
import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
import { useBulkDeleteVendorsDialog } from './hooks/use-bulk-delete-vendors-dialog';
import { isEmpty } from 'lodash';
import withVendors from './withVendors';
import withVendorsActions from './withVendorsActions';
@@ -43,6 +44,7 @@ import { DialogsName } from '@/constants/dialogs';
*/
function VendorActionsBar({
// #withVendors
vendorsSelectedRows = [],
vendorsFilterConditions,
// #withVendorActions
@@ -59,6 +61,9 @@ function VendorActionsBar({
openDialog,
}) {
const history = useHistory();
const { openBulkDeleteDialog, isValidatingBulkDeleteVendors } =
useBulkDeleteVendorsDialog();
// Vendors list context.
const { vendorsViews, fields } = useVendorsListContext();
@@ -102,6 +107,27 @@ function VendorActionsBar({
downloadExportPdf({ resource: 'Vendor' });
};
const handleBulkDelete = () => {
openBulkDeleteDialog(vendorsSelectedRows);
};
if (!isEmpty(vendorsSelectedRows)) {
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleBulkDelete}
disabled={isValidatingBulkDeleteVendors}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -111,7 +137,7 @@ function VendorActionsBar({
onChange={handleTabChange}
/>
<NavbarDivider />
<Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
<Can I={VendorAction.Create} a={AbilitySubject.Vendor}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'plus'} />}
@@ -135,15 +161,6 @@ function VendorActionsBar({
/>
</AdvancedFilterPopover>
<If condition={false}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
/>
</If>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
@@ -191,7 +208,8 @@ function VendorActionsBar({
export default compose(
withVendorsActions,
withSettingsActions,
withVendors(({ vendorsTableState }) => ({
withVendors(({ vendorsTableState, vendorsSelectedRows }) => ({
vendorsSelectedRows,
vendorsInactiveMode: vendorsTableState.inactiveMode,
vendorsFilterConditions: vendorsTableState.filterRoles,
})),

4
packages/webapp/src/containers/Vendors/VendorsLanding/VendorsList.tsx
View File

@@ -24,13 +24,15 @@ function VendorsList({
// #withVendorsActions
resetVendorsTableState,
resetVendorsSelectedRows,
}) {
// Resets the vendors table state once the page unmount.
useEffect(
() => () => {
resetVendorsTableState();
resetVendorsSelectedRows();
},
[resetVendorsTableState],
[resetVendorsSelectedRows, resetVendorsTableState],
);
return (

11
packages/webapp/src/containers/Vendors/VendorsLanding/VendorsTable.tsx
View File

@@ -31,6 +31,7 @@ import { DRAWERS } from '@/constants/drawers';
function VendorsTable({
// #withVendorsActions
setVendorsTableState,
setVendorsSelectedRows,
// #withVendors
vendorsTableState,
@@ -118,6 +119,14 @@ function VendorsTable({
[setVendorsTableState],
);
const handleSelectedRowsChange = React.useCallback(
(selectedFlatRows) => {
const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
setVendorsSelectedRows(selectedIds);
},
[setVendorsSelectedRows],
);
// Display empty status instead of the table.
if (isEmptyStatus) {
return <VendorsEmptyStatus />;
@@ -142,6 +151,8 @@ function VendorsTable({
pagesCount={pagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
onSelectedRowsChange={handleSelectedRowsChange}
autoResetSelectedRows={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}

14
packages/webapp/src/containers/Vendors/VendorsLanding/hooks/use-bulk-delete-vendors-dialog.ts Normal file
View File

@@ -0,0 +1,14 @@
// @ts-nocheck
import { DialogsName } from '@/constants/dialogs';
import { useValidateBulkDeleteVendors } from '@/hooks/query/vendors';
import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
export const useBulkDeleteVendorsDialog = () => {
const validateBulkDeleteMutation = useValidateBulkDeleteVendors();
return useBulkDeleteDialog(
DialogsName.VendorBulkDelete,
validateBulkDeleteMutation,
);
};

1
packages/webapp/src/containers/Vendors/VendorsLanding/withVendors.tsx
View File

@@ -11,6 +11,7 @@ export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
vendorsSelectedRows: state.vendors.selectedRows,
vendorsTableState: getVendorsTableState(state, props),
vendorsTableStateChanged: vendorsTableStateChanged(state, props),
};

5
packages/webapp/src/containers/Vendors/VendorsLanding/withVendorsActions.tsx
View File

@@ -3,11 +3,16 @@ import { connect } from 'react-redux';
import {
setVendorsTableState,
resetVendorsTableState,
setVendorsSelectedRows,
resetVendorsSelectedRows,
} from '@/store/vendors/vendors.actions';
const mapDispatchToProps = (dispatch) => ({
setVendorsTableState: (queries) => dispatch(setVendorsTableState(queries)),
resetVendorsTableState: () => dispatch(resetVendorsTableState()),
setVendorsSelectedRows: (selectedRows) =>
dispatch(setVendorsSelectedRows(selectedRows)),
resetVendorsSelectedRows: () => dispatch(resetVendorsSelectedRows()),
});
export default connect(null, mapDispatchToProps);