fix: itemCategories alert.

2026-02-16 12:50:38 +00:00 · 2021-01-26 20:50:44 +02:00
parent 0b0ac347aa
commit 2d9d710efa
10 changed files with 222 additions and 207 deletions
--- a/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js
+++ 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 (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: itemCategoriesIds.length }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'once_delete_these_item_categories_you_will_not_able_restore_them'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemCategoriesActions,
+)(ItemCategoryBulkDeleteAlert);
--- a/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js
+++ 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 (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelItemCategoryDelete}
+      onConfirm={handleConfirmItemDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemCategoriesActions,
+)(ItemCategoryDeleteAlert);
--- 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 (
-    <DashboardInsider
-      loading={fetchResourceFields.isFetching || fetchCategories.isFetching}
-      name={'item-category-list'}
-    >
-      <ItemsCategoryActionsBar
-        selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged}
-        onBulkDelete={handleBulkDelete}
-      />
+    <DashboardInsider name={'item-category-list'}>
+      <ItemsCategoryActionsBar onFilterChanged={handleFilterChanged} />
      <DashboardPageContent>
        <ItemCategoriesDataTable
-          onEditCategory={handleEditCategory}
-          onFetchData={handleFetchData}
-          onSelectedRowsChange={handleSelectedRowsChange}
          onDeleteCategory={handleDeleteCategory}
+          onEditCategory={handleEditCategory}
+          onSelectedRowsChange={handleSelectedRowsChange}
        />
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={deleteCategory}
-          onCancel={handleCancelItemDelete}
-          onConfirm={handleConfirmItemDelete}
-        >
-          <p>
-            <FormattedHTMLMessage
-              id={'once_delete_this_item_category_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>
-            <FormattedHTMLMessage
-              id={
-                'once_delete_these_item_categories_you_will_not_able_restore_them'
-              }
-            />
-          </p>
-        </Alert>
      </DashboardPageContent>
+      <ItemsAlerts />
    </DashboardInsider>
  );
 };
@@ -217,5 +84,5 @@ export default compose(
  withItemCategoriesActions,
  withDashboardActions,
  withDialogActions,
-  withResourceActions,
+  withAlertsActions,
 )(ItemCategoryList);
--- 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 (
    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator mount={false}>
+      <LoadingIndicator
+        loading={categoriesTableLoading && !isLoadedBefore}
+        mount={false}
+      >
        <DataTable
          noInitialFetch={true}
          columns={columns}
@@ -154,7 +158,6 @@ const ItemsCategoryList = ({
          expandable={true}
          sticky={true}
          onSelectedRowsChange={handleSelectedRowsChange}
-          loading={categoriesTableLoading}
          rowContextMenu={handleRowContextMenu}
        />
      </LoadingIndicator>
--- 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() {
      <ItemInactivateAlert name={'item-inactivate'} />
      <ItemActivateAlert name={'item-activate'} />
      <ItemBulkDeleteAlert name={'items-bulk-delete'} />
+      <ItemCategoryDeleteAlert name={'item-category-delete'} />
+      <ItemCategoryBulkDeleteAlert name={'item-categories-bulk-delete'} />
    </div>
  );
 }
--- 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 (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -105,7 +78,7 @@ const ItemsCategoryActionsBar = ({
          />
        </Popover>

-        <If condition={hasSelectedRows}>
+        <If condition={itemCategoriesSelectedRows.length}>
          <Button
            className={Classes.MINIMAL}
            icon={<Icon icon="trash-16" iconSize={16} />}
@@ -130,20 +103,12 @@ const ItemsCategoryActionsBar = ({
  );
 };

-const mapStateToProps = (state, props) => ({
-  resourceName: 'items_categories',
-});
-const withItemsCategoriesActionsBar = connect(mapStateToProps);
-
 export default compose(
-  withItemsCategoriesActionsBar,
  withDialogActions,
  withDashboardActions,
-  withResourceDetail(({ resourceFields }) => ({
-    resourceFields,
+  withItemCategories(({ itemCategoriesSelectedRows }) => ({
+    itemCategoriesSelectedRows,
  })),
-  // withItemCategories(({ categoriesViews }) => ({
-  //   categoriesViews,
-  // })),
  withItemCategoriesActions,
+  withAlertActions,
 )(ItemsCategoryActionsBar);
--- a/client/src/containers/Items/withItemCategories.js
+++ b/client/src/containers/Items/withItemCategories.js
@@ -10,6 +10,7 @@ export default (mapState) => {
      categoriesList: getItemsCategoriesList(state, props),
      itemCategoriesViews: getResourceViews(state, props, 'items_categories'),
      categoriesTableLoading: state.itemCategories.loading,
+      itemCategoriesSelectedRows: state.itemCategories.selectedRows,
    };
    return mapState ? mapState(mapped, state, props) : mapState;
  };
--- a/client/src/containers/Items/withItemCategoriesActions.js
+++ b/client/src/containers/Items/withItemCategoriesActions.js
@@ -28,6 +28,11 @@ export const mapDispatchToProps = (dispatch) => ({
      type: t.ITEM_CATEGORIES_TABLE_QUERIES_ADD,
      queries,
    }),
+  setSelectedRowsCategories: (selectedRows) =>
+    dispatch({
+      type: t.ITEM_CATEGORY_SELECTED_ROW_SET,
+      payload: { selectedRows },
+    }),
 });

 export default connect(null, mapDispatchToProps);
--- a/client/src/store/itemCategories/itemsCategory.reducer.js
+++ b/client/src/store/itemCategories/itemsCategory.reducer.js
@@ -4,6 +4,7 @@ import { createReducer } from '@reduxjs/toolkit';
 const initialState = {
  categories: {},
  loading: false,
+  selectedRows: [],
 };

 export default createReducer(initialState, {
@@ -45,6 +46,11 @@ export default createReducer(initialState, {
    });
    state.categories = categories;
  },
+  
+  [t.ITEM_CATEGORY_SELECTED_ROW_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
 });

 export const getCategoryId = (state, id) => {
--- a/client/src/store/itemCategories/itemsCategory.type.js
+++ b/client/src/store/itemCategories/itemsCategory.type.js
@@ -6,4 +6,5 @@ export default {
  ITEM_CATEGORIES_BULK_DELETE: 'ITEM_CATEGORIES_BULK_DELETE',
  ITEM_CATEGORIES_TABLE_QUERIES_ADD: 'ITEM_CATEGORIES_TABLE_QUERIES_ADD',
  ITEM_CATEGORIES_SET_CURRENT_VIEW: 'ITEM_CATEGORIES_SET_CURRENT_VIEW',
+  ITEM_CATEGORY_SELECTED_ROW_SET: 'ITEM_CATEGORY_SELECTED_ROW_SET',
 };