feat: add cashflow & vendor ability.

src/containers/CashFlow/AccountTransactions/components.js

@@ -4,9 +4,13 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { MaterialProgressBar } from 'components';
-import { FormatDateCell, If, Icon } from 'components';
+import { Can, FormatDateCell, If, Icon } from 'components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import {
+  AbilitySubject,
+  Cashflow_Abilities,
+} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 export function ActionsMenu({
@@ -20,6 +24,7 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
+      <Can I={Cashflow_Abilities.Delete} a={AbilitySubject.Cashflow}>
         <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
           <MenuDivider />
           <MenuItem
@@ -29,6 +34,7 @@ export function ActionsMenu({
             icon={<Icon icon="trash-16" iconSize={16} />}
           />
         </If>
+      </Can>
     </Menu>
   );
 }
@@ -83,7 +89,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'withdrawal',
@@ -93,7 +99,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'running_balance',
@@ -103,7 +109,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'balance',

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -7,8 +7,12 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
 import { useRefreshCashflowAccounts } from 'hooks/query';
+import {
+  Cashflow_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -56,12 +60,14 @@ function CashFlowAccountsActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
+        <Can I={Cashflow_Abilities.Create} a={AbilitySubject.Cashflow}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus-24'} iconSize={20} />}
             text={<T id={'cash_flow.label.add_cash_account'} />}
             onClick={handleAddBankAccount}
           />
+
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus-24'} iconSize={20} />}
@@ -69,6 +75,7 @@ function CashFlowAccountsActionsBar({
             onClick={handleAddCashAccount}
           />
           <NavbarDivider />
+        </Can>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
@@ -85,13 +92,15 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-
+        <Can I={Cashflow_Abilities.Edit} a={AbilitySubject.Cashflow}>
           <Switch
             labelElement={<T id={'inactive'} />}
             defaultChecked={false}
             onChange={handleInactiveSwitchChange}
           />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -13,7 +13,13 @@ import {
   If,
   Icon,
   T,
+  Can,
 } from '../../../components';
+import {
+  Account_Abilities,
+  Cashflow_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 
@@ -222,6 +228,7 @@ function CashflowAccountContextMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewClick)}
       />
+      <Can I={Cashflow_Abilities.Create} a={AbilitySubject.Cashflow}>
         <MenuDivider />
         <MenuItem
           text={<T id={'cash_flow_money_in'} />}
@@ -236,6 +243,8 @@ function CashflowAccountContextMenu({
         >
           <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
         </MenuItem>
+      </Can>
+      <Can I={Cashflow_Abilities.Edit} a={AbilitySubject.Cashflow}>
         <MenuDivider />
 
         <MenuItem
@@ -243,6 +252,8 @@ function CashflowAccountContextMenu({
           text={intl.get('edit_account')}
           onClick={safeCallback(onEditClick)}
         />
+      </Can>
+      <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
         <MenuDivider />
         <If condition={account.active}>
           <MenuItem
@@ -258,12 +269,15 @@ function CashflowAccountContextMenu({
             onClick={safeCallback(onActivateClick)}
           />
         </If>
+      </Can>
+      <Can I={Cashflow_Abilities.Delete} a={AbilitySubject.Cashflow}>
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}
           intent={Intent.DANGER}
           onClick={safeCallback(onDeleteClick)}
         />
+      </Can>
     </Menu>
   );
 }

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
-
+import {
+  AbilitySubject,
+  Cashflow_Abilities,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -24,6 +27,7 @@ function CashflowTransactionDrawerActionBar({
   };
 
   return (
+    <Can I={Cashflow_Abilities.Delete} a={AbilitySubject.Cashflow}>
       <DashboardActionsBar>
         <NavbarGroup>
           <Button
@@ -35,6 +39,7 @@ function CashflowTransactionDrawerActionBar({
           />
         </NavbarGroup>
       </DashboardActionsBar>
+    </Can>
   );
 }
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -142,12 +142,15 @@ function VendorActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
+        <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
           <Switch
             labelElement={<T id={'inactive'} />}
             defaultChecked={vendorsInactiveMode}
             onChange={handleInactiveSwitchChange}
           />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}