diff --git a/src/components/DataTableCells/RadioFieldCell.js b/src/components/DataTableCells/RadioFieldCell.js new file mode 100644 index 000000000..c9ccd8869 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/components/DataTableCells/index.js b/src/components/DataTableCells/index.js index fed349eed..16bdb75f2 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 { RadioTableCell } from './RadioFieldCell'; export { AccountsListFieldCell, @@ -23,4 +24,5 @@ export { CheckBoxFieldCell, SwitchFieldCell, TextAreaCell, + RadioTableCell, }; diff --git a/src/components/Warehouses/WarehouseItemEntrySelectPopover.js b/src/components/Warehouses/WarehouseItemEntrySelectPopover.js new file mode 100644 index 000000000..276ccb303 --- /dev/null +++ b/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 ( + <> + + } + interactionKind={PopoverInteractionKind.CLICK} + position={Position.BOTTOM_RIGHT} + popoverClassName={Classes.WAREHOUSE_ITEM_ENTRY_POPOVER} + autoFocus={false} + enforceFocus={false} + shouldReturnFocusOnClose={false} + > + {children} + + + ); +} + +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 ( + + Warehouses + + + + + + Stock on Hand : This is calculated based on Bills and Invoices. + + + Available for Sale : Stock on Hand - Committed Stock + + + + ); +} + +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; + } + } +`; diff --git a/src/components/Warehouses/index.js b/src/components/Warehouses/index.js index 6975b2230..02cd000a9 100644 --- a/src/components/Warehouses/index.js +++ b/src/components/Warehouses/index.js @@ -1,2 +1,3 @@ export * from './WarehouseSelect'; export * from './WarehouseMultiSelect'; +export * from './WarehouseItemEntrySelectPopover' \ No newline at end of file diff --git a/src/containers/Entries/components.js b/src/containers/Entries/components.js index a6881db6d..50c7e9936 100644 --- a/src/containers/Entries/components.js +++ b/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 ( + <> + + + + + ); +} + /** * Retrieve editable items entries columns. */ -export function useEditableItemsEntriesColumns({ - landedCost, -}) { +export function useEditableItemsEntriesColumns({ 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, diff --git a/src/style/App.scss b/src/style/App.scss index 11a3f35cf..f9eedd96e 100644 --- a/src/style/App.scss +++ b/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,10 +281,11 @@ html[lang^='ar'] { .align-right { text-align: right; } + .align-center { text-align: center; } .font-bold { font-weight: 600; -} +} \ No newline at end of file