From 29fbcf1f1cab18038f4160fc53b60e1d874b33b2 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sun, 20 Mar 2022 16:43:49 +0200 Subject: [PATCH] fix(WarehouseTransfer). --- src/components/Forms/FormikObserver.js | 6 +- .../MakeJournal/MakeJournalEntriesTable.js | 1 - .../Accounting/MakeJournal/components.js | 49 +------------- .../Accounting/MakeJournal/utils.js | 5 +- .../PaymentForm/PaymentMadeEntriesTable.js | 2 - .../PaymentMades/PaymentForm/components.js | 42 ------------ .../PaymentReceiveItemsTable.js | 1 - .../PaymentReceiveForm/components.js | 53 +-------------- .../WarehouseTransferEditorField.js | 2 +- .../WarehouseTransferForm.js | 14 ++-- .../WarehouseTransferFormProvider.js | 23 +++++++ .../WarehouseTransferForm/components.js | 20 ++++++ .../WarehouseTransferForm/hooks.ts | 12 +++- .../WarehouseTransferForm/utils.js | 4 +- src/containers/WarehouseTransfers/utils.js | 64 +++++++++---------- src/hooks/query/items.js | 23 +++++++ src/lang/en/index.json | 1 + 17 files changed, 129 insertions(+), 193 deletions(-) create mode 100644 src/containers/WarehouseTransfers/WarehouseTransferForm/components.js diff --git a/src/components/Forms/FormikObserver.js b/src/components/Forms/FormikObserver.js index a93b06864..c9e3a3270 100644 --- a/src/components/Forms/FormikObserver.js +++ b/src/components/Forms/FormikObserver.js @@ -1,7 +1,9 @@ - +import { useFormikContext } from 'formik'; import { useDeepCompareEffect } from 'hooks/utils'; -export function FormikObserver({ onChange, values }) { +export function FormikObserver({ onChange }) { + const { values } = useFormikContext(); + useDeepCompareEffect(() => { onChange(values); }, [values]); diff --git a/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js b/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js index e34c299f9..2069ffdbc 100644 --- a/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js +++ b/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js @@ -63,7 +63,6 @@ export default function MakeJournalEntriesTable({ data={entries} sticky={true} totalRow={true} - footer={true} payload={{ accounts, errors: error, diff --git a/src/containers/Accounting/MakeJournal/components.js b/src/containers/Accounting/MakeJournal/components.js index c82383426..4354ef57d 100644 --- a/src/containers/Accounting/MakeJournal/components.js +++ b/src/containers/Accounting/MakeJournal/components.js @@ -1,8 +1,7 @@ import React from 'react'; import { Intent, Position, Button, Tooltip } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'components'; -import { Icon, Money, Hint } from 'components'; import intl from 'react-intl-universal'; +import { Icon, Hint, FormattedMessage as T } from 'components'; import { AccountsListFieldCell, MoneyFieldCell, @@ -10,7 +9,6 @@ import { ContactsListFieldCell, BranchesListFieldCell, } from 'components/DataTableCells'; -import { safeSumBy } from 'utils'; import { useFeatureCan } from 'hooks/state'; import { Features } from 'common'; @@ -43,38 +41,6 @@ export function DebitHeaderCell({ payload: { currencyCode } }) { return intl.get('debit_currency', { currency: currencyCode }); } -/** - * Account footer cell. - */ -function AccountFooterCell({ payload: { currencyCode } }) { - return {intl.get('total_currency', { currency: currencyCode })}; -} - -/** - * Total credit table footer cell. - */ -function TotalCreditFooterCell({ payload: { currencyCode }, rows }) { - const credit = safeSumBy(rows, 'original.credit'); - - return ( - - - - ); -} - -/** - * Total debit table footer cell. - */ -function TotalDebitFooterCell({ payload: { currencyCode }, rows }) { - const debit = safeSumBy(rows, 'original.debit'); - - return ( - - - - ); -} /** * Actions cell renderer. */ @@ -110,22 +76,11 @@ export const useJournalTableEntriesColumns = () => { return React.useMemo( () => [ - { - Header: '#', - accessor: 'index', - Cell: ({ row: { index } }) => {index + 1}, - className: 'index', - width: 40, - disableResizing: true, - disableSortBy: true, - sticky: 'left', - }, { Header: intl.get('account'), id: 'account_id', accessor: 'account_id', Cell: AccountsListFieldCell, - Footer: AccountFooterCell, className: 'account', disableSortBy: true, width: 160, @@ -135,7 +90,6 @@ export const useJournalTableEntriesColumns = () => { Header: CreditHeaderCell, accessor: 'credit', Cell: MoneyFieldCell, - Footer: TotalCreditFooterCell, className: 'credit', disableSortBy: true, width: 100, @@ -144,7 +98,6 @@ export const useJournalTableEntriesColumns = () => { Header: DebitHeaderCell, accessor: 'debit', Cell: MoneyFieldCell, - Footer: TotalDebitFooterCell, className: 'debit', disableSortBy: true, width: 100, diff --git a/src/containers/Accounting/MakeJournal/utils.js b/src/containers/Accounting/MakeJournal/utils.js index 6ad3ff87f..4fb625f80 100644 --- a/src/containers/Accounting/MakeJournal/utils.js +++ b/src/containers/Accounting/MakeJournal/utils.js @@ -27,7 +27,8 @@ const ERROR = { ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT', }; -export const MIN_LINES_NUMBER = 4; +export const MIN_LINES_NUMBER = 1; +export const DEFAULT_LINES_NUMBER = 1; export const defaultEntry = { account_id: '', @@ -49,7 +50,7 @@ export const defaultManualJournal = { publish: '', branch_id: '', exchange_rate: 1, - entries: [...repeatValue(defaultEntry, 4)], + entries: [...repeatValue(defaultEntry, DEFAULT_LINES_NUMBER)], }; // Transform to edit form. diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js index e1d961402..cdf4f0ef8 100644 --- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js +++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js @@ -40,7 +40,6 @@ export default function PaymentMadeEntriesTable({ }, [onUpdateData, entries], ); - // Detarmines the right no results message before selecting vendor and aftering // selecting vendor id. const noResultsMessage = vendor_id ? ( @@ -67,7 +66,6 @@ export default function PaymentMadeEntriesTable({ currencyCode, }} noResults={noResultsMessage} - footer={true} /> ); diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/components.js b/src/containers/Purchases/PaymentMades/PaymentForm/components.js index 230c97a76..bcfd943e4 100644 --- a/src/containers/Purchases/PaymentMades/PaymentForm/components.js +++ b/src/containers/Purchases/PaymentMades/PaymentForm/components.js @@ -2,43 +2,15 @@ import React from 'react'; import intl from 'react-intl-universal'; import moment from 'moment'; import { Money } from 'components'; -import { safeSumBy, formattedAmount } from 'utils'; import { MoneyFieldCell } from 'components/DataTableCells'; function BillNumberAccessor(row) { return row?.bill_no ? row?.bill_no : '-'; } -function IndexTableCell({ row: { index } }) { - return {index + 1}; -} - function BillDateCell({ value }) { return moment(value).format('YYYY MMM DD'); } -/** - * Balance footer cell. - */ -function AmountFooterCell({ payload: { currencyCode }, rows }) { - const total = safeSumBy(rows, 'original.amount'); - return {formattedAmount(total, currencyCode)}; -} - -/** - * Due amount footer cell. - */ -function DueAmountFooterCell({ payload: { currencyCode }, rows }) { - const totalDueAmount = safeSumBy(rows, 'original.due_amount'); - return {formattedAmount(totalDueAmount, currencyCode)}; -} - -/** - * Payment amount footer cell. - */ -function PaymentAmountFooterCell({ payload: { currencyCode }, rows }) { - const totalPaymentAmount = safeSumBy(rows, 'original.payment_amount'); - return {formattedAmount(totalPaymentAmount, currencyCode)}; -} /** * Mobey table cell. @@ -51,19 +23,8 @@ function MoneyTableCell({ row: { original }, value }) { * Payment made entries table columns */ export function usePaymentMadeEntriesTableColumns() { - - return React.useMemo( () => [ - { - Header: '#', - accessor: 'index', - Cell: IndexTableCell, - width: 40, - disableResizing: true, - disableSortBy: true, - className: 'index', - }, { Header: intl.get('Date'), id: 'bill_date', @@ -83,7 +44,6 @@ export function usePaymentMadeEntriesTableColumns() { Header: intl.get('bill_amount'), accessor: 'amount', Cell: MoneyTableCell, - Footer: AmountFooterCell, disableSortBy: true, className: 'amount', }, @@ -91,7 +51,6 @@ export function usePaymentMadeEntriesTableColumns() { Header: intl.get('amount_due'), accessor: 'due_amount', Cell: MoneyTableCell, - Footer: DueAmountFooterCell, disableSortBy: true, className: 'due_amount', }, @@ -99,7 +58,6 @@ export function usePaymentMadeEntriesTableColumns() { Header: intl.get('payment_amount'), accessor: 'payment_amount', Cell: MoneyFieldCell, - Footer: PaymentAmountFooterCell, disableSortBy: true, className: 'payment_amount', }, diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js index c01012125..c79c633ad 100644 --- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js +++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js @@ -62,7 +62,6 @@ export default function PaymentReceiveItemsTable({ currencyCode, }} noResults={noResultsMessage} - footer={true} /> ); diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js index 8941d6467..235af05e5 100644 --- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js +++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js @@ -4,7 +4,6 @@ import intl from 'react-intl-universal'; import { Money } from 'components'; import { MoneyFieldCell } from 'components/DataTableCells'; -import { safeSumBy, formattedAmount } from 'utils'; /** * Invoice date cell. @@ -13,13 +12,6 @@ function InvoiceDateCell({ value }) { return {moment(value).format('YYYY MMM DD')}; } -/** - * Index table cell. - */ -function IndexCell({ row: { index } }) { - return {index + 1}; -} - /** * Invoice number table cell accessor. */ @@ -27,30 +19,6 @@ function InvNumberCellAccessor(row) { return row?.invoice_no ? `#${row?.invoice_no || ''}` : '-'; } -/** - * Balance footer cell. - */ -function BalanceFooterCell({ payload: { currencyCode }, rows }) { - const total = safeSumBy(rows, 'original.amount'); - return {formattedAmount(total, currencyCode)}; -} - -/** - * Due amount footer cell. - */ -function DueAmountFooterCell({ payload: { currencyCode }, rows }) { - const totalDueAmount = safeSumBy(rows, 'original.due_amount'); - return {formattedAmount(totalDueAmount, currencyCode)}; -} - -/** - * Payment amount footer cell. - */ -function PaymentAmountFooterCell({ payload: { currencyCode }, rows }) { - const totalPaymentAmount = safeSumBy(rows, 'original.payment_amount'); - return {formattedAmount(totalPaymentAmount, currencyCode)}; -} - /** * Mobey table cell. */ @@ -58,33 +26,17 @@ function MoneyTableCell({ row: { original }, value }) { return ; } -function DateFooterCell() { - return intl.get('total') -} - /** * Retrieve payment receive form entries columns. */ export const usePaymentReceiveEntriesColumns = () => { - - return React.useMemo( () => [ { - Header: '#', - accessor: 'index', - Cell: IndexCell, - width: 40, - disableResizing: true, - disableSortBy: true, - className: 'index', - }, - { - Header: intl.get('Date'), + Header: 'Invoice date', id: 'invoice_date', accessor: 'invoice_date', Cell: InvoiceDateCell, - Footer: DateFooterCell, disableSortBy: true, disableResizing: true, width: 250, @@ -99,7 +51,6 @@ export const usePaymentReceiveEntriesColumns = () => { { Header: intl.get('invoice_amount'), accessor: 'amount', - Footer: BalanceFooterCell, Cell: MoneyTableCell, disableSortBy: true, width: 100, @@ -108,7 +59,6 @@ export const usePaymentReceiveEntriesColumns = () => { { Header: intl.get('amount_due'), accessor: 'due_amount', - Footer: DueAmountFooterCell, Cell: MoneyTableCell, disableSortBy: true, width: 150, @@ -118,7 +68,6 @@ export const usePaymentReceiveEntriesColumns = () => { Header: intl.get('payment_amount'), accessor: 'payment_amount', Cell: MoneyFieldCell, - Footer: PaymentAmountFooterCell, disableSortBy: true, width: 150, className: 'payment_amount', diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.js index 8a69fda0c..8f24bbcee 100644 --- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.js +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.js @@ -37,7 +37,7 @@ export default function WarehouseTransferEditorField() { defaultEntry={defaultWarehouseTransferEntry} errors={error} sourceWarehouseId={values.from_warehouse_id} - distentionWarehouseId={value.to_warehouse_id} + destinationWarehouseId={values.to_warehouse_id} /> )} diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js index 8b26dae0d..b0de6e9dd 100644 --- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js @@ -20,9 +20,10 @@ import WarehouseTransferFormDialog from './WarehouseTransferFormDialog'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withSettings from 'containers/Settings/withSettings'; -import { AppToaster } from 'components'; +import { AppToaster, } from 'components'; import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider'; import { compose, orderingLinesIndexes, transactionNumber } from 'utils'; +import { WarehouseTransferObserveItemsCost } from './components'; import { defaultWarehouseTransfer, transformValueToRequest, @@ -37,13 +38,14 @@ function WarehouseTransferForm({ warehouseTransferIncrementMode, }) { const history = useHistory(); - + const { isNewMode, warehouseTransfer, createWarehouseTransferMutate, editWarehouseTransferMutate, submitPayload, + setItemCostQuery, } = useWarehouseTransferFormContext(); // WarehouseTransfer number. @@ -118,7 +120,7 @@ function WarehouseTransferForm({ .catch(onError); } }; - + return (
+
); } -export default compose(withDashboardActions, +export default compose( + withDashboardActions, withSettings(({ warehouseTransferSettings }) => ({ warehouseTransferNextNumber: warehouseTransferSettings?.nextNumber, warehouseTransferNumberPrefix: warehouseTransferSettings?.numberPrefix, warehouseTransferIncrementMode: warehouseTransferSettings?.autoIncrement, })), - )(WarehouseTransferForm); +)(WarehouseTransferForm); diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js index 8bd24b3fb..57eeb82aa 100644 --- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js @@ -6,10 +6,12 @@ import { useWarehouseTransfer, useCreateWarehouseTransfer, useEditWarehouseTransfer, + useItemInventoryCost, } from 'hooks/query'; import { Features } from 'common'; import { useFeatureCan } from 'hooks/state'; import { ITEMS_FILTER_ROLES_QUERY } from './utils.js'; +import { isEmpty } from 'lodash'; const WarehouseFormContext = React.createContext(); @@ -44,6 +46,23 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) { isLoading: isWarehouesLoading, } = useWarehouses({}, { enabled: isWarehouseFeatureCan }); + // Inventory items cost query. + const [itemCostQuery, setItemCostQuery] = React.useState(null); + + // Detarmines whether the inventory items cost query is enabled. + const isItemsCostQueryEnabled = + !isEmpty(itemCostQuery?.date) && !isEmpty(itemCostQuery?.itemsIds); + + // Retrieves the inventory item cost. + const { data: inventoryItemsCost } = useItemInventoryCost( + { + date: itemCostQuery?.date, + items_ids: itemCostQuery?.itemsIds, + }, + { + enabled: isItemsCostQueryEnabled, + }, + ); // Create and edit warehouse mutations. const { mutateAsync: createWarehouseTransferMutate } = useCreateWarehouseTransfer(); @@ -70,6 +89,10 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) { setSubmitPayload, createWarehouseTransferMutate, editWarehouseTransferMutate, + + inventoryItemsCost, + itemCostQuery, + setItemCostQuery, }; return ( diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/components.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/components.js new file mode 100644 index 000000000..1f4bb7f82 --- /dev/null +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/components.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { FormikObserver } from 'components'; +import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider'; + +export function WarehouseTransferObserveItemsCost() { + const { setItemCostQuery } = useWarehouseTransferFormContext(); + + // Handle the form change. + const handleFormChange = (values) => { + const itemsIds = values.entries + .filter((e) => e.item_id) + .map((e) => e.item_id); + + setItemCostQuery({ + date: values.date, + itemsIds, + }); + }; + return ; +} diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/hooks.ts b/src/containers/WarehouseTransfers/WarehouseTransferForm/hooks.ts index ef462a7c2..9659a8a33 100644 --- a/src/containers/WarehouseTransfers/WarehouseTransferForm/hooks.ts +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/hooks.ts @@ -65,10 +65,10 @@ export const useFetchItemWarehouseQuantity = () => { return isItemSuccess ? { ...tableRow, - warehouses: [], + warehouses: transformWarehousesQuantity(item), } : null; - }, [isItemSuccess, tableRow]); + }, [isItemSuccess, item, tableRow]); // Reset the table row. const resetTableRow = React.useCallback(() => { @@ -84,3 +84,11 @@ export const useFetchItemWarehouseQuantity = () => { newRowMeta, }; }; + +const transformWarehousesQuantity = (item) => { + return item.item_warehouses.map((warehouse) => ({ + warehouseId: warehouse.warehouse_id, + quantityOnHand: warehouse.quantity_on_hand, + quantityOnHandFormatted: warehouse.quantity_on_hand_formatted, + })); +}; diff --git a/src/containers/WarehouseTransfers/WarehouseTransferForm/utils.js b/src/containers/WarehouseTransfers/WarehouseTransferForm/utils.js index 015ed1976..37a58b62c 100644 --- a/src/containers/WarehouseTransfers/WarehouseTransferForm/utils.js +++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/utils.js @@ -22,14 +22,12 @@ import { updateMinEntriesLines, updateRemoveLineByIndex, } from 'utils'; - -// import { defaultFastFieldShouldUpdate } from 'utils'; import { updateItemsEntriesTotal, ensureEntriesHaveEmptyLine, } from 'containers/Entries/utils'; -export const MIN_LINES_NUMBER = 4; +export const MIN_LINES_NUMBER = 1; // Default warehouse transfer entry. export const defaultWarehouseTransferEntry = { diff --git a/src/containers/WarehouseTransfers/utils.js b/src/containers/WarehouseTransfers/utils.js index a88d1f8bd..e64fe3d41 100644 --- a/src/containers/WarehouseTransfers/utils.js +++ b/src/containers/WarehouseTransfers/utils.js @@ -1,15 +1,10 @@ import React from 'react'; import intl from 'react-intl-universal'; import { find, get } from 'lodash'; -import { Tooltip, Button, Intent, Position } from '@blueprintjs/core'; +import { Button, Menu, MenuItem } from '@blueprintjs/core'; +import { Popover2 } from '@blueprintjs/popover2'; -import { - MoneyFieldCell, - FormatDateCell, - Icon, - AppToaster, - T, -} from 'components'; +import { MoneyFieldCell, Icon, T } from 'components'; import { InputGroupCell, ItemsListCell } from 'components/DataTableCells'; // Index table cell. @@ -31,37 +26,44 @@ export function ActionsCellRenderer({ removeRow(index); }; + const exampleMenu = ( + + + + ); + return ( - } position={Position.LEFT}> +