diff --git a/src/containers/Preferences/Branches/Branches.js b/src/containers/Preferences/Branches/Branches.js index e7b434354..281f6a4e7 100644 --- a/src/containers/Preferences/Branches/Branches.js +++ b/src/containers/Preferences/Branches/Branches.js @@ -2,7 +2,11 @@ import React from 'react'; import intl from 'react-intl-universal'; import BranchesDataTable from './BranchesDataTable'; +import BranchesEmptyStatus from './BranchesEmptyStatus'; +import { Choose } from 'components'; + import withDashboardActions from 'containers/Dashboard/withDashboardActions'; +import { useBranchesContext } from './BranchesProvider'; import { compose } from 'utils'; @@ -10,10 +14,21 @@ function Branches({ // #withDashboardActions changePreferencesPageTitle, }) { + const { isEmptyStatus } = useBranchesContext(); + React.useEffect(() => { changePreferencesPageTitle(intl.get('branches.label')); }, [changePreferencesPageTitle]); - return ; + return ( + + + + + + + + + ); } export default compose(withDashboardActions)(Branches); diff --git a/src/containers/Preferences/Branches/BranchesActions.js b/src/containers/Preferences/Branches/BranchesActions.js index a59309d69..258b016e2 100644 --- a/src/containers/Preferences/Branches/BranchesActions.js +++ b/src/containers/Preferences/Branches/BranchesActions.js @@ -1,7 +1,8 @@ import React from 'react'; import { Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, Icon } from 'components'; +import { Features } from 'common'; +import { FeatureCan, FormattedMessage as T, Icon } from 'components'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; @@ -15,13 +16,15 @@ function BranchesActions({ return ( - + + + ); } diff --git a/src/containers/Preferences/Branches/BranchesDataTable.js b/src/containers/Preferences/Branches/BranchesDataTable.js index ec1af2ebb..02106e5af 100644 --- a/src/containers/Preferences/Branches/BranchesDataTable.js +++ b/src/containers/Preferences/Branches/BranchesDataTable.js @@ -6,7 +6,6 @@ import { Intent } from '@blueprintjs/core'; import 'style/pages/Preferences/branchesList.scss'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; -import BranchesEmptyStatus from './BranchesEmptyStatus'; import { DataTable, Card, AppToaster } from 'components'; import { useBranchesTableColumns, ActionsMenu } from './components'; import { useBranchesContext } from './BranchesProvider'; @@ -56,9 +55,6 @@ function BranchesDataTable({ }); }; - // if (type) { - // return ; - // } return ( diff --git a/src/containers/Preferences/Branches/BranchesProvider.js b/src/containers/Preferences/Branches/BranchesProvider.js index da17ca418..43256b0d9 100644 --- a/src/containers/Preferences/Branches/BranchesProvider.js +++ b/src/containers/Preferences/Branches/BranchesProvider.js @@ -2,7 +2,9 @@ import React from 'react'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; import { useBranches } from 'hooks/query'; -import PreferencesPageLoader from '../PreferencesPageLoader'; +import { useFeatureCan } from 'hooks/state'; +import { Features } from 'common'; +import { isEmpty } from 'lodash'; const BranchesContext = React.createContext(); @@ -10,18 +12,27 @@ const BranchesContext = React.createContext(); * Branches data provider. */ function BranchesProvider({ ...props }) { + // Features guard. + const { featureCan } = useFeatureCan(); + + const isBranchFeatureCan = featureCan(Features.Branches); + // Fetches the branches list. const { isLoading: isBranchesLoading, isFetching: isBranchesFetching, data: branches, - } = useBranches(); + } = useBranches({}, { enabled: isBranchFeatureCan }); + + // Detarmines the datatable empty status. + const isEmptyStatus = isEmpty(branches) || !isBranchFeatureCan; // Provider state. const provider = { branches, isBranchesLoading, isBranchesFetching, + isEmptyStatus, }; return ( diff --git a/src/containers/Preferences/Warehouses/WarehousesActions.js b/src/containers/Preferences/Warehouses/WarehousesActions.js index b737dc586..cf99085c0 100644 --- a/src/containers/Preferences/Warehouses/WarehousesActions.js +++ b/src/containers/Preferences/Warehouses/WarehousesActions.js @@ -1,7 +1,8 @@ import React from 'react'; import { Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, Icon } from 'components'; +import { Features } from 'common'; +import { FeatureCan, FormattedMessage as T, Icon } from 'components'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; @@ -18,13 +19,15 @@ function WarehousesActions({ return ( - + + + ); } diff --git a/src/containers/Preferences/Warehouses/WarehousesGrid.js b/src/containers/Preferences/Warehouses/WarehousesGrid.js index 4f0e8797d..34fef8925 100644 --- a/src/containers/Preferences/Warehouses/WarehousesGrid.js +++ b/src/containers/Preferences/Warehouses/WarehousesGrid.js @@ -10,14 +10,18 @@ import WarehousesGridItems from './WarehousesGridItems'; */ export default function WarehousesGrid() { // Retrieve list context. - const { warehouses, isWarehouesLoading } = useWarehousesContext(); + const { + warehouses, + isWarehouesLoading, + isEmptyStatus, + } = useWarehousesContext(); return ( {isWarehouesLoading ? ( - ) : isEmpty(warehouses) ? ( + ) : isEmptyStatus ? ( ) : ( diff --git a/src/containers/Preferences/Warehouses/WarehousesProvider.js b/src/containers/Preferences/Warehouses/WarehousesProvider.js index a2f3b9fc3..8f53a2b65 100644 --- a/src/containers/Preferences/Warehouses/WarehousesProvider.js +++ b/src/containers/Preferences/Warehouses/WarehousesProvider.js @@ -3,7 +3,10 @@ import styled from 'styled-components'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; import { useWarehouses, useCashflowAccounts } from 'hooks/query'; -import PreferencesPageLoader from '../PreferencesPageLoader'; +import { isEmpty } from 'lodash'; + +import { Features } from 'common'; +import { useFeatureCan } from 'hooks/state'; const WarehousesContext = React.createContext(); @@ -11,16 +14,24 @@ const WarehousesContext = React.createContext(); * Warehouses data provider. */ function WarehousesProvider({ query, ...props }) { + // Features guard. + const { featureCan } = useFeatureCan(); + const isWarehouseFeatureCan = featureCan(Features.Warehouses); + // Fetch warehouses list. const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses( query, - { keepPreviousData: true }, + { enabled: isWarehouseFeatureCan }, ); + // Detarmines the datatable empty status. + const isEmptyStatus = isEmpty(warehouses) || !isWarehouseFeatureCan; + // Provider state. const provider = { warehouses, isWarehouesLoading, + isEmptyStatus, }; return ( diff --git a/src/containers/Preferences/Warehouses/components.js b/src/containers/Preferences/Warehouses/components.js index 539f5bcfa..42492262d 100644 --- a/src/containers/Preferences/Warehouses/components.js +++ b/src/containers/Preferences/Warehouses/components.js @@ -107,6 +107,7 @@ export const WarehousesList = styled.div` display: flex; flex-wrap: wrap; margin: 15px; + height: 100%; `; export const WarehouseBoxRoot = styled.div`