WIP Feature : categoriesSelectList & Fix: Items

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 }) => (
-      <MenuItem
-        key={item.id}
-        text={item.name}
-        label={item.code}
-        onClick={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 }) => (
-      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
-    ),
-    [],
-  );
-
   const requiredSpan = useMemo(() => <span class="required">*</span>, []);
   const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
@@ -374,17 +348,11 @@ const ItemForm = ({
                   Classes.FILL,
                 )}
               >
-                <ListSelect
-                  items={categoriesList}
-                  noResults={<MenuItem disabled={true} text="No results." />}
-                  itemRenderer={categoryItem}
-                  itemPredicate={filterAccounts}
+                <CategoriesSelectList
+                  categoriesList={categoriesList}
+                  selecetedCategoryId={values.category_id}
+                  onCategorySelected={onItemAccountSelect('category_id')}
                   popoverProps={{ minimal: true }}
-                  onItemSelect={onItemAccountSelect('category_id')}
-                  selectedItem={values.customer_id}
-                  selectedItemProp={'id'}
-                  defaultText={<T id={'select_category'} />}
-                  labelProp={'name'}
                 />
               </FormGroup>
 

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');

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) => (
       <Menu>
-        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuItem
+          icon={<Icon icon="reader-18" />}
+          text={formatMessage({ id: 'view_details' })}
+        />
         <MenuDivider />
         <MenuItem
+          icon={<Icon icon="pen-18" />}
           text={formatMessage({ id: 'edit_item' })}
           onClick={handleEditItem(item)}
         />
         <MenuItem
           text={formatMessage({ id: 'delete_item' })}
+          icon={<Icon icon="trash-16" iconSize={16} />}
           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 (
     <LoadingIndicator loading={loading} mount={false}>
       <DataTable