feat: add cashflow & vendor ability.

This commit is contained in:
elforjani13
2021-11-25 13:02:09 +02:00
parent 9ceee6d02e
commit 2630e0235d
5 changed files with 127 additions and 90 deletions

View File

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

View File

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

View File

@@ -13,7 +13,13 @@ import {
If, If,
Icon, Icon,
T, T,
Can,
} from '../../../components'; } from '../../../components';
import {
Account_Abilities,
Cashflow_Abilities,
AbilitySubject,
} from '../../../common/abilityOption';
import { useCashFlowAccountsContext } from './CashFlowAccountsProvider'; import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
@@ -222,48 +228,56 @@ function CashflowAccountContextMenu({
text={intl.get('view_details')} text={intl.get('view_details')}
onClick={safeCallback(onViewClick)} onClick={safeCallback(onViewClick)}
/> />
<MenuDivider /> <Can I={Cashflow_Abilities.Create} a={AbilitySubject.Cashflow}>
<MenuItem <MenuDivider />
text={<T id={'cash_flow_money_in'} />}
icon={<Icon icon={'arrow-downward'} iconSize={16} />}
>
<CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
</MenuItem>
<MenuItem
text={<T id={'cash_flow_money_out'} />}
icon={<Icon icon={'arrow-upward'} iconSize={16} />}
>
<CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
</MenuItem>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('edit_account')}
onClick={safeCallback(onEditClick)}
/>
<MenuDivider />
<If condition={account.active}>
<MenuItem <MenuItem
text={intl.get('inactivate_account')} text={<T id={'cash_flow_money_in'} />}
icon={<Icon icon="pause-16" iconSize={16} />} icon={<Icon icon={'arrow-downward'} iconSize={16} />}
onClick={safeCallback(onInactivateClick)} >
/> <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
</If> </MenuItem>
<If condition={!account.active}>
<MenuItem <MenuItem
text={intl.get('activate_account')} text={<T id={'cash_flow_money_out'} />}
icon={<Icon icon="play-16" iconSize={16} />} icon={<Icon icon={'arrow-upward'} iconSize={16} />}
onClick={safeCallback(onActivateClick)} >
<CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
</MenuItem>
</Can>
<Can I={Cashflow_Abilities.Edit} a={AbilitySubject.Cashflow}>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('edit_account')}
onClick={safeCallback(onEditClick)}
/> />
</If> </Can>
<MenuItem <Can I={Account_Abilities.Edit} a={AbilitySubject.Account}>
text={intl.get('delete_account')} <MenuDivider />
icon={<Icon icon="trash-16" iconSize={16} />} <If condition={account.active}>
intent={Intent.DANGER} <MenuItem
onClick={safeCallback(onDeleteClick)} text={intl.get('inactivate_account')}
/> icon={<Icon icon="pause-16" iconSize={16} />}
onClick={safeCallback(onInactivateClick)}
/>
</If>
<If condition={!account.active}>
<MenuItem
text={intl.get('activate_account')}
icon={<Icon icon="play-16" iconSize={16} />}
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> </Menu>
); );
} }

View File

@@ -1,12 +1,15 @@
import React from 'react'; import React from 'react';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core'; 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 DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider'; import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import {
AbilitySubject,
Cashflow_Abilities,
} from '../../../common/abilityOption';
import { compose } from 'utils'; import { compose } from 'utils';
/** /**
@@ -24,17 +27,19 @@ function CashflowTransactionDrawerActionBar({
}; };
return ( return (
<DashboardActionsBar> <Can I={Cashflow_Abilities.Delete} a={AbilitySubject.Cashflow}>
<NavbarGroup> <DashboardActionsBar>
<Button <NavbarGroup>
className={Classes.MINIMAL} <Button
icon={<Icon icon="trash-16" iconSize={16} />} className={Classes.MINIMAL}
text={<T id={'delete'} />} icon={<Icon icon="trash-16" iconSize={16} />}
intent={Intent.DANGER} text={<T id={'delete'} />}
onClick={handleDeleteCashflowTransaction} intent={Intent.DANGER}
/> onClick={handleDeleteCashflowTransaction}
</NavbarGroup> />
</DashboardActionsBar> </NavbarGroup>
</DashboardActionsBar>
</Can>
); );
} }
export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar); export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

View File

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