mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
feat: styling item form.
This commit is contained in:
Ahmed Bouhuolia
@@ -1,69 +1,55 @@
|
||||
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import React, { useMemo, useCallback, useEffect } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik, Formik } from 'formik';
|
||||
import { useFormik } from 'formik';
|
||||
import {
|
||||
FormGroup,
|
||||
MenuItem,
|
||||
Intent,
|
||||
InputGroup,
|
||||
HTMLSelect,
|
||||
Button,
|
||||
Classes,
|
||||
Checkbox,
|
||||
Intent
|
||||
} from '@blueprintjs/core';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { queryCache } from 'react-query';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { pick } from 'lodash';
|
||||
import { useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import Icon from 'components/Icon';
|
||||
import MoneyInputGroup from 'components/MoneyInputGroup';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
import {
|
||||
ListSelect,
|
||||
AccountsSelectList,
|
||||
CategoriesSelectList,
|
||||
} from 'components';
|
||||
import ItemFormPrimarySection from './ItemFormPrimarySection';
|
||||
import ItemFormBody from './ItemFormBody';
|
||||
import ItemFormFloatingActions from './ItemFormFloatingActions';
|
||||
import ItemFormInventorySection from './ItemFormInventorySection';
|
||||
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
import withItemCategories from 'containers/Items/withItemCategories';
|
||||
import withAccounts from 'containers/Accounts/withAccounts';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import useMedia from 'hooks/useMedia';
|
||||
import withItemDetail from 'containers/Items/withItemDetail';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withAccountDetail from 'containers/Accounts/withAccountDetail';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ItemForm = ({
|
||||
/**
|
||||
* Item form.
|
||||
*/
|
||||
function ItemForm({
|
||||
// #withItemActions
|
||||
requestSubmitItem,
|
||||
requestEditItem,
|
||||
|
||||
accountsList,
|
||||
itemId,
|
||||
itemDetail,
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
// #withItemCategories
|
||||
categoriesList,
|
||||
changePageSubtitle,
|
||||
|
||||
// #withMediaActions
|
||||
requestSubmitMedia,
|
||||
requestDeleteMedia,
|
||||
}) => {
|
||||
const [payload, setPayload] = useState({});
|
||||
}) {
|
||||
const isNewMode = !itemId;
|
||||
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const {
|
||||
setFiles,
|
||||
saveMedia,
|
||||
@@ -75,16 +61,6 @@ const ItemForm = ({
|
||||
deleteCallback: requestDeleteMedia,
|
||||
});
|
||||
|
||||
const ItemTypeDisplay = useMemo(
|
||||
() => [
|
||||
{ value: null, label: formatMessage({ id: 'select_item_type' }) },
|
||||
{ value: 'service', label: formatMessage({ id: 'service' }) },
|
||||
{ value: 'inventory', label: formatMessage({ id: 'inventory' }) },
|
||||
{ value: 'non-inventory', label: formatMessage({ id: 'non_inventory' }) },
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
active: Yup.boolean(),
|
||||
name: Yup.string()
|
||||
@@ -118,7 +94,7 @@ const ItemForm = ({
|
||||
() => ({
|
||||
active: true,
|
||||
name: '',
|
||||
type: '',
|
||||
type: 'service',
|
||||
sku: '',
|
||||
cost_price: 0,
|
||||
sell_price: 0,
|
||||
@@ -127,8 +103,8 @@ const ItemForm = ({
|
||||
inventory_account_id: null,
|
||||
category_id: null,
|
||||
note: '',
|
||||
sellable: null,
|
||||
purchasable: null,
|
||||
sellable: true,
|
||||
purchasable: true,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
@@ -145,18 +121,44 @@ const ItemForm = ({
|
||||
[itemDetail, defaultInitialValues],
|
||||
);
|
||||
|
||||
const saveInvokeSubmit = useCallback(
|
||||
(payload) => {
|
||||
onFormSubmit && onFormSubmit(payload);
|
||||
},
|
||||
[onFormSubmit],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
itemDetail && itemDetail.id
|
||||
(!isNewMode)
|
||||
? changePageTitle(formatMessage({ id: 'edit_item_details' }))
|
||||
: changePageTitle(formatMessage({ id: 'new_item' }));
|
||||
}, [changePageTitle, itemDetail, formatMessage]);
|
||||
}, [changePageTitle, isNewMode, formatMessage]);
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => {
|
||||
setSubmitting(true);
|
||||
const form = { ...values };
|
||||
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: (isNewMode) ?
|
||||
'service_has_been_successful_created' :
|
||||
'the_item_has_been_successfully_edited',
|
||||
},
|
||||
{
|
||||
number: itemDetail.id,
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
history.push('/items');
|
||||
queryCache.removeQueries(['items-table']);
|
||||
};
|
||||
const onError = (response) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
if (isNewMode) {
|
||||
requestSubmitItem(form).then(onSuccess).catch(onError);
|
||||
} else {
|
||||
requestEditItem(form).then(onSuccess).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
getFieldProps,
|
||||
@@ -169,78 +171,17 @@ const ItemForm = ({
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
|
||||
const saveItem = (mediaIds) => {
|
||||
const formValues = { ...values };
|
||||
if (itemDetail && itemDetail.id) {
|
||||
requestEditItem(itemDetail.id, formValues)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: 'the_item_has_been_successfully_edited',
|
||||
},
|
||||
{
|
||||
number: itemDetail.id,
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
saveInvokeSubmit({ action: 'update', ...payload });
|
||||
history.push('/items');
|
||||
resetForm();
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitItem(formValues).then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: 'service_has_been_successful_created',
|
||||
},
|
||||
{
|
||||
name: values.name,
|
||||
service: formatMessage({ id: 'item' }),
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.removeQueries(['items-table']);
|
||||
history.push('/items');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Promise.all([saveMedia(), deleteMedia()]).then(
|
||||
([savedMediaResponses]) => {
|
||||
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
|
||||
return saveItem(mediaIds);
|
||||
},
|
||||
);
|
||||
},
|
||||
initialValues,
|
||||
onSubmit: handleFormSubmit
|
||||
});
|
||||
|
||||
const onItemAccountSelect = useCallback(
|
||||
(filedName) => {
|
||||
return (account) => {
|
||||
setFieldValue(filedName, account.id);
|
||||
};
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
|
||||
const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
|
||||
|
||||
const handleMoneyInputChange = (fieldKey) => (e, value) => {
|
||||
setFieldValue(fieldKey, value);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (values.item_type) {
|
||||
changePageSubtitle(formatMessage({ id: values.item_type }));
|
||||
} else {
|
||||
changePageSubtitle('');
|
||||
}
|
||||
}, [values.item_type]);
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return itemDetail && itemDetail.media
|
||||
@@ -251,9 +192,10 @@ const ItemForm = ({
|
||||
}))
|
||||
: [];
|
||||
}, [itemDetail]);
|
||||
|
||||
const handleDropFiles = useCallback((_files) => {
|
||||
setFiles(_files.filter((file) => file.uploaded === false));
|
||||
}, []);
|
||||
}, [setFiles]);
|
||||
|
||||
const handleDeleteFile = useCallback(
|
||||
(_deletedFiles) => {
|
||||
@@ -266,349 +208,49 @@ const ItemForm = ({
|
||||
[setDeletedFiles, deletedFiles],
|
||||
);
|
||||
|
||||
const handleCancelClickBtn = () => {
|
||||
const handleCancelBtnClick = useCallback(() => {
|
||||
history.goBack();
|
||||
};
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<div class="item-form">
|
||||
<div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div class="item-form__primary-section">
|
||||
<Row>
|
||||
<Col xs={7}>
|
||||
{/* Item type */}
|
||||
<FormGroup
|
||||
medium={true}
|
||||
label={<T id={'item_type'} />}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--item-type'}
|
||||
intent={errors.type && touched.type && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="type" />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<HTMLSelect
|
||||
fill={true}
|
||||
options={ItemTypeDisplay}
|
||||
{...getFieldProps('type')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Item name */}
|
||||
<FormGroup
|
||||
label={<T id={'item_name'} />}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--item-name'}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="name" />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.name && touched.name && Intent.DANGER}
|
||||
{...getFieldProps('name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* SKU */}
|
||||
<FormGroup
|
||||
label={<T id={'sku'} />}
|
||||
labelInfo={infoIcon}
|
||||
className={'form-group--item-sku'}
|
||||
intent={errors.sku && touched.sku && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="sku" />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.sku && touched.sku && Intent.DANGER}
|
||||
{...getFieldProps('sku')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Item category */}
|
||||
<FormGroup
|
||||
label={<T id={'category'} />}
|
||||
labelInfo={infoIcon}
|
||||
inline={true}
|
||||
intent={
|
||||
errors.category_id && touched.category_id && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="category" />
|
||||
}
|
||||
className={classNames(
|
||||
'form-group--select-list',
|
||||
'form-group--category',
|
||||
Classes.FILL,
|
||||
)}
|
||||
>
|
||||
<CategoriesSelectList
|
||||
categoriesList={categoriesList}
|
||||
selecetedCategoryId={values.category_id}
|
||||
onCategorySelected={onItemAccountSelect('category_id')}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Active checkbox */}
|
||||
<FormGroup
|
||||
label={' '}
|
||||
inline={true}
|
||||
className={'form-group--active'}
|
||||
>
|
||||
<Checkbox
|
||||
inline={true}
|
||||
label={<T id={'active'} />}
|
||||
defaultChecked={values.active}
|
||||
{...getFieldProps('active')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col xs={3}>
|
||||
<Dragzone
|
||||
initialFiles={initialAttachmentFiles}
|
||||
onDrop={handleDropFiles}
|
||||
onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
className={'mt2'}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Row gutterWidth={16} className={'item-form__accounts-section'}>
|
||||
<Col width={404}>
|
||||
<h4>
|
||||
<T id={'sales_information'} />
|
||||
</h4>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'selling_price'} />}
|
||||
className={'form-group--item-selling-price'}
|
||||
intent={
|
||||
errors.selling_price && touched.selling_price && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="selling_price" />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<MoneyInputGroup
|
||||
value={values.selling_price}
|
||||
prefix={'$'}
|
||||
onChange={handleMoneyInputChange('selling_price')}
|
||||
inputGroupProps={{
|
||||
medium: true,
|
||||
intent:
|
||||
errors.selling_price &&
|
||||
touched.selling_price &&
|
||||
Intent.DANGER,
|
||||
}}
|
||||
disabled={!values.sellable}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Selling account */}
|
||||
<FormGroup
|
||||
label={<T id={'account'} />}
|
||||
labelInfo={infoIcon}
|
||||
inline={true}
|
||||
intent={
|
||||
errors.sell_account_id &&
|
||||
touched.sell_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="sell_account_id" />
|
||||
}
|
||||
className={classNames(
|
||||
'form-group--sell-account',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={accountsList}
|
||||
onAccountSelected={onItemAccountSelect('sell_account_id')}
|
||||
defaultSelectText={<T id={'select_account'} />}
|
||||
selectedAccountId={values.sell_account_id}
|
||||
disabled={!values.sellable}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* sellable checkbox */}
|
||||
<FormGroup
|
||||
label={' '}
|
||||
inline={true}
|
||||
className={'form-group--sellable'}
|
||||
>
|
||||
<Checkbox
|
||||
inline={true}
|
||||
label={<T id={'sellable'} />}
|
||||
checked={values.sellable}
|
||||
{...getFieldProps('sellable')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col width={404}>
|
||||
<h4>
|
||||
<T id={'purchase_information'} />
|
||||
</h4>
|
||||
|
||||
{/* Cost price */}
|
||||
<FormGroup
|
||||
label={<T id={'cost_price'} />}
|
||||
className={'form-group--item-cost-price'}
|
||||
intent={errors.cost_price && touched.cost_price && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="cost_price" />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<MoneyInputGroup
|
||||
value={values.cost_price}
|
||||
prefix={'$'}
|
||||
onChange={handleMoneyInputChange('cost_price')}
|
||||
inputGroupProps={{
|
||||
medium: true,
|
||||
intent:
|
||||
errors.cost_price && touched.cost_price && Intent.DANGER,
|
||||
}}
|
||||
disabled={!values.purchasable}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'account'} />}
|
||||
labelInfo={infoIcon}
|
||||
inline={true}
|
||||
intent={
|
||||
errors.cost_account_id &&
|
||||
touched.cost_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name="cost_account_id" />
|
||||
}
|
||||
className={classNames(
|
||||
'form-group--cost-account',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={accountsList}
|
||||
onAccountSelected={onItemAccountSelect('cost_account_id')}
|
||||
defaultSelectText={<T id={'select_account'} />}
|
||||
selectedAccountId={values.cost_account_id}
|
||||
disabled={!values.purchasable}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* purchasable checkbox */}
|
||||
<FormGroup
|
||||
label={' '}
|
||||
inline={true}
|
||||
className={'form-group--purchasable'}
|
||||
>
|
||||
<Checkbox
|
||||
inline={true}
|
||||
label={<T id={'purchasable'} />}
|
||||
defaultChecked={values.purchasable}
|
||||
{...getFieldProps('purchasable')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className={'item-form__accounts-section mt2'}>
|
||||
<Col width={404}>
|
||||
<h4>
|
||||
<T id={'inventory_information'} />
|
||||
</h4>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'inventory_account'} />}
|
||||
inline={true}
|
||||
intent={
|
||||
errors.inventory_account_id &&
|
||||
touched.inventory_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
{...{ errors, touched }}
|
||||
name="inventory_account_id"
|
||||
/>
|
||||
}
|
||||
className={classNames(
|
||||
'form-group--item-inventory_account',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={accountsList}
|
||||
onAccountSelected={onItemAccountSelect('inventory_account_id')}
|
||||
defaultSelectText={<T id={'select_account'} />}
|
||||
selectedAccountId={values.inventory_account_id}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'opening_stock'} />}
|
||||
className={'form-group--item-stock'}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.stock && Intent.DANGER}
|
||||
{...getFieldProps('stock')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div class="form__floating-footer">
|
||||
<Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
|
||||
{itemDetail && itemDetail.id ? (
|
||||
<T id={'edit'} />
|
||||
) : (
|
||||
<T id={'save'} />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button className={'ml1'} disabled={isSubmitting}>
|
||||
<T id={'save_as_draft'} />
|
||||
</Button>
|
||||
|
||||
<Button className={'ml1'} onClick={handleCancelClickBtn}>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<ItemFormPrimarySection
|
||||
getFieldProps={getFieldProps}
|
||||
setFieldValue={setFieldValue}
|
||||
errors={errors}
|
||||
touched={touched}
|
||||
values={values}
|
||||
/>
|
||||
<ItemFormBody
|
||||
getFieldProps={getFieldProps}
|
||||
touched={touched}
|
||||
errors={errors}
|
||||
values={values}
|
||||
setFieldValue={setFieldValue}
|
||||
/>
|
||||
<ItemFormInventorySection
|
||||
errors={errors}
|
||||
touched={touched}
|
||||
setFieldValue={setFieldValue}
|
||||
values={values}
|
||||
getFieldProps={getFieldProps}
|
||||
/>
|
||||
</div>
|
||||
<ItemFormFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
itemId={itemId}
|
||||
onCancelClick={handleCancelBtnClick}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withAccounts(({ accountsList }) => ({
|
||||
accountsList,
|
||||
})),
|
||||
withAccountDetail,
|
||||
withItemsActions,
|
||||
withItemDetail,
|
||||
withItemCategories(({ categoriesList }) => ({
|
||||
categoriesList,
|
||||
})),
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
)(ItemForm);
|
||||
|
||||
Reference in New Issue
Block a user