feat: style vendor form and list.

feat: items state selectors.

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