Merge pull request 'combo sales screen price qty edit' (#125) from combo-table-qty-price-edit into main
Reviewed-on: Pozomind/pozo-retail-app#125
This commit is contained in:
commit
d4385831c6
File diff suppressed because it is too large
Load Diff
|
|
@ -73,9 +73,9 @@ import {
|
|||
} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
|
||||
import { useRemoveProducts } from '../BSBillingTable3/RemoveCartWithOffer.jsx';
|
||||
import { useUtilsComponent } from '../../../../../Services/utils.js';
|
||||
import ComboEditQty from '../ComboBillTableEdit/ComboEditQty.jsx';
|
||||
import ComboEditRate from '../ComboBillTableEdit/ComboEditRate.jsx';
|
||||
import CustomerPriceHistory from '../../UtillComponents/CustomerPriceHistory.jsx';
|
||||
import ComboEditQtyAndRate from '../ComboBillTableEdit/ComboEditQtyAndRate.jsx';
|
||||
|
||||
const ComboSalesBillTable = () => {
|
||||
const { removeExtraCharge } = useUtilsComponent();
|
||||
|
|
@ -177,6 +177,10 @@ const ComboSalesBillTable = () => {
|
|||
const [qtyEdit, setQtyEdit] = useState(false);
|
||||
const qtyTdRef = useRef(null);
|
||||
const qtyInputRef = useRef(null);
|
||||
const [shortKeyMethod, setshortKeyMethod] = useState(null);
|
||||
const [activeRowIndex, setActiveRowIndex] = useState(null);
|
||||
const [activeColIndex, setActiveColIndex] = useState(null);
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const handleEditQTYcombo = () => {
|
||||
if (!qtyEdit) {
|
||||
|
|
@ -268,7 +272,7 @@ const ComboSalesBillTable = () => {
|
|||
const item = getSelectedItem();
|
||||
if (!item) return;
|
||||
|
||||
handleEditQuantity(item);
|
||||
handleEditQuantityCombo(item);
|
||||
setshortKeyMethod(method);
|
||||
};
|
||||
|
||||
|
|
@ -285,7 +289,7 @@ const ComboSalesBillTable = () => {
|
|||
// 👉 CTRL shortcuts
|
||||
if (!event.ctrlKey) return;
|
||||
|
||||
if (key === 'q') {
|
||||
if (key === 'q') {
|
||||
event.preventDefault();
|
||||
handleShortcut('qty');
|
||||
} else if (key === 'e') {
|
||||
|
|
@ -2079,6 +2083,95 @@ const ComboSalesBillTable = () => {
|
|||
...(tableDataDinein || []),
|
||||
];
|
||||
|
||||
// Set last row as active when data changes
|
||||
useEffect(() => {
|
||||
if (combinedTableData?.length > 0 && activeRowIndex === null) {
|
||||
setActiveRowIndex(combinedTableData.length - 1);
|
||||
}
|
||||
}, [combinedTableData?.length]);
|
||||
|
||||
// Table navigation
|
||||
useEffect(() => {
|
||||
const handleTableNav = (e) => {
|
||||
if (EditQtyCombo || EditRateCombo) return;
|
||||
if (!combinedTableData?.length || activeRowIndex === null) return;
|
||||
|
||||
const visibleCols =
|
||||
tableOptions?.filter((opt) =>
|
||||
['Item', 'Quantity', 'Rate', 'Total'].includes(opt.OptionName)
|
||||
) || [];
|
||||
|
||||
// Arrow Up/Down - Row navigation
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setActiveRowIndex((prev) => Math.max(0, prev - 1));
|
||||
setActiveColIndex(null);
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setActiveRowIndex((prev) =>
|
||||
Math.min(combinedTableData.length - 1, prev + 1)
|
||||
);
|
||||
setActiveColIndex(null);
|
||||
}
|
||||
// Arrow Left/Right - Column navigation
|
||||
else if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
if (activeColIndex === null) {
|
||||
setActiveColIndex(visibleCols.length - 1);
|
||||
} else {
|
||||
setActiveColIndex((prev) => Math.max(0, prev - 1));
|
||||
}
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
if (activeColIndex === null) {
|
||||
setActiveColIndex(0);
|
||||
} else {
|
||||
setActiveColIndex((prev) =>
|
||||
Math.min(visibleCols.length - 1, prev + 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
// Tab - Move to next column
|
||||
else if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
if (activeColIndex === null) {
|
||||
setActiveColIndex(0);
|
||||
} else {
|
||||
const nextCol = activeColIndex + 1;
|
||||
if (nextCol >= visibleCols.length) {
|
||||
setActiveColIndex(0);
|
||||
if (activeRowIndex < combinedTableData.length - 1) {
|
||||
setActiveRowIndex((prev) => prev + 1);
|
||||
}
|
||||
} else {
|
||||
setActiveColIndex(nextCol);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Enter - Trigger cell action
|
||||
else if (e.key === 'Enter' && activeColIndex !== null) {
|
||||
e.preventDefault();
|
||||
const row = combinedTableData[activeRowIndex];
|
||||
const col = visibleCols[activeColIndex];
|
||||
if (row && col && editField) {
|
||||
if (col.OptionName === 'Quantity') handleEditQuantityCombo(row);
|
||||
else if (col.OptionName === 'Rate') handleEditRateCombo(row);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleTableNav);
|
||||
return () => window.removeEventListener('keydown', handleTableNav);
|
||||
}, [
|
||||
activeRowIndex,
|
||||
activeColIndex,
|
||||
combinedTableData,
|
||||
EditQtyCombo,
|
||||
EditRateCombo,
|
||||
editField,
|
||||
tableOptions,
|
||||
]);
|
||||
|
||||
console.log(combinedTableData, 'combinedTableData', tableData);
|
||||
const displayTableData =
|
||||
BillOrderPre === 'N' ? [...combinedTableData].reverse() : combinedTableData;
|
||||
|
|
@ -2266,7 +2359,7 @@ const ComboSalesBillTable = () => {
|
|||
return (
|
||||
<tr
|
||||
key={`${row?.InwardDtlId || index}-${row?.BookingTypeName || ''}-${row?.SalesId || ''}-${index}`}
|
||||
className={row.highlighted ? 'highlighted-row' : ''}
|
||||
className={`${row.highlighted ? 'highlighted-row' : ''} ${activeRowIndex === index ? 'active-row' : ''}`}
|
||||
style={{
|
||||
fontFamily: SelectedFont,
|
||||
backgroundColor:
|
||||
|
|
@ -2310,86 +2403,100 @@ const ComboSalesBillTable = () => {
|
|||
: 'none',
|
||||
}}
|
||||
>
|
||||
{tableOptions?.map((item) => (
|
||||
<>
|
||||
{/* HSN Code */}
|
||||
{item.OptionName === 'HSNCode' && (
|
||||
<td
|
||||
key={`hsn-${index}`}
|
||||
className="hsnCodeTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row.HSNCode || '-'}
|
||||
</td>
|
||||
)}
|
||||
{tableOptions?.map((item, colIdx) => {
|
||||
const isActiveCell =
|
||||
activeRowIndex === index &&
|
||||
activeColIndex !== null &&
|
||||
['Item', 'Quantity', 'Rate', 'Total'].indexOf(
|
||||
item.OptionName
|
||||
) === activeColIndex;
|
||||
|
||||
{/* Product Name / Item */}
|
||||
{(item.OptionName === 'Item' ||
|
||||
item.OptionName === 'Product Name') && (
|
||||
return (
|
||||
<>
|
||||
{/* HSN Code */}
|
||||
{item.OptionName === 'HSNCode' && (
|
||||
<td
|
||||
key={`prod-${index}`}
|
||||
className="productNameTd"
|
||||
onClick={() =>
|
||||
row.FullProductIdentifierDtls?.length > 0 ||
|
||||
row.ProductIdentifierDtls?.length > 0
|
||||
? handleImeiDetails(row)
|
||||
: editField && handleEditQuantity(row)
|
||||
}
|
||||
key={`hsn-${index}`}
|
||||
className="hsnCodeTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row?.Type !== 'OS' ? row.ProdName : row.ServiceName}
|
||||
{row?.BrandName ? ` ${row.BrandName}` : ''}
|
||||
{row?.Type !== 'C' && (
|
||||
<p className="Tbl3-Variant">
|
||||
{/* {row?.ProdVariantName} {row?.Size} {row?.UomName} */}
|
||||
(
|
||||
{!row?.ProdVariantName?.toLowerCase()?.includes(
|
||||
'variant'
|
||||
) && <span>{row?.ProdVariantName} </span>}
|
||||
{row?.Size}
|
||||
{row?.SinglePc == 'Y' ? 'PCS' : row?.UomName})
|
||||
</p>
|
||||
)}
|
||||
{row?.Type === 'C' &&
|
||||
row.ProdDetail?.map((prod, idx) => (
|
||||
<p key={idx}>
|
||||
{prod.ProdName} - {prod.Size} {prod.UomName}
|
||||
</p>
|
||||
))}
|
||||
{row.HSNCode || '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Barcode */}
|
||||
{item.OptionName === 'Barcode' && (
|
||||
<td
|
||||
key={`barcode-${index}`}
|
||||
className="barcodeTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row.QRCode || '-'}
|
||||
</td>
|
||||
)}
|
||||
{/* Product Name / Item */}
|
||||
{(item.OptionName === 'Item' ||
|
||||
item.OptionName === 'Product Name') && (
|
||||
<td
|
||||
key={`prod-${index}`}
|
||||
className={`productNameTd ${isActiveCell ? 'active-cell' : ''}`}
|
||||
onClick={() =>
|
||||
row.FullProductIdentifierDtls?.length > 0 ||
|
||||
row.ProductIdentifierDtls?.length > 0
|
||||
? handleImeiDetails(row)
|
||||
: editField && handleEditQuantity(row)
|
||||
}
|
||||
>
|
||||
{row?.Type !== 'OS' ? row.ProdName : row.ServiceName}
|
||||
{row?.BrandName ? ` ${row.BrandName}` : ''}
|
||||
{row?.Type !== 'C' && (
|
||||
<p className="Tbl3-Variant">
|
||||
{/* {row?.ProdVariantName} {row?.Size} {row?.UomName} */}
|
||||
(
|
||||
{!row?.ProdVariantName?.toLowerCase()?.includes(
|
||||
'variant'
|
||||
) && <span>{row?.ProdVariantName} </span>}
|
||||
{row?.Size}
|
||||
{row?.SinglePc == 'Y' ? 'PCS' : row?.UomName})
|
||||
</p>
|
||||
)}
|
||||
{row?.Type === 'C' &&
|
||||
row.ProdDetail?.map((prod, idx) => (
|
||||
<p key={idx}>
|
||||
{prod.ProdName} - {prod.Size} {prod.UomName}
|
||||
</p>
|
||||
))}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Quantity */}
|
||||
{item.OptionName === 'Quantity' && (
|
||||
<td
|
||||
ref={qtyTdRef}
|
||||
key={`qty-${index}`}
|
||||
// className="qtyTd"
|
||||
className={
|
||||
EditQtyCombo && row?.localId === Index
|
||||
{/* Barcode */}
|
||||
{item.OptionName === 'Barcode' && (
|
||||
<td
|
||||
key={`barcode-${index}`}
|
||||
className="barcodeTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row.QRCode || '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Quantity */}
|
||||
{item.OptionName === 'Quantity' && (
|
||||
<td
|
||||
ref={(el) => {
|
||||
if (
|
||||
shortKeyMethod === 'qty' &&
|
||||
row?.localId === Index
|
||||
) {
|
||||
el?.focus();
|
||||
el?.click();
|
||||
}
|
||||
}}
|
||||
key={`qty-${index}`}
|
||||
tabIndex={0}
|
||||
className={`${EditQtyCombo && row?.localId === Index
|
||||
? 'EditQTYcomboTD'
|
||||
: 'qtyTd'
|
||||
}
|
||||
} ${isActiveCell ? 'active-cell' : ''}`}
|
||||
onClick={() =>
|
||||
editField && handleEditQuantityCombo(row)
|
||||
}
|
||||
// onClick={() => handleEditQTYcombo()}
|
||||
>
|
||||
{(!EditQtyCombo || row?.localId !== Index) && (
|
||||
<>{row.OrderQty}</>
|
||||
)}
|
||||
{EditQtyCombo && row?.localId === Index && (
|
||||
<ComboEditQty
|
||||
>
|
||||
{(!EditQtyCombo || row?.localId !== Index) && (
|
||||
<>{row.OrderQty}</>
|
||||
)}
|
||||
{EditQtyCombo && row?.localId === Index && (
|
||||
<ComboEditQtyAndRate
|
||||
key={`edit-qty-${Index}`}
|
||||
handleEditQuantityCancel={
|
||||
handleEditQuantityComboCancel
|
||||
|
|
@ -2399,30 +2506,27 @@ const ComboSalesBillTable = () => {
|
|||
Index={Index}
|
||||
setIndex={setIndex}
|
||||
setEditQtyCombo={setEditQtyCombo}
|
||||
// id={`qty-${index}`}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Rate */}
|
||||
{item.OptionName === 'Rate' && (
|
||||
<td
|
||||
key={`rate-${index}`}
|
||||
// className="rateTd"
|
||||
className={EditRateCombo ? 'rateTdEditRate' : 'rateTd'}
|
||||
// onClick={() => editField && handleEditQuantity(row)}
|
||||
onClick={() => editField && handleEditRateCombo(row)}
|
||||
>
|
||||
{/* Rate */}
|
||||
{item.OptionName === 'Rate' && (
|
||||
<td
|
||||
key={`rate-${index}`}
|
||||
className={`${EditRateCombo ? 'rateTdEditRate' : 'rateTd'} ${isActiveCell ? 'active-cell' : ''}`}
|
||||
onClick={() => editField && handleEditRateCombo(row)}
|
||||
>
|
||||
{!EditRateCombo || row?.localId !== Index ? (
|
||||
<>
|
||||
{allowDecimal
|
||||
? Number(row?.OrderRate).toFixed(2)
|
||||
: Number(row?.OrderRate)}
|
||||
</>
|
||||
<>
|
||||
{allowDecimal
|
||||
? Number(row?.OrderRate).toFixed(2)
|
||||
: Number(row?.OrderRate)}
|
||||
</>
|
||||
) : null}
|
||||
{EditRateCombo && row?.localId === Index && (
|
||||
<ComboEditRate
|
||||
{EditRateCombo && row?.localId === Index && (
|
||||
<ComboEditQtyAndRate
|
||||
key={`edit-rate-${Index}`}
|
||||
handleEditRateComboCancel={
|
||||
handleEditRateComboCancel
|
||||
|
|
@ -2432,101 +2536,110 @@ const ComboSalesBillTable = () => {
|
|||
Index={Index}
|
||||
setIndex={setIndex}
|
||||
setEditRateCombo={setEditRateCombo}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Disc % */}
|
||||
{item.OptionName === 'Discount' && (
|
||||
<td
|
||||
key={`discPer-${index}`}
|
||||
className="discPerTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row?.Offer > 0
|
||||
? `${(
|
||||
(row.Offer / (row?.OrderQty * row?.OrderRate)) *
|
||||
100
|
||||
).toFixed(2)}%`
|
||||
: '-'}
|
||||
</td>
|
||||
)}
|
||||
{/* Disc % */}
|
||||
{item.OptionName === 'Discount' && (
|
||||
<td
|
||||
key={`discPer-${index}`}
|
||||
className="discPerTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row?.Offer > 0
|
||||
? `${(
|
||||
(row.Offer / (row?.OrderQty * row?.OrderRate)) *
|
||||
100
|
||||
).toFixed(2)}%`
|
||||
: '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Disc Amt */}
|
||||
{item.OptionName === 'Amount' && (
|
||||
<td
|
||||
key={`discAmt-${index}`}
|
||||
className="discAmtTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row.Offer || '-'}
|
||||
</td>
|
||||
)}
|
||||
{/* Disc Amt */}
|
||||
{item.OptionName === 'Amount' && (
|
||||
<td
|
||||
key={`discAmt-${index}`}
|
||||
className="discAmtTd"
|
||||
onClick={() => editField && handleEditQuantity(row)}
|
||||
>
|
||||
{row.Offer || '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Total */}
|
||||
{item.OptionName === 'Total' && (
|
||||
<td
|
||||
key={`total-${index}`}
|
||||
className="totalTd"
|
||||
onClick={() => {
|
||||
// if (editField) {
|
||||
// handleEditQuantity(row)
|
||||
// }
|
||||
if (GetCustId) {
|
||||
handleCustomerProductPriceHistory(row);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{allowDecimal
|
||||
? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(2)
|
||||
: Number(row.TotalAmt - (row?.Offer || 0))}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Optional columns */}
|
||||
{item.OptionName === 'SalesMan' && (
|
||||
<td key={`salesMan-${index}`} className="salesManTd">
|
||||
{row.salesMan || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === '%' && (
|
||||
<td key={`percentage-${index}`} className="percentageTd">
|
||||
{row.percentage || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'Commission' && (
|
||||
<td key={`commission-${index}`} className="commissionTd">
|
||||
{row.commission || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'StockId' && (
|
||||
<td key={`stockId-${index}`} className="stockIdTd">
|
||||
{row.stockId || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'Points' && (
|
||||
<td key={`points-${index}`} className="pointsTd">
|
||||
{row.points || '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Delete */}
|
||||
{item.OptionName === 'Delete' && (
|
||||
<td key={`delete-${index}`} className="deleteTd">
|
||||
<AiOutlineClose
|
||||
onClick={() => removeFromCart(row)}
|
||||
style={{
|
||||
color: '#FF4D4F',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
{/* Total */}
|
||||
{item.OptionName === 'Total' && (
|
||||
<td
|
||||
key={`total-${index}`}
|
||||
className={`totalTd ${isActiveCell ? 'active-cell' : ''}`}
|
||||
onClick={() => {
|
||||
// if (editField) {
|
||||
// handleEditQuantity(row)
|
||||
// }
|
||||
if (GetCustId) {
|
||||
handleCustomerProductPriceHistory(row);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
>
|
||||
{allowDecimal
|
||||
? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(
|
||||
2
|
||||
)
|
||||
: Number(row.TotalAmt - (row?.Offer || 0))}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Optional columns */}
|
||||
{item.OptionName === 'SalesMan' && (
|
||||
<td key={`salesMan-${index}`} className="salesManTd">
|
||||
{row.salesMan || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === '%' && (
|
||||
<td
|
||||
key={`percentage-${index}`}
|
||||
className="percentageTd"
|
||||
>
|
||||
{row.percentage || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'Commission' && (
|
||||
<td
|
||||
key={`commission-${index}`}
|
||||
className="commissionTd"
|
||||
>
|
||||
{row.commission || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'StockId' && (
|
||||
<td key={`stockId-${index}`} className="stockIdTd">
|
||||
{row.stockId || '-'}
|
||||
</td>
|
||||
)}
|
||||
{item.OptionName === 'Points' && (
|
||||
<td key={`points-${index}`} className="pointsTd">
|
||||
{row.points || '-'}
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Delete */}
|
||||
{item.OptionName === 'Delete' && (
|
||||
<td key={`delete-${index}`} className="deleteTd">
|
||||
<AiOutlineClose
|
||||
onClick={() => removeFromCart(row)}
|
||||
style={{
|
||||
color: '#FF4D4F',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
tbody {
|
||||
> tr:last-child {
|
||||
>tr:last-child {
|
||||
background-color: #e5d434 !important;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
|
@ -40,6 +40,16 @@
|
|||
background-color: #e5d434;
|
||||
}
|
||||
|
||||
&.active-row {
|
||||
outline: 2px solid #1292ee;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
td.active-cell {
|
||||
background-color: #1292ee !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #9c9c9c;
|
||||
|
|
@ -189,3 +199,14 @@
|
|||
padding: 1px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.focused-cell {
|
||||
background-color: #fff3cd !important;
|
||||
border: 2px solid #ffc107 !important;
|
||||
box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
|
||||
:where(.css-dev-only-do-not-override-mncuj7).ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||
background-color: rgba(116, 107, 107, 0.356);
|
||||
}
|
||||
Loading…
Reference in New Issue