feat: optimize transactions locking.

This commit is contained in:
a.bouhuolia
2021-12-13 19:22:56 +02:00
parent 0ee9b54a9b
commit a52f00eeb2
9 changed files with 103 additions and 48 deletions

View File

@@ -1,10 +1,9 @@
import React from 'react';
import clsx from 'classnames';
import { Intent } from '@blueprintjs/core';
import styled from 'styled-components';
import * as R from 'ramda';
import { Alert, ButtonLink, AppToaster, Join } from 'components';
import { Alert, ButtonLink, AppToaster, Join, Paragraph } from 'components';
import { TransactionsLockingProvider } from './TransactionsLockingProvider';
import {
TransactionLockingContent,
@@ -19,10 +18,6 @@ import {
validateMoveToPartialLocking,
} from './utils';
function Paragraph({ className, children }) {
return <p className={clsx('paragraph', className)}>{children}</p>;
}
function TransactionsLockingList({
items,
onLock,
@@ -37,6 +32,7 @@ function TransactionsLockingList({
module,
formatted_module,
description,
...item
}) => (
<TransactionLockingContent
name={formatted_module}
@@ -49,6 +45,11 @@ function TransactionsLockingList({
onUnlockPartial={onUnlockPartial}
onEditLock={onLock}
onCancle={onCancel}
lockToDate={item.formatted_lock_to_date}
lockReason={item.lock_reason}
unlockReason={item.unlock_reason}
unlockFromDate={item.formatted_unlock_from_date}
unlockToDate={item.formatted_unlock_to_date}
/>
),
);

View File

@@ -40,8 +40,17 @@ export const TransactionLockingContent = ({
name,
description,
module,
isEnabled,
lockToDate,
lockReason,
// Unlock props.
isPartialUnlock,
unlockToDate,
unlockFromDate,
unlockReason,
onLock,
onEditLock,
onUnlockFull,
@@ -76,16 +85,43 @@ export const TransactionLockingContent = ({
<TransLockingItemTitle>
{name}
<Hint content={description} position={Position.BOTTOM_LEFT} />
{isPartialUnlock && (
<Tag small={true} minimal={true} intent={Intent.PRIMARY}>
Partial unlocked
</Tag>
)}
</TransLockingItemTitle>
<TransLockingItemDesc>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</TransLockingItemDesc>
<If condition={!isEnabled}>
<TransLockingItemDesc>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</TransLockingItemDesc>
</If>
<If condition={isEnabled}>
<TransLockWrap>
<TransLockingItemDesc>
Transactions of the module locked to{' '}
<strong>{lockToDate}</strong>.
</TransLockingItemDesc>
<If condition={lockReason}>
<TransLockingReason>
<strong>Lock Reason:</strong> {lockReason}
</TransLockingReason>
</If>
</TransLockWrap>
</If>
<If condition={isPartialUnlock}>
<TransUnlockWrap>
<TransLockingItemDesc>
Partial unlocked from <strong>{unlockFromDate}</strong> to{' '}
<strong>{unlockToDate}</strong>.
</TransLockingItemDesc>
<If condition={unlockReason}>
<TransLockingReason>
<strong>Unlock Reason:</strong> {unlockReason}
</TransLockingReason>
</If>
</TransUnlockWrap>
</If>
</TransLockingContent>
<TransLockingActions>
@@ -208,4 +244,31 @@ export const TransLockingContent = styled.div`
flex: 1 1 0;
margin-left: 20px;
width: 100%;
padding-right: 10px;
`;
export const TransLockingReason = styled.div`
font-size: 13px;
strong {
color: #777;
}
`;
const TransUnlockWrap = styled.div`
padding-top: 12px;
border-top: 1px solid #ddd;
margin-top: 12px;
${TransLockingReason} {
margin-top: 8px;
}
${TransLockingItemDesc} {
font-size: 13px;
}
`;
const TransLockWrap = styled.div`
${TransLockingReason} {
margin-top: 10px;
}
`;