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

feat(S&P): Form Footer.

Browse Source
This commit is contained in:
elforjani13
2022-03-20 11:20:13 +02:00
parent cc637471d9
commit acdec70385
27 changed files with 665 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/containers/Purchases/Bills/BillForm/BillFormFooter.js
View File

@@ -1,43 +1,31 @@
import React from 'react';
import { FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { FastField } from 'formik';
import classNames from 'classnames';
import { Postbox, Row, Col } from 'components';
import styled from 'styled-components';
import { CLASSES } from 'common/classes';
import Dragzone from 'components/Dragzone';
import { inputIntent } from 'utils';
import { Paper, Row, Col } from 'components';
import { BillFormFooterLeft } from './BillFormFooterLeft';
import { BillFormFooterRight } from './BillFormFooterRight';
// Bill form floating actions.
export default function BillFormFooter() {
return (
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Postbox title={<T id={'bill_details'} />} defaultOpen={false}>
<BillFooterPaper>
<Row>
<Col md={8}>
<FastField name={'note'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'note'} />}
className={'form-group--note'}
intent={inputIntent({ error, touched })}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
<BillFormFooterLeft />
</Col>
<Col md={4}>
<Dragzone
initialFiles={[]}
// onDrop={onDropFiles}
// onDeleteFile={onDropFiles}
hint={<T id={'attachments_maximum'} />}
/>
<BillFormFooterRight />
</Col>
</Row>
</Postbox>
</BillFooterPaper>
</div>
);
}
const BillFooterPaper = styled(Paper)`
padding: 20px;
`;

31
src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import styled from 'styled-components';
import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
export function BillFormFooterLeft() {
return (
<React.Fragment>
{/* --------- note --------- */}
<TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
<FEditableText
name={'note'}
placeholder={
'Enter the terms and conditions of your business to be displayed in your transaction'
}
/>
</TermsConditsFormGroup>
</React.Fragment>
);
}
const TermsConditsFormGroup = styled(FFormGroup)`
&.bp3-form-group {
.bp3-label {
font-size: 12px;
margin-bottom: 12px;
}
.bp3-form-content {
margin-left: 10px;
}
}
`;

43
src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import styled from 'styled-components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
export function BillFormFooterRight() {
return (
<BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'bill.details.subtotal'} />}
value={'$5000.00'}
borderStyle={TotalLineBorderStyle.None}
/>
<TotalLine
title={<T id={'bill.details.total'} />}
value={'$5000.00'}
borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'bill.details.payment_amount'} />}
value={'$0.00'}
borderStyle={TotalLineBorderStyle.None}
/>
<TotalLine
title={<T id={'bill.details.due_amount'} />}
value={'$5000.00'}
textStyle={TotalLineTextStyle.Bold}
/>
</BillTotalLines>
);
}
const BillTotalLines = styled(TotalLines)`
width: 100%;
color: #555555;
`;

39
src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
View File

@@ -1,11 +1,11 @@
import React from 'react';
import { FastField } from 'formik';
import { FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { CLASSES } from 'common/classes';
import { Row, Col, Postbox } from 'components';
import { inputIntent } from 'utils';
import classNames from 'classnames';
import styled from 'styled-components';
import { CLASSES } from 'common/classes';
import { Row, Col, Paper } from 'components';
import { VendorCreditNoteFormFooterLeft } from './VendorCreditNoteFormFooterLeft';
import { VendorCreditNoteFormFooterRight } from './VendorCreditNoteFormFooterRight';
/**
* Vendor Credit note form footer.
@@ -13,26 +13,21 @@ import classNames from 'classnames';
export default function VendorCreditNoteFormFooter() {
return (
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Postbox
title={<T id={'vendor_credits_note.label_credit_note_details'} />}
defaultOpen={false}
>
<VendorCreditNoteFooterPaper>
<Row>
<Col md={8}>
<FastField name={'note'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'note'} />}
className={'form-group--note'}
intent={inputIntent({ error, touched })}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
<VendorCreditNoteFormFooterLeft />
</Col>
<Col md={4}>
<VendorCreditNoteFormFooterRight />
</Col>
</Row>
</Postbox>
</VendorCreditNoteFooterPaper>
</div>
);
}
const VendorCreditNoteFooterPaper = styled(Paper)`
padding: 20px;
`;

31
src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import styled from 'styled-components';
import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
export function VendorCreditNoteFormFooterLeft() {
return (
<React.Fragment>
{/* --------- Terms and conditions --------- */}
<TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
<FEditableText
name={'note'}
placeholder={
'Enter the terms and conditions of your business to be displayed in your transaction'
}
/>
</TermsConditsFormGroup>
</React.Fragment>
);
}
const TermsConditsFormGroup = styled(FFormGroup)`
&.bp3-form-group {
.bp3-label {
font-size: 12px;
margin-bottom: 12px;
}
.bp3-form-content {
margin-left: 10px;
}
}
`;

35
src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import styled from 'styled-components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
export function VendorCreditNoteFormFooterRight() {
return (
<VendorCreditNoteTotalLines
labelColWidth={'180px'}
amountColWidth={'180px'}
>
<TotalLine
title={<T id={'credit_note.drawer.label_subtotal'} />}
value={'$5000.00'}
borderStyle={TotalLineBorderStyle.None}
/>
<TotalLine
title={<T id={'credit_note.drawer.label_total'} />}
value={'$5000.00'}
// borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</VendorCreditNoteTotalLines>
);
}
const VendorCreditNoteTotalLines = styled(TotalLines)`
width: 100%;
color: #555555;
`;

1
src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
View File

@@ -113,7 +113,6 @@ function VendorCreditNoteFormHeaderFields({
popoverFill={true}
allowCreate={true}
/>
<VendorCreditNoteFormCurrencyTag />
</ControlVendorGroup>
</FormGroup>
)}

33
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
View File

@@ -1,10 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import { FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { FastField } from 'formik';
import { Postbox, Row, Col } from 'components';
import styled from 'styled-components';
import { CLASSES } from 'common/classes';
import { Row, Col, Paper } from 'components';
import { PaymentMadeFormFooterLeft } from './PaymentMadeFormFooterLeft';
import { PaymentMadeFormFooterRight } from './PaymentMadeFormFooterRight';
/**
* Payment made form footer.
@@ -12,23 +13,21 @@ import { CLASSES } from 'common/classes';
export default function PaymentMadeFooter() {
return (
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<Postbox title={<T id={'payment_made_details'} />} defaultOpen={false}>
<PaymentReceiveFooterPaper>
<Row>
<Col md={8}>
{/* --------- Statement --------- */}
<FastField name={'statement'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'statement'} />}
className={'form-group--statement'}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
<PaymentMadeFormFooterLeft />
</Col>
<Col md={4}>
<PaymentMadeFormFooterRight />
</Col>
</Row>
</Postbox>
</PaymentReceiveFooterPaper>
</div>
);
}
const PaymentReceiveFooterPaper = styled(Paper)`
padding: 20px;
`;

34
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import styled from 'styled-components';
import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
export function PaymentMadeFormFooterLeft() {
return (
<React.Fragment>
{/* --------- Statement--------- */}
<StatementFormGroup
name={'statement'}
label={<T id={'statement'} />}
hintText={'Will be displayed on the Payment'}
>
<FEditableText
name={'statement'}
placeholder={'Thanks for your business and have a great day!'}
/>
</StatementFormGroup>
</React.Fragment>
);
}
const StatementFormGroup = styled(FFormGroup)`
&.bp3-form-group {
margin-bottom: 40px;
.bp3-label {
font-size: 12px;
margin-bottom: 12px;
}
.bp3-form-content {
margin-left: 10px;
}
}
`;

32
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import styled from 'styled-components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
export function PaymentMadeFormFooterRight() {
return (
<PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'estimate.details.subtotal'} />}
value={'$5000.00'}
borderStyle={TotalLineBorderStyle.None}
/>
<TotalLine
title={<T id={'estimate.details.total'} />}
value={'$5000.00'}
// borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</PaymentMadeTotalLines>
);
}
const PaymentMadeTotalLines = styled(TotalLines)`
width: 100%;
color: #555555;
`;

1
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
View File

@@ -118,7 +118,6 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
popoverFill={true}
allowCreate={true}
/>
<PaymentMadeFormCurrencyTag />
</ControlVendorGroup>
</FormGroup>
)}