feat: add bill & payment made ability.

This commit is contained in:
elforjani13
2021-11-23 20:29:35 +02:00
parent 3a8e1f5238
commit 1cba4b5f18
6 changed files with 143 additions and 89 deletions

View File

@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { If, Icon, FormattedMessage as T } from 'components'; import { Can, If, Icon, FormattedMessage as T } from 'components';
import {
Bill_Abilities,
Payment_Made_Abilities,
AbilitySubject,
} from '../../../common/abilityOption';
import { safeCallback, compose } from 'utils'; import { safeCallback, compose } from 'utils';
@@ -53,29 +58,38 @@ function BillDetailActionsBar({
return ( return (
<DashboardActionsBar> <DashboardActionsBar>
<NavbarGroup> <NavbarGroup>
<Button <Can I={Bill_Abilities.Edit} a={AbilitySubject.Bill}>
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_bill'} />}
onClick={safeCallback(onEditBill)}
/>
<NavbarDivider />
<If condition={bill.is_open && !bill.is_fully_paid}>
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon="quick-payment-16" iconSize={16} />} icon={<Icon icon="pen-18" />}
text={<T id={'add_payment'} />} text={<T id={'edit_bill'} />}
onClick={handleQuickBillPayment} onClick={safeCallback(onEditBill)}
/> />
</If> <NavbarDivider />
<NavbarDivider /> </Can>
<Button <Can
className={Classes.MINIMAL} I={Payment_Made_Abilities.Create}
icon={<Icon icon={'trash-16'} iconSize={16} />} a={AbilitySubject.PaymentMade}
text={<T id={'delete'} />} >
intent={Intent.DANGER} <If condition={bill.is_open && !bill.is_fully_paid}>
onClick={safeCallback(onDeleteBill)} <Button
/> className={Classes.MINIMAL}
icon={<Icon icon="quick-payment-16" iconSize={16} />}
text={<T id={'add_payment'} />}
onClick={handleQuickBillPayment}
/>
</If>
<NavbarDivider />
</Can>
<Can I={Bill_Abilities.Delete} a={AbilitySubject.Bill}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteBill)}
/>
</Can>
</NavbarGroup> </NavbarGroup>
</DashboardActionsBar> </DashboardActionsBar>
); );

View File

@@ -16,8 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components'; import { Can, Icon, FormattedMessage as T } from 'components';
import {
Payment_Made_Abilities,
AbilitySubject,
} from '../../../common/abilityOption';
import { compose } from 'utils'; import { compose } from 'utils';
/** /**
@@ -48,20 +51,24 @@ function PaymentMadeDetailActionsBar({
return ( return (
<DashboardActionsBar> <DashboardActionsBar>
<NavbarGroup> <NavbarGroup>
<Button <Can I={Payment_Made_Abilities.Edit} a={AbilitySubject.PaymentMade}>
className={Classes.MINIMAL} <Button
icon={<Icon icon="pen-18" />} className={Classes.MINIMAL}
text={<T id={'edit_payment_made'} />} icon={<Icon icon="pen-18" />}
onClick={handleEditPaymentMade} text={<T id={'edit_payment_made'} />}
/> onClick={handleEditPaymentMade}
<NavbarDivider /> />
<Button <NavbarDivider />
className={Classes.MINIMAL} </Can>
icon={<Icon icon={'trash-16'} iconSize={16} />} <Can I={Payment_Made_Abilities.Delete} a={AbilitySubject.PaymentMade}>
text={<T id={'delete'} />} <Button
intent={Intent.DANGER} className={Classes.MINIMAL}
onClick={handleDeletePaymentMade} icon={<Icon icon={'trash-16'} iconSize={16} />}
/> text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleDeletePaymentMade}
/>
</Can>
</NavbarGroup> </NavbarGroup>
</DashboardActionsBar> </DashboardActionsBar>
); );

View File

@@ -14,12 +14,14 @@ import { useHistory } from 'react-router-dom';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { import {
If, If,
Can,
FormattedMessage as T, FormattedMessage as T,
DashboardActionViewsList, DashboardActionViewsList,
DashboardFilterButton, DashboardFilterButton,
AdvancedFilterPopover, AdvancedFilterPopover,
DashboardRowsHeightButton, DashboardRowsHeightButton,
} from 'components'; } from 'components';
import { Bill_Abilities, AbilitySubject } from '../../../../common/abilityOption';
import withBillsActions from './withBillsActions'; import withBillsActions from './withBillsActions';
import withBills from './withBills'; import withBills from './withBills';
@@ -86,12 +88,14 @@ function BillActionsBar({
onChange={handleTabChange} onChange={handleTabChange}
/> />
<NavbarDivider /> <NavbarDivider />
<Button <Can I={Bill_Abilities.Create} a={AbilitySubject.Bill}>
className={Classes.MINIMAL} <Button
icon={<Icon icon={'plus'} />} className={Classes.MINIMAL}
text={<T id={'new_bill'} />} icon={<Icon icon={'plus'} />}
onClick={handleClickNewBill} text={<T id={'new_bill'} />}
/> onClick={handleClickNewBill}
/>
</Can>
<AdvancedFilterPopover <AdvancedFilterPopover
advancedFilterProps={{ advancedFilterProps={{
conditions: billsConditionsRoles, conditions: billsConditionsRoles,

View File

@@ -16,8 +16,14 @@ import {
If, If,
Choose, Choose,
Money, Money,
Can,
} from 'components'; } from 'components';
import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils'; import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
import {
Bill_Abilities,
Payment_Made_Abilities,
AbilitySubject,
} from '../../../../common/abilityOption';
/** /**
* Actions menu. * Actions menu.
@@ -40,38 +46,44 @@ export function ActionsMenu({
text={intl.get('view_details')} text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)} onClick={safeCallback(onViewDetails, original)}
/> />
<MenuDivider /> <Can I={Bill_Abilities.Edit} a={AbilitySubject.Bill}>
<MenuItem <MenuDivider />
icon={<Icon icon="pen-18" />} <MenuItem
text={intl.get('edit_bill')} icon={<Icon icon="pen-18" />}
onClick={safeCallback(onEdit, original)} text={intl.get('edit_bill')}
/> onClick={safeCallback(onEdit, original)}
/>
<If condition={!original.is_open}> <If condition={!original.is_open}>
<MenuItem <MenuItem
icon={<Icon icon={'check'} iconSize={18} />} icon={<Icon icon={'check'} iconSize={18} />}
text={intl.get('mark_as_opened')} text={intl.get('mark_as_opened')}
onClick={safeCallback(onOpen, original)} onClick={safeCallback(onOpen, original)}
/> />
</If> </If>
<If condition={original.is_open && !original.is_fully_paid}> </Can>
<MenuItem <Can I={Payment_Made_Abilities.Create} a={AbilitySubject.PaymentMade}>
icon={<Icon icon="quick-payment-16" iconSize={16} />} <If condition={original.is_open && !original.is_fully_paid}>
text={intl.get('add_payment')} <MenuItem
onClick={safeCallback(onQuick, original)} icon={<Icon icon="quick-payment-16" iconSize={16} />}
/> text={intl.get('add_payment')}
</If> onClick={safeCallback(onQuick, original)}
/>
</If>
</Can>
<MenuItem <MenuItem
icon={<Icon icon="receipt-24" iconSize={16} />} icon={<Icon icon="receipt-24" iconSize={16} />}
text={intl.get('allocate_landed_coast')} text={intl.get('allocate_landed_coast')}
onClick={safeCallback(onAllocateLandedCost, original)} onClick={safeCallback(onAllocateLandedCost, original)}
/> />
<MenuItem <Can I={Bill_Abilities.Delete} a={AbilitySubject.Bill}>
text={intl.get('delete_bill')} <MenuItem
intent={Intent.DANGER} text={intl.get('delete_bill')}
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} />}
/>
</Can>
</Menu> </Menu>
); );
} }

View File

@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { import {
If, If,
Can,
FormattedMessage as T, FormattedMessage as T,
DashboardActionViewsList, DashboardActionViewsList,
DashboardFilterButton, DashboardFilterButton,
@@ -29,6 +30,10 @@ import withSettings from 'containers/Settings/withSettings';
import { usePaymentMadesListContext } from './PaymentMadesListProvider'; import { usePaymentMadesListContext } from './PaymentMadesListProvider';
import { useRefreshPaymentMades } from 'hooks/query/paymentMades'; import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
import {
Payment_Made_Abilities,
AbilitySubject,
} from '../../../../common/abilityOption';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -70,7 +75,7 @@ function PaymentMadeActionsBar({
const handleRefreshBtnClick = () => { const handleRefreshBtnClick = () => {
refresh(); refresh();
}; };
// Handle table row size change. // Handle table row size change.
const handleTableRowSizeChange = (size) => { const handleTableRowSizeChange = (size) => {
addSetting('billPayments', 'tableSize', size); addSetting('billPayments', 'tableSize', size);
@@ -85,12 +90,14 @@ function PaymentMadeActionsBar({
onChange={handleTabChange} onChange={handleTabChange}
/> />
<NavbarDivider /> <NavbarDivider />
<Button <Can I={Payment_Made_Abilities.Create} a={AbilitySubject.PaymentMade}>
className={Classes.MINIMAL} <Button
icon={<Icon icon={'plus'} />} className={Classes.MINIMAL}
text={<T id={'new_payment_made'} />} icon={<Icon icon={'plus'} />}
onClick={handleClickNewPaymentMade} text={<T id={'new_payment_made'} />}
/> onClick={handleClickNewPaymentMade}
/>
</Can>
<AdvancedFilterPopover <AdvancedFilterPopover
advancedFilterProps={{ advancedFilterProps={{
conditions: paymentMadesFilterConditions, conditions: paymentMadesFilterConditions,

View File

@@ -10,7 +10,12 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { Icon, Money, FormatDateCell } from 'components'; import { Icon, Money, FormatDateCell, Can } from 'components';
import {
Payment_Made_Abilities,
AbilitySubject,
} from '../../../../common/abilityOption';
import { safeCallback } from 'utils'; import { safeCallback } from 'utils';
export function AmountAccessor(row) { export function AmountAccessor(row) {
@@ -31,18 +36,23 @@ export function ActionsMenu({
text={intl.get('view_details')} text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)} onClick={safeCallback(onViewDetails, original)}
/> />
<MenuDivider />
<MenuItem <Can I={Payment_Made_Abilities.Edit} a={AbilitySubject.PaymentMade}>
icon={<Icon icon="pen-18" />} <MenuDivider />
text={intl.get('edit_payment_made')} <MenuItem
onClick={safeCallback(onEdit, original)} icon={<Icon icon="pen-18" />}
/> text={intl.get('edit_payment_made')}
<MenuItem onClick={safeCallback(onEdit, original)}
text={intl.get('delete_payment_made')} />
intent={Intent.DANGER} </Can>
onClick={safeCallback(onDelete, original)} <Can I={Payment_Made_Abilities.Delete} a={AbilitySubject.PaymentMade}>
icon={<Icon icon="trash-16" iconSize={16} />} <MenuItem
/> text={intl.get('delete_payment_made')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Can>
</Menu> </Menu>
); );
} }