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

feat: refactor FastField fields to binded Formik fields

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-11-03 00:27:32 +02:00
parent cca116f6bb
commit 46871c8113
7 changed files with 349 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx
View File

@@ -2,15 +2,13 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField, ErrorMessage, Field } from 'formik'; import { Classes, ControlGroup } from '@blueprintjs/core';
import { import {
Classes, FieldRequiredHint,
FormGroup, FormattedMessage as T,
InputGroup, FFormGroup,
ControlGroup, FInputGroup,
} from '@blueprintjs/core'; } from '@/components';
import { inputIntent } from '@/utils';
import { FieldRequiredHint, FormattedMessage as T } from '@/components';
/** /**
* Branch form dialog fields. * Branch form dialog fields.
@@ -19,128 +17,86 @@ function BranchFormFields() {
return ( return (
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
{/*------------ Branch Name -----------*/} {/*------------ Branch Name -----------*/}
<FastField name={'name'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'name'}
<FormGroup label={<T id={'branch.dialog.label.branch_name'} />}
label={<T id={'branch.dialog.label.branch_name'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--branch_name'}
inline={true} >
helperText={<ErrorMessage name="branch_name" />} <FInputGroup name={'name'} />
className={'form-group--branch_name'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Branch Code -----------*/} {/*------------ Branch Code -----------*/}
<FastField name={'code'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'code'}
<FormGroup label={<T id={'branch.dialog.label.branch_code'} />}
label={<T id={'branch.dialog.label.branch_code'} />} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--branch_name'}
inline={true} >
helperText={<ErrorMessage name="code" />} <FInputGroup name={'code'} />
className={'form-group--branch_name'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Branch Address -----------*/} {/*------------ Branch Address -----------*/}
<FastField name={'address'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'address'}
<FormGroup label={intl.get('branch.dialog.label.branch_address')}
label={intl.get('branch.dialog.label.branch_address')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--branch_address'}
inline={true} >
helperText={<ErrorMessage name="address" />} <FInputGroup
className={'form-group--branch_address'} name={'address'}
> placeholder={intl.get('branch.dialog.label.address_1')}
<InputGroup />
intent={inputIntent({ error, touched })} </FFormGroup>
placeholder={intl.get('branch.dialog.label.address_1')}
{...field}
/>
</FormGroup>
)}
</FastField>
<BranchAddressWrap> <BranchAddressWrap>
{/*------------ Branch Address City & Country-----------*/} {/*------------ Branch Address City & Country-----------*/}
<FormGroup <FFormGroup
name={'city'}
inline={true} inline={true}
className={'form-group--branch_address'} className={'form-group--branch_address'}
helperText={<ErrorMessage name="branch_address_2" />}
> >
<ControlGroup> <ControlGroup>
<FastField name={'city'}> <FInputGroup
{({ field, meta: { error, touched } }) => ( name={'city'}
<InputGroup placeholder={intl.get('branch.dialog.label.city')}
intent={inputIntent({ error, touched })} />
placeholder={intl.get('branch.dialog.label.city')} <FInputGroup
{...field} name={'country'}
/> placeholder={intl.get('branch.dialog.label.country')}
)} />
</FastField>
<FastField name={'country'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('branch.dialog.label.country')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
</BranchAddressWrap> </BranchAddressWrap>
{/*------------ Phone Number -----------*/} {/*------------ Phone Number -----------*/}
<FastField name={'phone_number'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'phone_number'}
<FormGroup label={intl.get('branch.dialog.label.phone_number')}
label={intl.get('branch.dialog.label.phone_number')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--phone_number'}
inline={true} >
helperText={<ErrorMessage name="phone_number" />} <FInputGroup name={'phone_number'} placeholder={'https://'} />
className={'form-group--phone_number'} </FFormGroup>
>
<InputGroup placeholder={'https://'} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Email -----------*/} {/*------------ Email -----------*/}
<FastField name={'email'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'email'}
<FormGroup label={intl.get('branch.dialog.label.email')}
label={intl.get('branch.dialog.label.email')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--email'}
inline={true} >
helperText={<ErrorMessage name="email" />} <FInputGroup name={'email'} />
className={'form-group--email'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Website -----------*/} {/*------------ Website -----------*/}
<FastField name={'website'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'website'}
<FormGroup label={intl.get('branch.dialog.label.website')}
label={intl.get('branch.dialog.label.website')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--website'}
inline={true} >
helperText={<ErrorMessage name="email" />} <FInputGroup name={'website'} />
className={'form-group--website'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

187
packages/webapp/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.tsx
View File

@@ -2,16 +2,14 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField, ErrorMessage } from 'formik'; import { Classes, ControlGroup } from '@blueprintjs/core';
import {
Classes,
FormGroup,
InputGroup,
ControlGroup,
} from '@blueprintjs/core';
import { inputIntent } from '@/utils';
import { FieldRequiredHint, FormattedMessage as T } from '@/components'; import {
FieldRequiredHint,
FormattedMessage as T,
FFormGroup,
FInputGroup,
} from '@/components';
/** /**
* Warehouse form fields. * Warehouse form fields.
@@ -21,130 +19,89 @@ export default function WarehouseFormFields() {
return ( return (
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
{/*------------ Warehouse Name -----------*/} {/*------------ Warehouse Name -----------*/}
<FastField name={'name'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'name'}
<FormGroup label={<T id={'warehouse.dialog.label.warehouse_name'} />}
label={<T id={'warehouse.dialog.label.warehouse_name'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--warehouse_name'}
inline={true} >
helperText={<ErrorMessage name="name" />} <FInputGroup name={'name'} />
className={'form-group--warehouse_name'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Warehouse Code -----------*/} {/*------------ Warehouse Code -----------*/}
<FastField name={'code'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'code'}
<FormGroup label={<T id={'warehouse.dialog.label.code'} />}
label={<T id={'warehouse.dialog.label.code'} />} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--warehouse_name'}
inline={true} >
helperText={<ErrorMessage name="code" />} <FInputGroup name={'code'} />
className={'form-group--warehouse_name'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Warehouse Address -----------*/} {/*------------ Warehouse Address -----------*/}
<FastField name={'address'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'address'}
<FormGroup label={intl.get('warehouse.dialog.label.warehouse_address')}
label={intl.get('warehouse.dialog.label.warehouse_address')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--warehouse_address_1'}
inline={true} >
helperText={<ErrorMessage name="address" />} <FInputGroup
className={'form-group--warehouse_address_1'} name={'address'}
> placeholder={intl.get(
<InputGroup 'warehouse.dialog.label.warehouse_address_1',
intent={inputIntent({ error, touched })} )}
placeholder={intl.get( />
'warehouse.dialog.label.warehouse_address_1', </FFormGroup>
)}
{...field}
/>
</FormGroup>
)}
</FastField>
<WarehouseAddressWrap> <WarehouseAddressWrap>
{/*------------ Warehouse Address City & Country-----------*/} {/*------------ Warehouse Address City & Country-----------*/}
<FormGroup <FFormGroup
name={'city'}
inline={true} inline={true}
className={'form-group--warehouse_address_city'} className={'form-group--warehouse_address_city'}
helperText={<ErrorMessage name="warehouse_address_city" />}
> >
<ControlGroup> <ControlGroup>
<FastField name={'city'}> <FInputGroup
{({ field, meta: { error, touched } }) => ( name={'city'}
<InputGroup placeholder={intl.get('warehouse.dialog.label.city')}
intent={inputIntent({ error, touched })} />
placeholder={intl.get('warehouse.dialog.label.city')} <FInputGroup
{...field} name={'country'}
/> placeholder={intl.get('warehouse.dialog.label.country')}
)} />
</FastField>
<FastField name={'country'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('warehouse.dialog.label.country')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
</WarehouseAddressWrap> </WarehouseAddressWrap>
{/*------------ Phone Number -----------*/} {/*------------ Phone Number -----------*/}
<FastField name={'phone_number'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'phone_number'}
<FormGroup label={intl.get('warehouse.dialog.label.phone_number')}
label={intl.get('warehouse.dialog.label.phone_number')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--phone_number'}
inline={true} >
helperText={<ErrorMessage name="phone_number" />} <FInputGroup name={'phone_number'} />
className={'form-group--phone_number'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Email -----------*/} {/*------------ Email -----------*/}
<FastField name={'email'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'email'}
<FormGroup label={intl.get('warehouse.dialog.label.email')}
label={intl.get('warehouse.dialog.label.email')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--warehouse_name'}
inline={true} >
helperText={<ErrorMessage name="email" />} <FInputGroup name={'email'} />
className={'form-group--warehouse_name'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Website -----------*/} {/*------------ Website -----------*/}
<FastField name={'website'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'website'}
<FormGroup label={intl.get('warehouse.dialog.label.website')}
label={intl.get('warehouse.dialog.label.website')} inline={true}
intent={inputIntent({ error, touched })} className={'form-group--warehouse_name'}
inline={true} >
helperText={<ErrorMessage name="email" />} <FInputGroup name={'website'} placeholder={'https://'} />
className={'form-group--warehouse_name'} </FFormGroup>
>
<InputGroup placeholder={'https://'} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

192
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx
View File

@@ -1,9 +1,15 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField, Field } from 'formik'; import { useFormikContext } from 'formik';
import { FormGroup, Checkbox } from '@blueprintjs/core'; import {
import { Flex, FlexItem, FieldHint, FormattedMessage as T } from '@/components'; Flex,
FlexItem,
FieldHint,
FormattedMessage as T,
FFormGroup,
FCheckbox,
} from '@/components';
import { import {
handlePreviousYearCheckBoxChange, handlePreviousYearCheckBoxChange,
handlePreviousYearChangeCheckboxChange, handlePreviousYearChangeCheckboxChange,
@@ -17,130 +23,112 @@ import {
* Balance sheet header - Comparison panal - Comparisons fields. * Balance sheet header - Comparison panal - Comparisons fields.
*/ */
function BalanceSheetHeaderComparisonPanalFields() { function BalanceSheetHeaderComparisonPanalFields() {
const form = useFormikContext();
return ( return (
<> <>
{/**----------- Previous Year -----------*/} {/**----------- Previous Year -----------*/}
<Field name={'previousYear'} type={'checkbox'}> <FFormGroup name={'previousYear'} labelInfo={<FieldHint />}>
{({ form, field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox label={<T id={'balance_sheet.previous_year'} />}
inline={true} name={'previousYear'}
label={<T id={'balance_sheet.previous_year'} />} onChange={handlePreviousYearCheckBoxChange(form)}
{...field} />
onChange={handlePreviousYearCheckBoxChange(form)} </FFormGroup>
/>
</FormGroup>
)}
</Field>
<FlexSubFields align={'left'}> <FlexSubFields align={'left'}>
<FlexItem col={6}> <FlexItem col={6}>
<Field name={'previousYearAmountChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousYearAmountChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'balance_sheet.total_change'} />} small={true}
{...field} label={<T id={'balance_sheet.total_change'} />}
onChange={handlePreviousYearChangeCheckboxChange(form)} name={'previousYearAmountChange'}
/> onChange={handlePreviousYearChangeCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</Field>
</FlexItem> </FlexItem>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousYearPercentageChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousYearPercentageChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
label={<T id={'balance_sheet.change'} />} inline={true}
{...field} label={<T id={'balance_sheet.change'} />}
onChange={handlePreviousYearPercentageCheckboxChange(form)} name={'previousYearPercentageChange'}
/> onChange={handlePreviousYearPercentageCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
</FlexSubFields> </FlexSubFields>
{/*------------ Previous Period -----------*/} {/*------------ Previous Period -----------*/}
<FastField name={'previousPeriod'} type={'checkbox'}> <FFormGroup name={'previousPeriod'} labelInfo={<FieldHint />}>
{({ form, field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'balance_sheet.previous_period'} />}
small={true} name={'previousPeriod'}
label={<T id={'balance_sheet.previous_period'} />} onChange={handlePreviousPeriodCheckBoxChange(form)}
{...field} />
onChange={handlePreviousPeriodCheckBoxChange(form)} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
<FlexSubFields> <FlexSubFields>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousPeriodAmountChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousPeriodAmountChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'balance_sheet.total_change'} />} small={true}
{...field} label={<T id={'balance_sheet.total_change'} />}
onChange={handlePreviousPeriodChangeCheckboxChange(form)} name={'previousPeriodAmountChange'}
/> onChange={handlePreviousPeriodChangeCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousPeriodPercentageChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousPeriodPercentageChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
label={<T id={'balance_sheet.change'} />} inline={true}
{...field} label={<T id={'balance_sheet.change'} />}
onChange={handlePreivousPeriodPercentageCheckboxChange(form)} name={'previousPeriodPercentageChange'}
/> onChange={handlePreivousPeriodPercentageCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
</FlexSubFields> </FlexSubFields>
{/**----------- % of Column -----------*/} {/**----------- % of Column -----------*/}
<FastField name={'percentageOfColumn'} type={'checkbox'}> <FFormGroup name={'percentageOfColumn'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'balance_sheet.percentage_of_column'} />}
small={true} name={'percentageOfColumn'}
label={<T id={'balance_sheet.percentage_of_column'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/**----------- % of Row -----------*/} {/**----------- % of Row -----------*/}
<FastField name={'percentageOfRow'} type={'checkbox'}> <FFormGroup name={'percentageOfRow'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'balance_sheet.percentage_of_row'} />}
small={true} name={'percentageOfRow'}
label={<T id={'balance_sheet.percentage_of_row'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
</> </>
); );
} }

238
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx
View File

@@ -1,10 +1,16 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField } from 'formik'; import { useFormikContext } from 'formik';
import { FormGroup, Checkbox } from '@blueprintjs/core';
import { Flex, FlexItem, FieldHint, FormattedMessage as T } from '@/components'; import {
Flex,
FlexItem,
FieldHint,
FormattedMessage as T,
FFormGroup,
FCheckbox,
} from '@/components';
import { import {
handlePreviousYearCheckBoxChange, handlePreviousYearCheckBoxChange,
@@ -20,159 +26,133 @@ import {
* @returns {JSX.Element} * @returns {JSX.Element}
*/ */
function ProfitLossComaprsionPanelFields() { function ProfitLossComaprsionPanelFields() {
const form = useFormikContext();
return ( return (
<> <>
{/**----------- Previous Year -----------*/} {/**----------- Previous Year -----------*/}
<FastField name={'previousYear'} type={'checkbox'}> <FFormGroup name={'previousYear'} labelInfo={<FieldHint />}>
{({ form, field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.previous_year'} />}
small={true} name={'previousYear'}
label={<T id={'profit_loss_sheet.previous_year'} />} onChange={handlePreviousYearCheckBoxChange(form)}
{...field} />
onChange={handlePreviousYearCheckBoxChange(form)} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
<FlexSubFields> <FlexSubFields>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousYearAmountChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousYearAmountChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'profit_loss_sheet.total_change'} />} small={true}
{...field} label={<T id={'profit_loss_sheet.total_change'} />}
onChange={handlePreviousYearChangeCheckboxChange(form)} name={'previousYearAmountChange'}
/> onChange={handlePreviousYearChangeCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousYearPercentageChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousYearPercentageChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'profit_loss_sheet.perentage_change'} />} small={true}
{...field} label={<T id={'profit_loss_sheet.perentage_change'} />}
onChange={handlePreviousYearPercentageCheckboxChange(form)} name={'previousYearPercentageChange'}
/> onChange={handlePreviousYearPercentageCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
</FlexSubFields> </FlexSubFields>
{/**----------- Previous Period (PP) -----------*/} {/**----------- Previous Period (PP) -----------*/}
<FastField name={'previousPeriod'} type={'checkbox'}> <FFormGroup name={'previousPeriod'} labelInfo={<FieldHint />}>
{({ form, field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.previous_period'} />}
small={true} name={'previousPeriod'}
label={<T id={'profit_loss_sheet.previous_period'} />} onChange={handlePreviousPeriodCheckBoxChange(form)}
{...field} />
onChange={handlePreviousPeriodCheckBoxChange(form)} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
<FlexSubFields> <FlexSubFields>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousPeriodAmountChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousPeriodAmountChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'profit_loss_sheet.total_change'} />} small={true}
{...field} label={<T id={'profit_loss_sheet.total_change'} />}
onChange={handlePreviousPeriodChangeCheckboxChange(form)} name={'previousPeriodAmountChange'}
/> onChange={handlePreviousPeriodChangeCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
<FlexItem col={6}> <FlexItem col={6}>
<FastField name={'previousPeriodPercentageChange'} type={'checkbox'}> <FFormGroup
{({ form, field }) => ( name={'previousPeriodPercentageChange'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox >
inline={true} <FCheckbox
small={true} inline={true}
label={<T id={'profit_loss_sheet.perentage_change'} />} small={true}
{...field} label={<T id={'profit_loss_sheet.perentage_change'} />}
onChange={handlePreviousPeriodPercentageCheckboxChange(form)} name={'previousPeriodPercentageChange'}
/> onChange={handlePreviousPeriodPercentageCheckboxChange(form)}
</FormGroup> />
)} </FFormGroup>
</FastField>
</FlexItem> </FlexItem>
</FlexSubFields> </FlexSubFields>
{/**----------- % of Column -----------*/} {/**----------- % of Column -----------*/}
<FastField name={'percentageColumn'} type={'checkbox'}> <FFormGroup name={'percentageColumn'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.percentage_of_column'} />}
small={true} name={'percentageColumn'}
label={<T id={'profit_loss_sheet.percentage_of_column'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/**----------- % of Row -----------*/} {/**----------- % of Row -----------*/}
<FastField name={'percentageRow'} type={'checkbox'}> <FFormGroup name={'percentageRow'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.percentage_of_row'} />}
small={true} name={'percentageRow'}
label={<T id={'profit_loss_sheet.percentage_of_row'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/**----------- % of Expense -----------*/} {/**----------- % of Expense -----------*/}
<FastField name={'percentageExpense'} type={'checkbox'}> <FFormGroup name={'percentageExpense'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.percentage_of_expense'} />}
small={true} name={'percentageExpense'}
label={<T id={'profit_loss_sheet.percentage_of_expense'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/**----------- % of Income -----------*/} {/**----------- % of Income -----------*/}
<FastField name={'percentageIncome'} type={'checkbox'}> <FFormGroup name={'percentageIncome'} labelInfo={<FieldHint />}>
{({ field }) => ( <FCheckbox
<FormGroup labelInfo={<FieldHint />}> inline={true}
<Checkbox small={true}
inline={true} label={<T id={'profit_loss_sheet.percentage_of_income'} />}
small={true} name={'percentageIncome'}
label={<T id={'profit_loss_sheet.percentage_of_income'} />} />
{...field} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
</> </>
); );
} }

3
packages/webapp/src/hooks/query/paymentMades.tsx
View File

@@ -121,11 +121,12 @@ export function useDeletePaymentMade(props) {
*/ */
export function usePaymentMadeEditPage( export function usePaymentMadeEditPage(
id: number, id: number,
props: UseQueryOptions<any, Error>, props?: UseQueryOptions<any, Error>,
) { ) {
const apiRequest = useApiRequest(); const apiRequest = useApiRequest();
return useQuery([t.PAYMENT_MADE_EDIT_PAGE, id], () => return useQuery([t.PAYMENT_MADE_EDIT_PAGE, id], () =>
apiRequest.get(`bill-payments/${id}/edit-page`).then((res) => res.data), apiRequest.get(`bill-payments/${id}/edit-page`).then((res) => res.data),
props
); );
} }

1
packages/webapp/src/hooks/query/paymentReceives.tsx
View File

@@ -175,6 +175,7 @@ export function usePaymentReceiveEditPage(id, props) {
return useQuery( return useQuery(
[t.PAYMENT_RECEIVE_EDIT_PAGE, id], [t.PAYMENT_RECEIVE_EDIT_PAGE, id],
() => apiRequest.get(`payments-received/${id}/edit-page`).then(res => res.data), () => apiRequest.get(`payments-received/${id}/edit-page`).then(res => res.data),
props
); );
} }

6
packages/webapp/src/style/components/CloudSpinner.scss
View File

@@ -25,3 +25,9 @@
display: none; display: none;
} }
} }
.bp4-dark .cloud-spinner {
&.is-loading:before {
background: rgba(17, 20, 24, 0.8);
}
}