From 94b97af3a989352f16a548508f085fef46d7784d Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 10 Nov 2020 19:49:30 +0200 Subject: [PATCH] fix: edit item form. --- client/src/containers/Items/ItemForm.js | 31 +++++++--- .../Items/ItemFormPrimarySection.js | 4 +- client/src/containers/Items/ItemsDataTable.js | 51 ++++++++++------ client/src/containers/Items/ItemsList.js | 2 - client/src/lang/en/index.js | 3 + client/src/style/pages/items.scss | 61 ++++--------------- 6 files changed, 74 insertions(+), 78 deletions(-) diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js index 13553ae4b..1576aee72 100644 --- a/client/src/containers/Items/ItemForm.js +++ b/client/src/containers/Items/ItemForm.js @@ -41,6 +41,7 @@ const defaultInitialValues = { purchasable: true, }; + /** * Item form. */ @@ -119,14 +120,13 @@ function ItemForm({ then: Yup.number().required(), otherwise: Yup.number().nullable(), }) - .label(formatMessage({ id: 'Inventory account' })), + .label(formatMessage({ id: 'inventory_account' })), category_id: Yup.number().positive().nullable(), stock: Yup.string() || Yup.boolean(), sellable: Yup.boolean().required(), purchasable: Yup.boolean().required(), }); - /** * Initial values in create and edit mode. */ @@ -150,6 +150,14 @@ function ItemForm({ : changePageTitle(formatMessage({ id: 'new_item' })); }, [changePageTitle, isNewMode, formatMessage]); + const transformApiErrors = (errors) => { + const fields = {}; + if (errors.find(e => e.type === 'ITEM.NAME.ALREADY.EXISTS')) { + fields.name = formatMessage({ id: 'the_name_used_before' }) + } + return fields; + } + // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => { setSubmitting(true); @@ -173,8 +181,13 @@ function ItemForm({ history.push('/items'); queryCache.removeQueries(['items-table']); }; - const onError = (response) => { + const onError = ({ response }) => { setSubmitting(false); + + if (response.data.errors) { + const _errors = transformApiErrors(response.data.errors); + setErrors({ ..._errors }); + } }; if (isNewMode) { requestSubmitItem(form).then(onSuccess).catch(onError); @@ -204,7 +217,7 @@ function ItemForm({ } else { changePageSubtitle(''); } - }, [values.item_type]); + }, [values.item_type, changePageSubtitle, formatMessage]); const initialAttachmentFiles = useMemo(() => { return itemDetail && itemDetail.media @@ -240,24 +253,24 @@ function ItemForm({
diff --git a/client/src/containers/Items/ItemFormPrimarySection.js b/client/src/containers/Items/ItemFormPrimarySection.js index f5843cbce..5ed70a709 100644 --- a/client/src/containers/Items/ItemFormPrimarySection.js +++ b/client/src/containers/Items/ItemFormPrimarySection.js @@ -9,7 +9,7 @@ import { Position, Tooltip, } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'react-intl'; import { CategoriesSelectList, ErrorMessage, @@ -83,7 +83,7 @@ function ItemFormPrimarySection({ /> } - value="non_inventory" + value="non-inventory" /> diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js index 98e4c1c90..30e8b675a 100644 --- a/client/src/containers/Items/ItemsDataTable.js +++ b/client/src/containers/Items/ItemsDataTable.js @@ -7,6 +7,7 @@ import { MenuDivider, Position, Intent, + Tag, } from '@blueprintjs/core'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { Icon, DataTable, Money, If, Choose } from 'components'; @@ -15,6 +16,7 @@ import LoadingIndicator from 'components/LoadingIndicator'; import withItems from 'containers/Items/withItems'; import { compose } from 'utils'; + const ItemsDataTable = ({ loading, @@ -87,43 +89,58 @@ const ItemsDataTable = ({ { Header: formatMessage({ id: 'item_name' }), accessor: 'name', - className: 'actions', + className: 'name', + width: 180, }, { - Header: formatMessage({ id: 'sku' }), + Header: formatMessage({ id: 'item_code' }), accessor: 'sku', className: 'sku', + width: 120, + }, + { + Header: formatMessage({ id: 'item_type' }), + accessor: (row) => + row.type ? ( + + {formatMessage({ id: row.type })} + + ) : ( + '' + ), + className: 'item_type', + width: 120, }, { Header: formatMessage({ id: 'category' }), accessor: 'category.name', className: 'category', + width: 150, }, { Header: formatMessage({ id: 'sell_price' }), accessor: (row) => , className: 'sell-price', + width: 150, }, { Header: formatMessage({ id: 'cost_price' }), accessor: (row) => , className: 'cost-price', + width: 150, + }, + { + Header: formatMessage({ id: 'quantity_on_hand' }), + accessor: 'quantity_on_hand', + className: 'quantity_on_hand', + width: 140, + }, + { + Header: formatMessage({ id: 'average_rate' }), + accessor: 'average_cost_rate', + className: 'average_cost_rate', + width: 140, }, - // { - // Header: 'Cost Account', - // accessor: 'cost_account.name', - // className: "cost-account", - // }, - // { - // Header: 'Sell Account', - // accessor: 'sell_account.name', - // className: "sell-account", - // }, - // { - // Header: 'Inventory Account', - // accessor: 'inventory_account.name', - // className: "inventory-account", - // }, { id: 'actions', Cell: ({ cell }) => ( diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js index 68184c796..32844816d 100644 --- a/client/src/containers/Items/ItemsList.js +++ b/client/src/containers/Items/ItemsList.js @@ -189,8 +189,6 @@ function ItemsList({ return ( div:first-of-type{ -// padding-right: 15px !important; -// } +.dashboard__insider--items-list{ -// > div ~ div{ -// padding-left: 15px !important; -// border-left: 1px solid #e8e8e8; -// } -// } -// .#{$ns}-form-group{ -// .#{$ns}-label{ -// width: 130px; -// } + .bigcapital-datatable{ -// .#{$ns}-form-content{ -// width: 250px; -// } -// } + .table{ + .tbody{ + .item_type.td{ -// .form-group--item-type, -// .form-group--item-name{ - -// .#{$ns}-form-content{ -// width: 350px; -// } -// } - -// .form-group--active{ -// margin-bottom: 5px; - -// .bp3-control.bp3-checkbox{ -// margin: 0; -// } -// } -// } \ No newline at end of file + .bp3-tag{ + font-size: 13px; + } + } + } + } + } +} \ No newline at end of file