feat: add quick create & sortable.

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js

@@ -10,7 +10,7 @@ import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import {
-  ContactSelecetList,
+  VendorSelectField,
   FieldRequiredHint,
   InputPrependButton,
   Icon,
@@ -78,30 +78,27 @@ function VendorCreditNoteFormHeaderFields({
       {/* ----------- Vendor name ----------- */}
       <FastField
         name={'vendor_id'}
-        customers={vendors}
+        vendors={vendors}
         shouldUpdate={vendorsFieldShouldUpdate}
       >
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'vendor_name'} />}
             inline={true}
-            className={classNames(
-              'form-group--vendor-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <ContactSelecetList
-              contactsList={vendors}
+            <VendorSelectField
+              contacts={vendors}
               selectedContactId={value}
               defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(vendor) => {
-                form.setFieldValue('vendor_id', vendor.id);
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js

@@ -66,7 +66,12 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isItemsLoading || isVendorsLoading || isVendorCreditLoading}
+      loading={
+        isVendorCreditLoading ||
+        isItemsLoading ||
+        isVendorsLoading ||
+        isVendorCreditLoading
+      }
       name={'vendor-credit-form'}
     >
       <VendorCreditNoteFormContext.Provider value={provider} {...props} />

src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js

@@ -100,12 +100,12 @@ export function useVendorsCreditNoteTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'vendor_credit_date',
+        id: 'credit_date',
         Header: intl.get('date'),
         accessor: 'formatted_vendor_credit_date',
         Cell: FormatDateCell,
         width: 110,
-        className: 'vendor_credit_date',
+        className: 'credit_date',
         clickable: true,
         textOverview: true,
       },
@@ -119,11 +119,11 @@ export function useVendorsCreditNoteTableColumns() {
         textOverview: true,
       },
       {
-        id: 'vendor_credit_number',
+        id: 'credit_number',
         Header: intl.get('vendor_credits.column.vendor_credit_no'),
         accessor: 'vendor_credit_number',
         width: 100,
-        className: 'vendor_credit_number',
+        className: 'credit_number',
         clickable: true,
         textOverview: true,
       },
@@ -145,6 +145,7 @@ export function useVendorsCreditNoteTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        disableSortBy: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {