From 2aa26959e924af32a49bb943f2e5877dfede0ae9 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 30 Jan 2022 18:04:56 +0200
Subject: [PATCH] feat(warehouse) add warehouse propover.

---
 .../DataTableCells/NumericInputCell.js        |  4 +-
 .../DataTableCells/RadioFieldCell.js          | 44 +++++++++++
 src/components/DataTableCells/index.js        |  2 +
 .../WarehouseListPopover/WarehousesList.js    | 75 +++++++++++++++++++
 .../WarehouseListPopover/components.js        | 38 ++++++++++
 src/containers/WarehouseListPopover/index.js  | 36 +++++++++
 6 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DataTableCells/RadioFieldCell.js
 create mode 100644 src/containers/WarehouseListPopover/WarehousesList.js
 create mode 100644 src/containers/WarehouseListPopover/components.js
 create mode 100644 src/containers/WarehouseListPopover/index.js

diff --git a/src/components/DataTableCells/NumericInputCell.js b/src/components/DataTableCells/NumericInputCell.js
index eaf933fb8..5e6c5d245 100644
--- a/src/components/DataTableCells/NumericInputCell.js
+++ b/src/components/DataTableCells/NumericInputCell.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import WarehouseListPopover from '../../containers/WarehouseListPopover';
 
 /**
  * Numeric input table cell.
@@ -36,7 +37,8 @@ export default function NumericInputCell({
         onValueChange={handleValueChange}
         onBlur={onBlur}
         fill={true}
-        buttonPosition={"none"}
+        buttonPosition={'none'}
+        rightElement={<WarehouseListPopover />}
       />
     </FormGroup>
   );
diff --git a/src/components/DataTableCells/RadioFieldCell.js b/src/components/DataTableCells/RadioFieldCell.js
new file mode 100644
index 000000000..7471fb56c
--- /dev/null
+++ b/src/components/DataTableCells/RadioFieldCell.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, Intent, Classes, Radio } from '@blueprintjs/core';
+
+const RadioEditableCell = ({
+  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}
+        className="ml2"
+        {...radioProps}
+      />
+    </FormGroup>
+  );
+};
+
+export default RadioEditableCell;
diff --git a/src/components/DataTableCells/index.js b/src/components/DataTableCells/index.js
index fed349eed..4e0a42835 100644
--- a/src/components/DataTableCells/index.js
+++ b/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 RadioFieldCell from './RadioFieldCell';
 
 export {
   AccountsListFieldCell,
@@ -23,4 +24,5 @@ export {
   CheckBoxFieldCell,
   SwitchFieldCell,
   TextAreaCell,
+  RadioFieldCell,
 };
diff --git a/src/containers/WarehouseListPopover/WarehousesList.js b/src/containers/WarehouseListPopover/WarehousesList.js
new file mode 100644
index 000000000..15c85743c
--- /dev/null
+++ b/src/containers/WarehouseListPopover/WarehousesList.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CLASSES } from 'common/classes';
+import { TableStyle } from '../../common';
+import { DataTableEditable, DataTable } from 'components';
+import { compose, saveInvoke, updateTableCell } from 'utils';
+import { useWarehouseEntriesColumns } from './components';
+
+export default function IntegrateWarehousesTable({
+  // #ownProps
+  initialWarehouse,
+  selectedWarehouseId,
+  onUpdateData,
+  entries,
+  errors,
+}) {
+  const [rows, setRows] = React.useState(initialWarehouse);
+
+  // 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 = [
+    {
+      warehouse_name: true,
+      quantity: '9,444',
+      availiable_for_sale: 0,
+    },
+    {
+      warehouse_name: false,
+      quantity: '19,444',
+      availiable_for_sale: 0,
+    },
+  ];
+
+  return (
+    <WarehouseDataTableRoot
+      columns={columns}
+      data={DATA}
+      payload={{
+        errors: errors || [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
+
+const WarehouseDataTableRoot = styled(DataTable)`
+  width: 600px;
+
+  .table {
+    border: 1px solid #000000;
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      padding: 0.5rem;
+    }
+    .tbody .tr .td {
+      padding: 0.2rem 0.2rem;
+      border-bottom: 1px solid #cecbcb;
+    }
+  }
+`;
diff --git a/src/containers/WarehouseListPopover/components.js b/src/containers/WarehouseListPopover/components.js
new file mode 100644
index 000000000..1429a87e6
--- /dev/null
+++ b/src/containers/WarehouseListPopover/components.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { RadioFieldCell } from 'components/DataTableCells';
+
+/**
+ * Retrieve  warehouse entries columns.
+ */
+export function useWarehouseEntriesColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: 'Warehouse Name',
+        accessor: 'warehouse_name',
+        Cell: RadioFieldCell,
+        width: 120,
+        disableSortBy: true,
+        className: 'name',
+      },
+      {
+        id: 'quantity',
+        Header: 'Quantity on Hand',
+        accessor: 'quantity',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        id: 'availiable_for_sale',
+        Header: 'Availiable for Sale',
+        accessor: 'availiable_for_sale',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/WarehouseListPopover/index.js b/src/containers/WarehouseListPopover/index.js
new file mode 100644
index 000000000..d2026f8ec
--- /dev/null
+++ b/src/containers/WarehouseListPopover/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { PopoverInteractionKind, Position, Button } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+import WarehousesList from './WarehousesList';
+import { Icon, FormattedMessage as T, ButtonLink } from 'components';
+
+export default function IntegrateWarehouseTable() {
+  return (
+    <Popover2
+      minimal={true}
+      content={<WarehousesList />}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <PopoverLink>→</PopoverLink>
+    </Popover2>
+  );
+}
+
+const PopoverLink = styled.button`
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+  margin-top: 18px;
+  padding-right: 0px;
+  color: #0052cc;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+`;