Merge remote-tracking branch 'origin/Fix/View'

client/src/containers/Items/ItemsActionsBar.js

@@ -1,5 +1,5 @@
-import React, { useMemo, useCallback, useState } from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { useRouteMatch, useHistory, useParams } from 'react-router-dom';
 import classNames from 'classnames';
 import {
   MenuItem,
@@ -14,13 +14,11 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
@@ -29,9 +27,7 @@ import { compose } from 'utils';
 import { connect } from 'react-redux';
 
 const ItemsActionsBar = ({
-  openDialog,
-
-  resourceName = 'items',
+  // #withResourceDetail
   resourceFields,
 
   // #withItems
@@ -39,18 +35,15 @@ const ItemsActionsBar = ({
 
   //#withItemActions
   addItemsTableQueries,
+  changeItemsCurrentView,
 
   onFilterChanged,
   selectedRows = [],
   onBulkDelete,
 }) => {
-  const { path } = useRouteMatch();
+  const { formatMessage } = useIntl();
   const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
-  const { formatMessage } = useIntl();
-  const viewsMenuItems = itemsViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
 
   const onClickNewItem = useCallback(() => {
     history.push('/items/new');
@@ -60,22 +53,13 @@ const ItemsActionsBar = ({
     selectedRows,
   ]);
 
-  // name
-  // const filterDropdown = FilterDropdown({
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     setFilterCount(filterConditions.length);
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
-
   const filterDropdown = FilterDropdown({
+    fields: resourceFields,
     initialCondition: {
       fieldKey: 'name',
       compatator: 'contains',
       value: '',
     },
-    fields: resourceFields,
     onFilterChange: (filterConditions) => {
       addItemsTableQueries({
         filter_roles: filterConditions || '',
@@ -84,30 +68,25 @@ const ItemsActionsBar = ({
     },
   });
 
-  // const onClickNewCategory = useCallback(() => {
-  //   openDialog('item-form', {});
-  // }, [openDialog]);
-
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId.id || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
+        <DashboardActionViewsList
+          resourceName={'items'}
+          views={itemsViews}
+          onChange={handleTabChange}
+        />
 
         <NavbarDivider />
 
@@ -170,7 +149,6 @@ const withItemsActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsActionsBar,
-  withDialogActions,
   withItems(({ itemsViews }) => ({
     itemsViews,
   })),

client/src/containers/Items/ItemsDataTable.js

@@ -46,6 +46,7 @@ function ItemsDataTable({
   onInactiveItem,
   onActivateItem,
   onSelectedRowsChange,
+  itemsViewLoading,
 }) {
   const { formatMessage } = useIntl();
   const isLoadedBefore = useIsValuePassed(itemsTableLoading, false);
@@ -238,7 +239,9 @@ function ItemsDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
+      <LoadingIndicator
+        loading={(itemsTableLoading && !isLoadedBefore) || itemsViewLoading}
+      >
         <Choose>
           <Choose.When condition={showEmptyStatus}>
             <ItemsEmptyStatus />

client/src/containers/Items/ItemsList.js

@@ -261,6 +261,7 @@ function ItemsList({
               onInactiveItem={handleInactiveItem}
               onActivateItem={handleActivateItem}
               onSelectedRowsChange={handleSelectedRowsChange}
+              itemsViewLoading={fetchItems.isFetching}
             />
             <Alert
               cancelButtonText={<T id={'cancel'} />}

client/src/containers/Items/ItemsViewsTabs.js

@@ -1,29 +1,21 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Tabs,
-  Tab,
-  Button,
-} from '@blueprintjs/core';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import Icon from 'components/Icon';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
 import { DashboardViewsTabs } from 'components';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import withItemsActions from 'containers/Items/withItemsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withViewDetail from 'containers/Views/withViewDetails';
 import withItems from 'containers/Items/withItems';
 
-import { FormattedMessage as T } from 'react-intl';
-
+/**
+ * Items views tabs.
+ */
 function ItemsViewsTabs({
   // #withViewDetail
   viewId,
@@ -43,62 +35,34 @@ function ItemsViewsTabs({
   // #props
   onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();
 
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/items/new');
-  };
-
-  const handleViewLinkClick = () => {
-    setTopbarEditView(customViewId);
-  };
-
   useEffect(() => {
-    changeItemsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addItemsTableQueries({
-      custom_view_id: customViewId || null,
-    });
-
-    return () => {
-      setTopbarEditView(null);
-      changeItemsCurrentView(-1);
-      changePageSubtitle('');
-    };
-  }, [customViewId, addItemsTableQueries, changeItemsCurrentView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/items/${toPath}`);
-    setTopbarEditView(viewId);
-  };
+  const handleClickNewView = () => {};
 
   const tabs = itemsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
+
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId || null,
+    });
+  };
+
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/items'}
+          resourceName={'items'}
           tabs={tabs}
-          onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
+          onChange={handleTabChange}
         />
       </NavbarGroup>
     </Navbar>