WIP Feature : categoriesSelectList & Fix: Items

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 = <T id={'select_category'} />,
+  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 }) => (
+      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={categoriesList}
+      selectedItemProp={'id'}
+      selectedItem={selecetedCategoryId}
+      labelProp={'name'}
+      defaultText={defaultSelectText}
+      onItemSelect={handleItemCategorySelected}
+      itemPredicate={filterItemCategory}
+      itemRenderer={categoryItem}
+      {...restProps}
+    />
+  );
+}

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
+  InputPrependButton,
-};
+  CategoriesSelectList
+};

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
+                <CategoriesSelectList
-                  items={categoriesList}
+                  categoriesList={categoriesList}
-                  noResults={<MenuItem disabled={true} text="No results." />}
+                  selecetedCategoryId={values.category_id}
-                  itemRenderer={categoryItem}
+                  onCategorySelected={onItemAccountSelect('category_id')}
-                  itemPredicate={filterAccounts}
                   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 && id },
-      enabled: !!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, DataTable, Money, If, Choose } from 'components';
-import Icon from 'components/Icon';
-import Money from 'components/Money';
 
 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) => {
+  const handleRowContextMenu = useCallback(
-    return actionMenuList(cell.row.original);
+    (cell) => {
-  }, [actionMenuList]);
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
 
   const columns = useMemo(
     () => [
@@ -155,7 +161,6 @@ const ItemsDataTable = ({
     },
     [onSelectedRowsChange],
   );
-
   return (
     <LoadingIndicator loading={loading} mount={false}>
       <DataTable

client/src/lang/en/index.js

@@ -211,6 +211,8 @@ export default {
   once_delete_this_item_you_will_able_to_restore_it: `Once you delete this item, you won\'t be able to restore the item later. Are you sure you want to delete ?<br /><br />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: