feat(warehouseTransfer): add crud warehouse transfer.

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js

@@ -9,10 +9,10 @@ const WarehouseTransferDetailDrawerContext = React.createContext();
  * Warehouse transfer detail drawer provider.
  */
 function WarehouseTransferDetailDrawerProvider({
-  warehouseTransferId = 5,
+  warehouseTransferId,
   ...props
 }) {
-  // Handle fetch invoice detail.
+  // Handle fetch warehouse transfer detail.
   const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
     useWarehouseTransfer(warehouseTransferId, {
       enabled: !!warehouseTransferId,

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js

@@ -53,8 +53,8 @@ function WarehouseTransferForm({
   // Form initial values.
   const initialValues = React.useMemo(
     () => ({
-      ...(!isEmpty(null)
-        ? { ...transformToEditForm(null) }
+      ...(!isEmpty(warehouseTransfer)
+        ? { ...transformToEditForm(warehouseTransfer) }
         : {
             ...defaultWarehouseTransfer,
             entries: orderingLinesIndexes(defaultWarehouseTransfer.entries),

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormPage.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
-import '../../../style/pages/WarehouseTransfers/PageForm.scss'
+import '../../../style/pages/WarehouseTransfers/PageForm.scss';
 import WarehouseTransferForm from './WarehouseTransferForm';
 import { WarehouseTransferFormProvider } from './WarehouseTransferFormProvider';
 
@@ -8,8 +9,10 @@ import { WarehouseTransferFormProvider } from './WarehouseTransferFormProvider';
  * WarehouseTransfer form page.
  */
 export default function WarehouseTransferFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
   return (
-    <WarehouseTransferFormProvider warehouseTransferId={null}>
+    <WarehouseTransferFormProvider warehouseTransferId={idAsInteger}>
       <WarehouseTransferForm />
     </WarehouseTransferFormProvider>
   );

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js

@@ -3,6 +3,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useItems,
   useWarehouses,
+  useWarehouseTransfer,
   useCreateWarehouseTransfer,
   useEditWarehouseTransfer,
 } from 'hooks/query';
@@ -24,6 +25,12 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     stringified_filter_roles: ITEMS_FILTER_ROLES_QUERY,
   });
 
+  // Handle fetch warehouse transfer detail.
+  const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
+    useWarehouseTransfer(warehouseTransferId, {
+      enabled: !!warehouseTransferId,
+    });
+
   // Fetch warehouses list.
   const {
     data: warehouses,
@@ -47,7 +54,7 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
   const provider = {
     items,
     warehouses,
-    warehouseTransfer: [],
+    warehouseTransfer,
 
     isItemsFetching,
     isWarehouesFetching,
@@ -58,9 +65,12 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     createWarehouseTransferMutate,
     editWarehouseTransferMutate,
   };
+
   return (
     <DashboardInsider
-      loading={isItemsLoading || isWarehouesLoading}
+      loading={
+        isItemsLoading || isWarehouesLoading || isWarehouseTransferLoading
+      }
       name={'warehouse-transfer-form'}
     >
       <WarehouseFormContext.Provider value={provider} {...props} />

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersActionsBar.js

@@ -18,6 +18,11 @@ import {
 } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+
+import withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
+import withSettings from '../../Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
@@ -26,11 +31,24 @@ 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');
@@ -38,14 +56,19 @@ function WarehouseTransfersActionsBar({
 
   // Handle click a refresh warehouse transfers
   const handleRefreshBtnClick = () => {
-    // refresh();
+    refresh();
   };
 
   // Handle views tab change.
-  const handleTabChange = (view) => {};
+  const handleTabChange = (view) => {
+    setWarehouseTransferTableState({ viewSlug: view ? view.slug : null });
+  };
 
   // Handle table row size change.
-  const handleTableRowSizeChange = (size) => {};
+  const handleTableRowSizeChange = (size) => {
+    addSetting('warehouseTransfer', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,6 +86,22 @@ function WarehouseTransfersActionsBar({
           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'} />}
@@ -80,8 +119,8 @@ function WarehouseTransfersActionsBar({
         />
         <NavbarDivider />
         <DashboardRowsHeightButton
-        // initialValue={warehouseTransfersTableSize}
-        // onChange={handleTableRowSizeChange}
+          initialValue={warehouseTransferTableSize}
+          onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
       </NavbarGroup>
@@ -89,11 +128,20 @@ function WarehouseTransfersActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}
-          // onClick={handleRefreshBtnClick}
+          onClick={handleRefreshBtnClick}
         />
       </NavbarGroup>
     </DashboardActionsBar>
   );
 }
 
-export default compose(withSettingsActions)(WarehouseTransfersActionsBar);
+export default compose(
+  withSettingsActions,
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferFilterRoles: warehouseTransferTableState.filterRoles,
+  })),
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
+)(WarehouseTransfersActionsBar);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.js

@@ -11,6 +11,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -25,6 +26,9 @@ import { compose } from 'utils';
  * Warehouse transfers datatable.
  */
 function WarehouseTransfersDataTable({
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+
   // #withAlertsActions
   openAlert,
 
@@ -33,15 +37,45 @@ function WarehouseTransfersDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  warehouseTransferTableSize,
 }) {
   const history = useHistory();
 
   // Warehouse transfers list context.
-  const { isEmptyStatus } = useWarehouseTranfersListContext();
+  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 });
@@ -64,41 +98,31 @@ function WarehouseTransfersDataTable({
     });
   };
 
-  // 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={}
+        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={invoicesTableSize}
+        size={warehouseTransferTableSize}
         payload={{
           onViewDetails: handleViewDetailWarehouseTransfer,
           onDelete: handleDeleteWarehouseTransfer,
@@ -110,7 +134,11 @@ function WarehouseTransfersDataTable({
 }
 export default compose(
   withDashboardActions,
+  withWarehouseTransfersActions,
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferTableSize: warehouseTransferSettings?.tableSize,
+  })),
 )(WarehouseTransfersDataTable);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersEmptyStatus.js

@@ -17,7 +17,7 @@ export default function WarehouseTransfersEmptyStatus() {
             intent={Intent.PRIMARY}
             large={true}
             onClick={() => {
-              history.push('/warehouse-transfers/new');
+              history.push('/warehouses-transfers/new');
             }}
           >
             <T id={'warehouse_transfer.action.new_warehouse_transfer'} />

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersList.js

@@ -3,16 +3,36 @@ 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';
+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],
+  );
 
-function WarehouseTransfersList({}) {
   return (
-    <WarehouseTransfersListProvider>
+    <WarehouseTransfersListProvider
+      query={transformTableStateToQuery(warehouseTransferTableState)}
+      tableStateChanged={warehouseTransferTableStateChanged}
+    >
       <WarehouseTransfersActionsBar />
       <DashboardPageContent>
         <WarehouseTransfersViewTabs />
@@ -22,4 +42,12 @@ function WarehouseTransfersList({}) {
   );
 }
 
-export default WarehouseTransfersList;
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(
+    ({ warehouseTransferTableState, warehouseTransferTableStateChanged }) => ({
+      warehouseTransferTableState,
+      warehouseTransferTableStateChanged,
+    }),
+  ),
+)(WarehouseTransfersList);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersListProvider.js

@@ -2,22 +2,74 @@ import React from 'react';
 import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useWarehousesTransfers,
+  useRefreshWarehouseTransfers,
+} from 'hooks/query';
+
+import { getFieldsFromResourceMeta } from 'utils';
 
 const WarehouseTransfersListContext = React.createContext();
 
 /**
  * WarehouseTransfer data provider
  */
-function WarehouseTransfersListProvider({ ...props }) {
+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 = false;
+  const isEmptyStatus =
+    isEmpty(warehousesTransfers) && !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 name={'warehouse-transfers-list'}>
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'warehouse-transfers-list'}
+    >
       <WarehouseTransfersListContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersViewTabs.js

@@ -1,23 +1,34 @@
 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 withWarehouseTransfers from './withWarehouseTransfers';
+import withWarehouseTransfersActions from './withWarehouseTransfersActions';
 
-import { compose } from 'utils';
+import { useWarehouseTranfersListContext } from './WarehouseTransfersListProvider';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Warehouse transfer view tabs.
  */
-function WarehouseTransfersViewTabs() {
+function WarehouseTransfersViewTabs({
+  // #withWarehouseTransfers
+  warehouseTransferCurrentView,
+
+  // #withWarehouseTransfersActions
+  setWarehouseTransferTableState,
+}) {
+  const { WarehouseTransferView } = useWarehouseTranfersListContext();
+
   // Handles click a new view tab.
   const handleClickNewView = () => {};
 
   // Handles the active tab chaing.
-  const handleTabsChange = (customView) => {};
+  const handleTabsChange = (viewSlug) => {
+    setWarehouseTransferTableState({ viewSlug });
+  };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
@@ -34,4 +45,9 @@ function WarehouseTransfersViewTabs() {
   );
 }
 
-export default WarehouseTransfersViewTabs;
+export default compose(
+  withWarehouseTransfersActions,
+  withWarehouseTransfers(({ warehouseTransferTableState }) => ({
+    warehouseTransferCurrentView: warehouseTransferTableState?.viewSlug,
+  })),
+)(WarehouseTransfersViewTabs);

src/containers/WarehouseTransfers/WarehouseTransfersLanding/components.js

@@ -58,7 +58,7 @@ export function useWarehouseTransfersTableColumns() {
       {
         id: 'date',
         Header: intl.get('date'),
-        accessor: 'date',
+        accessor: 'formatted_date',
         Cell: FormatDateCell,
         width: 120,
         className: 'date',
@@ -66,36 +66,29 @@ export function useWarehouseTransfersTableColumns() {
         textOverview: true,
       },
       {
-        id: 'transfer_no',
+        id: 'transaction_number',
         Header: intl.get('warehouse_transfer.column.transfer_no'),
-        accessor: 'transfer_no',
-        width: 120,
-        className: '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',
-        width: 150,
+        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',
-        width: 150,
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'reason',
-        Header: intl.get('reason'),
-        accessor: 'reason',
-        className: 'reason',
-        width: 120,
+        accessor: 'to_warehouse.name',
+        width: 140,
+        className: 'to_warehouse',
         clickable: true,
         textOverview: true,
       },
@@ -103,7 +96,7 @@ export function useWarehouseTransfersTableColumns() {
         id: 'status',
         Header: intl.get('status'),
         // accessor: (row) => statusAccessor(row),
-        width: 160,
+        width: 140,
         className: 'status',
         clickable: true,
       },

src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfers.js

@@ -0,0 +1,19 @@
+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);
+};

src/containers/WarehouseTransfers/WarehouseTransfersLanding/withWarehouseTransfersActions.js

@@ -0,0 +1,13 @@
+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);