QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 23:30:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize style of sale estimate details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-20 14:12:19 +02:00
parent a953236bff
commit a0098382e7
5 changed files with 108 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js
View File

@@ -1,26 +1,39 @@
import React from 'react'; import React from 'react';
import { Tab } from '@blueprintjs/core'; import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components';
import { DrawerMainTabs } from 'components'; import { DrawerMainTabs } from 'components';
import EstimateDetailActionsBar from './EstimateDetailActionsBar';
import EstimateDetailPanel from './EstimateDetailPanel'; import EstimateDetailPanel from './EstimateDetailPanel';
import clsx from 'classnames';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss'; /**
* Estimate details tabs.
* @returns {React.JSX}
*/
function EstimateDetailsTabs() {
return (
<DrawerMainTabs>
<Tab
title={intl.get('details')}
id={'details'}
panel={<EstimateDetailPanel />}
/>
</DrawerMainTabs>
);
}
/** /**
* Estimate view detail * Estimate view detail
*/ */
export default function EstimateDetail() { export default function EstimateDetail() {
return ( return (
<div className={clsx(EstimateDetailsCls.root)}> <EstimateDetailsRoot>
<DrawerMainTabs> <EstimateDetailActionsBar />
<Tab <EstimateDetailsTabs />
title={intl.get('details')} </EstimateDetailsRoot>
id={'details'}
panel={<EstimateDetailPanel />}
/>
</DrawerMainTabs>
</div>
); );
} }
const EstimateDetailsRoot = styled.div``;

16
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
View File

@@ -8,7 +8,7 @@ import {
NavbarDivider, NavbarDivider,
Intent, Intent,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider'; import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import withDialogActions from 'containers/Dialog/withDialogActions'; import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -19,7 +19,13 @@ import {
AbilitySubject, AbilitySubject,
} from '../../../common/abilityOption'; } from '../../../common/abilityOption';
import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components'; import {
DrawerActionsBar,
Icon,
FormattedMessage as T,
MoreMenuItems,
Can,
} from 'components';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -36,8 +42,10 @@ function EstimateDetailActionsBar({
// #withDrawerActions // #withDrawerActions
closeDrawer, closeDrawer,
}) { }) {
// Estimate details drawer context.
const { estimateId } = useEstimateDetailDrawerContext(); const { estimateId } = useEstimateDetailDrawerContext();
// History.
const history = useHistory(); const history = useHistory();
// Handle edit sale estimate. // Handle edit sale estimate.
@@ -61,7 +69,7 @@ function EstimateDetailActionsBar({
}; };
return ( return (
<DashboardActionsBar> <DrawerActionsBar>
<NavbarGroup> <NavbarGroup>
<Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}> <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
<Button <Button
@@ -98,7 +106,7 @@ function EstimateDetailActionsBar({
/> />
</Can> </Can>
</NavbarGroup> </NavbarGroup>
</DashboardActionsBar> </DrawerActionsBar>
); );
} }

95
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
View File

@@ -1,13 +1,19 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import clsx from 'classnames';
import { FormatDate, T, DetailsMenu, DetailItem } from 'components'; import {
CommercialDocHeader,
CommercialDocTopHeader,
FormatDate,
T,
DetailsMenu,
DetailItem,
Row,
Col,
} from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider'; import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
/** /**
* Estimate read-only details drawer header. * Estimate read-only details drawer header.
*/ */
@@ -15,39 +21,54 @@ export default function EstimateDetailHeader() {
const { estimate } = useEstimateDetailDrawerContext(); const { estimate } = useEstimateDetailDrawerContext();
return ( return (
<div className={clsx(EstimateDetailsCls.detail_panel_header)}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem label={intl.get('amount')}> <DetailsMenu>
<span class="big-number">{estimate.formatted_amount}</span> <DetailItem label={intl.get('amount')}>
</DetailItem> <span class="big-number">{estimate.formatted_amount}</span>
<DetailItem </DetailItem>
label={intl.get('estimate.details.estimate_number')} </DetailsMenu>
children={defaultTo(estimate.estimate_number, '-')} </CommercialDocTopHeader>
/>
<DetailItem
label={intl.get('customer_name')}
children={estimate.customer?.display_name}
/>
<DetailItem
label={intl.get('estimate_date')}
children={estimate.formatted_estimate_date}
/>
<DetailItem
label={intl.get('expiration_date')}
children={estimate.formatted_expiration_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}> <Row>
<DetailItem <Col xs={6}>
label={intl.get('reference')} <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
children={defaultTo(estimate.reference, '-')} <DetailItem
/> label={intl.get('estimate.details.estimate_number')}
<DetailItem children={defaultTo(estimate.estimate_number, '-')}
label={<T id={'estimate.details.created_at'} />} />
children={<FormatDate value={estimate.created_at} />} <DetailItem
/> label={intl.get('customer_name')}
</DetailsMenu> children={estimate.customer?.display_name}
</div> />
<DetailItem
label={intl.get('estimate_date')}
children={estimate.formatted_estimate_date}
/>
<DetailItem
label={intl.get('expiration_date')}
children={estimate.formatted_expiration_date}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('reference')}
children={defaultTo(estimate.reference, '-')}
/>
<DetailItem
label={<T id={'estimate.details.created_at'} />}
children={<FormatDate value={estimate.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
); );
} }

20
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js
View File

@@ -1,25 +1,17 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { Card } from 'components'; import { CommercialDocBox } from 'components';
import EstimateDetailActionsBar from './EstimateDetailActionsBar';
import EstimateDetailHeader from './EstimateDetailHeader'; import EstimateDetailHeader from './EstimateDetailHeader';
import EstimateDetailTable from './EstimateDetailTable'; import EstimateDetailTable from './EstimateDetailTable';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
import EstimateDetailFooter from './EstimateDetailFooter'; import EstimateDetailFooter from './EstimateDetailFooter';
export default function EstimateDetailTab() { export default function EstimateDetailTab() {
return ( return (
<div className={clsx(EstimateDetailsCls.detail_panel)}> <CommercialDocBox>
<EstimateDetailActionsBar /> <EstimateDetailHeader />
<EstimateDetailTable />
<Card> <EstimateDetailFooter />
<EstimateDetailHeader /> </CommercialDocBox>
<EstimateDetailTable />
<EstimateDetailFooter />
</Card>
</div>
); );
} }

19
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components'; import { CommercialDocEntriesTable } from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider'; import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import { useEstimateReadonlyEntriesColumns } from './utils'; import { useEstimateReadonlyEntriesColumns } from './utils';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss'; import { TableStyle } from '../../../common';
/** /**
* Estimate detail table. * Estimate detail table.
@@ -20,12 +19,10 @@ export default function EstimateDetailTable() {
const columns = useEstimateReadonlyEntriesColumns(); const columns = useEstimateReadonlyEntriesColumns();
return ( return (
<div className={clsx(EstimateDetailsCls.detail_panel_table)}> <CommercialDocEntriesTable
<DataTable columns={columns}
columns={columns} data={entries}
data={entries} styleName={TableStyle.Constrant}
className={'table-constrant'} />
/>
</div>
); );
} }