diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.js new file mode 100644 index 000000000..a5aa829d9 --- /dev/null +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.js @@ -0,0 +1,35 @@ +import React, { createContext, useContext } from 'react'; + +import { useVendors } from '../../../hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const APAgingSummaryGeneralContext = createContext(); + +/** + * A/P aging summary provider. + */ +function APAgingSummaryGeneralProvider({ filter, ...props }) { + // Retrieve the vendors list. + const { + data: { vendors }, + isFetching: isVendorsLoading, + } = useVendors(); + + const provider = { + vendors, + isVendorsLoading, + }; + // Loading state. + const loading = isVendorsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useAPAgingSummaryGeneralContext = () => + useContext(APAgingSummaryGeneralContext); + +export { APAgingSummaryGeneralProvider, useAPAgingSummaryGeneralContext }; diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js index 4c6b0e501..1b9a08b85 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js @@ -1,113 +1,14 @@ import React from 'react'; -import { FastField, Field } from 'formik'; -import { DateInput } from '@blueprintjs/datetime'; -import { - Intent, - FormGroup, - InputGroup, - Position, - Classes, -} from '@blueprintjs/core'; -import { FormattedMessage as T } from 'components'; -import classNames from 'classnames'; -import { ContactsMultiSelect, Row, Col, FieldHint } from 'components'; -import { useAPAgingSummaryContext } from './APAgingSummaryProvider'; -import { - momentFormatter, - tansformDateValue, - inputIntent, - handleDateChange, -} from 'utils'; +import { APAgingSummaryGeneralProvider } from './APAgingSummaryGeneralProvider'; +import APAgingSummaryHeaderGeneralContent from './APAgingSummaryHeaderGeneralContent'; /** - * AP Aging Summary - Drawer Header - General Fields. + * AP Aging Summary - Drawer Header - General panel. */ export default function APAgingSummaryHeaderGeneral() { - const { vendors } = useAPAgingSummaryContext(); return ( -
- - - - {({ form, field: { value }, meta: { error } }) => ( - } - labelInfo={} - fill={true} - intent={inputIntent({ error })} - > - { - form.setFieldValue('asDate', selectedDate); - })} - popoverProps={{ position: Position.BOTTOM, minimal: true }} - minimal={true} - fill={true} - /> - - )} - - - - - - - - {({ field, meta: { error } }) => ( - } - labelInfo={} - intent={inputIntent({ error })} - > - - - )} - - - - - - - - {({ field, meta: { error } }) => ( - } - labelInfo={} - intent={inputIntent({ error })} - > - - - )} - - - - - - - - {({ - form: { setFieldValue }, - field: { value }, - }) => ( - } - className={classNames('form-group--select-list', Classes.FILL)} - > - } - contacts={vendors} - contactsSelected={value} - onContactSelect={(contactsIds) => { - setFieldValue('vendorsIds', contactsIds); - }} - /> - - )} - - - -
+ + + ); } diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js new file mode 100644 index 000000000..4575fe159 --- /dev/null +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { FastField, Field } from 'formik'; +import { DateInput } from '@blueprintjs/datetime'; +import { + Intent, + FormGroup, + InputGroup, + Position, + Classes, +} from '@blueprintjs/core'; +import classNames from 'classnames'; +import { + FormattedMessage as T, + ContactsMultiSelect, + Row, + Col, + FieldHint, +} from 'components'; +import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider'; +import { + momentFormatter, + tansformDateValue, + inputIntent, + handleDateChange, +} from 'utils'; + +/** + * AP Aging Summary - Drawer Header - General panel - Content. + */ +export default function APAgingSummaryHeaderGeneralContent() { + const { vendors } = useAPAgingSummaryGeneralContext(); + + return ( +
+ + + + {({ form, field: { value }, meta: { error } }) => ( + } + labelInfo={} + fill={true} + intent={inputIntent({ error })} + > + { + form.setFieldValue('asDate', selectedDate); + })} + popoverProps={{ position: Position.BOTTOM, minimal: true }} + minimal={true} + fill={true} + /> + + )} + + + + + + + + {({ field, meta: { error } }) => ( + } + labelInfo={} + intent={inputIntent({ error })} + > + + + )} + + + + + + + + {({ field, meta: { error } }) => ( + } + labelInfo={} + intent={inputIntent({ error })} + > + + + )} + + + + + + + + {({ form: { setFieldValue }, field: { value } }) => ( + } + className={classNames('form-group--select-list', Classes.FILL)} + > + } + contacts={vendors} + contactsSelected={value} + onContactSelect={(contactsIds) => { + setFieldValue('vendorsIds', contactsIds); + }} + /> + + )} + + + +
+ ); +} diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js index 9d534962c..9366c2e48 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js @@ -19,19 +19,11 @@ function APAgingSummaryProvider({ filter, ...props }) { refetch, } = useAPAgingSummaryReport(query, { keepPreviousData: true }); - // Retrieve the vendors list. - const { - data: { vendors }, - isFetching: isVendorsLoading, - } = useVendors(); - const provider = { APAgingSummary, - vendors, isAPAgingLoading, isAPAgingFetching, - isVendorsLoading, refetch, }; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.js new file mode 100644 index 000000000..d8e36f772 --- /dev/null +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.js @@ -0,0 +1,34 @@ +import React, { createContext, useContext } from 'react'; +import { useCustomers } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const ARAgingSummaryGeneralContext = createContext(); + +/** + * A/R aging summary general tab provider. + */ +function ARAgingSummaryGeneralProvider({ ...props }) { + // Retrieve the customers list. + const { + data: { customers }, + isLoading: isCustomersLoading, + } = useCustomers(); + + const provider = { + customers, + isCustomersLoading, + }; + // Loading state. + const loading = isCustomersLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useARAgingSummaryGeneralContext = () => + useContext(ARAgingSummaryGeneralContext); + +export { ARAgingSummaryGeneralProvider, useARAgingSummaryGeneralContext }; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js index a77bbdb71..1eaae4ebf 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js @@ -1,116 +1,14 @@ import React from 'react'; -import { FastField, Field } from 'formik'; -import { DateInput } from '@blueprintjs/datetime'; -import { - Intent, - FormGroup, - InputGroup, - Position, - Classes, -} from '@blueprintjs/core'; -import { FormattedMessage as T } from 'components'; -import classNames from 'classnames'; -import { ContactsMultiSelect, Row, Col, FieldHint } from 'components'; -import { momentFormatter } from 'utils'; - -import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; +import { ARAgingSummaryGeneralProvider } from './ARAgingSummaryGeneralProvider'; +import ARAgingSummaryHeaderGeneralContent from './ARAgingSummaryHeaderGeneralContent'; /** - * AR Aging Summary - Drawer Header - General Fields. + * AR Aging Summary - Drawer Header - General Fields - Content. */ export default function ARAgingSummaryHeaderGeneral() { - // AR Aging summary context. - const { customers } = useARAgingSummaryContext(); - return ( -
- - - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - labelInfo={} - fill={true} - intent={error && Intent.DANGER} - > - { - form.setFieldValue('asDate', selectedDate); - }} - popoverProps={{ position: Position.BOTTOM, minimal: true }} - minimal={true} - fill={true} - /> - - )} - - - - - - - - {({ field, meta: { error, touched } }) => ( - } - labelInfo={} - className={'form-group--aging-before-days'} - intent={error && Intent.DANGER} - > - - - )} - - - - - - - - {({ field, meta: { error, touched } }) => ( - } - labelInfo={} - className={'form-group--aging-periods'} - intent={error && Intent.DANGER} - > - - - )} - - - - - - - {({ form: { setFieldValue }, field: { value }, meta: { error, touched } }) => ( - } - className={classNames('form-group--select-list', Classes.FILL)} - > - { - setFieldValue('customersIds', contactsIds); - }} - /> - - )} - - - -
+ + + ); } diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js new file mode 100644 index 000000000..e2fcc3089 --- /dev/null +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { FastField, Field } from 'formik'; +import { DateInput } from '@blueprintjs/datetime'; +import { + Intent, + FormGroup, + InputGroup, + Position, + Classes, +} from '@blueprintjs/core'; +import classNames from 'classnames'; + +import { + FormattedMessage as T, + ContactsMultiSelect, + Row, + Col, + FieldHint, +} from 'components'; +import { momentFormatter } from 'utils'; +import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider'; + +/** + * AR Aging Summary - Drawer Header - General Fields. + */ +export default function ARAgingSummaryHeaderGeneralContent() { + // AR Aging summary context. + const { customers } = useARAgingSummaryGeneralContext(); + + return ( +
+ + + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + fill={true} + intent={error && Intent.DANGER} + > + { + form.setFieldValue('asDate', selectedDate); + }} + popoverProps={{ position: Position.BOTTOM, minimal: true }} + minimal={true} + fill={true} + /> + + )} + + + + + + + + {({ field, meta: { error, touched } }) => ( + } + labelInfo={} + className={'form-group--aging-before-days'} + intent={error && Intent.DANGER} + > + + + )} + + + + + + + + {({ field, meta: { error, touched } }) => ( + } + labelInfo={} + className={'form-group--aging-periods'} + intent={error && Intent.DANGER} + > + + + )} + + + + + + + {({ form: { setFieldValue }, field: { value } }) => ( + } + className={classNames('form-group--select-list', Classes.FILL)} + > + { + setFieldValue('customersIds', contactsIds); + }} + /> + + )} + + + +
+ ); +} diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js index c2d3abf3d..33ffde394 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js @@ -20,19 +20,11 @@ function ARAgingSummaryProvider({ filter, ...props }) { refetch, } = useARAgingSummaryReport(query, { keepPreviousData: true }); - // Retrieve the customers list. - const { - data: { customers }, - isFetching: isCustomersFetching, - } = useCustomers(); - const provider = { ARAgingSummary, - customers, isARAgingLoading, isARAgingFetching, - isCustomersFetching, refetch, }; diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js index a95c39752..8c6cb9d4d 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js @@ -2,16 +2,17 @@ import React, { useEffect, useState } from 'react'; import moment from 'moment'; import 'style/pages/FinancialStatements/BalanceSheet.scss'; +import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components'; +import { FinancialStatement } from 'components'; + import BalanceSheetHeader from './BalanceSheetHeader'; import BalanceSheetTable from './BalanceSheetTable'; import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; import BalanceSheetActionsBar from './BalanceSheetActionsBar'; -import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components'; -import { FinancialStatement } from 'components'; +import { BalanceSheetProvider } from './BalanceSheetProvider'; import withBalanceSheetActions from './withBalanceSheetActions'; import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization'; -import { BalanceSheetProvider } from './BalanceSheetProvider'; import { compose } from 'utils'; @@ -19,7 +20,7 @@ import { compose } from 'utils'; * Balance sheet. */ function BalanceSheet({ - // #withPreferences + // #withCurrentOrganization organizationName, // #withBalanceSheetActions @@ -30,7 +31,7 @@ function BalanceSheet({ toDate: moment().endOf('year').format('YYYY-MM-DD'), basis: 'cash', displayColumnsType: 'total', - accountsFilter: 'all-accounts', + accountsFilter: 'without-zero-balance', }); // Handle re-fetch balance sheet after filter change. @@ -66,7 +67,6 @@ function BalanceSheet({ onNumberFormatSubmit={handleNumberFormatSubmit} /> - @@ -79,6 +79,8 @@ function BalanceSheet({ + + ); } diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js index 066f5c66b..6fefd517b 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js @@ -1,18 +1,20 @@ import React from 'react'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; import { FormattedMessage as T } from 'components'; -import intl from 'react-intl-universal'; import moment from 'moment'; -import * as Yup from 'yup'; import { Formik, Form } from 'formik'; -import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; - import withBalanceSheet from './withBalanceSheet'; import withBalanceSheetActions from './withBalanceSheetActions'; -import { compose, transformToForm } from 'utils'; import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal'; +import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader'; + +import { compose, transformToForm } from 'utils'; +import { + getBalanceSheetHeaderDefaultValues, + getBalanceSheetHeaderValidationSchema, +} from './utils'; /** * Balance sheet header. @@ -28,14 +30,12 @@ function BalanceSheetHeader({ // #withBalanceSheetActions toggleBalanceSheetFilterDrawer: toggleFilterDrawer, }) { - const defaultValues = { - basic: 'cash', - fromDate: moment().toDate(), - toDate: moment().toDate(), - }; + const defaultValues = getBalanceSheetHeaderDefaultValues(); + // Filter form initial values. const initialValues = transformToForm( { + ...defaultValues, ...pageFilter, fromDate: moment(pageFilter.fromDate).toDate(), toDate: moment(pageFilter.toDate).toDate(), @@ -44,16 +44,7 @@ function BalanceSheetHeader({ ); // Validation schema. - const validationSchema = Yup.object().shape({ - dateRange: Yup.string().optional(), - fromDate: Yup.date().required().label(intl.get('fromDate')), - toDate: Yup.date() - .min(Yup.ref('fromDate')) - .required() - .label(intl.get('toDate')), - accountsFilter: Yup.string(), - displayColumnsType: Yup.string(), - }); + const validationSchema = getBalanceSheetHeaderValidationSchema(); // Handle form submit. const handleSubmit = (values, actions) => { @@ -63,10 +54,14 @@ function BalanceSheetHeader({ }; // Handle cancel button click. - const handleCancelClick = () => { toggleFilterDrawer(false); }; + const handleCancelClick = () => { + toggleFilterDrawer(false); + }; // Handle drawer close action. - const handleDrawerClose = () => { toggleFilterDrawer(false); }; + const handleDrawerClose = () => { + toggleFilterDrawer(false); + }; return ( { + return { + basic: 'cash', + accountsFilter: 'without-zero-balance', + displayColumnsType: 'total', + fromDate: moment().toDate(), + toDate: moment().toDate(), + }; +}; + +export const getBalanceSheetHeaderValidationSchema = () => + Yup.object().shape({ + dateRange: Yup.string().optional(), + fromDate: Yup.date().required().label(intl.get('fromDate')), + toDate: Yup.date() + .min(Yup.ref('fromDate')) + .required() + .label(intl.get('toDate')), + accountsFilter: Yup.string(), + displayColumnsType: Yup.string(), + }); diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js index 50ad4c264..ea1e38ee1 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js @@ -1,94 +1,14 @@ import React from 'react'; -import { FastField, Field } from 'formik'; -import { DateInput } from '@blueprintjs/datetime'; -import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core'; -import { ContactsMultiSelect, FormattedMessage as T } from 'components'; -import classNames from 'classnames'; -import { Row, Col, FieldHint } from 'components'; -import { - momentFormatter, - tansformDateValue, - inputIntent, - handleDateChange, -} from 'utils'; -import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider'; +import CustomersBalanceSummaryGeneralPanelContent from './CustomersBalanceSummaryGeneralPanelContent'; +import { CustomersBalanceSummaryGeneralProvider } from './CustomersBalanceSummaryGeneralProvider'; /** - * Customers balance header - general panel. + * Customers balance header - General panel. */ export default function CustomersBalanceSummaryGeneralPanel() { - const { customers } = useCustomersBalanceSummaryContext(); - return ( -
- - - - {({ form, field: { value }, meta: { error } }) => ( - } - labelInfo={} - fill={true} - intent={inputIntent({ error })} - > - { - form.setFieldValue('asDate', selectedDate); - })} - popoverProps={{ position: Position.BOTTOM, minimal: true }} - minimal={true} - fill={true} - /> - - )} - - - - - - - - {({ field }) => ( - }> - } - {...field} - /> - - )} - - - - - - - - {({ - form: { setFieldValue }, - field: { value }, - meta: { error, touched }, - }) => ( - } - className={classNames('form-group--select-list', Classes.FILL)} - > - { - setFieldValue('customersIds', contactsIds); - }} - contacts={customers} - contactsSelected={value} - /> - - )} - - - -
+ + + ); } diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js new file mode 100644 index 000000000..d6f341862 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js @@ -0,0 +1,94 @@ +import React from 'react'; +import { FastField, Field } from 'formik'; +import { DateInput } from '@blueprintjs/datetime'; +import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core'; +import { ContactsMultiSelect, FormattedMessage as T } from 'components'; +import classNames from 'classnames'; +import { Row, Col, FieldHint } from 'components'; +import { + momentFormatter, + tansformDateValue, + inputIntent, + handleDateChange, +} from 'utils'; +import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider'; + +/** + * Customers balance header - General panel - Content + */ +export default function CustomersBalanceSummaryGeneralPanelContent() { + const { customers } = useCustomersBalanceSummaryGeneralContext(); + + return ( +
+ + + + {({ form, field: { value }, meta: { error } }) => ( + } + labelInfo={} + fill={true} + intent={inputIntent({ error })} + > + { + form.setFieldValue('asDate', selectedDate); + })} + popoverProps={{ position: Position.BOTTOM, minimal: true }} + minimal={true} + fill={true} + /> + + )} + + + + + + + + {({ field }) => ( + }> + } + {...field} + /> + + )} + + + + + + + + {({ + form: { setFieldValue }, + field: { value }, + meta: { error, touched }, + }) => ( + } + className={classNames('form-group--select-list', Classes.FILL)} + > + { + setFieldValue('customersIds', contactsIds); + }} + contacts={customers} + contactsSelected={value} + /> + + )} + + + +
+ ); +} diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.js new file mode 100644 index 000000000..a1cce6ec9 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.js @@ -0,0 +1,42 @@ +import React, { createContext, useContext } from 'react'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; +import { useCustomers } from 'hooks/query'; + +const CustomersBalanceSummaryGeneralContext = createContext(); + +/** + * Customers balance summary provider. + */ +function CustomersBalanceSummaryGeneralProvider({ ...props }) { + // Fetches the customers list. + const { + data: { customers }, + isFetching: isCustomersFetching, + isLoading: isCustomersLoading, + } = useCustomers(); + + const provider = { + isCustomersLoading, + isCustomersFetching, + customers, + }; + + const loading = isCustomersLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useCustomersBalanceSummaryGeneralContext = () => + useContext(CustomersBalanceSummaryGeneralContext); + +export { + CustomersBalanceSummaryGeneralProvider, + useCustomersBalanceSummaryGeneralContext, +}; diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js index 02ed51335..d1d7e9874 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js @@ -20,10 +20,10 @@ function CustomersBalanceSummaryHeader({ onSubmitFilter, pageFilter, - //#withCustomersBalanceSummary + // #withCustomersBalanceSummary customersBalanceDrawerFilter, - //#withCustomersBalanceSummaryActions + // #withCustomersBalanceSummaryActions toggleCustomerBalanceFilterDrawer, }) { diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js index 3db7ce570..544fa11ec 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useCustomerBalanceSummaryReport, useCustomers } from 'hooks/query'; +import { useCustomerBalanceSummaryReport } from '../../../hooks/query'; import { transformFilterFormToQuery } from '../common'; const CustomersBalanceSummaryContext = createContext(); @@ -9,37 +9,26 @@ const CustomersBalanceSummaryContext = createContext(); * Customers balance summary provider. */ function CustomersBalanceSummaryProvider({ filter, ...props }) { - - const query = React.useMemo(() => transformFilterFormToQuery(filter), [ - filter, - ]); + const query = React.useMemo( + () => transformFilterFormToQuery(filter), + [filter], + ); // Fetches customers balance summary report based on the given report. const { data: CustomerBalanceSummary, isLoading: isCustomersBalanceLoading, isFetching: isCustomersBalanceFetching, - refetch + refetch, } = useCustomerBalanceSummaryReport(query, { keepPreviousData: true, }); - // Fetches the customers list. - const { - data: { customers }, - isFetching: isCustomersFetching, - isLoading: isCustomersLoading, - } = useCustomers(); - const provider = { CustomerBalanceSummary, isCustomersBalanceFetching, isCustomersBalanceLoading, - isCustomersLoading, - isCustomersFetching, - customers, - refetch, }; return ( diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js index caa66498e..c6ca0f828 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js @@ -5,13 +5,27 @@ import { Classes, FormGroup } from '@blueprintjs/core'; import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; import { Row, Col } from 'components'; import { ContactsMultiSelect, FormattedMessage as T } from 'components'; -import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; +import { + CustomersTransactionsGeneralPanelProvider, + useCustomersTransactionsGeneralPanelContext, +} from './CustomersTransactionsHeaderGeneralPanelProvider'; /** * Customers transactions header - General panel. */ export default function CustomersTransactionsHeaderGeneralPanel() { - const { customers } = useCustomersTransactionsContext(); + return ( + + + + ); +} + +/** + * Customers transactions header - General panel - Content. + */ +function CustomersTransactionsHeaderGeneralPanelContent() { + const { customers } = useCustomersTransactionsGeneralPanelContext(); return (
@@ -20,10 +34,7 @@ export default function CustomersTransactionsHeaderGeneralPanel() { - {({ - form: { setFieldValue }, - field: { value }, - }) => ( + {({ form: { setFieldValue }, field: { value } }) => ( } className={classNames('form-group--select-list', Classes.FILL)} diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.js new file mode 100644 index 000000000..b26c84f63 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.js @@ -0,0 +1,41 @@ +import React, { createContext, useContext } from 'react'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; +import { useCustomers } from '../../../hooks/query'; + +const CustomersTransactionsGeneralPanelContext = createContext(); + +/** + * Customers transactions provider. + */ +function CustomersTransactionsGeneralPanelProvider({ ...props }) { + // Fetches the customers list. + const { + data: { customers }, + isFetching: isCustomersFetching, + isLoading: isCustomersLoading, + } = useCustomers(); + + const provider = { + customers, + isCustomersLoading, + isCustomersFetching, + }; + + const loading = isCustomersLoading; + + return loading ? ( + + ) : ( + + ); +} +const useCustomersTransactionsGeneralPanelContext = () => + useContext(CustomersTransactionsGeneralPanelContext); + +export { + CustomersTransactionsGeneralPanelProvider, + useCustomersTransactionsGeneralPanelContext, +}; diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js index 9e198e156..8c4568b56 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext, useMemo } from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useCustomersTransactionsReport, useCustomers } from 'hooks/query'; +import { useCustomersTransactionsReport } from '../../../hooks/query'; import { transformFilterFormToQuery } from '../common'; const CustomersTransactionsContext = createContext(); @@ -21,23 +21,12 @@ function CustomersTransactionsProvider({ filter, ...props }) { refetch: CustomersTransactionsRefetch, } = useCustomersTransactionsReport(query, { keepPreviousData: true }); - // Fetches the customers list. - const { - data: { customers }, - isFetching: isCustomersFetching, - isLoading: isCustomersLoading, - } = useCustomers(); - const provider = { customersTransactions, isCustomersTransactionsFetching, isCustomersTransactionsLoading, CustomersTransactionsRefetch, - customers, - isCustomersLoading, - isCustomersFetching, - filter, query }; diff --git a/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.js b/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.js new file mode 100644 index 000000000..25da46822 --- /dev/null +++ b/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Classes } from '@blueprintjs/core'; +import clsx from 'classnames'; +import Style from './FinancialHeaderLoadingSkeleton.module.scss'; + +function FinancialHeaderLoadingSkeletonLine() { + return ( +
+

XXXXXXXX

+

XXXXXXXX

+
+ ); +} + +/** + * Financial drawer header loading skeleton. + */ +export function FinancialHeaderLoadingSkeleton() { + return ( +
+ + + +
+ ); +} diff --git a/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.module.scss b/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.module.scss new file mode 100644 index 000000000..33b9ca95d --- /dev/null +++ b/client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.module.scss @@ -0,0 +1,22 @@ +.lines { + padding-top: 20px; + + .line+.line { + margin-top: 30px; + } +} + +.line { + display: flex; + width: 600px; + flex-direction: row; + + &_label { + width: 30%; + margin-right: 20px; + } + + &_field { + width: 70%; + } +} \ No newline at end of file diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.js b/client/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.js new file mode 100644 index 000000000..a8b954a40 --- /dev/null +++ b/client/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.js @@ -0,0 +1,32 @@ +import React, { createContext, useContext } from 'react'; + +import { useAccounts } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const GLHeaderGeneralPanelContext = createContext(); + +/** + * General ledger provider. + */ +function GLHeaderGeneralPanelProvider({ ...props }) { + // Accounts list. + const { data: accounts, isLoading: isAccountsLoading } = useAccounts(); + + // Provider + const provider = { + accounts, + isAccountsLoading, + }; + + const loading = isAccountsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useGLGeneralPanelContext = () => useContext(GLHeaderGeneralPanelContext); + +export { GLHeaderGeneralPanelProvider, useGLGeneralPanelContext }; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js index b50d329fd..2e76953f9 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js @@ -1,8 +1,5 @@ import React from 'react'; -import { - FormGroup, - Classes, -} from '@blueprintjs/core'; +import { FormGroup, Classes } from '@blueprintjs/core'; import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; @@ -11,18 +8,30 @@ import { AccountsMultiSelect, Row, Col } from 'components'; import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; import RadiosAccountingBasis from '../RadiosAccountingBasis'; import FinancialAccountsFilter from '../FinancialAccountsFilter'; +import { GLHeaderGeneralPanelProvider } from './GLHeaderGeneralPaneProvider'; import { filterAccountsOptions } from './common'; -import { useGeneralLedgerContext } from './GeneralLedgerProvider' +import { useGLGeneralPanelContext } from './GLHeaderGeneralPaneProvider'; /** * General ledger (GL) - Header - General panel. */ -export default function GeneralLedgerHeaderGeneralPane() { - const { accounts } = useGeneralLedgerContext(); +export default function GLHeaderGeneralPane() { + return ( + + + + ); +} + +/** + * General ledger (GL) - Header - General panel - content. + */ +function GLHeaderGeneralPaneContent() { + const { accounts } = useGLGeneralPanelContext(); return ( -
+ -
+ ); -} \ No newline at end of file +} diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js index 576143fea..a2979d236 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js @@ -13,20 +13,13 @@ function GeneralLedgerProvider({ query, ...props }) { isFetching, isLoading, refetch, - } = useGeneralLedgerSheet(query, { - keepPreviousData: true, - }); - - // Accounts list. - const { data: accounts, isFetching: isAccountsLoading } = useAccounts(); + } = useGeneralLedgerSheet(query, { keepPreviousData: true }); const provider = { generalLedger, - accounts, sheetRefresh: refetch, isFetching, isLoading, - isAccountsLoading, }; return ( diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js index 9fb47d84b..0b6d66b57 100644 --- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js @@ -3,14 +3,25 @@ import classNames from 'classnames'; import { FormGroup, Classes } from '@blueprintjs/core'; import { Field } from 'formik'; import { Row, Col, FormattedMessage as T } from 'components'; -import { ItemsMultiSelect } from 'components'; import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider'; +import { InventoryItemDetailsHeaderGeneralProvider } from './InventoryItemDetailsHeaderGeneralProvider'; /** * Inventory item details header - General panel. */ export default function InventoryItemDetailsHeaderGeneralPanel() { + return ( + + + + ); +} + +/** + * Inventory item details header - General panel - Content. + */ +function InventoryItemDetailsHeaderGeneralPanelContent() { const { items } = useInventoryItemDetailsContext(); return ( @@ -28,15 +39,7 @@ export default function InventoryItemDetailsHeaderGeneralPanel() { } className={classNames('form-group--select-list', Classes.FILL)} - > - { - setFieldValue('itemsIds', itemsIds); - }} - /> - + > )} diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralProvider.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralProvider.js new file mode 100644 index 000000000..987f077f1 --- /dev/null +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralProvider.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { useItems } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const InventoryItemDetailsHeaderGeneralContext = React.createContext(); + +/** + * Inventory item details provider. + */ +function InventoryItemDetailsHeaderGeneralProvider({ ...props }) { + // Handle fetching the items based on the given query. + const { + data: { items }, + isLoading: isItemsLoading, + isFetching: isItemsFetching, + } = useItems({ + stringified_filter_roles: JSON.stringify([ + { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, + ]), + page_size: 10000, + }); + + const provider = { + isItemsFetching, + isItemsLoading, + items, + }; + // Loading state. + const loading = isItemsLoading; + + return loading ? ( + + ) : ( + + ); +} +const useInventoryItemDetailsHeaderGeneralContext = () => + React.useContext(InventoryItemDetailsHeaderGeneralContext); + +export { + InventoryItemDetailsHeaderGeneralProvider, + useInventoryItemDetailsHeaderGeneralContext, +}; diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js index 3039c0338..972b75836 100644 --- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js @@ -1,6 +1,6 @@ import React from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useItems, useInventoryItemDetailsReport } from 'hooks/query'; +import { useInventoryItemDetailsReport } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const InventoryItemDetailsContext = React.createContext(); @@ -22,28 +22,12 @@ function InventoryItemDetailsProvider({ filter, ...props }) { refetch: inventoryItemDetailsRefetch, } = useInventoryItemDetailsReport(query, { keepPreviousData: true }); - // Handle fetching the items based on the given query. - const { - data: { items }, - isLoading: isItemsLoading, - isFetching: isItemsFetching, - } = useItems({ - stringified_filter_roles: JSON.stringify([ - { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, - ]), - page_size: 10000, - }); - const provider = { inventoryItemDetails, isInventoryItemDetailsFetching, isInventoryItemDetailsLoading, inventoryItemDetailsRefetch, - isItemsFetching, - isItemsLoading, - items, - query, filter, }; diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js index cf3f0f918..23efe5087 100644 --- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js +++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js @@ -11,13 +11,27 @@ import { inputIntent, handleDateChange, } from 'utils'; -import { useInventoryValuationContext } from './InventoryValuationProvider'; +import { + InventoryValuationGeneralPanelProvider, + useInventoryValuationGeneralPanelContext, +} from './InventoryValuationHeaderGeneralPanelProvider'; /** * Inventory valuation - Drawer Header - General panel. */ export default function InventoryValuationHeaderGeneralPanel() { - const { items } = useInventoryValuationContext(); + return ( + + + + ); +} + +/** + * Inventory valuation - Drawer Header - General panel - Content. + */ +function InventoryValuationHeaderGeneralPanelContent() { + const { items } = useInventoryValuationGeneralPanelContext(); return (
@@ -59,13 +73,7 @@ export default function InventoryValuationHeaderGeneralPanel() { label={} className={classNames('form-group--select-list', Classes.FILL)} > - { - setFieldValue('itemsIds', itemsIds); - }} - /> + )} diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.js new file mode 100644 index 000000000..8e792ca36 --- /dev/null +++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; +import { useItems } from 'hooks/query'; + +const InventoryValuationGeneralPanelContext = React.createContext(); + +function InventoryValuationGeneralPanelProvider({ query, ...props }) { + // Handle fetching the items based on the given query. + const { + data: { items }, + isLoading: isItemsLoading, + isFetching: isItemsFetching, + } = useItems({ + stringified_filter_roles: JSON.stringify([ + { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, + ]), + page_size: 10000, + }); + + // Provider data. + const provider = { + items, + isItemsFetching, + isItemsLoading, + }; + + const loading = isItemsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useInventoryValuationGeneralPanelContext = () => + React.useContext(InventoryValuationGeneralPanelContext); + +export { + InventoryValuationGeneralPanelProvider, + useInventoryValuationGeneralPanelContext, +}; diff --git a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js index af6677a0a..49ae3515e 100644 --- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js +++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js @@ -1,6 +1,6 @@ import React from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useInventoryValuation, useItems } from 'hooks/query'; +import { useInventoryValuation } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const InventoryValuationContext = React.createContext(); @@ -20,17 +20,6 @@ function InventoryValuationProvider({ query, ...props }) { }, ); - // Handle fetching the items based on the given query. - const { - data: { items }, - isLoading: isItemsLoading, - isFetching: isItemsFetching, - } = useItems({ - stringified_filter_roles: JSON.stringify([ - { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, - ]), - page_size: 10000, - }); // Provider data. const provider = { @@ -38,10 +27,6 @@ function InventoryValuationProvider({ query, ...props }) { isLoading, isFetching, refetchSheet: refetch, - - items, - isItemsFetching, - isItemsLoading, }; return ( diff --git a/client/src/containers/FinancialStatements/Journal/components.js b/client/src/containers/FinancialStatements/Journal/components.js index 4f3cd2147..3f666ba7f 100644 --- a/client/src/containers/FinancialStatements/Journal/components.js +++ b/client/src/containers/FinancialStatements/Journal/components.js @@ -19,29 +19,34 @@ export const useJournalTableColumns = () => { row.date ? moment(row.date).format('YYYY MMM DD') : '', className: 'date', width: 100, + textOverview: true, }, { Header: intl.get('transaction_type'), accessor: 'reference_type_formatted', className: 'reference_type_formatted', width: 120, + textOverview: true, }, { Header: intl.get('num'), accessor: 'transaction_number', className: 'reference_id', width: 70, + textOverview: true, }, { Header: intl.get('description'), accessor: 'note', className: 'note', + textOverview: true, }, { Header: intl.get('acc_code'), accessor: 'account_code', width: 95, className: 'account_code', + textOverview: true, }, { Header: intl.get('account'), diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js index 368cb0f62..4f2db579b 100644 --- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js @@ -65,6 +65,7 @@ function PurchasesByItems({ onNumberFormatSubmit={handleNumberFormatSubmit} /> +
+ + + ); +} /** * Purchases by items - Drawer header - General panel. */ -export default function PurchasesByItemsGeneralPanel() { - const { items } = usePurchaseByItemsContext(); +function PurchasesByItemsGeneralPanelContent() { + const { items } = usePurchaseByItemsGeneralPanelContext(); return (
@@ -30,13 +44,7 @@ export default function PurchasesByItemsGeneralPanel() { label={} className={classNames('form-group--select-list', Classes.FILL)} > - { - setFieldValue('itemsIds', itemsIds); - }} - /> + )} diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanelProvider.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanelProvider.js new file mode 100644 index 000000000..3bc34bbab --- /dev/null +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanelProvider.js @@ -0,0 +1,40 @@ +import React, { createContext, useContext } from 'react'; +import { useItems } from '../../../hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; +const PurchasesByItemsGeneralPanelContext = createContext(); + +function PurchasesByItemsGeneralPanelProvider({ ...props }) { + // Handle fetching the items based on the given query. + const { + data: { items }, + isLoading: isItemsLoading, + isFetching: isItemsFetching, + } = useItems({ + page_size: 10000, + stringified_filter_roles: JSON.stringify([ + { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, + ]), + }); + + const provider = { + items, + isItemsLoading, + isItemsFetching, + }; + + const loading = isItemsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const usePurchaseByItemsGeneralPanelContext = () => + useContext(PurchasesByItemsGeneralPanelContext); + +export { + PurchasesByItemsGeneralPanelProvider, + usePurchaseByItemsGeneralPanelContext, +}; diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js index e2493e781..243f407ad 100644 --- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { usePurchasesByItems, useItems } from 'hooks/query'; +import { usePurchasesByItems } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const PurchasesByItemsContext = createContext(); @@ -21,27 +21,11 @@ function PurchasesByItemsProvider({ query, ...props }) { }, ); - // Handle fetching the items based on the given query. - const { - data: { items }, - isLoading: isItemsLoading, - isFetching: isItemsFetching, - } = useItems({ - page_size: 10000, - stringified_filter_roles: JSON.stringify([ - { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, - ]), - }); - const provider = { purchaseByItems, isFetching, isLoading, - items, - isItemsLoading, - isItemsFetching, - refetchSheet: refetch, }; return ( diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js index 8e3e79dcf..f9d430738 100644 --- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js @@ -20,27 +20,10 @@ function SalesByItemProvider({ query, ...props }) { }, ); - // Handle fetching the items based on the given query. - const { - data: { items }, - isLoading: isItemsLoading, - isFetching: isItemsFetching, - } = useItems({ - page_size: 10000, - stringified_filter_roles: JSON.stringify([ - { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, - ]), - }); - const provider = { salesByItems, isFetching, isLoading, - - items, - isItemsLoading, - isItemsFetching, - refetchSheet: refetch, }; return ( diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js index 459f61af7..80458241b 100644 --- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js @@ -67,6 +67,7 @@ function SalesByItems({ onNumberFormatSubmit={handleNumberFormatSubmit} /> +
+ + + ); +} + +/** + * Sales by items - Drawer header - General panel - Content. + */ +function SalesByItemsHeaderGeneralPanelContent() { + const { items } = useSalesByItemsGeneralPanelContext(); return (
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanelProvider.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanelProvider.js new file mode 100644 index 000000000..75fde4417 --- /dev/null +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanelProvider.js @@ -0,0 +1,40 @@ +import React, { createContext, useContext } from 'react'; +import { useItems } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const SalesByItemGeneralPanelContext = createContext(); + +/** + * Sales by items - General panel - Booting. + */ +function SalesByItemGeneralPanelProvider({ query, ...props }) { + // Handle fetching the items based on the given query. + const { + data: { items }, + isLoading: isItemsLoading, + isFetching: isItemsFetching, + } = useItems({ + page_size: 10000, + stringified_filter_roles: JSON.stringify([ + { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 }, + ]), + }); + + const provider = { + items, + isItemsLoading, + isItemsFetching, + }; + const loading = isItemsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useSalesByItemsGeneralPanelContext = () => + useContext(SalesByItemGeneralPanelContext); + +export { SalesByItemGeneralPanelProvider, useSalesByItemsGeneralPanelContext }; diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js index e599fc02d..94438b15f 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js @@ -1,94 +1,14 @@ import React from 'react'; -import { Field, FastField } from 'formik'; -import { DateInput } from '@blueprintjs/datetime'; -import classNames from 'classnames'; -import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core'; -import { ContactsMultiSelect, FormattedMessage as T } from 'components'; -import { Row, Col, FieldHint } from 'components'; -import { - momentFormatter, - tansformDateValue, - inputIntent, - handleDateChange, -} from 'utils'; -import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider'; +import VendorsBalanceSummaryHeaderGeneralContent from './VendorsBalanceSummaryHeaderGeneralContent'; +import { VendorsBalanceSummaryGeneralPanelProvider } from './VendorsBalanceSummaryHeaderGeneralProvider'; /** - * Vendors balance header -general panel. + * Vendors balance header - General panel. */ export default function VendorsBalanceSummaryHeaderGeneral() { - const { vendors } = useVendorsBalanceSummaryContext(); - return ( -
- - - - {({ form, field: { value }, meta: { error } }) => ( - } - labelInfo={} - fill={true} - intent={inputIntent({ error })} - > - { - form.setFieldValue('asDate', selectedDate); - })} - popoverProps={{ position: Position.BOTTOM, minimal: true }} - minimal={true} - fill={true} - /> - - )} - - - - - - - - {({ field }) => ( - }> - } - name={'percentage'} - {...field} - /> - - )} - - - - - - - - {({ - form: { setFieldValue }, - field: { value }, - meta: { error, touched }, - }) => ( - } - className={classNames('form-group--select-list', Classes.FILL)} - > - { - setFieldValue('vendorsIds', contactsIds); - }} - contacts={vendors} - contactsSelected={value} - /> - - )} - - - -
+ + + ); } diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js new file mode 100644 index 000000000..d833d7092 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js @@ -0,0 +1,86 @@ +import React from 'react'; +import { Field, FastField } from 'formik'; +import { DateInput } from '@blueprintjs/datetime'; +import classNames from 'classnames'; +import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core'; + +import { Row, Col, FieldHint, FormattedMessage as T } from 'components'; +import { + momentFormatter, + tansformDateValue, + inputIntent, + handleDateChange, +} from 'utils'; +import { useVendorsBalanceSummaryGeneralPanelContext } from './VendorsBalanceSummaryHeaderGeneralProvider'; + +/** + * Vendors balance header - General panel - Content. + */ +export default function VendorsBalanceSummaryHeaderGeneralContent() { + const { vendors } = useVendorsBalanceSummaryGeneralPanelContext(); + + return ( +
+ + + + {({ form, field: { value }, meta: { error } }) => ( + } + labelInfo={} + fill={true} + intent={inputIntent({ error })} + > + { + form.setFieldValue('asDate', selectedDate); + })} + popoverProps={{ position: Position.BOTTOM, minimal: true }} + minimal={true} + fill={true} + /> + + )} + + + + + + + + {({ field }) => ( + }> + } + name={'percentage'} + {...field} + /> + + )} + + + + + + + + {({ + form: { setFieldValue }, + field: { value }, + meta: { error, touched }, + }) => ( + } + className={classNames('form-group--select-list', Classes.FILL)} + > + )} + + + +
+ ); +} diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralProvider.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralProvider.js new file mode 100644 index 000000000..4dd7232a8 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralProvider.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; +import { useVendors } from '../../../hooks/query'; + +const VendorsBalanceSummaryGeneralPanelContext = React.createContext(); + +/** + * Vendors balance summary provider. + */ +function VendorsBalanceSummaryGeneralPanelProvider({ filter, ...props }) { + // Fetch vendors list with pagination meta. + const { + data: { vendors }, + isLoading: isVendorsLoading, + isFetching: isVendorsFetching, + } = useVendors({ page_size: 1000000 }); + + // Provider. + const provider = { + vendors, + isVendorsFetching, + isVendorsLoading, + }; + + const loading = isVendorsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useVendorsBalanceSummaryGeneralPanelContext = () => + React.useContext(VendorsBalanceSummaryGeneralPanelContext); + +export { + VendorsBalanceSummaryGeneralPanelProvider, + useVendorsBalanceSummaryGeneralPanelContext, +}; diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js index db2847d64..79ff52a59 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js @@ -1,6 +1,6 @@ import React from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useVendorsBalanceSummaryReport, useVendors } from 'hooks/query'; +import { useVendorsBalanceSummaryReport } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const VendorsBalanceSummaryContext = React.createContext(); @@ -23,23 +23,12 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) { keepPreviousData: true, }); - // Fetch vendors list with pagination meta. - const { - data: { vendors }, - isLoading: isVendorsLoading, - isFetching: isVendorsFetching, - } = useVendors({ page_size: 1000000 }); - // Provider. const provider = { VendorBalanceSummary, isVendorsBalanceLoading, isVendorsBalanceFetching, - vendors, - isVendorsFetching, - isVendorsLoading, - refetch, }; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js index ac7f354da..2681440d2 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js @@ -2,16 +2,35 @@ import React from 'react'; import { Field } from 'formik'; import classNames from 'classnames'; import { Classes, FormGroup } from '@blueprintjs/core'; -import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; -import { Row, Col } from 'components'; -import { ContactsMultiSelect, FormattedMessage as T } from 'components'; -import { useVendorsTransactionsContext } from './VendorsTransactionsProvider'; + +import FinancialStatementDateRange from '../FinancialStatementDateRange'; +import { + Row, + Col, + ContactsMultiSelect, + FormattedMessage as T, +} from 'components'; +import { + VendorsTransactionsGeneralPanelProvider, + useVendorsTransactionsGeneralPanelContext, +} from './VendorsTransactionsHeaderGeneralPanelProvider'; /** - * Vendors transactions header - General panel. + * Vendors transactions header - General panel */ export default function VendorsTransactionsHeaderGeneralPanel() { - const { vendors } = useVendorsTransactionsContext(); + return ( + + + + ); +} + +/** + * Vendors transactions header - General panel - Content. + */ +function VendorsTransactionsHeaderGeneralPanelContent() { + const { vendors } = useVendorsTransactionsGeneralPanelContext(); return (
diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanelProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanelProvider.js new file mode 100644 index 000000000..8cc17cc39 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanelProvider.js @@ -0,0 +1,42 @@ +import React, { createContext, useContext } from 'react'; +import { useVendors } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const VendorsTransactionsGeneralPanelContext = createContext(); + +/** + * Vendors transactions provider. + */ +function VendorsTransactionsGeneralPanelProvider({ ...props }) { + // Fetch vendors list based on the given query. + const { + data: { vendors }, + isLoading: isVendorsLoading, + isFetching: isVendorsFetching, + } = useVendors({ page_size: 100000 }); + + const provider = { + vendors, + isVendorsLoading, + isVendorsFetching, + }; + + const loading = isVendorsLoading; + + return loading ? ( + + ) : ( + + ); +} + +const useVendorsTransactionsGeneralPanelContext = () => + useContext(VendorsTransactionsGeneralPanelContext); + +export { + VendorsTransactionsGeneralPanelProvider, + useVendorsTransactionsGeneralPanelContext, +}; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js index a15a40f23..96a2912fb 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext, useMemo } from 'react'; import FinancialReportPage from '../FinancialReportPage'; -import { useVendorsTransactionsReport, useVendors } from 'hooks/query'; +import { useVendorsTransactionsReport } from 'hooks/query'; import { transformFilterFormToQuery } from '../common'; const VendorsTransactionsContext = createContext(); @@ -19,22 +19,11 @@ function VendorsTransactionsProvider({ filter, ...props }) { refetch, } = useVendorsTransactionsReport(query, { keepPreviousData: true }); - // Fetch vendors list based on the given query. - const { - data: { vendors }, - isLoading: isVendorsLoading, - isFetching: isVendorsFetching, - } = useVendors({ page_size: 100000 }); - const provider = { vendorsTransactions, isVendorsTransactionsLoading, isVendorsTransactionFetching, - vendors, - isVendorsLoading, - - isVendorsFetching, refetch, filter, query, diff --git a/client/src/style/containers/FinancialStatements/DrawerHeader.scss b/client/src/style/containers/FinancialStatements/DrawerHeader.scss index 2c8beb92f..c06323539 100644 --- a/client/src/style/containers/FinancialStatements/DrawerHeader.scss +++ b/client/src/style/containers/FinancialStatements/DrawerHeader.scss @@ -25,6 +25,7 @@ max-height: 550px; height: 100%; padding-bottom: 49px; + background-color: #fff; > form { display: flex;