re-structure to monorepo.

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.tsx

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionViewsList,
+  DashboardActionsBar,
+} from '@/components';
+
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse Transfers actions bar.
+ */
+function WarehouseTransfersActionsBar({
+  // #withWarehouseTransfers
+  warehouseTransferFilterRoles,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
+  // #withSettings
+  warehouseTransferTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // credit note list context.
+  const { WarehouseTransferView, fields, refresh } =
+    useWarehouseTranfersListContext();
+
+  // Handle new warehouse transfer button click.
+  const handleClickNewWarehouseTransfer = () => {
+    history.push('/warehouses-transfers/new');
+  };
+
+  // Handle click a refresh warehouse transfers
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle views tab change.
+  const handleTabChange = (view) => {
+    setWarehouseTransferTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('warehouseTransfers', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'warehouse_transfer'}
+          views={WarehouseTransferView}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'warehouse_transfer.action.new_warehouse_transfer'} />}
+          onClick={handleClickNewWarehouseTransfer}
+        />
+        <NavbarDivider />
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: warehouseTransferFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setWarehouseTransferTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={warehouseTransferFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <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={warehouseTransferTableSize}
+          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,
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferFilterRoles: warehouseTransferTableState.filterRoles,
+  })),
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersActionsBar);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.tsx

@@ -0,0 +1,155 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  DataTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  DashboardContentTable,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { useWarehouseTransfersTableColumns, ActionsMenu } from './components';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import WarehouseTransfersEmptyStatus from './WarehouseTransfersEmptyStatus';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse transfers datatable.
+ */
+function WarehouseTransfersDataTable({
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  warehouseTransferTableSize,
+}) {
+  const history = useHistory();
+
+  // Warehouse transfers list context.
+  const {
+    warehousesTransfers,
+    pagination,
+    isEmptyStatus,
+    isWarehouseTransfersLoading,
+    isWarehouseTransfersFetching,
+  } = useWarehouseTranfersListContext();
+
+  // Invoices table columns.
+  const columns = useWarehouseTransfersTableColumns();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.WAREHOUSE_TRANSFERS);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setWarehouseTransferTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setWarehouseTransferTableState],
+  );
+
+  // Display invoice empty status instead of the table.
+  if (isEmptyStatus) {
+    return <WarehouseTransfersEmptyStatus />;
+  }
+
+  // Handle view detail.
+  const handleViewDetailWarehouseTransfer = ({ id }) => {
+    openDrawer('warehouse-transfer-detail-drawer', { warehouseTransferId: id });
+  };
+
+  // Handle edit warehouse transfer.
+  const handleEditWarehouseTransfer = ({ id }) => {
+    history.push(`/warehouses-transfers/${id}/edit`);
+  };
+
+  // Handle delete warehouse transfer.
+  const handleDeleteWarehouseTransfer = ({ id }) => {
+    openAlert('warehouse-transfer-delete', { warehouseTransferId: id });
+  };
+
+  // Handle initiate warehouse transfer.
+  const handleInitateWarehouseTransfer = ({ id }) => {
+    openAlert('warehouse-transfer-initate', { warehouseTransferId: id });
+  };
+  // Handle transferred warehouse transfer.
+  const handleTransferredWarehouseTransfer = ({ id }) => {
+    openAlert('transferred-warehouse-transfer', { warehouseTransferId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('warehouse-transfer-detail-drawer', {
+      warehouseTransferId: cell.row.original.id,
+    });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={warehousesTransfers}
+        loading={isWarehouseTransfersLoading}
+        headerLoading={isWarehouseTransfersLoading}
+        progressBarLoading={isWarehouseTransfersFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={warehouseTransferTableSize}
+        payload={{
+          onViewDetails: handleViewDetailWarehouseTransfer,
+          onDelete: handleDeleteWarehouseTransfer,
+          onEdit: handleEditWarehouseTransfer,
+          onInitate: handleInitateWarehouseTransfer,
+          onTransfer: handleTransferredWarehouseTransfer,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+export default compose(
+  withDashboardActions,
+  withWarehouseTransfersActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersDataTable);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.tsx

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

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DashboardPageContent } from '@/components';
+import WarehouseTransfersActionsBar from './WarehouseTransfersActionsBar';
+import WarehouseTransfersViewTabs from './WarehouseTransfersViewTabs';
+import WarehouseTransfersDataTable from './WarehouseTransfersDataTable';
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+
+import { WarehouseTransfersListProvider } from './WarehouseTransfersListProvider';
+import { transformTableStateToQuery, compose } from '@/utils';
+
+function WarehouseTransfersList({
+  // #withWarehouseTransfers
+  warehouseTransferTableState,
+  warehouseTransferTableStateChanged,
+
+  // #withWarehouseTransfersActions
+  resetWarehouseTransferTableState,
+}) {
+  // Resets the warehouse transfer table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetWarehouseTransferTableState();
+    },
+    [resetWarehouseTransferTableState],
+  );
+
+  return (
+    <WarehouseTransfersListProvider
+      query={transformTableStateToQuery(warehouseTransferTableState)}
+      tableStateChanged={warehouseTransferTableStateChanged}
+    >
+      <WarehouseTransfersActionsBar />
+      <DashboardPageContent>
+        <WarehouseTransfersViewTabs />
+        <WarehouseTransfersDataTable />
+      </DashboardPageContent>
+    </WarehouseTransfersListProvider>
+  );
+}
+
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(
+    ({ warehouseTransferTableState, warehouseTransferTableStateChanged }) => ({
+      warehouseTransferTableState,
+      warehouseTransferTableStateChanged,
+    }),
+  ),
+)(WarehouseTransfersList);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useWarehousesTransfers,
+  useRefreshWarehouseTransfers,
+} from '@/hooks/query';
+
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const WarehouseTransfersListContext = React.createContext();
+
+/**
+ * WarehouseTransfer data provider
+ */
+function WarehouseTransfersListProvider({
+  query,
+  tableStateChanged,
+  ...props
+}) {
+  // warehouse transfers refresh action.
+  const { refresh } = useRefreshWarehouseTransfers();
+
+  // Fetch warehouse transfers list according to the given custom view id.
+  const {
+    data: { warehousesTransfers, pagination, filterMeta },
+    isFetching: isWarehouseTransfersFetching,
+    isLoading: isWarehouseTransfersLoading,
+  } = useWarehousesTransfers(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(warehousesTransfers) &&
+    !tableStateChanged &&
+    !isWarehouseTransfersLoading;
+
+  // Fetch create notes resource views and fields.
+  const { data: WarehouseTransferView, isLoading: isViewsLoading } =
+    useResourceViews('warehouse_transfer');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('warehouse_transfer');
+
+  // Provider payload.
+  const provider = {
+    warehousesTransfers,
+    pagination,
+
+    WarehouseTransferView,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isWarehouseTransfersLoading,
+    isWarehouseTransfersFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'warehouse-transfers-list'}
+    >
+      <WarehouseTransfersListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useWarehouseTranfersListContext = () =>
+  React.useContext(WarehouseTransfersListContext);
+
+export { WarehouseTransfersListProvider, useWarehouseTranfersListContext };

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { DashboardViewsTabs } from '@/components';
+
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import { compose, transfromViewsToTabs } from '@/utils';
+
+/**
+ * Warehouse transfer view tabs.
+ */
+function WarehouseTransfersViewTabs({
+  // #withWarehouseTransfers
+  warehouseTransferCurrentView,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+}) {
+  const { WarehouseTransferView } = useWarehouseTranfersListContext();
+
+  const tabs = transfromViewsToTabs(WarehouseTransferView);
+
+  // Handles click a new view tab.
+  const handleClickNewView = () => {};
+
+  // Handles the active tab chaing.
+  const handleTabsChange = (viewSlug) => {
+    setWarehouseTransferTableState({ viewSlug });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={warehouseTransferCurrentView}
+          resourceName={'warehouse_transfer'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferCurrentView: warehouseTransferTableState?.viewSlug,
+  })),
+)(WarehouseTransfersViewTabs);

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Choose,
+  If,
+  Icon,
+} from '@/components';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onViewDetails, onInitate, onTransfer },
+  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)}
+      />
+
+      <If condition={!original.is_transferred && !original.is_initiated}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('warehouse_transfer.action.initiate_transfer')}
+          onClick={safeCallback(onInitate, original)}
+        />
+      </If>
+      <If condition={original.is_initiated && !original.is_transferred}>
+        <MenuItem
+          icon={<Icon icon="send" iconSize={16} />}
+          text={intl.get('warehouse_transfer.action.mark_as_transferred')}
+          onClick={safeCallback(onTransfer, original)}
+        />
+      </If>
+
+      <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>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(warehouse) {
+  return (
+    <Choose>
+      <Choose.When
+        condition={warehouse.is_initiated && !warehouse.is_transferred}
+      >
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
+          <T id={'warehouse_transfer.label.transfer_initiated'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When
+        condition={warehouse.is_initiated && warehouse.is_transferred}
+      >
+        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+          <T id={'warehouse_transfer.label.transferred'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true} intent={Intent.NONE} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Retrieve warehouse transfer table columns.
+ */
+export function useWarehouseTransfersTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'transaction_number',
+        Header: intl.get('warehouse_transfer.column.transfer_no'),
+        accessor: 'transaction_number',
+        width: 100,
+        className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'from_warehouse',
+        Header: intl.get('warehouse_transfer.column.from_warehouse'),
+        accessor: 'from_warehouse.name',
+        width: 140,
+        className: 'from_warehouse',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'to_warehouse',
+        Header: intl.get('warehouse_transfer.column.to_warehouse'),
+        accessor: 'to_warehouse.name',
+        width: 140,
+        className: 'to_warehouse',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getWarehouseTransfersTableStateFactory,
+  isWarehouseTransferTableStateChangedFactory,
+} from '@/store/WarehouseTransfer/warehouseTransfer.selector';
+
+export default (mapState) => {
+  const getWarehouseTransferTableState = getWarehouseTransfersTableStateFactory();
+  const isWarehouseTransferTableChanged = isWarehouseTransferTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      warehouseTransferTableState: getWarehouseTransferTableState(state, props),
+      warehouseTransferTableStateChanged: isWarehouseTransferTableChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setWarehouseTransferTableState,
+  resetWarehouseTransferTableState,
+} from '@/store/WarehouseTransfer/warehouseTransfer.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setWarehouseTransferTableState: (queries) =>
+    dispatch(setWarehouseTransferTableState(queries)),
+  resetWarehouseTransferTableState: () => dispatch(resetWarehouseTransferTableState()),
+});
+
+export default connect(null, mapDipatchToProps);