From 2f3659445931b06698fc1cbcc90ecf0d58659ae4 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Mon, 21 Mar 2022 13:14:44 +0200 Subject: [PATCH] fix(DataTable): cells type. --- src/common/cellTypes.js | 7 ++++ src/common/index.js | 1 + .../DataTableCells/AccountsListFieldCell.js | 8 ++-- .../DataTableCells/BranchesListFieldCell.js | 4 ++ .../DataTableCells/CheckBoxFieldCell.js | 3 ++ .../DataTableCells/ContactsListFieldCell.js | 6 ++- .../DataTableCells/InputGroupCell.js | 3 ++ .../DataTableCells/ItemsListCell.js | 3 ++ .../DataTableCells/MoneyFieldCell.js | 4 ++ .../DataTableCells/NumericInputCell.js | 6 ++- .../PaymentReceiveListFieldCell.js | 5 ++- .../DataTableCells/PercentFieldCell.js | 4 ++ .../DataTableCells/SwitchFieldCell.js | 5 ++- src/components/DataTableCells/TextAreaCell.js | 3 ++ src/components/Datatable/DatatableEditable.js | 7 +++- src/components/Datatable/TableCell.js | 10 +++-- .../TableIndeterminateCheckboxRow.js | 4 +- .../Accounting/MakeJournal/components.js | 34 ++++++++++------- src/containers/Entries/components.js | 3 +- .../Expenses/ExpenseForm/components.js | 38 +++++++++++-------- .../PaymentMades/PaymentForm/components.js | 13 +++---- 21 files changed, 120 insertions(+), 51 deletions(-) create mode 100644 src/common/cellTypes.js diff --git a/src/common/cellTypes.js b/src/common/cellTypes.js new file mode 100644 index 000000000..4c2299a59 --- /dev/null +++ b/src/common/cellTypes.js @@ -0,0 +1,7 @@ + + +export const CellType = { + Text: 'text', + Field: 'field', + Button: 'button' +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 2dc45dc41..ffd40825e 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,4 +1,5 @@ export * from './TableStyle'; export * from './features'; +export * from './cellTypes'; export const Align = { Left: 'left', Right: 'right', Center: 'center' }; diff --git a/src/components/DataTableCells/AccountsListFieldCell.js b/src/components/DataTableCells/AccountsListFieldCell.js index 690e64b24..cc253e6c7 100644 --- a/src/components/DataTableCells/AccountsListFieldCell.js +++ b/src/components/DataTableCells/AccountsListFieldCell.js @@ -1,13 +1,12 @@ import React, { useRef, useCallback, useMemo } from 'react'; import classNames from 'classnames'; -import { useCellAutoFocus } from 'hooks'; +import { FormGroup, Classes, Intent } from '@blueprintjs/core'; import intl from 'react-intl-universal'; +import { CellType } from 'common'; +import { useCellAutoFocus } from 'hooks'; import AccountsSuggestField from 'components/AccountsSuggestField'; -// import AccountsSelectList from 'components/AccountsSelectList'; -import { FormGroup, Classes, Intent } from '@blueprintjs/core'; - /** * Account cell renderer. */ @@ -74,3 +73,4 @@ export default function AccountCellRenderer({ ); } +AccountCellRenderer.cellType = CellType.Field; diff --git a/src/components/DataTableCells/BranchesListFieldCell.js b/src/components/DataTableCells/BranchesListFieldCell.js index 263005c10..4c49a5701 100644 --- a/src/components/DataTableCells/BranchesListFieldCell.js +++ b/src/components/DataTableCells/BranchesListFieldCell.js @@ -1,6 +1,8 @@ import React from 'react'; import { FormGroup, Intent, Classes } from '@blueprintjs/core'; import classNames from 'classnames'; + +import { CellType } from 'common'; import BranchSuggestField from '../BranchSuggestField'; /** @@ -38,3 +40,5 @@ export default function BranchesListFieldCell({ ); } + +BranchesListFieldCell.cellType = CellType.Field; \ No newline at end of file diff --git a/src/components/DataTableCells/CheckBoxFieldCell.js b/src/components/DataTableCells/CheckBoxFieldCell.js index 7391a3a1d..77b0d7e50 100644 --- a/src/components/DataTableCells/CheckBoxFieldCell.js +++ b/src/components/DataTableCells/CheckBoxFieldCell.js @@ -2,6 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { get } from 'lodash'; import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core'; +import { CellType } from 'common'; const CheckboxEditableCell = ({ row: { index, original }, @@ -45,4 +46,6 @@ const CheckboxEditableCell = ({ ); }; +CheckboxEditableCell.cellType = CellType.Field; + export default CheckboxEditableCell; diff --git a/src/components/DataTableCells/ContactsListFieldCell.js b/src/components/DataTableCells/ContactsListFieldCell.js index 468764d62..41ee64805 100644 --- a/src/components/DataTableCells/ContactsListFieldCell.js +++ b/src/components/DataTableCells/ContactsListFieldCell.js @@ -1,9 +1,9 @@ import React, { useCallback } from 'react'; import { FormGroup, Intent, Classes } from '@blueprintjs/core'; import classNames from 'classnames'; -import { ContactSelecetList } from 'components'; -import ContactsSuggestField from 'components/ContactsSuggestField'; +import { CellType } from 'common'; +import ContactsSuggestField from 'components/ContactsSuggestField'; export default function ContactsListCellRenderer({ column: { id }, row: { index, original }, @@ -37,3 +37,5 @@ export default function ContactsListCellRenderer({ ); } + +ContactsListCellRenderer.cellType = CellType.Field; diff --git a/src/components/DataTableCells/InputGroupCell.js b/src/components/DataTableCells/InputGroupCell.js index c34c89291..9eb2d597d 100644 --- a/src/components/DataTableCells/InputGroupCell.js +++ b/src/components/DataTableCells/InputGroupCell.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import classNames from 'classnames'; import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core'; +import { CellType } from 'common'; const InputEditableCell = ({ row: { index }, @@ -37,4 +38,6 @@ const InputEditableCell = ({ ); }; +InputEditableCell.cellType = CellType.Field; + export default InputEditableCell; diff --git a/src/components/DataTableCells/ItemsListCell.js b/src/components/DataTableCells/ItemsListCell.js index ed6c024c6..97385c8f5 100644 --- a/src/components/DataTableCells/ItemsListCell.js +++ b/src/components/DataTableCells/ItemsListCell.js @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { FormGroup, Classes, Intent } from '@blueprintjs/core'; import intl from 'react-intl-universal'; +import { CellType } from 'common'; import ItemsSuggestField from 'components/ItemsSuggestField'; import { useCellAutoFocus } from 'hooks'; @@ -54,3 +55,5 @@ export default function ItemsListCell({ ); } + +ItemsListCell.cellType = CellType.Field; diff --git a/src/components/DataTableCells/MoneyFieldCell.js b/src/components/DataTableCells/MoneyFieldCell.js index 710840de3..d8a284680 100644 --- a/src/components/DataTableCells/MoneyFieldCell.js +++ b/src/components/DataTableCells/MoneyFieldCell.js @@ -1,7 +1,9 @@ import React, { useCallback, useState, useEffect } from 'react'; import { FormGroup, Intent } from '@blueprintjs/core'; + import { MoneyInputGroup } from 'components'; import { CLASSES } from 'common/classes'; +import { CellType } from 'common'; // Input form cell renderer. const MoneyFieldCellRenderer = ({ @@ -48,4 +50,6 @@ const MoneyFieldCellRenderer = ({ ); }; +MoneyFieldCellRenderer.cellType = CellType.Field; + export default MoneyFieldCellRenderer; diff --git a/src/components/DataTableCells/NumericInputCell.js b/src/components/DataTableCells/NumericInputCell.js index eaf933fb8..dfa7e7182 100644 --- a/src/components/DataTableCells/NumericInputCell.js +++ b/src/components/DataTableCells/NumericInputCell.js @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; import { FormGroup, NumericInput, Intent } from '@blueprintjs/core'; import classNames from 'classnames'; + +import { CellType } from 'common'; import { CLASSES } from 'common/classes'; /** @@ -36,8 +38,10 @@ export default function NumericInputCell({ onValueChange={handleValueChange} onBlur={onBlur} fill={true} - buttonPosition={"none"} + buttonPosition={'none'} /> ); } + +NumericInputCell.cellType = CellType.Field; \ No newline at end of file diff --git a/src/components/DataTableCells/PaymentReceiveListFieldCell.js b/src/components/DataTableCells/PaymentReceiveListFieldCell.js index 0b37e05f7..909861ea7 100644 --- a/src/components/DataTableCells/PaymentReceiveListFieldCell.js +++ b/src/components/DataTableCells/PaymentReceiveListFieldCell.js @@ -1,8 +1,9 @@ import React, { useCallback } from 'react'; -import PaymentReceiveListField from 'components/PaymentReceiveListField'; import classNames from 'classnames'; import { FormGroup, Classes, Intent } from '@blueprintjs/core'; +import PaymentReceiveListField from 'components/PaymentReceiveListField'; +import { CellType } from 'common'; function PaymentReceiveListFieldCell({ column: { id }, row: { index }, @@ -32,4 +33,6 @@ function PaymentReceiveListFieldCell({ ); } +PaymentReceiveListFieldCell.cellType = CellType.Field; + export default PaymentReceiveListFieldCell; diff --git a/src/components/DataTableCells/PercentFieldCell.js b/src/components/DataTableCells/PercentFieldCell.js index 5638aa4b3..5d0c70625 100644 --- a/src/components/DataTableCells/PercentFieldCell.js +++ b/src/components/DataTableCells/PercentFieldCell.js @@ -1,6 +1,8 @@ import React, { useCallback, useState, useEffect } from 'react'; import { FormGroup, Intent } from '@blueprintjs/core'; + import { MoneyInputGroup } from 'components'; +import { CellType } from 'common'; const PercentFieldCell = ({ cell: { value: initialValue }, @@ -38,4 +40,6 @@ const PercentFieldCell = ({ ); }; +PercentFieldCell.cellType = CellType.Field; + export default PercentFieldCell; diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js index a25e96ae4..876f70474 100644 --- a/src/components/DataTableCells/SwitchFieldCell.js +++ b/src/components/DataTableCells/SwitchFieldCell.js @@ -2,6 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core'; +import { CellType } from 'common'; import { safeInvoke } from 'utils'; /** @@ -48,4 +49,6 @@ const SwitchEditableCell = ({ ); }; -export default SwitchEditableCell; \ No newline at end of file +SwitchEditableCell.cellType = CellType.Field; + +export default SwitchEditableCell; diff --git a/src/components/DataTableCells/TextAreaCell.js b/src/components/DataTableCells/TextAreaCell.js index c8ff97a0c..f36b83981 100644 --- a/src/components/DataTableCells/TextAreaCell.js +++ b/src/components/DataTableCells/TextAreaCell.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import classNames from 'classnames'; import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core'; +import { CellType } from 'common'; const TextAreaEditableCell = ({ row: { index }, @@ -39,4 +40,6 @@ const TextAreaEditableCell = ({ ); }; +TextAreaEditableCell.cellType = CellType.Field; + export default TextAreaEditableCell; diff --git a/src/components/Datatable/DatatableEditable.js b/src/components/Datatable/DatatableEditable.js index abd43736f..c09d13435 100644 --- a/src/components/Datatable/DatatableEditable.js +++ b/src/components/Datatable/DatatableEditable.js @@ -54,10 +54,15 @@ const DatatableEditableRoot = styled.div` } .tbody { .tr .td { - padding: 2px; border-bottom: 0; border-bottom: 1px solid #d8d8d8; min-height: 38px; + padding: 4px 14px; + + &.td-field-type, + &.td-button-type{ + padding: 2px; + } } .tr:last-of-type .td { border-bottom: 0; diff --git a/src/components/Datatable/TableCell.js b/src/components/Datatable/TableCell.js index 87c903ef9..62ec345c5 100644 --- a/src/components/Datatable/TableCell.js +++ b/src/components/Datatable/TableCell.js @@ -1,7 +1,8 @@ import React, { useContext } from 'react'; import classNames from 'classnames'; -import { If } from 'components'; -import { Skeleton } from 'components'; +import { camelCase} from 'lodash'; + +import { If, Skeleton } from 'components'; import { useAppIntlContext } from 'components/AppIntlProvider'; import TableContext from './TableContext'; import { saveInvoke, ignoreEventFromSelectors } from 'utils'; @@ -56,7 +57,8 @@ export default function TableCell({ cell, row, index }) { return; } saveInvoke(onCellClick, cell, event); - }; + }; + const cellType = camelCase(cell.column.Cell.cellType) || 'text'; return (
@@ -8,3 +8,5 @@ export default function TableIndeterminateCheckboxRow({ row }) {
); } + +TableIndeterminateCheckboxRow.cellType = CellType.Field; diff --git a/src/containers/Accounting/MakeJournal/components.js b/src/containers/Accounting/MakeJournal/components.js index 3e8abee9a..0a4d588a3 100644 --- a/src/containers/Accounting/MakeJournal/components.js +++ b/src/containers/Accounting/MakeJournal/components.js @@ -1,7 +1,10 @@ import React from 'react'; -import { Intent, Position, Button, Tooltip } from '@blueprintjs/core'; +import { Menu, MenuItem, Position, Button } from '@blueprintjs/core'; +import { Popover2 } from '@blueprintjs/popover2'; +import { useFormikContext } from 'formik'; import intl from 'react-intl-universal'; -import { Icon, Hint, FormattedMessage as T } from 'components'; + +import { ExchangeRateInputGroup, Icon, Hint, FormattedMessage as T } from 'components'; import { AccountsListFieldCell, MoneyFieldCell, @@ -9,12 +12,12 @@ import { ContactsListFieldCell, BranchesListFieldCell, } from 'components/DataTableCells'; + +import { CellType, Features } from 'common'; + import { useFeatureCan } from 'hooks/state'; -import { useFormikContext } from 'formik'; -import { ExchangeRateInputGroup } from 'components'; import { useCurrentOrganization } from 'hooks/state'; import { useJournalIsForeign } from './utils'; -import { Features } from 'common'; /** * Contact header cell. @@ -55,22 +58,26 @@ export const ActionsCellRenderer = ({ data, payload, }) => { - const onClickRemoveRole = () => { + const handleClickRemoveRole = () => { payload.removeRow(index); }; + const exampleMenu = ( + + + + ); return ( - } position={Position.LEFT}> +