feat: universal search.

client/src/containers/Purchases/Bills/BillUniversalSearch.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+
+import { formattedAmount } from 'utils';
+import { T, Icon, Choose, If } from 'components';
+import intl from 'react-intl-universal';
+
+import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+
+/**
+ * Universal search bill item select action.
+ */
+function BillUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.INVOICE) {
+    openDrawer('bill-drawer', { billId: resourceId });
+  }
+  return null;
+}
+
+export const BillUniversalSearchSelect = withDrawerActions(
+  BillUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+export function BillStatus({ bill }) {
+  return (
+    <Choose>
+      <Choose.When condition={bill.is_fully_paid && bill.is_open}>
+        <span class="fully-paid-text">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+      <Choose.When condition={bill.is_open}>
+        <Choose>
+          <Choose.When condition={bill.is_overdue}>
+            <span className={'overdue-status'}>
+              {intl.get('overdue_by', { overdue: bill.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'due-status'}>
+              {intl.get('due_in', { due: bill.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+        <If condition={bill.is_partially_paid}>
+          <span className="partial-paid">
+            {intl.get('day_partially_paid', {
+              due: formattedAmount(bill.due_amount, bill.currency_code),
+            })}
+          </span>
+        </If>
+      </Choose.When>
+      <Choose.Otherwise>
+        <span class="draft">
+          <T id={'draft'} />
+        </span>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Bill universal search item.
+ */
+export function BillUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.bill_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_bill_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">{item.reference.formatted_amount}</div>
+          <BillStatus bill={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--bill'}
+    />
+  );
+}
+
+const billsToSearch = (bill) => ({
+  text: bill.vendor.display_name,
+  reference: bill,
+});
+
+export const universalSearchBillBind = () => ({
+  resourceType: RESOURCES_TYPES.BILL,
+  optionItemLabel: 'Bills',
+  selectItemAction: BillUniversalSearchSelect,
+  itemRenderer: BillUniversalSearchItem,
+  itemSelect: billsToSearch,
+});

client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js

@@ -34,7 +34,7 @@ function BillActionsBar({
   setBillsTableState,
 
   // #withBills
-  billsConditionsRoles
+  billsConditionsRoles,
 }) {
   const history = useHistory();
 
@@ -50,13 +50,15 @@ function BillActionsBar({
   };
 
   // Handle tab change.
-  const handleTabChange = (customView) => {
+  const handleTabChange = (view) => {
     setBillsTableState({
-      customViewId: customView.id || null,
+      viewSlug: view ? view.slug : null,
     });
   };
   // Handle click a refresh bills
-  const handleRefreshBtnClick = () => { refresh(); };
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
 
   return (
     <DashboardActionsBar>
@@ -64,6 +66,8 @@ function BillActionsBar({
         <DashboardActionViewsList
           resourceName={'bills'}
           views={billsViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
           onChange={handleTabChange}
         />
         <NavbarDivider />
@@ -127,6 +131,6 @@ function BillActionsBar({
 export default compose(
   withBillsActions,
   withBills(({ billsTableState }) => ({
-    billsConditionsRoles: billsTableState.filterRoles
-  }))
+    billsConditionsRoles: billsTableState.filterRoles,
+  })),
 )(BillActionsBar);

client/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+
+import { Icon } from 'components';
+
+import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+
+import { highlightText } from 'utils';
+
+/**
+ * Universal search bill item select action.
+ */
+function PaymentMadeUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.PAYMENT_MADE) {
+    openDrawer('payment-made-detail-drawer', { paymentMadeId: resourceId });
+  }
+  return null;
+}
+
+export const PaymentMadeUniversalSearchSelect = withDrawerActions(
+  PaymentMadeUniversalSearchSelectComponent,
+);
+
+/**
+ * Payment made universal search item.
+ */
+ export function PaymentMadeUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(item.text, query)}</div>
+
+          <span class="bp3-text-muted">
+            {highlightText(item.reference.payment_number, query)}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {highlightText(item.reference.formatted_payment_date, query)}
+          </span>
+        </div>
+      }
+      label={<div class="amount">{item.reference.formatted_amount}</div>}
+      onClick={handleClick}
+      className={'universal-search__item--payment-made'}
+    />
+  );
+}
+
+/**
+ * Payment made resource item to search item.
+ */
+const paymentMadeToSearch = (payment) => ({
+  text: payment.vendor.display_name,
+  subText: payment.formatted_payment_date,
+  label: payment.formatted_amount,
+  reference: payment,
+});
+
+/**
+ * Binds universal search payment made configure.
+ */
+ export const universalSearchPaymentMadeBind = () => ({
+  resourceType: RESOURCES_TYPES.PAYMENT_MADE,
+  optionItemLabel: 'Payment made',
+  selectItemAction: PaymentMadeUniversalSearchSelect,
+  itemRenderer: PaymentMadeUniversalSearchItem,
+  itemSelect: paymentMadeToSearch,
+});