feat: style vendor form and list.

feat: items state selectors.

client/src/containers/Customers/CustomerFormAfterPrimarySection.js

@@ -38,6 +38,7 @@ export default function CustomerFormAfterPrimarySection({}) {
               />
             )}
           </FastField>
+
           <FastField name={'personal_phone'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup

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;
   };

client/src/containers/Vendors/Vendor.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
+import { DashboardCard } from 'components';
 import VendorFrom from './VendorForm';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
@@ -53,11 +54,13 @@ function Vendor({
       }
       name={'vendor-form'}
     >
-      <VendorFrom
-        onFormSubmit={handleFormSubmit}
-        vendorId={id}
-        onCancelForm={handleCancel}
-      />
+      <DashboardCard page>
+        <VendorFrom
+          onFormSubmit={handleFormSubmit}
+          vendorId={id}
+          onCancelForm={handleCancel}
+        />
+      </DashboardCard>
     </DashboardInsider>
   );
 }

client/src/containers/Vendors/VendorForm.js

@@ -153,9 +153,18 @@ function VendorForm({
       >
         {({ isSubmitting }) => (
           <Form>
-            <VendorFormPrimarySection />
-            <VendorFormAfterPrimarySection />
-            <VendorTabs vendor={vendorId} />
+            <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+              <VendorFormPrimarySection />
+            </div>
+
+            <div className={'page-form__after-priamry-section'}>
+              <VendorFormAfterPrimarySection />
+            </div>
+
+            <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+              <VendorTabs vendor={vendorId} />
+            </div>
+
             <VendorFloatingActions
               isSubmitting={isSubmitting}
               vendor={vendorId}

client/src/containers/Vendors/VendorFormAfterPrimarySection.js

@@ -12,7 +12,7 @@ import { inputIntent } from 'utils';
  */
 function VendorFormAfterPrimarySection() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <div class="customer-form__after-primary-section-content">
       {/*------------ Vendor email -----------*/}
       <FastField name={'email'}>
         {({ field, meta: { error, touched } }) => (
@@ -27,6 +27,7 @@ function VendorFormAfterPrimarySection() {
           </FormGroup>
         )}
       </FastField>
+
       {/*------------ Phone number -----------*/}
       <FormGroup
         className={'form-group--phone-number'}
@@ -54,6 +55,7 @@ function VendorFormAfterPrimarySection() {
           </FastField>
         </ControlGroup>
       </FormGroup>
+
       {/*------------ Vendor website -----------*/}
       <FastField name={'website'}>
         {({ field, meta: { error, touched } }) => (

client/src/containers/Vendors/VendorFormPrimarySection.js

@@ -18,105 +18,100 @@ import { inputIntent } from 'utils';
  */
 function VendorFormPrimarySection() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/**----------- Vendor name -----------*/}
-        <FormGroup
-          className={classNames('form-group--contact_name')}
-          label={<T id={'contact_name'} />}
-          inline={true}
-        >
-          <ControlGroup>
-            <FastField name={'salutation'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <SalutationList
-                  onItemSelect={(salutation) => {
-                    form.setFieldValue('salutation', salutation.label);
-                  }}
-                  selectedItem={value}
-                  popoverProps={{ minimal: true }}
-                  className={classNames(
-                    CLASSES.FORM_GROUP_LIST_SELECT,
-                    CLASSES.FILL,
-                    'input-group--salutation-list',
-                    'select-list--fill-button',
-                  )}
-                />
-              )}
-            </FastField>
-
-            <FastField name={'first_name'}>
-              {({ field, meta: { error, touched } }) => (
-                <InputGroup
-                  placeholder={'First Name'}
-                  intent={inputIntent({ error, touched })}
-                  className={classNames('input-group--first-name')}
-                  {...field}
-                />
-              )}
-            </FastField>
-
-            <FastField name={'last_name'}>
-              {({ field, meta: { error, touched } }) => (
-                <InputGroup
-                  placeholder={'Last Name'}
-                  intent={inputIntent({ error, touched })}
-                  className={classNames('input-group--last-name')}
-                  {...field}
-                />
-              )}
-            </FastField>
-          </ControlGroup>
-        </FormGroup>
-
-        {/*----------- Company Name -----------*/}
-        <FastField name={'company_name'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              className={classNames('form-group--company_name')}
-              label={<T id={'company_name'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'company_name'} />}
-              inline={true}
-            >
-              <InputGroup {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*----------- Display Name -----------*/}
-        <Field name={'display_name'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              helperText={<ErrorMessage name={'display_name'} />}
-              intent={inputIntent({ error, touched })}
-              label={
-                <>
-                  <T id={'display_name'} />
-                  <FieldRequiredHint />
-                  <Hint />
-                </>
-              }
-              className={classNames(
-                CLASSES.FORM_GROUP_LIST_SELECT,
-                CLASSES.FILL,
-              )}
-              inline={true}
-            >
-              <DisplayNameList
-                firstName={form.values.first_name}
-                lastName={form.values.last_name}
-                company={form.values.company_name}
-                salutation={form.values.salutation}
-                onItemSelect={(displayName) => {
-                  form.setFieldValue('display_name', displayName.label);
+    <div className={'customer-form__primary-section-content'}>
+      {/**----------- Vendor name -----------*/}
+      <FormGroup
+        className={classNames('form-group--contact_name')}
+        label={<T id={'contact_name'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <FastField name={'salutation'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <SalutationList
+                onItemSelect={(salutation) => {
+                  form.setFieldValue('salutation', salutation.label);
                 }}
                 selectedItem={value}
                 popoverProps={{ minimal: true }}
+                className={classNames(
+                  CLASSES.FORM_GROUP_LIST_SELECT,
+                  CLASSES.FILL,
+                  'input-group--salutation-list',
+                  'select-list--fill-button',
+                )}
               />
-            </FormGroup>
-          )}
-        </Field>
-      </div>
+            )}
+          </FastField>
+
+          <FastField name={'first_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={'First Name'}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--first-name')}
+                {...field}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'last_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={'Last Name'}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--last-name')}
+                {...field}
+              />
+            )}
+          </FastField>
+        </ControlGroup>
+      </FormGroup>
+
+      {/*----------- Company Name -----------*/}
+      <FastField name={'company_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            className={classNames('form-group--company_name')}
+            label={<T id={'company_name'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'company_name'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*----------- Display Name -----------*/}
+      <Field name={'display_name'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            helperText={<ErrorMessage name={'display_name'} />}
+            intent={inputIntent({ error, touched })}
+            label={
+              <>
+                <T id={'display_name'} />
+                <FieldRequiredHint />
+                <Hint />
+              </>
+            }
+            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+            inline={true}
+          >
+            <DisplayNameList
+              firstName={form.values.first_name}
+              lastName={form.values.last_name}
+              company={form.values.company_name}
+              salutation={form.values.salutation}
+              onItemSelect={(displayName) => {
+                form.setFieldValue('display_name', displayName.label);
+              }}
+              selectedItem={value}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
     </div>
   );
 }

client/src/containers/Vendors/VendorsEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+
+export default function VendorsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={"Create and manage your organization's vendors."}
+      description={
+        <p>
+          Here a list of your organization products and services, to be used
+          when you create invoices or bills to your customers or vendors.
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/vendors/new');
+            }}
+          >
+            New vendor
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Vendors/VendorsTable.js

@@ -9,10 +9,12 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Icon, Money } from 'components';
+import VendorsEmptyStatus from './VendorsEmptyStatus';
+import { DataTable, LoadingIndicator, Icon, Money, Choose } from 'components';
+import { CLASSES } from 'common/classes';
 
 import withVendors from './withVendors';
 import withVendorsActions from './withVendorActions';
@@ -34,8 +36,7 @@ function VendorsTable({
   // #withVendorsActions
   addVendorsTableQueries,
 
-  // #OwnProps
-  loading,
+  // #ownProps
   onEditVendor,
   onDeleteVendor,
   onSelectedRowsChange,
@@ -182,29 +183,41 @@ function VendorsTable({
       onDeleteVendor,
     });
 
-  console.log(vendorsCurrentPage, 'vendorsCurrentPage');
   return (
-    <LoadingIndicator loading={vendorsLoading && !isLoadedBefore} mount={false}>
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={vendorItems}
-        onFetchData={handleFetchData}
-        selectionColumn={true}
-        expandable={false}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        spinnerProps={{ size: 30 }}
-        rowContextMenu={rowContextMenu}
-        pagination={true}
-        manualSortBy={true}
-        pagesCount={vendorsPageination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        initialPageSize={vendorTableQuery.page_size}
-        initialPageIndex={vendorTableQuery.page - 1}
-      />
-    </LoadingIndicator>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator
+        loading={vendorsLoading && !isLoadedBefore}
+        mount={false}
+      >
+        <Choose>
+          <Choose.When condition={true}>
+            <VendorsEmptyStatus />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <DataTable
+              noInitialFetch={true}
+              columns={columns}
+              data={vendorItems}
+              onFetchData={handleFetchData}
+              selectionColumn={true}
+              expandable={false}
+              sticky={true}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              spinnerProps={{ size: 30 }}
+              rowContextMenu={rowContextMenu}
+              pagination={true}
+              manualSortBy={true}
+              pagesCount={vendorsPageination.pagesCount}
+              autoResetSortBy={false}
+              autoResetPage={false}
+              initialPageSize={vendorTableQuery.page_size}
+              initialPageIndex={vendorTableQuery.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
 }