From 0e342ca02e90468e3c193fbf40b7d481b40da93f Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Wed, 21 Oct 2020 19:22:04 +0200 Subject: [PATCH] WIP Feature : categoriesSelectList & Fix: Items --- client/src/components/CategoriesSelectList.js | 49 +++++++++++++++++ client/src/components/index.js | 7 ++- client/src/containers/Items/ItemForm.js | 52 ++++--------------- client/src/containers/Items/ItemFormPage.js | 5 +- client/src/containers/Items/ItemsDataTable.js | 21 +++++--- client/src/lang/en/index.js | 2 + 6 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 client/src/components/CategoriesSelectList.js diff --git a/client/src/components/CategoriesSelectList.js b/client/src/components/CategoriesSelectList.js new file mode 100644 index 000000000..1b7022bed --- /dev/null +++ b/client/src/components/CategoriesSelectList.js @@ -0,0 +1,49 @@ +import React, { useCallback } from 'react'; +import { FormattedMessage as T } from 'react-intl'; +import { ListSelect } from 'components'; +import { MenuItem } from '@blueprintjs/core'; + +export default function CategoriesSelectList({ + categoriesList, + selecetedCategoryId, + defaultSelectText = , + onCategorySelected, + ...restProps +}) { + + // Filter Items Category + const filterItemCategory = (query, item, _index, exactMatch) => { + const normalizedTitle = item.name.toLowerCase(); + const normalizedQuery = query.toLowerCase(); + if (exactMatch) { + return normalizedTitle === normalizedQuery; + } else { + return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0; + } + }; + + const handleItemCategorySelected = useCallback( + (ItemCategory) => onCategorySelected && onCategorySelected(ItemCategory), + [], + ); + const categoryItem = useCallback( + (item, { handleClick }) => ( + + ), + [], + ); + + return ( + + ); +} diff --git a/client/src/components/index.js b/client/src/components/index.js index 45bacda7c..ffdd3a48c 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -25,6 +25,8 @@ import Dialog from './Dialog/Dialog'; import DialogContent from './Dialog/DialogContent'; import DialogSuspense from './Dialog/DialogSuspense'; import InputPrependButton from './Forms/InputPrependButton'; +import CategoriesSelectList from './CategoriesSelectList'; + const Hint = FieldHint; export { @@ -55,5 +57,6 @@ export { Dialog, DialogContent, DialogSuspense, - InputPrependButton -}; \ No newline at end of file + InputPrependButton, + CategoriesSelectList +}; diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js index ec9dd3576..74fd054ed 100644 --- a/client/src/containers/Items/ItemForm.js +++ b/client/src/containers/Items/ItemForm.js @@ -23,7 +23,11 @@ import ErrorMessage from 'components/ErrorMessage'; import Icon from 'components/Icon'; import MoneyInputGroup from 'components/MoneyInputGroup'; import Dragzone from 'components/Dragzone'; -import { ListSelect, AccountsSelectList, If } from 'components'; +import { + ListSelect, + AccountsSelectList, + CategoriesSelectList, +} from 'components'; import withItemsActions from 'containers/Items/withItemsActions'; import withItemCategories from 'containers/Items/withItemCategories'; @@ -170,7 +174,7 @@ const ItemForm = ({ }, onSubmit: (values, { setSubmitting, resetForm, setErrors }) => { const saveItem = (mediaIds) => { - const formValues = { ...values, media_ids: mediaIds }; + const formValues = { ...values }; if (itemDetail && itemDetail.id) { requestEditItem(itemDetail.id, formValues) .then((response) => { @@ -222,29 +226,6 @@ const ItemForm = ({ }, }); - const accountItem = useCallback( - (item, { handleClick }) => ( - - ), - [], - ); - - // Filter Account Items - const filterAccounts = (query, item, _index, exactMatch) => { - const normalizedTitle = item.name.toLowerCase(); - const normalizedQuery = query.toLowerCase(); - if (exactMatch) { - return normalizedTitle === normalizedQuery; - } else { - return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0; - } - }; - const onItemAccountSelect = useCallback( (filedName) => { return (account) => { @@ -254,13 +235,6 @@ const ItemForm = ({ [setFieldValue], ); - const categoryItem = useCallback( - (item, { handleClick }) => ( - - ), - [], - ); - const requiredSpan = useMemo(() => *, []); const infoIcon = useMemo(() => , []); @@ -374,17 +348,11 @@ const ItemForm = ({ Classes.FILL, )} > - } - itemRenderer={categoryItem} - itemPredicate={filterAccounts} + } - labelProp={'name'} /> diff --git a/client/src/containers/Items/ItemFormPage.js b/client/src/containers/Items/ItemFormPage.js index bd2bc7200..28af781ae 100644 --- a/client/src/containers/Items/ItemFormPage.js +++ b/client/src/containers/Items/ItemFormPage.js @@ -40,11 +40,8 @@ const ItemFormContainer = ({ const fetchItemDetail = useQuery( ['item', id], (key, _id) => requestFetchItem(_id), - { - enabled: !!id, - }, + { enabled: id && id }, ); - const handleFormSubmit = useCallback( (payload) => { payload.redirect && history.push('/items'); diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js index 7a3fdf33b..98e4c1c90 100644 --- a/client/src/containers/Items/ItemsDataTable.js +++ b/client/src/containers/Items/ItemsDataTable.js @@ -9,9 +9,7 @@ import { Intent, } from '@blueprintjs/core'; import { FormattedMessage as T, useIntl } from 'react-intl'; -import DataTable from 'components/DataTable'; -import Icon from 'components/Icon'; -import Money from 'components/Money'; +import { Icon, DataTable, Money, If, Choose } from 'components'; import LoadingIndicator from 'components/LoadingIndicator'; import withItems from 'containers/Items/withItems'; @@ -56,14 +54,19 @@ const ItemsDataTable = ({ const actionMenuList = useCallback( (item) => ( - + } + text={formatMessage({ id: 'view_details' })} + /> } text={formatMessage({ id: 'edit_item' })} onClick={handleEditItem(item)} /> } onClick={handleDeleteItem(item)} intent={Intent.DANGER} /> @@ -72,9 +75,12 @@ const ItemsDataTable = ({ [handleEditItem, handleDeleteItem, formatMessage], ); - const handleRowContextMenu = useCallback((cell) => { - return actionMenuList(cell.row.original); - }, [actionMenuList]); + const handleRowContextMenu = useCallback( + (cell) => { + return actionMenuList(cell.row.original); + }, + [actionMenuList], + ); const columns = useMemo( () => [ @@ -155,7 +161,6 @@ const ItemsDataTable = ({ }, [onSelectedRowsChange], ); - return (
If you're not sure, you can inactivate it instead.`, the_item_has_been_successfully_deleted: 'The item has been successfully deleted.', + the_item_has_been_successfully_edited: + 'The item #{number} has been successfully edited.', the_item_category_has_been_successfully_created: 'The item category has been successfully created.', the_item_category_has_been_successfully_edited: