diff --git a/packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx b/packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx index eea427e5c..895ff008a 100644 --- a/packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx @@ -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 (
{/*------------ Branch Name -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={} - intent={inputIntent({ error, touched })} - inline={true} - helperText={} - className={'form-group--branch_name'} - > - - - )} - + } + labelInfo={} + inline={true} + className={'form-group--branch_name'} + > + + {/*------------ Branch Code -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - inline={true} - helperText={} - className={'form-group--branch_name'} - > - - - )} - + } + inline={true} + className={'form-group--branch_name'} + > + + {/*------------ Branch Address -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--branch_address'} - > - - - )} - + + + {/*------------ Branch Address City & Country-----------*/} - } > - - {({ field, meta: { error, touched } }) => ( - - )} - - - - {({ field, meta: { error, touched } }) => ( - - )} - + + - + {/*------------ Phone Number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--phone_number'} - > - - - )} - + + + {/*------------ Email -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--email'} - > - - - )} - + + + {/*------------ Website -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--website'} - > - - - )} - + + +
); } diff --git a/packages/webapp/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.tsx b/packages/webapp/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.tsx index 6068f943f..cee732c2b 100644 --- a/packages/webapp/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.tsx @@ -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 (
{/*------------ Warehouse Name -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={} - intent={inputIntent({ error, touched })} - inline={true} - helperText={} - className={'form-group--warehouse_name'} - > - - - )} - + } + labelInfo={} + inline={true} + className={'form-group--warehouse_name'} + > + + {/*------------ Warehouse Code -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - inline={true} - helperText={} - className={'form-group--warehouse_name'} - > - - - )} - + } + inline={true} + className={'form-group--warehouse_name'} + > + + {/*------------ Warehouse Address -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--warehouse_address_1'} - > - - - )} - + + + {/*------------ Warehouse Address City & Country-----------*/} - } > - - {({ field, meta: { error, touched } }) => ( - - )} - - - {({ field, meta: { error, touched } }) => ( - - )} - + + - + {/*------------ Phone Number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--phone_number'} - > - - - )} - + + + {/*------------ Email -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--warehouse_name'} - > - - - )} - + + + {/*------------ Website -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--warehouse_name'} - > - - - )} - + + +
); } diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx index 3a65b88af..ca2de1e8a 100644 --- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx +++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx @@ -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 -----------*/} - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearCheckBoxChange(form)} - /> - - )} - + }> + } + name={'previousYear'} + onChange={handlePreviousYearCheckBoxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearChangeCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousYearAmountChange'} + onChange={handlePreviousYearChangeCheckboxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearPercentageCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousYearPercentageChange'} + onChange={handlePreviousYearPercentageCheckboxChange(form)} + /> + {/*------------ Previous Period -----------*/} - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousPeriodCheckBoxChange(form)} - /> - - )} - + }> + } + name={'previousPeriod'} + onChange={handlePreviousPeriodCheckBoxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousPeriodChangeCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousPeriodAmountChange'} + onChange={handlePreviousPeriodChangeCheckboxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreivousPeriodPercentageCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousPeriodPercentageChange'} + onChange={handlePreivousPeriodPercentageCheckboxChange(form)} + /> + {/**----------- % of Column -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageOfColumn'} + /> + {/**----------- % of Row -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageOfRow'} + /> + ); } diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx index 62b2c8059..1b7d19803 100644 --- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx @@ -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 -----------*/} - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearCheckBoxChange(form)} - /> - - )} - + }> + } + name={'previousYear'} + onChange={handlePreviousYearCheckBoxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearChangeCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousYearAmountChange'} + onChange={handlePreviousYearChangeCheckboxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousYearPercentageCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousYearPercentageChange'} + onChange={handlePreviousYearPercentageCheckboxChange(form)} + /> + {/**----------- Previous Period (PP) -----------*/} - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousPeriodCheckBoxChange(form)} - /> - - )} - + }> + } + name={'previousPeriod'} + onChange={handlePreviousPeriodCheckBoxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousPeriodChangeCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousPeriodAmountChange'} + onChange={handlePreviousPeriodChangeCheckboxChange(form)} + /> + - - {({ form, field }) => ( - }> - } - {...field} - onChange={handlePreviousPeriodPercentageCheckboxChange(form)} - /> - - )} - + } + > + } + name={'previousPeriodPercentageChange'} + onChange={handlePreviousPeriodPercentageCheckboxChange(form)} + /> + {/**----------- % of Column -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageColumn'} + /> + {/**----------- % of Row -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageRow'} + /> + {/**----------- % of Expense -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageExpense'} + /> + {/**----------- % of Income -----------*/} - - {({ field }) => ( - }> - } - {...field} - /> - - )} - + }> + } + name={'percentageIncome'} + /> + ); } diff --git a/packages/webapp/src/hooks/query/paymentMades.tsx b/packages/webapp/src/hooks/query/paymentMades.tsx index facd1ac54..73e41e61b 100644 --- a/packages/webapp/src/hooks/query/paymentMades.tsx +++ b/packages/webapp/src/hooks/query/paymentMades.tsx @@ -121,11 +121,12 @@ export function useDeletePaymentMade(props) { */ export function usePaymentMadeEditPage( id: number, - props: UseQueryOptions, + props?: UseQueryOptions, ) { const apiRequest = useApiRequest(); return useQuery([t.PAYMENT_MADE_EDIT_PAGE, id], () => apiRequest.get(`bill-payments/${id}/edit-page`).then((res) => res.data), + props ); } diff --git a/packages/webapp/src/hooks/query/paymentReceives.tsx b/packages/webapp/src/hooks/query/paymentReceives.tsx index 8560c3ab7..4de72989c 100644 --- a/packages/webapp/src/hooks/query/paymentReceives.tsx +++ b/packages/webapp/src/hooks/query/paymentReceives.tsx @@ -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 ); } diff --git a/packages/webapp/src/style/components/CloudSpinner.scss b/packages/webapp/src/style/components/CloudSpinner.scss index f5f1fe4a8..92da814bd 100644 --- a/packages/webapp/src/style/components/CloudSpinner.scss +++ b/packages/webapp/src/style/components/CloudSpinner.scss @@ -25,3 +25,9 @@ display: none; } } + +.bp4-dark .cloud-spinner { + &.is-loading:before { + background: rgba(17, 20, 24, 0.8); + } +}