diff --git a/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js b/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js new file mode 100644 index 000000000..644ca020d --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; + +import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item category bulk delete alerts. + */ +function ItemCategoryBulkDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemCategoriesIds }, + + // #withItemCategoriesActions + requestDeleteBulkItemCategories, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel bulk delete alert. + const handleCancelBulkDelete = () => { + closeAlert(name); + }; + + // handle confirm itemCategories bulk delete. + const handleConfirmBulkDelete = () => { + requestDeleteBulkItemCategories(itemCategoriesIds) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_categories_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + }) + .catch((errors) => { + closeAlert(name); + }); + }; + return ( + } + confirmButtonText={ + + } + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelBulkDelete} + onConfirm={handleConfirmBulkDelete} + > +

+ +

+ + ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemCategoriesActions, +)(ItemCategoryBulkDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js b/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js new file mode 100644 index 000000000..85e7c30a0 --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.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 { AppToaster } from 'components'; +import { queryCache } from 'react-query'; + +import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item Category delete alerts. + */ +function ItemCategoryDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemCategoryId }, + + // #withItemCategoriesActions + requestDeleteItemCategory, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel delete item category alert. + const handleCancelItemCategoryDelete = () => { + closeAlert(name); + }; + + // Handle alert confirm delete item category. + const handleConfirmItemDelete = () => { + requestDeleteItemCategory(itemCategoryId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_category_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('items-categories-list'); + }) + .catch(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelItemCategoryDelete} + onConfirm={handleConfirmItemDelete} + > +

+ +

+ + ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemCategoriesActions, +)(ItemCategoryDeleteAlert); diff --git a/client/src/containers/Items/ItemCategoriesList.js b/client/src/containers/Items/ItemCategoriesList.js index 55b43bbd2..a3981e7ef 100644 --- a/client/src/containers/Items/ItemCategoriesList.js +++ b/client/src/containers/Items/ItemCategoriesList.js @@ -1,23 +1,20 @@ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { useParams } from 'react-router-dom'; import { useQuery } from 'react-query'; -import { Alert, Intent } from '@blueprintjs/core'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +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 ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable'; import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar'; import withDialogActions from 'containers/Dialog/withDialogActions'; -import withResourceActions from 'containers/Resources/withResourcesActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; + import { compose } from 'utils'; /** @@ -27,15 +24,12 @@ const ItemCategoryList = ({ // #withDashboardActions changePageTitle, - // #withViewsActions - requestFetchResourceViews, - requestFetchResourceFields, + // #withAlertsActions. + openAlert, // #withItemCategoriesActions requestFetchItemCategories, - requestDeleteItemCategory, - requestDeleteBulkItemCategories, - addItemCategoriesTableQueries, + setSelectedRowsCategories, // #withDialog openDialog, @@ -43,12 +37,6 @@ const ItemCategoryList = ({ const { id } = useParams(); const { formatMessage } = useIntl(); - const [selectedRows, setSelectedRows] = useState([]); - const [filter, setFilter] = useState({}); - const [deleteCategory, setDeleteCategory] = useState(false); - const [bulkDelete, setBulkDelete] = useState(false); - const [tableLoading, setTableLoading] = useState(false); - useEffect(() => { id ? changePageTitle(formatMessage({ id: 'edit_category_details' })) @@ -59,156 +47,35 @@ const ItemCategoryList = ({ requestFetchItemCategories(), ); - const fetchResourceFields = useQuery( - ['resource-fields', 'item_category'], - (key, resourceName) => requestFetchResourceFields(resourceName), - ); - const handleFilterChanged = useCallback(() => {}, []); // Handle selected rows change. - const handleSelectedRowsChange = useCallback( - (itemCategories) => { - setSelectedRows(itemCategories); - }, - [setSelectedRows], - ); - - const handleFetchData = useCallback( - ({ pageIndex, pageSize, sortBy }) => { - const page = pageIndex + 1; - - addItemCategoriesTableQueries({ - ...(sortBy.length > 0 - ? { - column_sort_by: sortBy[0].id, - sort_order: sortBy[0].desc ? 'desc' : 'asc', - } - : {}), - page_size: pageSize, - page, - }); - }, - [addItemCategoriesTableQueries], - ); - - const handleDeleteCategory = (itemCategory) => { - setDeleteCategory(itemCategory); - }; - const handleCancelItemDelete = () => { - setDeleteCategory(false); + const handleSelectedRowsChange = (selectedRows) => { + const selectedRowsIds = selectedRows.map((r) => r.id); + setSelectedRowsCategories(selectedRowsIds); }; - // Handle alert confirm delete item category. - const handleConfirmItemDelete = () => { - requestDeleteItemCategory(deleteCategory.id) - .then(() => { - setDeleteCategory(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_item_category_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch(() => { - setDeleteCategory(false); - }); + // Handle delete Item. + const handleDeleteCategory = ({ id }) => { + openAlert('item-category-delete', { itemCategoryId: id }); }; + // Handle Edit item category. const handleEditCategory = (category) => { openDialog('item-category-form', { action: 'edit', id: category.id }); }; - // Handle itemCategories bulk delete. - const handleBulkDelete = useCallback( - (itemsCategoriesIds) => { - setBulkDelete(itemsCategoriesIds); - }, - [setBulkDelete], - ); - - // handle confirm itemCategories bulk delete. - const handleConfirmBulkDelete = useCallback(() => { - requestDeleteBulkItemCategories(bulkDelete) - .then(() => { - setBulkDelete(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_item_categories_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch((errors) => { - setBulkDelete(false); - }); - }, [requestDeleteBulkItemCategories, bulkDelete, formatMessage]); - - //Handel cancel itemCategories bulk delete. - const handleCancelBulkDelete = useCallback(() => { - setBulkDelete(false); - }, []); - - // Calculates the data table selected rows count. - const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [ - selectedRows, - ]); - return ( - - + + - - } - confirmButtonText={} - icon="trash" - intent={Intent.DANGER} - isOpen={deleteCategory} - onCancel={handleCancelItemDelete} - onConfirm={handleConfirmItemDelete} - > -

- -

- - - } - confirmButtonText={`${formatMessage({ - id: 'delete', - })} (${selectedRowsCount})`} - icon="trash" - intent={Intent.DANGER} - isOpen={bulkDelete} - onCancel={handleCancelBulkDelete} - onConfirm={handleConfirmBulkDelete} - > -

- -

- + ); }; @@ -217,5 +84,5 @@ export default compose( withItemCategoriesActions, withDashboardActions, withDialogActions, - withResourceActions, + withAlertsActions, )(ItemCategoryList); diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js index bb72d24be..2933ff1ff 100644 --- a/client/src/containers/Items/ItemCategoriesTable.js +++ b/client/src/containers/Items/ItemCategoriesTable.js @@ -14,6 +14,7 @@ import classNames from 'classnames'; import Icon from 'components/Icon'; import LoadingIndicator from 'components/LoadingIndicator'; import { compose } from 'utils'; +import { useIsValuePassed } from 'hooks'; import DataTable from 'components/DataTable'; import { CLASSES } from 'common/classes'; @@ -32,10 +33,10 @@ const ItemsCategoryList = ({ // #ownProps onFetchData, onDeleteCategory, - onEditCategory, onSelectedRowsChange, }) => { const { formatMessage } = useIntl(); + const isLoadedBefore = useIsValuePassed(categoriesTableLoading, false); const handelEditCategory = useCallback( (category) => () => { @@ -143,7 +144,10 @@ const ItemsCategoryList = ({ return (
- + diff --git a/client/src/containers/Items/ItemsAlerts.js b/client/src/containers/Items/ItemsAlerts.js index 8046b865b..76211db35 100644 --- a/client/src/containers/Items/ItemsAlerts.js +++ b/client/src/containers/Items/ItemsAlerts.js @@ -3,6 +3,8 @@ import ItemDeleteAlert from 'containers/Alerts/Item/ItemDeleteAlert'; import ItemInactivateAlert from 'containers/Alerts/Item/ItemInactivateAlert'; 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'; /** * Items alert. @@ -14,6 +16,8 @@ export default function ItemsAlerts() { + +
); } diff --git a/client/src/containers/Items/ItemsCategoryActionsBar.js b/client/src/containers/Items/ItemsCategoryActionsBar.js index 03b292421..64c61b9fe 100644 --- a/client/src/containers/Items/ItemsCategoryActionsBar.js +++ b/client/src/containers/Items/ItemsCategoryActionsBar.js @@ -11,38 +11,29 @@ import { } from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; -import { connect } from 'react-redux'; import { If, Icon } from 'components'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; -import FilterDropdown from 'components/FilterDropdown'; -import withResourceDetail from 'containers/Resources/withResourceDetails'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withItemCategories from './withItemCategories'; import withItemCategoriesActions from './withItemCategoriesActions'; +import withAlertActions from 'containers/Alert/withAlertActions'; import { compose } from 'utils'; const ItemsCategoryActionsBar = ({ - // #withResourceDetail - resourceFields, - // #withDialog openDialog, // #withItemCategories - categoriesViews, + itemCategoriesSelectedRows, - // #withItemCategoriesActions - addItemCategoriesTableQueries, + // #withAlertActions + openAlert, - // #ownProps - selectedRows = [], - onFilterChanged, - onBulkDelete, }) => { const [filterCount, setFilterCount] = useState(0); @@ -50,30 +41,12 @@ const ItemsCategoryActionsBar = ({ openDialog('item-category-form', {}); }, [openDialog]); - const hasSelectedRows = useMemo(() => selectedRows.length > 0, [ - selectedRows, - ]); - - // const filterDropdown = FilterDropdown({ - // fields: resourceFields, - // initialCondition: { - // fieldKey: 'name', - // compatator: 'contains', - // value: '', - // }, - // onFilterChange: (filterConditions) => { - // setFilterCount(filterConditions.length || 0); - // addItemCategoriesTableQueries({ - // filter_roles: filterConditions || '', - // }); - // onFilterChanged && onFilterChanged(filterConditions); - // }, - // }); - - const handelBulkDelete = useCallback(() => { - onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id)); - }, [onBulkDelete, selectedRows]); - + const handelBulkDelete = () => { + openAlert('item-categories-bulk-delete', { + itemCategoriesIds: itemCategoriesSelectedRows, + }); + }; + console.log(itemCategoriesSelectedRows, 'EE'); return ( @@ -105,7 +78,7 @@ const ItemsCategoryActionsBar = ({ /> - +