From 0b0367dd06a9965083f0f6d5b15f70e6e9e692f7 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sun, 17 Jan 2021 17:19:01 +0200 Subject: [PATCH] feat: styling item adjustment dialog. --- client/src/containers/Accounts/utils.js | 8 +- .../DecrementAdjustmentFields.js | 25 ++- .../IncrementAdjustmentFields.js | 27 ++- .../InventoryAdjustmentFormDialogContent.js | 47 +++-- .../InventoryAdjustmentFormDialogFields.js | 169 +++++++++--------- .../InventoryAdjustmentQuantityFields.js | 22 +++ .../InventoryAdjustmentFormDialog/index.js | 5 +- client/src/containers/Items/ItemForm.js | 25 ++- client/src/containers/Items/ItemsDataTable.js | 3 +- client/src/containers/Items/withItem.js | 13 ++ client/src/containers/Items/withItemDetail.js | 8 - client/src/lang/en/index.js | 1 + .../pages/Items/ItemAdjustmentDialog.scss | 73 ++++++++ 13 files changed, 284 insertions(+), 142 deletions(-) create mode 100644 client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.js create mode 100644 client/src/containers/Items/withItem.js delete mode 100644 client/src/containers/Items/withItemDetail.js create mode 100644 client/src/style/pages/Items/ItemAdjustmentDialog.scss diff --git a/client/src/containers/Accounts/utils.js b/client/src/containers/Accounts/utils.js index 8411ee3ba..38f8cdeea 100644 --- a/client/src/containers/Accounts/utils.js +++ b/client/src/containers/Accounts/utils.js @@ -4,10 +4,10 @@ import { If } from 'components'; export const accountNameAccessor = (account) => { return ( - - { account.name } + {account.name} + + {account.description} - { account.description } ); -} \ No newline at end of file +}; diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js index 4e1820f83..5c185e112 100644 --- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js +++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js @@ -1,16 +1,16 @@ -import React, { useRef } from 'react'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; -import { FormGroup, InputGroup, Intent } from '@blueprintjs/core'; +import React from 'react'; +import { FastField, ErrorMessage } from 'formik'; +import { FormGroup, InputGroup } from '@blueprintjs/core'; import { inputIntent } from 'utils'; -import { Row, Col, If, FieldRequiredHint } from 'components'; +import { Row, Col } from 'components'; import { FormattedMessage as T } from 'react-intl'; import { decrementCalc, dec } from './utils'; function DecrementAdjustmentFields() { return ( - + {/*------------ Quantity on hand -----------*/} - + {({ field, meta: { error, touched } }) => ( + + + – + + {/*------------ Decrement -----------*/} - + {({ form: { values, setFieldValue }, @@ -47,8 +52,12 @@ function DecrementAdjustmentFields() { )} + + + = + {/*------------ New quantity -----------*/} - + {({ form: { values, setFieldValue }, diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js index 286bea519..4d7a726ca 100644 --- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js +++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js @@ -1,7 +1,7 @@ import React from 'react'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; -import { FormGroup, InputGroup, Intent } from '@blueprintjs/core'; -import { Row, Col, FieldRequiredHint } from 'components'; +import { FastField, ErrorMessage } from 'formik'; +import { FormGroup, InputGroup } from '@blueprintjs/core'; +import { Row, Col } from 'components'; import { inputIntent } from 'utils'; import { FormattedMessage as T } from 'react-intl'; import { decrementCalc, incrementCalc } from './utils'; @@ -10,7 +10,7 @@ function IncrementAdjustmentFields() { return ( {/*------------ Quantity on hand -----------*/} - + {({ field, meta: { error, touched } }) => ( + + {/*------------ Sign -----------*/} + + + + + {/*------------ Increment -----------*/} - + {({ form: { values, setFieldValue }, @@ -47,8 +53,9 @@ function IncrementAdjustmentFields() { )} + {/*------------ Cost -----------*/} - + {({ field, meta: { error, touched } }) => ( + + {/*------------ Sign -----------*/} + + = + + {/*------------ New quantity -----------*/} - + {({ form: { values, setFieldValue }, diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js index c66401cfb..64d58455d 100644 --- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js +++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js @@ -1,17 +1,26 @@ -import React, { useState, useCallback, useMemo } from 'react'; +import React, { useState, useCallback } from 'react'; import { Intent } from '@blueprintjs/core'; import { Formik, Form } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import { useQuery, queryCache } from 'react-query'; import moment from 'moment'; -import { omit } from 'lodash'; +import { omit, get } from 'lodash'; + +import 'style/pages/Items/ItemAdjustmentDialog.scss'; import { AppToaster, DialogContent } from 'components'; + import { CreateInventoryAdjustmentFormSchema } from './InventoryAdjustmentForm.schema'; + import InventoryAdjustmentFormDialogFields from './InventoryAdjustmentFormDialogFields'; import InventoryAdjustmentFloatingActions from './InventoryAdjustmentFloatingActions'; + import withDialogActions from 'containers/Dialog/withDialogActions'; import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions'; +import withAccountsActions from 'containers/Accounts/withAccountsActions'; +import withItem from 'containers/Items/withItem'; +import withItemsActions from 'containers/Items/withItemsActions'; + import { compose } from 'utils'; const defaultInitialValues = { @@ -41,8 +50,14 @@ function InventoryAdjustmentFormDialogContent({ // #withInventoryAdjustmentActions requestSubmitInventoryAdjustment, + // #withItemsActions + requestFetchItem, + + // #withItem + item, + // #ownProp - itemDetail, + itemId, dialogName, }) { const { formatMessage } = useIntl(); @@ -51,13 +66,15 @@ function InventoryAdjustmentFormDialogContent({ // Fetches accounts list. const fetchAccount = useQuery('accounts-list', () => requestFetchAccounts()); - const initialValues = useMemo( - () => ({ - ...defaultInitialValues, - ...itemDetail, - }), - [], - ); + // Fetches the item details. + const fetchItem = useQuery(['item', itemId], + (key, id) => requestFetchItem(id)); + + // Initial form values. + const initialValues = { + ...defaultInitialValues, + quantity_on_hand: get(item, 'quantity_on_hand', 0), + }; // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, setErrors }) => { @@ -65,7 +82,6 @@ function InventoryAdjustmentFormDialogContent({ ...omit(values, ['quantity_on_hand', 'new_quantity', 'action']), publish: submitPayload.publish, }; - const onSuccess = ({ response }) => { closeDialog(dialogName); queryCache.invalidateQueries('accounts-list'); @@ -97,7 +113,7 @@ function InventoryAdjustmentFormDialogContent({ ); return ( - + ({ + item: item + })), + withItemsActions, )(InventoryAdjustmentFormDialogContent); diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js index c950dc918..b5e1988af 100644 --- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js +++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js @@ -10,7 +10,7 @@ import { import classNames from 'classnames'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { DateInput } from '@blueprintjs/datetime'; -import { ListSelect, Choose, If, FieldRequiredHint } from 'components'; +import { ListSelect, FieldRequiredHint, Col, Row } from 'components'; import { inputIntent, momentFormatter, @@ -19,12 +19,12 @@ import { } from 'utils'; import { CLASSES } from 'common/classes'; import adjustmentType from 'common/adjustmentType'; -import IncrementAdjustmentFields from './IncrementAdjustmentFields'; -import DecrementAdjustmentFields from './DecrementAdjustmentFields'; + import AccountsSuggestField from 'components/AccountsSuggestField'; import withAccounts from 'containers/Accounts/withAccounts'; import { compose } from 'redux'; import { decrementCalc, incrementCalc, dec } from './utils'; +import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields'; /** * Inventory adjustment form dialogs fields. @@ -38,83 +38,73 @@ function InventoryAdjustmentFormDialogFields({ return (
- {/*------------ Date -----------*/} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - minimal={true} - className={classNames(CLASSES.FILL)} - > - { - form.setFieldValue('date', formattedDate); - })} - value={tansformDateValue(value)} - popoverProps={{ - position: Position.BOTTOM, - minimal: true, - }} - /> - - )} - + + + {/*------------ Date -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + minimal={true} + className={classNames(CLASSES.FILL, 'form-group--date')} + > + { + form.setFieldValue('date', formattedDate); + })} + value={tansformDateValue(value)} + popoverProps={{ + position: Position.BOTTOM, + minimal: true, + }} + /> + + )} + + + + {/*------------ Adjustment type -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + helperText={} + intent={inputIntent({ error, touched })} + className={classNames(CLASSES.FILL, 'form-group--type')} + > + { + form.setFieldValue('type', type.value); + type?.value == 'increment' + ? form.setFieldValue( + 'new_quantity', + incrementCalc(values), + ) + : form.setFieldValue( + 'new_quantity', + values.quantity_on_hand - values.quantity, + ); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'value'} + textProp={'name'} + popoverProps={{ minimal: true }} + /> + + )} + + + + + - {/*------------ Adjustment type -----------*/} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - labelInfo={} - helperText={} - intent={inputIntent({ error, touched })} - className={classNames(CLASSES.FILL)} - > - { - form.setFieldValue('type', type.value); - type?.value == 'increment' - ? form.setFieldValue('new_quantity', incrementCalc(values)) - : form.setFieldValue( - 'new_quantity', - values.quantity_on_hand - values.quantity, - ); - }} - filterable={false} - selectedItem={value} - selectedItemProp={'value'} - textProp={'name'} - popoverProps={{ minimal: true }} - /> - - )} - - - - - - - - - - {/*------------ Reason -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - - - )} - {/*------------ Adjustment account -----------*/} {({ form, field, meta: { error, touched } }) => ( @@ -123,6 +113,7 @@ function InventoryAdjustmentFormDialogFields({ labelInfo={} intent={inputIntent({ error, touched })} helperText={} + className={'from-group--adjustment-account'} > )} + {/*------------ Reference -----------*/} {({ form, field, meta: { error, touched } }) => ( } - className={classNames(CLASSES.FILL)} intent={inputIntent({ error, touched })} helperText={} + className={'from-group--reference-no'} > )} + {/*------------ description -----------*/} - + {({ field, meta: { error, touched } }) => ( } - className={'form-group--description'} + label={} + className={'form-group--adjustment-reasons'} intent={inputIntent({ error, touched })} - helperText={} + helperText={} + placeholder={'Max 500 characters'} > -