feat(warehouseTransfer): add warehouseTransfer.

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionViewsList,
+} from 'components';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Warehouse Transfers actions bar.
+ */
+function WarehouseTransfersActionsBar({
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // Handle new warehouse transfer button click.
+  const handleClickNewWarehouseTransfer = () => {
+    history.push('/warehouse-transfers/new');
+  };
+
+  // Handle click a refresh warehouse transfers
+  const handleRefreshBtnClick = () => {
+    // refresh();
+  };
+
+  // Handle views tab change.
+  const handleTabChange = (view) => {};
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {};
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={''}
+          views={[]}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'warehouse_transfer.action.new_warehouse_transfer'} />}
+          onClick={handleClickNewWarehouseTransfer}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+        // initialValue={warehouseTransfersTableSize}
+        // onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          // onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(withSettingsActions)(WarehouseTransfersActionsBar);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import WarehouseTransfersEmptyStatus from './WarehouseTransfersEmptyStatus';
+
+import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withSettings from '../../Settings/withSettings';
+
+import { useWarehouseTransfersTableColumns, ActionsMenu } from './components';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Warehouse transfers datatable.
+ */
+function WarehouseTransfersDataTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Warehouse transfers list context.
+  const { isEmptyStatus } = useWarehouseTranfersListContext();
+
+  // Invoices table columns.
+  const columns = useWarehouseTransfersTableColumns();
+
+  // Handle view detail.
+  const handleViewDetailWarehouseTransfer = () => {
+    openDrawer('warehouse-transfer-detail-drawer', {});
+  };
+
+  // Handle edit warehouse transfer.
+  const handleEditWarehouseTransfer = () => {};
+
+  // Handle delete warehouse transfer.
+  const handleDeleteWarehouseTransfer = () => {};
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {};
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.WAREHOUSETRANSFERS);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {},
+    [],
+  );
+
+  // Display invoice empty status instead of the table.
+  if (isEmptyStatus) {
+    return <WarehouseTransfersEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={[]}
+        // loading={}
+        // headerLoading={}
+        // progressBarLoading={}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        // size={invoicesTableSize}
+        payload={{
+          onViewDetails: handleViewDetailWarehouseTransfer,
+          onDelete: handleDeleteWarehouseTransfer,
+          onEdit: handleEditWarehouseTransfer,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+export default compose(
+  withDashboardActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+)(WarehouseTransfersDataTable);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Button, Intent } from '@blueprintjs/core';
+import { EmptyStatus } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+
+export default function WarehouseTransfersEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={<p></p>}
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/warehouse-transfers/new');
+            }}
+          >
+            <T id={'warehouse_transfer.action.new_warehouse_transfer'} />
+          </Button>
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+// style..
+import { DashboardPageContent } from 'components';
+import WarehouseTransfersActionsBar from './WarehouseTransfersActionsBar';
+
+import WarehouseTransfersViewTabs from './WarehouseTransfersViewTabs';
+import WarehouseTransfersDataTable from './WarehouseTransfersDataTable';
+
+import { WarehouseTransfersListProvider } from './WarehouseTransfersListProvider';
+import { compose } from 'utils';
+
+function WarehouseTransfersList({}) {
+  return (
+    <WarehouseTransfersListProvider>
+      <WarehouseTransfersActionsBar />
+      <DashboardPageContent>
+        <WarehouseTransfersViewTabs />
+        <WarehouseTransfersDataTable />
+      </DashboardPageContent>
+    </WarehouseTransfersListProvider>
+  );
+}
+
+export default WarehouseTransfersList;

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const WarehouseTransfersListContext = React.createContext();
+
+/**
+ * WarehouseTransfer data provider
+ */
+function WarehouseTransfersListProvider({ ...props }) {
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = false;
+
+  // Provider payload.
+  const provider = {
+    isEmptyStatus,
+  };
+  return (
+    <DashboardInsider name={'warehouse-transfers-list'}>
+      <WarehouseTransfersListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useWarehouseTranfersListContext = () =>
+  React.useContext(WarehouseTransfersListContext);
+
+export { WarehouseTransfersListProvider, useWarehouseTranfersListContext };

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import { DashboardViewsTabs } from 'components';
+
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Warehouse transfer view tabs.
+ */
+function WarehouseTransfersViewTabs() {
+  // Handles click a new view tab.
+  const handleClickNewView = () => {};
+
+  // Handles the active tab chaing.
+  const handleTabsChange = (customView) => {};
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          customViewId={null}
+          tabs={[]}
+          defaultTabText={<T id={'all'} />}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default WarehouseTransfersViewTabs;

src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  Intent,
+  Tag,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  ProgressBar,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '../../../common/classes';
+import { safeCallback } from 'utils';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  AppToaster,
+  Choose,
+  If,
+  Icon,
+  Can,
+} from 'components';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onViewDetails, onPrint },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('warehouse_transfer.action.edit_warehouse_transfer')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={intl.get('warehouse_transfer.action.delete_warehouse_transfer')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve warehouse transfer table columns.
+ */
+export function useWarehouseTransfersTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'transfer_no',
+        Header: intl.get('warehouse_transfer.column.transfer_no'),
+        accessor: 'transfer_no',
+        width: 120,
+        className: 'transfer_no',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'from_warehouse',
+        Header: intl.get('warehouse_transfer.column.from_warehouse'),
+        accessor: 'from_warehouse',
+        width: 150,
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'to_warehouse',
+        Header: intl.get('warehouse_transfer.column.to_warehouse'),
+        accessor: 'to_warehouse',
+        width: 150,
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reason',
+        Header: intl.get('reason'),
+        accessor: 'reason',
+        className: 'reason',
+        width: 120,
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        // accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'created_at',
+        Header: intl.get('created_at'),
+        accessor: 'created_at',
+        Cell: FormatDateCell,
+        width: 120,
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}