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

BIG-59: Refactoring mutli-select component.

Browse Source
This commit is contained in:
a.bouhuolia
2021-09-13 16:49:43 +02:00
parent 315b27ffe5
commit 5a3f42682b
17 changed files with 249 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js
View File

@@ -99,11 +99,10 @@ export default function APAgingSummaryHeaderGeneralContent() {
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
defaultText={<T id={'all_vendors'} />}
contacts={vendors}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
items={vendors}
onItemSelect={(vendors) => {
const vendorsIds = vendors.map((customer) => customer.id);
setFieldValue('vendorsIds', vendorsIds);
}}
/>
</FormGroup>

10
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js
View File

@@ -105,10 +105,12 @@ export default function ARAgingSummaryHeaderGeneralContent() {
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
contacts={customers}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
items={customers}
onItemSelect={(customers) => {
const customersIds = customers.map(
(customer) => customer.id,
);
setFieldValue('customersIds', customersIds);
}}
/>
</FormGroup>

10
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js
View File

@@ -74,15 +74,15 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'Specific customers'} />}
label={<T id={'specific_customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
items={customers}
onItemSelect={(contacts) => {
const customersIds = contacts.map(contact => contact.id);
setFieldValue('customersIds', customersIds);
}}
contacts={customers}
contactsSelected={value}
/>
</FormGroup>
)}

18
client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
View File

@@ -3,8 +3,12 @@ import classNames from 'classnames';
import { Field } from 'formik';
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 {
Row,
Col,
ContactsMultiSelect,
FormattedMessage as T,
} from '../../../components';
import {
CustomersTransactionsGeneralPanelProvider,
useCustomersTransactionsGeneralPanelContext,
@@ -40,11 +44,13 @@ function CustomersTransactionsHeaderGeneralPanelContent() {
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
items={customers}
onItemSelect={(customers) => {
const customersIds = customers.map(
(customer) => customer.id,
);
setFieldValue('customersIds', customersIds);
}}
contacts={customers}
contactsSelected={value}
/>
</FormGroup>
)}

2
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
View File

@@ -43,7 +43,7 @@ function GLHeaderGeneralPaneContent() {
label={<T id={'specific_accounts'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<AccountsMultiSelect accounts={accounts} />
<AccountsMultiSelect items={accounts} />
</FormGroup>
</Col>
</Row>

26
client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js
View File

@@ -2,10 +2,18 @@ import React from 'react';
import classNames from 'classnames';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import { Row, Col, FormattedMessage as T } from 'components';
import {
ItemsMultiSelect,
Row,
Col,
FormattedMessage as T,
} from '../../../components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
import { InventoryItemDetailsHeaderGeneralProvider } from './InventoryItemDetailsHeaderGeneralProvider';
import {
InventoryItemDetailsHeaderGeneralProvider,
useInventoryItemDetailsHeaderGeneralContext,
} from './InventoryItemDetailsHeaderGeneralProvider';
/**
* Inventory item details header - General panel.
@@ -22,7 +30,7 @@ export default function InventoryItemDetailsHeaderGeneralPanel() {
* Inventory item details header - General panel - Content.
*/
function InventoryItemDetailsHeaderGeneralPanelContent() {
const { items } = useInventoryItemDetailsContext();
const { items } = useInventoryItemDetailsHeaderGeneralContext();
return (
<div>
@@ -39,7 +47,15 @@ function InventoryItemDetailsHeaderGeneralPanelContent() {
<FormGroup
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
></FormGroup>
>
<ItemsMultiSelect
items={items}
onItemSelect={(items) => {
const itemsIds = items.map((item) => item.id);
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>

24
client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
View File

@@ -3,8 +3,14 @@ import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import classNames from 'classnames';
import { FormattedMessage as T } from 'components';
import { ItemsMultiSelect, Row, Col, FieldHint } from 'components';
import {
FormattedMessage as T,
ItemsMultiSelect,
Row,
Col,
FieldHint,
} from '../../../components';
import {
momentFormatter,
tansformDateValue,
@@ -64,16 +70,18 @@ function InventoryValuationHeaderGeneralPanelContent() {
<Row>
<Col xs={5}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{({ form: { setFieldValue } }) => (
<FormGroup
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
onItemSelect={(items) => {
const itemsIds = items.map((item) => item.id);
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
)}
</Field>

24
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
View File

@@ -1,18 +1,22 @@
import React from 'react';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import { Row, Col, FormattedMessage as T } from 'components';
import {
Row,
Col,
FormattedMessage as T,
ItemsMultiSelect,
} from '../../../components';
import classNames from 'classnames';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { ItemsMultiSelect } from 'components';
import {
PurchasesByItemsGeneralPanelProvider,
usePurchaseByItemsGeneralPanelContext,
} from './PurchasesByItemsGeneralPanelProvider';
/**
*
*
*/
export default function PurchasesByItemsGeneralPanel() {
return (
@@ -35,16 +39,18 @@ function PurchasesByItemsGeneralPanelContent() {
<Row>
<Col xs={4}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{({ form: { setFieldValue } }) => (
<FormGroup
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
onItemSelect={(items) => {
const itemsIds = items.map((item) => item.id);
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
)}
</Field>

6
client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
View File

@@ -28,13 +28,9 @@ function SalesByItemsHeader({
// #withSalesByItemsActions
toggleSalesByItemsFilterDrawer,
}) {
// Form validation schema.
const validationSchema = Yup.object().shape({
fromDate: Yup.date()
.required()
.label(intl.get('from_date')),
fromDate: Yup.date().required().label(intl.get('from_date')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()

12
client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import classNames from 'classnames';
import { get } from 'lodash';
import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from 'components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -34,22 +35,17 @@ function SalesByItemsHeaderGeneralPanelContent() {
<Row>
<Col xs={4}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
selectedItems={value}
onItemSelect={(itemsIds) => {
onItemSelect={(items) => {
const itemsIds = items.map((item) => item.id);
setFieldValue('itemsIds', itemsIds);
}}
onTagRenderer={(value) => value}
/>
</FormGroup>
)}

24
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js
View File

@@ -4,7 +4,13 @@ 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 {
ContactsMultiSelect,
Row,
Col,
FieldHint,
FormattedMessage as T,
} from '../../../components';
import {
momentFormatter,
tansformDateValue,
@@ -68,15 +74,19 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
<Row>
<Col xs={4}>
<Field name={'vendorsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{({ form: { setFieldValue } }) => (
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
></FormGroup>
>
<ContactsMultiSelect
items={vendors}
onItemSelect={(contacts) => {
const vendorsIds = contacts.map((contact) => contact.id);
setFieldValue('vendorsIds', vendorsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>

10
client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
View File

@@ -9,7 +9,7 @@ import {
Col,
ContactsMultiSelect,
FormattedMessage as T,
} from 'components';
} from '../../../components';
import {
VendorsTransactionsGeneralPanelProvider,
useVendorsTransactionsGeneralPanelContext,
@@ -45,11 +45,11 @@ function VendorsTransactionsHeaderGeneralPanelContent() {
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
items={vendors}
onItemSelect={(vendors) => {
const vendorsIds = vendors.map((customer) => customer.id);
setFieldValue('vendorsIds', vendorsIds);
}}
contacts={vendors}
contactsSelected={value}
/>
</FormGroup>
)}