feat: Drawer.

client/src/containers/Sales/Estimate/EstimateDrawer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function EstimateDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  return (
+    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+      <PaperTemplate />
+    </DrawerTemplate>
+  );
+}
+
+export default compose(withDrawers(), withDrawerActions)(EstimateDrawer);

client/src/containers/Sales/Estimate/EstimatesDataTable.js

@@ -46,6 +46,7 @@ function EstimatesDataTable({
   onDeliverEstimate,
   onApproveEstimate,
   onRejectEstimate,
+  onDrawerEstimate,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -112,6 +113,11 @@ function EstimatesDataTable({
             />
           </Choose.When>
         </Choose>
+        <MenuItem
+          text={formatMessage({ id: 'estimate_paper' })}
+          onClick={() => onDrawerEstimate()}
+        />
+
         <MenuItem
           text={formatMessage({ id: 'delete_estimate' })}
           intent={Intent.DANGER}

client/src/containers/Sales/Estimate/EstimatesList.js

@@ -19,6 +19,7 @@ import withEstimates from './withEstimates';
 import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -37,6 +38,9 @@ function EstimatesList({
   // #withAlertsActions.
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withEistimateActions
   requestFetchEstimatesTable,
   requestDeliverdEstimate,
@@ -46,10 +50,6 @@ function EstimatesList({
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deliverEstimate, setDeliverEstimate] = useState(false);
-  const [approveEstimate, setApproveEstimate] = useState(false);
-  const [rejectEstimate, setRejectEstimate] = useState(false);
-
   const [selectedRows, setSelectedRows] = useState([]);
 
   const fetchResourceViews = useQuery(
@@ -103,6 +103,10 @@ function EstimatesList({
     [openAlert],
   );
 
+  const handleEstimateDrawer = useCallback(() => {
+    openDrawer('estimate-drawer', {});
+  }, [openDrawer]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
 
@@ -147,6 +151,7 @@ function EstimatesList({
               onDeliverEstimate={handleDeliverEstimate}
               onApproveEstimate={handleApproveEstimate}
               onRejectEstimate={handleRejectEstimate}
+              onDrawerEstimate={handleEstimateDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -167,4 +172,5 @@ export default compose(
     estimateViews,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(EstimatesList);

client/src/containers/Sales/Invoice/InvoiceDrawer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function InvoiceDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  const propLabels = {
+    labels: {
+      name: 'Invoice',
+      billedTo: 'Billed to',
+      date: 'Invoice date',
+      refNo: 'Invoice No.',
+      billedFrom: 'Billed from',
+      amount: 'Invoice amount',
+      dueDate: 'Due date',
+    },
+  };
+
+  return (
+    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+      <PaperTemplate propLabels={propLabels} />
+    </DrawerTemplate>
+  );
+}
+
+export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer);

client/src/containers/Sales/Invoice/InvoicesDataTable.js

@@ -55,6 +55,7 @@ function InvoicesDataTable({
   onEditInvoice,
   onDeleteInvoice,
   onDeliverInvoice,
+  onDrawerInvoice,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -93,6 +94,10 @@ function InvoicesDataTable({
             onClick={() => onDeliverInvoice(invoice)}
           />
         </If>
+        <MenuItem
+          text={formatMessage({ id: 'invoice_paper' })}
+          onClick={() => onDrawerInvoice()}
+        />
         <MenuItem
           text={formatMessage({ id: 'delete_invoice' })}
           intent={Intent.DANGER}

client/src/containers/Sales/Invoice/InvoicesList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery} from 'react-query';
+import { useQuery } from 'react-query';
 
 import 'style/pages/SaleInvoice/List.scss';
 
@@ -19,6 +19,7 @@ import withInvoices from './withInvoices';
 import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -40,14 +41,17 @@ function InvoicesList({
   // #withAlertsActions.
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withInvoiceActions
   requestFetchInvoiceTable,
-  
+
   addInvoiceTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-   const [selectedRows, setSelectedRows] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'invoices_list' }));
@@ -77,17 +81,20 @@ function InvoicesList({
 
   // Handle cancel/confirm invoice deliver.
   const handleDeliverInvoice = useCallback(
-    ({id}) => {
+    ({ id }) => {
       openAlert('invoice-deliver', { invoiceId: id });
     },
     [openAlert],
   );
 
-
   const handleEditInvoice = useCallback((invoice) => {
     history.push(`/invoices/${invoice.id}/edit`);
   });
 
+  const handleInvoiceDrawer = useCallback(() => {
+    openDrawer('invoice-drawer', {});
+  }, [openDrawer]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
 
@@ -118,6 +125,7 @@ function InvoicesList({
               onDeleteInvoice={handleDeleteInvoice}
               onEditInvoice={handleEditInvoice}
               onDeliverInvoice={handleDeliverInvoice}
+              onDrawerInvoice={handleInvoiceDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -138,4 +146,5 @@ export default compose(
     invoicesTableQuery,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(InvoicesList);