feat: WIP Item entries select warehouse.

src/components/DataTableCells/RadioFieldCell.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, Intent, Classes, Radio } from '@blueprintjs/core';
+
+export function RadioTableCell({
+  row: { index, original },
+  column: { id, radioProps },
+  cell: { value: initialValue },
+  payload,
+}) {
+  const [value, setValue] = React.useState(initialValue);
+
+  const onChange = (e) => {
+    // const newValue = e.target.checked;
+    // debugger;
+    // setValue(newValue);
+    // payload.updateData(index, id, newValue);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Radio
+        value={value}
+        label={'Warehouse #1'}
+        onChange={onChange}
+        checked={initialValue}
+        minimal={true}
+        {...radioProps}
+      />
+    </FormGroup>
+  );
+}

src/components/DataTableCells/index.js

@@ -9,6 +9,7 @@ import NumericInputCell from './NumericInputCell';
 import CheckBoxFieldCell from './CheckBoxFieldCell';
 import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
+import { RadioTableCell } from './RadioFieldCell';
 
 export {
   AccountsListFieldCell,
@@ -23,4 +24,5 @@ export {
   CheckBoxFieldCell,
   SwitchFieldCell,
   TextAreaCell,
+  RadioTableCell,
 };

src/components/Warehouses/WarehouseItemEntrySelectPopover.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { PopoverInteractionKind, Position } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
+import { DataTable } from 'components';
+import { RadioTableCell } from 'components/DataTableCells';
+import { compose, updateTableCell } from 'utils';
+
+import { TableStyle } from 'common';
+
+const Classes = {
+  WAREHOUSE_ITEM_ENTRY_POPOVER: 'warehouse-item-entry-popover',
+};
+/**
+ * Retrieve  warehouse entries columns.
+ */
+export function useWarehouseEntriesColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: 'Warehouse Name',
+        accessor: 'warehouse_name',
+        Cell: RadioTableCell,
+        width: 120,
+        disableSortBy: true,
+        className: 'name',
+      },
+      {
+        id: 'quantity',
+        Header: 'Quantity on Hand',
+        accessor: 'quantity',
+        disableSortBy: true,
+        align: 'right',
+        width: 60,
+      },
+      {
+        id: 'availiable_for_sale',
+        Header: 'Availiable for Sale',
+        accessor: 'availiable_for_sale',
+        disableSortBy: true,
+        align: 'right',
+        width: 60,
+        className: 'availiable_for_sale',
+      },
+    ],
+    [],
+  );
+}
+
+export function IntegrateWarehouseTable({ children }) {
+  return (
+    <>
+      <GlobalPopoverStyled />
+      <Popover2
+        // minimal={true}
+        content={<IntegrateWarehousesTable />}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.BOTTOM_RIGHT}
+        popoverClassName={Classes.WAREHOUSE_ITEM_ENTRY_POPOVER}
+        autoFocus={false}
+        enforceFocus={false}
+        shouldReturnFocusOnClose={false}
+      >
+        {children}
+      </Popover2>
+    </>
+  );
+}
+
+const PopoverLink = styled.button`
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+  margin-top: 18px;
+  padding-right: 0px;
+  color: #0052cc;
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+`;
+
+export function IntegrateWarehousesTable({
+  // #ownProps
+  onUpdateData,
+  entries,
+  errors,
+}) {
+  // warehouses entries columns.
+  const columns = useWarehouseEntriesColumns();
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  const data = React.useMemo(
+    () => [
+      {
+        warehouse_name: true,
+        quantity: '9,444',
+        availiable_for_sale: 0,
+      },
+      {
+        warehouse_name: false,
+        quantity: '19,444',
+        availiable_for_sale: 0,
+      },
+      {
+        warehouse_name: false,
+        quantity: '19,444',
+        availiable_for_sale: 0,
+      },
+
+      {
+        warehouse_name: false,
+        quantity: '19,444',
+        availiable_for_sale: 0,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <WarehousesRoot>
+      <PopoverHeader>Warehouses</PopoverHeader>
+
+      <WarehouseDataTable
+        columns={columns}
+        data={data}
+        styleName={TableStyle.Constrant}
+        payload={{
+          errors: errors || [],
+          updateData: handleUpdateData,
+        }}
+      />
+
+      <WarehousesDesc>
+        <WarehousesDescItem>
+          Stock on Hand : This is calculated based on Bills and Invoices.
+        </WarehousesDescItem>
+        <WarehousesDescItem>
+          Available for Sale : Stock on Hand - Committed Stock
+        </WarehousesDescItem>
+      </WarehousesDesc>
+    </WarehousesRoot>
+  );
+}
+
+const WarehouseDataTable = styled(DataTable)`
+  .table {
+    font-size: 12px;
+    border-bottom: 1px solid #888;
+
+    .thead .tr:first-of-type .th,
+    .thead .tr:first-of-type .th {
+      border-top-color: #888;
+    }
+    .thead .tr .th {
+      border-bottom-color: #888;
+      font-size: 12px;
+    }
+    .tbody .tr .td {
+      padding: 0.6rem 0.6rem;
+
+      &:not(:first-of-type) {
+        border-left: 1px solid #e6e6e6;
+      }
+    }
+
+    .tbody {
+      max-height: 145px;
+
+      .bp3-form-group .bp3-control,
+      .bp3-form-group {
+        margin: 0;
+      }
+
+      .tr .td.availiable_for_sale {
+        font-weight: 600;
+      }
+    }
+  }
+`;
+
+const WarehousesRoot = styled.div`
+  width: 500px;
+`;
+
+const WarehousesDescItem = styled.div`
+  &:not(:last-of-type) {
+    margin-bottom: 6px;
+  }
+`;
+const WarehousesDesc = styled.div`
+  font-size: 10px;
+  padding: 12px 15px;
+`;
+
+const PopoverHeader = styled.div`
+  color: #222;
+  line-height: 1;
+  padding: 10px 15px;
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+const GlobalPopoverStyled = createGlobalStyle`
+  .${Classes.WAREHOUSE_ITEM_ENTRY_POPOVER}{
+    &.bp3-popover2,
+    .bp3-popover2-content{
+      border-radius: 10px;
+    }
+  }
+`;

src/components/Warehouses/index.js

@@ -1,2 +1,3 @@
 export * from './WarehouseSelect';
 export * from './WarehouseMultiSelect';
+export * from './WarehouseItemEntrySelectPopover'

src/containers/Entries/components.js

@@ -11,6 +11,7 @@ import {
   NumericInputCell,
   CheckBoxFieldCell,
 } from 'components/DataTableCells';
+import { IntegrateWarehouseTable } from 'components';
 
 /**
  * Item header cell.
@@ -105,12 +106,20 @@ const LandedCostHeaderCell = () => {
   );
 };
 
+function QuantityCell(props) {
+  return (
+    <>
+      <IntegrateWarehouseTable>
+        <NumericInputCell {...props} />
+      </IntegrateWarehouseTable>
+    </>
+  );
+}
+
 /**
  * Retrieve editable items entries columns.
  */
-export function useEditableItemsEntriesColumns({
+export function useEditableItemsEntriesColumns({ landedCost }) {
-  landedCost,
-}) {
   return React.useMemo(
     () => [
       {
@@ -144,7 +153,7 @@ export function useEditableItemsEntriesColumns({
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
-        Cell: NumericInputCell,
+        Cell: QuantityCell,
         Footer: QuantityTotalFooterCell,
         disableSortBy: true,
         width: 70,

src/style/App.scss

@@ -52,6 +52,7 @@ body.hide-scrollbar .Pane2 {
 }
 
 .bp3-fill {
+
   .bp3-popover-wrapper,
   .bp3-popover-target {
     display: block;
@@ -103,27 +104,21 @@ body.hide-scrollbar .Pane2 {
   background-color: #0066ff;
 }
 
-.ReactVirtualized__Collection {
+.ReactVirtualized__Collection {}
-}
 
-.ReactVirtualized__Collection__innerScrollContainer {
+.ReactVirtualized__Collection__innerScrollContainer {}
-}
 
 /* Grid default theme */
 
-.ReactVirtualized__Grid {
+.ReactVirtualized__Grid {}
-}
 
-.ReactVirtualized__Grid__innerScrollContainer {
+.ReactVirtualized__Grid__innerScrollContainer {}
-}
 
 /* Table default theme */
 
-.ReactVirtualized__Table {
+.ReactVirtualized__Table {}
-}
 
-.ReactVirtualized__Table__Grid {
+.ReactVirtualized__Table__Grid {}
-}
 
 .ReactVirtualized__Table__headerRow {
   font-weight: 700;
@@ -186,8 +181,7 @@ body.hide-scrollbar .Pane2 {
 
 /* List default theme */
 
-.ReactVirtualized__List {
+.ReactVirtualized__List {}
-}
 
 .bp3-drawer {
   box-shadow: 0 0 0;
@@ -216,6 +210,10 @@ html[lang^='ar'] {
     0 8px 24px rgba(16, 22, 26, 0.1);
 }
 
+.bp3-popover2 .bp3-popover2-arrow::before {
+  box-shadow: 0 8px 24px rgba(16, 22, 26, 0.1) !important;
+}
+
 .bp3-tooltip2 .bp3-popover2-arrow:before {
   box-shadow: 0 0 0;
 }
@@ -243,7 +241,7 @@ html[lang^='ar'] {
       padding-left: 14px;
       padding-right: 14px;
 
-      & + .bp3-button {
+      &+.bp3-button {
         margin-left: 8px;
       }
     }
@@ -255,7 +253,7 @@ html[lang^='ar'] {
         margin: 0;
       }
 
-      > .bp3-spinner {
+      >.bp3-spinner {
         margin: 20px 0;
       }
     }
@@ -283,6 +281,7 @@ html[lang^='ar'] {
 .align-right {
   text-align: right;
 }
+
 .align-center {
   text-align: center;
 }