QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 13:50:31 +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 intl from 'react-intl-universal';
import styled from 'styled-components';
import { FastField, ErrorMessage, Field } 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';
FieldRequiredHint,
FormattedMessage as T,
FFormGroup,
FInputGroup,
} from '@/components';
/**
* Branch form dialog fields.
@@ -19,128 +17,86 @@ function BranchFormFields() {
return (
<div className={Classes.DIALOG_BODY}>
{/*------------ Branch Name -----------*/}
<FastField name={'name'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'branch.dialog.label.branch_name'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="branch_name" />}
className={'form-group--branch_name'}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'name'}
label={<T id={'branch.dialog.label.branch_name'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={'form-group--branch_name'}
>
<FInputGroup name={'name'} />
</FFormGroup>
{/*------------ Branch Code -----------*/}
<FastField name={'code'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'branch.dialog.label.branch_code'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="code" />}
className={'form-group--branch_name'}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'code'}
label={<T id={'branch.dialog.label.branch_code'} />}
inline={true}
className={'form-group--branch_name'}
>
<FInputGroup name={'code'} />
</FFormGroup>
{/*------------ Branch Address -----------*/}
<FastField name={'address'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={intl.get('branch.dialog.label.branch_address')}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="address" />}
className={'form-group--branch_address'}
>
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('branch.dialog.label.address_1')}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'address'}
label={intl.get('branch.dialog.label.branch_address')}
inline={true}
className={'form-group--branch_address'}
>
<FInputGroup
name={'address'}
placeholder={intl.get('branch.dialog.label.address_1')}
/>
</FFormGroup>
<BranchAddressWrap>
{/*------------ Branch Address City & Country-----------*/}
<FormGroup
<FFormGroup
name={'city'}
inline={true}
className={'form-group--branch_address'}
helperText={<ErrorMessage name="branch_address_2" />}
>
<ControlGroup>
<FastField name={'city'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('branch.dialog.label.city')}
{...field}
/>
)}
</FastField>
<FastField name={'country'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('branch.dialog.label.country')}
{...field}
/>
)}
</FastField>
<FInputGroup
name={'city'}
placeholder={intl.get('branch.dialog.label.city')}
/>
<FInputGroup
name={'country'}
placeholder={intl.get('branch.dialog.label.country')}
/>
</ControlGroup>
</FormGroup>
</FFormGroup>
</BranchAddressWrap>
{/*------------ Phone Number -----------*/}
<FastField name={'phone_number'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={intl.get('branch.dialog.label.phone_number')}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="phone_number" />}
className={'form-group--phone_number'}
>
<InputGroup placeholder={'https://'} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'phone_number'}
label={intl.get('branch.dialog.label.phone_number')}
inline={true}
className={'form-group--phone_number'}
>
<FInputGroup name={'phone_number'} placeholder={'https://'} />
</FFormGroup>
{/*------------ Email -----------*/}
<FastField name={'email'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={intl.get('branch.dialog.label.email')}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="email" />}
className={'form-group--email'}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'email'}
label={intl.get('branch.dialog.label.email')}
inline={true}
className={'form-group--email'}
>
<FInputGroup name={'email'} />
</FFormGroup>
{/*------------ Website -----------*/}
<FastField name={'website'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={intl.get('branch.dialog.label.website')}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="email" />}
className={'form-group--website'}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'website'}
label={intl.get('branch.dialog.label.website')}
inline={true}
className={'form-group--website'}
>
<FInputGroup name={'website'} />
</FFormGroup>
</div>
);
}

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

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

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

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

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

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

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

@@ -121,11 +121,12 @@ export function useDeletePaymentMade(props) {
*/
export function usePaymentMadeEditPage(
id: number,
props: UseQueryOptions<any, Error>,
props?: UseQueryOptions<any, Error>,
) {
const apiRequest = useApiRequest();
return useQuery([t.PAYMENT_MADE_EDIT_PAGE, id], () =>
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(
[t.PAYMENT_RECEIVE_EDIT_PAGE, id],
() => 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;
}
}
.bp4-dark .cloud-spinner {
&.is-loading:before {
background: rgba(17, 20, 24, 0.8);
}
}