feat: invoice pdf preview dialog.

client/src/components/Dashboard/DashboardTopbar.js

@@ -16,7 +16,7 @@ import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
 import DashboardBackLink from 'components/Dashboard/DashboardBackLink';
 import { Icon, Hint, If } from 'components';
 
-import withSearch from 'containers/GeneralSearch/withSearch';
+import withUniversalSearch from 'containers/UniversalSearch/withUniversalSearch';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withSettings from 'containers/Settings/withSettings';
@@ -155,7 +155,7 @@ function DashboardTopbar({
 }
 
 export default compose(
-  withSearch,
+  withUniversalSearch,
   withDashboard(({ pageTitle, pageHint, editViewId, sidebarExpended }) => ({
     pageTitle,
     editViewId,

client/src/components/Dialog/DialogContent.js

@@ -5,14 +5,15 @@ import classNames from 'classnames';
 export default function DialogContent(props) {
   const { isLoading, children } = props;
 
-  const loadingContent = (
+  const loadingContent = <Spinner size={30} />;
+
+  return (
     <div
       className={classNames(Classes.DIALOG_BODY, {
         'is-loading': isLoading,
       })}
     >
-      <Spinner size={30} />
+      {isLoading ? loadingContent : children}
     </div>
   );
-  return <div>{isLoading ? loadingContent : children}</div>;
 }

client/src/components/DialogsContainer.js

@@ -14,6 +14,7 @@ import ContactDuplicateDialog from 'containers/Dialogs/ContactDuplicateDialog';
 import QuickPaymentReceiveFormDialog from 'containers/Dialogs/QuickPaymentReceiveFormDialog';
 import QuickPaymentMadeFormDialog from 'containers/Dialogs/QuickPaymentMadeFormDialog';
 import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialog';
+import InvoicePdfPreviewDialog from 'containers/Dialogs/InvoicePdfPreviewDialog';
 
 /**
  * Dialogs container.
@@ -34,6 +35,7 @@ export default function DialogsContainer() {
       <QuickPaymentReceiveFormDialog dialogName={'quick-payment-receive'} />
       <QuickPaymentMadeFormDialog dialogName={'quick-payment-made'} />
       <AllocateLandedCostDialog dialogName={'allocate-landed-cost'} />
+      <InvoicePdfPreviewDialog dialog={'invoice-pdf-preview'} />
     </div>
   );
 }

client/src/components/PdfPreview/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Spinner } from '@blueprintjs/core';
+
+/**
+ * Previews the pdf document of the given object url.
+ */
+export function PdfDocumentPreview({ url, height, width, isLoading }) {
+  return isLoading ? (
+    <Spinner size={30} />
+  ) : (
+    <embed src={url} height={height} width={width} />
+  );
+}

client/src/components/index.js

@@ -67,6 +67,8 @@ export * from './AdvancedFilter/AdvancedFilterDropdown';
 export * from './AdvancedFilter/AdvancedFilterPopover';
 export * from './Dashboard/DashboardFilterButton';
 export * from './Dashboard/DashboardRowsHeightButton';
+export * from './UniversalSearch/UniversalSearch';
+export * from './PdfPreview';
 
 const Hint = FieldHint;