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

feat: styling item adjustment dialog.

Browse Source
This commit is contained in:
a.bouhuolia
2021-01-17 17:19:01 +02:00
parent c843a28d30
commit 0b0367dd06
13 changed files with 284 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/containers/Accounts/utils.js
View File

@@ -4,10 +4,10 @@ import { If } from 'components';
export const accountNameAccessor = (account) => {
return (
<span>
<If condition={account.name}>
<span class={'account-name'}>{ account.name }</span>
<span class={'account-name'}>{account.name}</span>
<If condition={account.description}>
<span class={'account-desc'}>{account.description}</span>
</If>
<span class={'account-desc'}>{ account.description }</span>
</span>
);
}
};

25
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
View File

@@ -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 (
<Row>
<Row className={'row--decrement-fields'}>
{/*------------ Quantity on hand -----------*/}
<Col sm={3}>
<Col className={'col--quantity-on-hand'}>
<FastField name={'quantity_on_hand'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
@@ -23,8 +23,13 @@ function DecrementAdjustmentFields() {
)}
</FastField>
</Col>
<Col className={'col--sign'}>
<span>–</span>
</Col>
{/*------------ Decrement -----------*/}
<Col sm={2}>
<Col className={'col--decrement'}>
<FastField name={'quantity'}>
{({
form: { values, setFieldValue },
@@ -47,8 +52,12 @@ function DecrementAdjustmentFields() {
)}
</FastField>
</Col>
<Col className={'col--sign'}>
<span>=</span>
</Col>
{/*------------ New quantity -----------*/}
<Col sm={4}>
<Col className={'col--quantity'}>
<FastField name={'new_quantity'}>
{({
form: { values, setFieldValue },

27
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
View File

@@ -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 (
<Row>
{/*------------ Quantity on hand -----------*/}
<Col sm={3}>
<Col className={'col--quantity-on-hand'}>
<FastField name={'quantity_on_hand'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
@@ -23,8 +23,14 @@ function IncrementAdjustmentFields() {
)}
</FastField>
</Col>
{/*------------ Sign -----------*/}
<Col className={'col--sign'}>
<span>+</span>
</Col>
{/*------------ Increment -----------*/}
<Col sm={2}>
<Col className={'col--quantity'}>
<FastField name={'quantity'}>
{({
form: { values, setFieldValue },
@@ -47,8 +53,9 @@ function IncrementAdjustmentFields() {
)}
</FastField>
</Col>
{/*------------ Cost -----------*/}
<Col sm={2}>
<Col className={'col--cost'}>
<FastField name={'cost'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
@@ -61,8 +68,14 @@ function IncrementAdjustmentFields() {
)}
</FastField>
</Col>
{/*------------ Sign -----------*/}
<Col className={'col--sign'}>
<span>=</span>
</Col>
{/*------------ New quantity -----------*/}
<Col sm={4}>
<Col className={'col--quantity-on-hand'}>
<FastField name={'new_quantity'}>
{({
form: { values, setFieldValue },

47
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js
View File

@@ -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 (
<DialogContent>
<DialogContent isLoading={fetchAccount.isFetching || fetchItem.isFetching}>
<Formik
validationSchema={CreateInventoryAdjustmentFormSchema}
initialValues={initialValues}
@@ -118,4 +134,9 @@ function InventoryAdjustmentFormDialogContent({
export default compose(
withInventoryAdjustmentActions,
withDialogActions,
withAccountsActions,
withItem(({ item }) => ({
item: item
})),
withItemsActions,
)(InventoryAdjustmentFormDialogContent);

169
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
View File

@@ -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 (
<div className={Classes.DIALOG_BODY}>
{/*------------ Date -----------*/}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
minimal={true}
className={classNames(CLASSES.FILL)}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
/>
</FormGroup>
)}
</FastField>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Adjustment type -----------*/}
<FastField name={'type'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'adjustment_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="type" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL, 'form-group--type')}
>
<ListSelect
items={adjustmentType}
onItemSelect={(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 }}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<InventoryAdjustmentQuantityFields />
{/*------------ Adjustment type -----------*/}
<FastField name={'type'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'adjustment_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="type" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={adjustmentType}
onItemSelect={(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 }}
/>
</FormGroup>
)}
</FastField>
<Choose>
<Choose.When condition={values.type === 'decrement'}>
<DecrementAdjustmentFields />
</Choose.When>
<Choose.When condition={values.type === 'increment'}>
<IncrementAdjustmentFields />
</Choose.When>
</Choose>
{/*------------ Reason -----------*/}
<FastField name={'reason'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reason'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reason" />}
>
<InputGroup fill={true} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Adjustment account -----------*/}
<FastField name={'adjustment_account_id'}>
{({ form, field, meta: { error, touched } }) => (
@@ -123,6 +113,7 @@ function InventoryAdjustmentFormDialogFields({
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reason" />}
className={'from-group--adjustment-account'}
>
<AccountsSuggestField
accounts={accountsList}
@@ -138,29 +129,37 @@ function InventoryAdjustmentFormDialogFields({
</FormGroup>
)}
</FastField>
{/*------------ Reference -----------*/}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference_no'} />}
className={classNames(CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
className={'from-group--reference-no'}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ description -----------*/}
<FastField name={'description'}>
<FastField name={'adjustment_reasons'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
label={<T id={'adjustment_reasons'} />}
className={'form-group--adjustment-reasons'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'description'} />}
helperText={<ErrorMessage name={'adjustment_reasons'} />}
placeholder={'Max 500 characters'}
>
<TextArea growVertically={true} large={true} {...field} />
<TextArea
growVertically={true}
large={true}
placeholder={'Max 500 characters.'}
{...field}
/>
</FormGroup>
)}
</FastField>

22
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Choose, If } from 'components';
import IncrementAdjustmentFields from './IncrementAdjustmentFields';
import DecrementAdjustmentFields from './DecrementAdjustmentFields';
export default function InventoryAdjustmentQuantityFields() {
const { values } = useFormikContext();
return (
<div class="adjustment-fields">
<Choose>
<Choose.When condition={values.type === 'decrement'}>
<DecrementAdjustmentFields />
</Choose.When>
<Choose.When condition={values.type === 'increment'}>
<IncrementAdjustmentFields />
</Choose.When>
</Choose>
</div>
);
}

5
client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js
View File

@@ -13,7 +13,7 @@ const InventoryAdjustmentFormDialogContent = lazy(() =>
*/
function InventoryAdjustmentFormDialog({
dialogName,
payload = { action: '', id: null },
payload = { action: '', itemId: null },
isOpen,
}) {
return (
@@ -23,11 +23,12 @@ function InventoryAdjustmentFormDialog({
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--adjustment-item'}
>
<DialogSuspense>
<InventoryAdjustmentFormDialogContent
dialogName={dialogName}
itemDetail={payload}
itemId={payload.itemId}
/>
</DialogSuspense>
</Dialog>

25
client/src/containers/Items/ItemForm.js
View File

@@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import { defaultTo } from 'lodash';
import moment from 'moment';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
@@ -18,7 +17,7 @@ import ItemFormInventorySection from './ItemFormInventorySection';
import withItemsActions from 'containers/Items/withItemsActions';
import withMediaActions from 'containers/Media/withMediaActions';
import useMedia from 'hooks/useMedia';
import withItemDetail from 'containers/Items/withItemDetail';
import withItem from 'containers/Items/withItem';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -56,7 +55,7 @@ function ItemForm({
requestEditItem,
itemId,
itemDetail,
item,
onFormSubmit,
// #withDashboardActions
@@ -106,12 +105,12 @@ function ItemForm({
* as well.
*/
...transformToForm(
transformItemFormData(itemDetail, defaultInitialValues),
transformItemFormData(item, defaultInitialValues),
defaultInitialValues,
),
}),
[
itemDetail,
item,
preferredCostAccount,
preferredSellAccount,
preferredInventoryAccount,
@@ -177,20 +176,20 @@ function ItemForm({
};
useEffect(() => {
if (itemDetail && itemDetail.type) {
changePageSubtitle(transitionItemTypeKeyToLabel(itemDetail.type));
if (item && item.type) {
changePageSubtitle(transitionItemTypeKeyToLabel(item.type));
}
}, [itemDetail, changePageSubtitle, formatMessage]);
}, [item, changePageSubtitle, formatMessage]);
const initialAttachmentFiles = useMemo(() => {
return itemDetail && itemDetail.media
? itemDetail.media.map((attach) => ({
return item && item.media
? item.media.map((attach) => ({
preview: attach.attachment_file,
upload: true,
metadata: { ...attach },
}))
: [];
}, [itemDetail]);
}, [item]);
const handleDropFiles = useCallback(
(_files) => {
@@ -233,7 +232,7 @@ function ItemForm({
{({ isSubmitting, handleSubmit }) => (
<Form>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection itemType={itemDetail?.type} />
<ItemFormPrimarySection itemType={item?.type} />
<ItemFormBody />
<ItemFormInventorySection />
</div>
@@ -254,7 +253,7 @@ function ItemForm({
export default compose(
withItemsActions,
withItemDetail,
withItem(({ item }) => ({ item })),
withDashboardActions,
withMediaActions,
withSettings(({ itemsSettings }) => ({

3
client/src/containers/Items/ItemsDataTable.js
View File

@@ -79,8 +79,7 @@ function ItemsDataTable({
(item) => () => {
openDialog('inventory-adjustment-form', {
action: 'make_adjustment',
item_id: item.id,
quantity_on_hand: item.quantity_on_hand,
itemId: item.id,
});
},
[openDialog],

13
client/src/containers/Items/withItem.js Normal file
View File

@@ -0,0 +1,13 @@
import { connect } from 'react-redux';
import { getItemById } from 'store/items/items.reducer';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
item: getItemById(state, props.itemId),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

8
client/src/containers/Items/withItemDetail.js
View File

@@ -1,8 +0,0 @@
import { connect } from 'react-redux';
import { getItemById } from 'store/items/items.reducer';
const mapStateToProps = (state, props) => ({
itemDetail: getItemById(state, props.itemId),
});
export default connect(mapStateToProps);

1
client/src/lang/en/index.js
View File

@@ -970,4 +970,5 @@ export default {
'You could not delete item that has associated inventory adjustments transactions',
format: 'Format',
current: 'Current',
adjustment_reasons: 'Adjustment reasons'
};

73
client/src/style/pages/Items/ItemAdjustmentDialog.scss Normal file
View File

@@ -0,0 +1,73 @@
.dialog--adjustment-item {
.bp3-form-group {
margin-bottom: 15px;
label.bp3-label {
font-size: 13px;
margin-bottom: 3px;
}
}
.form-group {
&--adjustment-reasons {
.bp3-form-content {
textarea {
width: 100%;
min-width: 100%;
font-size: 14px;
}
}
}
&--reference-no,
&--adjustment-account {
max-width: 250px;
}
}
.adjustment-fields {
padding-top: 16px;
border-top: 2px solid #e9e9e9;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 2px solid #e9e9e9;
.row {
display: flex;
flex-wrap: nowrap;
margin-left: -0.3rem;
margin-right: -0.3rem;
.col {
padding-left: 0.3rem;
padding-right: 0.3rem;
.bp3-form-group {
margin-bottom: 0;
}
}
.col--quantity-on-hand {
width: 120px;
}
.col--sign {
display: flex;
span {
margin-top: auto;
margin-bottom: 12px;
}
}
.col--decrement,
.col--increment {
width: 100px;
}
.col--cost {
width: 95px;
}
.col--quantity {
width: 120px;
}
}
}
.bp3-dialog-footer {
padding-top: 10px;
}
}