Files
bigcapital/packages/webapp/src/containers/Accounts/components.tsx
2023-02-03 01:02:31 +02:00

119 lines
2.9 KiB
TypeScript

// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import {
Position,
Classes,
Tooltip,
MenuItem,
Menu,
MenuDivider,
Intent,
} from '@blueprintjs/core';
import { Can, Icon, If } from '@/components';
import { safeCallback } from '@/utils';
import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
/**
* Accounts table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: {
onEdit,
onViewDetails,
onDelete,
onNewChild,
onActivate,
onInactivate,
// onDrawer,
},
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, original)}
/>
<Can I={AccountAction.Edit} a={AbilitySubject.Account}>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('edit_account')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
icon={<Icon icon="plus" />}
text={intl.get('new_child_account')}
onClick={safeCallback(onNewChild, original)}
/>
<MenuDivider />
</Can>
<Can I={AccountAction.Edit} a={AbilitySubject.Account}>
<If condition={original.active}>
<MenuItem
text={intl.get('inactivate_account')}
icon={<Icon icon="pause-16" iconSize={16} />}
onClick={safeCallback(onInactivate, original)}
/>
</If>
<If condition={!original.active}>
<MenuItem
text={intl.get('activate_account')}
icon={<Icon icon="play-16" iconSize={16} />}
onClick={safeCallback(onActivate, original)}
/>
</If>
</Can>
<Can I={AccountAction.Edit} a={AbilitySubject.Account}>
<MenuItem
text={intl.get('delete_account')}
icon={<Icon icon="trash-16" iconSize={16} />}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
/>
</Can>
</Menu>
);
}
/**
* Normal cell.
*/
export function NormalCell({ cell: { value } }) {
const arrowDirection = value === 'credit' ? 'down' : 'up';
// Can't continue if the value is not `credit` or `debit`.
if (['credit', 'debit'].indexOf(value) === -1) {
return '';
}
return (
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={intl.get(value)}
position={Position.RIGHT}
hoverOpenDelay={100}
>
<Icon icon={`arrow-${arrowDirection}`} />
</Tooltip>
);
}
/**
* Balance cell.
*/
export function BalanceCell({ cell }) {
const account = cell.row.original;
return account.amount !== null ? (
<span>
{account.formatted_amount}
{/* <Money amount={account.amount} currency={account.currency_code} /> */}
</span>
) : (
<span class="placeholder"></span>
);
}