From 8a830a0a97a1ecfbf5f249365cda573700785220 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 27 Oct 2020 19:39:15 +0200 Subject: [PATCH] Fix EntriesItemTable & FloatingActions --- ...matesListFieldCell.js => ItemsListCell.js} | 24 +++---- client/src/components/DataTableCells/index.js | 6 +- client/src/components/EstimateListField.js | 72 ------------------- client/src/components/ItemListField.js | 69 ++++++++++++++++++ .../Purchases/Bill/BillFloatingActions.js | 54 ++++++++++++++ .../src/containers/Purchases/Bill/BillForm.js | 69 ++++-------------- .../Purchases/Bill/BillFormFooter.js | 68 ++++++------------ ...ooter.js => PaymentMadeFloatingActions.js} | 0 .../Purchases/PaymentMades/PaymentMadeForm.js | 4 +- .../Sales/Estimate/EntriesItemsTable.js | 11 +-- ...rmFooter.js => EstimateFloatingActions.js} | 2 +- .../containers/Sales/Estimate/EstimateForm.js | 8 +-- ...ormFooter.js => InvoiceFloatingActions.js} | 2 +- .../containers/Sales/Invoice/InvoiceForm.js | 8 +-- ...er.js => PaymentReceiveFloatingActions.js} | 0 .../PaymentReceive/PaymentReceiveForm.js | 4 +- .../PaymentReceiveItemsTable.js | 2 +- .../containers/Sales/Receipt/ReceiptForm.js | 8 +-- ...er.js => ReceiptReceiveFloatingActions.js} | 2 +- client/src/lang/en/index.js | 2 +- 20 files changed, 200 insertions(+), 215 deletions(-) rename client/src/components/DataTableCells/{EstimatesListFieldCell.js => ItemsListCell.js} (50%) delete mode 100644 client/src/components/EstimateListField.js create mode 100644 client/src/components/ItemListField.js create mode 100644 client/src/containers/Purchases/Bill/BillFloatingActions.js rename client/src/containers/Purchases/PaymentMades/{PaymentMadeFormFooter.js => PaymentMadeFloatingActions.js} (100%) rename client/src/containers/Sales/Estimate/{EstimateFormFooter.js => EstimateFloatingActions.js} (96%) rename client/src/containers/Sales/Invoice/{InvoiceFormFooter.js => InvoiceFloatingActions.js} (95%) rename client/src/containers/Sales/PaymentReceive/{PaymentReceiveFormFooter.js => PaymentReceiveFloatingActions.js} (100%) rename client/src/containers/Sales/Receipt/{ReceiptFormFooter.js => ReceiptReceiveFloatingActions.js} (95%) diff --git a/client/src/components/DataTableCells/EstimatesListFieldCell.js b/client/src/components/DataTableCells/ItemsListCell.js similarity index 50% rename from client/src/components/DataTableCells/EstimatesListFieldCell.js rename to client/src/components/DataTableCells/ItemsListCell.js index 1923028c0..3923bd8da 100644 --- a/client/src/components/DataTableCells/EstimatesListFieldCell.js +++ b/client/src/components/DataTableCells/ItemsListCell.js @@ -1,15 +1,16 @@ import React, { useCallback, useMemo } from 'react'; -import EstimateListField from 'components/EstimateListField'; +import ItemListField from 'components/ItemListField'; import classNames from 'classnames'; import { FormGroup, Classes, Intent } from '@blueprintjs/core'; -function EstimatesListFieldCell({ + +function ItemsListCell({ column: { id }, row: { index }, cell: { value: initialValue }, - payload: { products, updateData, errors }, + payload: { items, updateData, errors }, }) { - const handleProductSelected = useCallback( + const handleItemSelected = useCallback( (item) => { updateData(index, id, item.id); }, @@ -21,18 +22,15 @@ function EstimatesListFieldCell({ return ( - ); } -export default EstimatesListFieldCell; +export default ItemsListCell; diff --git a/client/src/components/DataTableCells/index.js b/client/src/components/DataTableCells/index.js index 16bf06425..1c130ae2f 100644 --- a/client/src/components/DataTableCells/index.js +++ b/client/src/components/DataTableCells/index.js @@ -2,15 +2,15 @@ import AccountsListFieldCell from './AccountsListFieldCell'; import MoneyFieldCell from './MoneyFieldCell'; import InputGroupCell from './InputGroupCell'; import ContactsListFieldCell from './ContactsListFieldCell'; -import EstimatesListFieldCell from './EstimatesListFieldCell'; +import ItemsListCell from './ItemsListCell'; import PercentFieldCell from './PercentFieldCell'; -import { DivFieldCell,EmptyDiv } from './DivFieldCell'; +import { DivFieldCell, EmptyDiv } from './DivFieldCell'; export { AccountsListFieldCell, MoneyFieldCell, InputGroupCell, ContactsListFieldCell, - EstimatesListFieldCell, + ItemsListCell, PercentFieldCell, DivFieldCell, EmptyDiv, diff --git a/client/src/components/EstimateListField.js b/client/src/components/EstimateListField.js deleted file mode 100644 index affd29e4b..000000000 --- a/client/src/components/EstimateListField.js +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useCallback, useMemo, useEffect, useState } from 'react'; -import { MenuItem } from '@blueprintjs/core'; -import ListSelect from 'components/ListSelect'; - -function EstimateListField({ - products, - initialProductId, - selectedProductId, - defautlSelectText = 'Click to select an item.', - onProductSelected, -}) { - const initialProduct = useMemo( - () => products.find((a) => a.id === initialProductId), - [initialProductId], - ); - - const [selectedProduct, setSelectedProduct] = useState( - initialProduct || null, - ); - - useEffect(() => { - if (typeof selectedProductId !== 'undefined') { - const product = selectedProductId - ? products.find((a) => a.id === selectedProductId) - : null; - setSelectedProduct(product); - } - }, [selectedProductId, products, setSelectedProduct]); - - const onProductSelect = useCallback( - (product) => { - setSelectedProduct({ ...product }); - onProductSelected && onProductSelected(product); - }, - [onProductSelected], - ); - - const productRenderer = useCallback( - (item, { handleClick }) => ( - - ), - [], - ); - - const filterProduct = useCallback((query, product, _index, exactMatch) => { - const normalizedTitle = product.name.toLowerCase(); - const normalizedQuery = query.toLowerCase(); - - if (exactMatch) { - return normalizedTitle === normalizedQuery; - } else { - return normalizedTitle.indexOf(normalizedQuery) >= 0; - } - }, []); - - return ( - } - itemRenderer={productRenderer} - itemPredicate={filterProduct} - popoverProps={{ minimal: true }} - onItemSelect={onProductSelect} - selectedItem={`${selectedProductId}`} - selectedItemProp={'id'} - labelProp={'name'} - defaultText={selectedProduct ? selectedProduct.name : defautlSelectText} - /> - ); -} - -export default EstimateListField; diff --git a/client/src/components/ItemListField.js b/client/src/components/ItemListField.js new file mode 100644 index 000000000..46510cb86 --- /dev/null +++ b/client/src/components/ItemListField.js @@ -0,0 +1,69 @@ +import React, { useCallback, useMemo, useEffect, useState } from 'react'; +import { MenuItem } from '@blueprintjs/core'; +import ListSelect from 'components/ListSelect'; + +function ItemListField({ + items, + initialItemId, + selectedItemId, + defautlSelectText = 'Click to select an item.', + onItemSelected, +}) { + const initialItem = useMemo(() => items.find((a) => a.id === initialItemId), [ + initialItemId, + ]); + + const [selectedItem, setSelectedItem] = useState(initialItem || null); + + useEffect(() => { + if (typeof selectedItemId !== 'undefined') { + const item = selectedItemId + ? items.find((a) => a.id === selectedItemId) + : null; + setSelectedItem(item); + } + }, [selectedItemId, items, setSelectedItem]); + + const onItemSelect = useCallback( + (item) => { + setSelectedItem({ ...item }); + onItemSelected && onItemSelected(item); + }, + [onItemSelected], + ); + + const itemRenderer = useCallback( + (item, { handleClick }) => ( + + ), + [], + ); + + const filterItem = useCallback((query, item, _index, exactMatch) => { + const normalizedTitle = item.name.toLowerCase(); + const normalizedQuery = query.toLowerCase(); + + if (exactMatch) { + return normalizedTitle === normalizedQuery; + } else { + return normalizedTitle.indexOf(normalizedQuery) >= 0; + } + }, []); + + return ( + } + itemRenderer={itemRenderer} + itemPredicate={filterItem} + popoverProps={{ minimal: true }} + onItemSelect={onItemSelect} + selectedItem={`${selectedItemId}`} + selectedItemProp={'id'} + labelProp={'name'} + defaultText={selectedItem ? selectedItem.name : defautlSelectText} + /> + ); +} + +export default ItemListField; diff --git a/client/src/containers/Purchases/Bill/BillFloatingActions.js b/client/src/containers/Purchases/Bill/BillFloatingActions.js new file mode 100644 index 000000000..2373433a4 --- /dev/null +++ b/client/src/containers/Purchases/Bill/BillFloatingActions.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { Intent, Button } from '@blueprintjs/core'; +import { FormattedMessage as T } from 'react-intl'; + +export default function BillFloatingActions({ + formik: { isSubmitting }, + onSubmitClick, + onCancelClick, + bill, +}) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/client/src/containers/Purchases/Bill/BillForm.js b/client/src/containers/Purchases/Bill/BillForm.js index dc8fd018a..4c2954245 100644 --- a/client/src/containers/Purchases/Bill/BillForm.js +++ b/client/src/containers/Purchases/Bill/BillForm.js @@ -8,24 +8,21 @@ import React, { import * as Yup from 'yup'; import { useFormik } from 'formik'; import moment from 'moment'; -import { Intent, FormGroup, TextArea } from '@blueprintjs/core'; +import { Intent } from '@blueprintjs/core'; import classNames from 'classnames'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { pick } from 'lodash'; import { CLASSES } from 'common/classes'; import BillFormHeader from './BillFormHeader'; import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable'; +import BillFloatingActions from './BillFloatingActions'; import BillFormFooter from './BillFormFooter'; - import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withMediaActions from 'containers/Media/withMediaActions'; -import withBills from './withBills'; import withBillActions from './withBillActions'; import withBillDetail from './withBillDetail'; -import withSettings from 'containers/Settings/withSettings'; -import { AppToaster, Row, Col } from 'components'; -import Dragzone from 'components/Dragzone'; +import { AppToaster } from 'components'; import useMedia from 'hooks/useMedia'; import { compose, repeatValue } from 'utils'; @@ -45,13 +42,6 @@ function BillForm({ //#withDashboard changePageTitle, - // #withBills - nextBillNumberChanged, - - // #withSettings - billNextNumber, - billNumberPrefix, - //#withBillDetail bill, @@ -147,14 +137,11 @@ function BillForm({ [], ); - const billNumber = billNumberPrefix - ? `${billNumberPrefix}-${billNextNumber}` - : billNextNumber; const defaultInitialValues = useMemo( () => ({ vendor_id: '', - bill_number: billNumber, + bill_number: '', bill_date: moment(new Date()).format('YYYY-MM-DD'), due_date: moment(new Date()).format('YYYY-MM-DD'), // status: 'Bill', @@ -162,7 +149,7 @@ function BillForm({ note: '', entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)], }), - [defaultBill, billNumber], + [defaultBill], ); const orderingIndex = (_bill) => { @@ -259,11 +246,6 @@ function BillForm({ }, }); - useEffect(() => { - formik.setFieldValue('bill_number', billNumber); - setBillNumberChanged(false); - }, [nextBillNumberChanged, billNumber]); - const handleSubmitClick = useCallback( (payload) => { setPayload(payload); @@ -290,7 +272,7 @@ function BillForm({ }, [setDeletedFiles, deletedFiles], ); - + const onClickCleanAllLines = () => { formik.setFieldValue( 'entries', @@ -305,10 +287,7 @@ function BillForm({ ); }; return ( -
+
@@ -318,33 +297,16 @@ function BillForm({ onClickAddNewRow={onClickAddNewRow} onClickClearAllLines={onClickCleanAllLines} /> -
- - - } className={'form-group--note'}> -