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

fix: items alert.

Browse Source
This commit is contained in:
elforjani3
2021-01-26 18:16:10 +02:00
parent c8f817b16d
commit 01ee2e5c40
13 changed files with 466 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
client/src/containers/Items/ItemsList.js
View File

@@ -1,22 +1,15 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import { Intent, Alert } from '@blueprintjs/core';
import { useQuery, queryCache } from 'react-query';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { useQuery } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { compose } from 'utils';
import ItemsViewsTabs from 'containers/Items/ItemsViewsTabs';
import ItemsDataTable from './ItemsDataTable';
import ItemsViewPage from './ItemsViewPage';
import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
import ItemsAlerts from './ItemsAlerts';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import AppToaster from 'components/AppToaster';
import withItems from 'containers/Items/withItems';
import withResourceActions from 'containers/Resources/withResourcesActions';
@@ -41,21 +34,10 @@ function ItemsList({
itemsTableQuery,
// #withItemsActions
requestDeleteItem,
requestFetchItems,
requestInactiveItem,
requestActivateItem,
addItemsTableQueries,
requestDeleteBulkItems,
}) {
const [deleteItem, setDeleteItem] = useState(false);
const [inactiveItem, setInactiveItem] = useState(false);
const [activateItem, setActivateItem] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const [bulkDelete, setBulkDelete] = useState(false);
const { formatMessage } = useIntl();
const history = useHistory();
useEffect(() => {
changePageTitle(formatMessage({ id: 'items_list' }));
@@ -78,76 +60,6 @@ function ItemsList({
requestFetchItems({ ..._query }),
);
// Handle click delete item.
const handleDeleteItem = useCallback(
(item) => {
setDeleteItem(item);
},
[setDeleteItem],
);
const handleEditItem = useCallback(
(item) => {
history.push(`/items/${item.id}/edit`);
},
[history],
);
// Handle cancel delete the item.
const handleCancelDeleteItem = useCallback(() => {
setDeleteItem(false);
}, [setDeleteItem]);
const handleDeleteErrors = (errors) => {
if (
errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
) {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_associated_transactions',
}),
intent: Intent.DANGER,
});
}
if (
errors.find(
(error) => error.type === 'ITEM_HAS_ASSOCIATED_INVENTORY_ADJUSTMENT',
)
) {
AppToaster.show({
message: formatMessage({
id:
'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
}),
intent: Intent.DANGER,
});
}
};
// handle confirm delete item.
const handleConfirmDeleteItem = useCallback(() => {
requestDeleteItem(deleteItem.id)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_deleted_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('items-table');
setDeleteItem(false);
})
.catch(({ errors }) => {
setDeleteItem(false);
handleDeleteErrors(errors);
});
}, [requestDeleteItem, deleteItem, formatMessage]);
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
addItemsTableQueries,
]);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback(
(filterConditions) => {
@@ -158,193 +70,17 @@ function ItemsList({
[addItemsTableQueries],
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
// Handle items bulk delete button click.,
const handleBulkDelete = useCallback(
(itemsIds) => {
setBulkDelete(itemsIds);
},
[setBulkDelete],
);
// Handle confirm items bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkItems(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({
id: 'the_items_has_been_deleted_successfully',
}),
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkItems, bulkDelete, formatMessage]);
// Handle cancel accounts bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
// Handle cancel/confirm item inactive.
const handleInactiveItem = useCallback((item) => {
setInactiveItem(item);
}, []);
// Handle cancel inactive item alert.
const handleCancelInactiveItem = useCallback(() => {
setInactiveItem(false);
}, []);
// Handle confirm item Inactive.
const handleConfirmItemInactive = useCallback(() => {
requestInactiveItem(inactiveItem.id)
.then(() => {
setInactiveItem(false);
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_inactivated_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('items-table');
})
.catch((error) => {
setInactiveItem(false);
});
}, [inactiveItem, requestInactiveItem, formatMessage]);
// Handle activate item click.
const handleActivateItem = useCallback((item) => {
setActivateItem(item);
});
// Handle activate item alert cancel.
const handleCancelActivateItem = useCallback(() => {
setActivateItem(false);
});
// Handle activate item confirm.
const handleConfirmItemActivate = useCallback(() => {
requestActivateItem(activateItem.id)
.then(() => {
setActivateItem(false);
AppToaster.show({
message: formatMessage({
id: 'the_item_has_been_activated_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('items-table');
})
.catch((error) => {
setActivateItem(false);
});
}, [activateItem, requestActivateItem, formatMessage]);
return (
<DashboardInsider
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
name={'items-list'}
>
<ItemsActionsBar
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
onBulkDelete={handleBulkDelete}
/>
<ItemsActionsBar onFilterChanged={handleFilterChanged} />
<DashboardPageContent>
<Switch>
<Route
exact={true}
path={['/items/:custom_view_id/custom_view', '/items']}
>
<ItemsViewsTabs />
<ItemsDataTable
onDeleteItem={handleDeleteItem}
onEditItem={handleEditItem}
onInactiveItem={handleInactiveItem}
onActivateItem={handleActivateItem}
onSelectedRowsChange={handleSelectedRowsChange}
itemsViewLoading={fetchItems.isFetching}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteItem}
onCancel={handleCancelDeleteItem}
onConfirm={handleConfirmDeleteItem}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_item_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({
id: 'delete',
})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<T
id={'once_delete_these_items_you_will_not_able_restore_them'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'inactivate'} />}
intent={Intent.WARNING}
isOpen={inactiveItem}
onCancel={handleCancelInactiveItem}
onConfirm={handleConfirmItemInactive}
>
<p>
<T id={'are_sure_to_inactive_this_item'} />
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'activate'} />}
intent={Intent.WARNING}
isOpen={activateItem}
onCancel={handleCancelActivateItem}
onConfirm={handleConfirmItemActivate}
>
<p>
<T id={'are_sure_to_activate_this_item'} />
</p>
</Alert>
</Route>
</Switch>
<ItemsViewPage />
</DashboardPageContent>
<ItemsAlerts />
</DashboardInsider>
);
}