feat: style vendor form and list.

feat: items state selectors.

client/src/containers/Items/ItemForm.js

@@ -23,7 +23,11 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { compose, transformToForm } from 'utils';
 import { transitionItemTypeKeyToLabel } from './utils';
-import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
+import {
+  EditItemFormSchema,
+  CreateItemFormSchema,
+  transformItemFormData,
+} from './ItemForm.schema';
 
 const defaultInitialValues = {
   active: true,
@@ -99,7 +103,10 @@ function ItemForm({
        * values such as `notes` come back from the API as null, so remove those
        * as well.
        */
-      ...transformToForm(itemDetail, defaultInitialValues),
+      ...transformToForm(
+        transformItemFormData(itemDetail, defaultInitialValues),
+        defaultInitialValues,
+      ),
     }),
     [
       itemDetail,

client/src/containers/Items/ItemForm.schema.js

@@ -52,5 +52,14 @@ const Schema = Yup.object().shape({
   purchasable: Yup.boolean().required(),
 });
 
+
+export const transformItemFormData = (item, defaultValue) => {
+  return {
+    ...item,
+    sellable: item?.sellable ? Boolean(item.sellable) : defaultValue.sellable,
+    purchasable: item?.purchasable ? Boolean(item.purchasable) : defaultValue.purchasable,
+  };
+}
+
 export const CreateItemFormSchema = Schema;
 export const EditItemFormSchema = Schema;

client/src/containers/Items/ItemsDataTable.js

@@ -27,6 +27,8 @@ function ItemsDataTable({
   itemsTableLoading,
   itemsCurrentPage,
   itemsTableQuery,
+  itemsCurrentViewId,
+  itemsPagination,
 
   // #withItemsActions
   addItemsTableQueries,
@@ -120,9 +122,7 @@ function ItemsDataTable({
             <Tag minimal={true} round={true} intent={Intent.NONE}>
               {formatMessage({ id: row.type })}
             </Tag>
-          ) : (
-            ''
-          ),
+          ) : (''),
         className: 'item_type',
         width: 120,
       },
@@ -184,11 +184,16 @@ function ItemsDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    itemsCurrentPage.length === 0,
+    itemsCurrentViewId === -1,
+  ].every((condition) => condition === true);
+
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
       <LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
         <Choose>
-          <Choose.When condition={true}>
+          <Choose.When condition={showEmptyStatus}>
             <ItemsEmptyStatus />
           </Choose.When>
 
@@ -198,14 +203,14 @@ function ItemsDataTable({
               data={itemsCurrentPage}
               onFetchData={handleFetchData}
               noInitialFetch={true}
-              expandable={true}
               selectionColumn={true}
               spinnerProps={{ size: 30 }}
               onSelectedRowsChange={handleSelectedRowsChange}
               rowContextMenu={handleRowContextMenu}
+              expandable={false}
               sticky={true}
               pagination={true}
-              pagesCount={2}
+              pagesCount={itemsPagination.pagesCount}
               autoResetSortBy={false}
               autoResetPage={false}
               initialPageSize={itemsTableQuery.page_size}
@@ -219,10 +224,20 @@ function ItemsDataTable({
 }
 
 export default compose(
-  withItems(({ itemsCurrentPage, itemsTableLoading, itemsTableQuery }) => ({
-    itemsCurrentPage,
-    itemsTableLoading,
-    itemsTableQuery,
-  })),
+  withItems(
+    ({
+      itemsCurrentPage,
+      itemsTableLoading,
+      itemsTableQuery,
+      itemsCurrentViewId,
+      itemsPagination
+    }) => ({
+      itemsCurrentPage,
+      itemsTableLoading,
+      itemsTableQuery,
+      itemsCurrentViewId,
+      itemsPagination
+    }),
+  ),
   withItemsActions,
 )(ItemsDataTable);

client/src/containers/Items/ItemsList.js

@@ -65,8 +65,9 @@ function ItemsList({
   );
 
   // Handle fetching the items table based on the given query.
-  const fetchItems = useQuery(['items-table', itemsTableQuery], () =>
-    requestFetchItems({}),
+  const fetchItems = useQuery(
+    ['items-table', itemsTableQuery],
+    (key, _query) => requestFetchItems({ ..._query }),
   );
 
   // Handle click delete item.

client/src/containers/Items/withItems.js

@@ -1,26 +1,29 @@
 import {connect} from 'react-redux';
 import {
   getResourceViews,
-  getViewPages,
 } from 'store/customViews/customViews.selectors'
 import {
-  getCurrentPageResults
-} from 'store/selectors';
+  getItemsCurrentPageFactory,
+  getItemsPaginationMetaFactory,
+  getItemsTableQueryFactory,
+  getItemsCurrentViewIdFactory
+} from 'store/items/items.selectors';
 
 export default (mapState) => {
-  const mapStateToProps = (state, props) => {
-    const viewPages = getViewPages(state.items.views, state.items.currentViewId);
+  const getItemsCurrentPage = getItemsCurrentPageFactory();
+  const getItemsPaginationMeta = getItemsPaginationMetaFactory();
+  const getItemsTableQuery = getItemsTableQueryFactory();
+  const getItemsCurrentViewId = getItemsCurrentViewIdFactory();
 
+  const mapStateToProps = (state, props) => {
     const mapped = {
       itemsViews: getResourceViews(state, props, 'items'),
-      itemsCurrentPage: getCurrentPageResults(
-        state.items.items,
-        viewPages,
-        state.items.currentPage,
-      ),
+      itemsCurrentPage: getItemsCurrentPage(state, props),
       itemsBulkSelected: state.items.bulkActions,
       itemsTableLoading: state.items.loading,
-      itemsTableQuery: state.items.tableQuery,
+      itemsTableQuery: getItemsTableQuery(state, props),
+      itemsPagination: getItemsPaginationMeta(state, props),
+      itemsCurrentViewId: getItemsCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };