From aeeb1aff87014472b0ed9871c447fc4db1bb1cb4 Mon Sep 17 00:00:00 2001
From: object <objectholos@gmail.com>
Date: Fri, 12 Aug 2022 15:08:21 +0000
Subject: [PATCH] Fix / New input for trade amount

---
 .../views/furniture/InventoryTradeView.tsx    | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index 3de9eef8..9825dc28 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -12,6 +12,7 @@ interface InventoryTradeViewProps
 }
 
 const MAX_ITEMS_TO_TRADE: number = 9;
+const MIN_VALUE: number = 1;
 
 export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 {
@@ -21,6 +22,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
     const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null);
     const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
     const [ countdownTick, setCountdownTick ] = useState(3);
+    const [ quantity, setQuantity ] = useState<number | string>(1);
     const { ownUser = null, otherUser = null, groupItems = [], tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade();
     const { simpleAlert = null } = useNotification();
 
@@ -118,6 +120,24 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
         return <FontAwesomeIcon icon={ iconName } className={ 'text-' + textColor } />
     }
 
+    const updateQuantity = (value: number | string, totalItemCount: number) =>
+    {
+        if(isNaN(Number(value)) || Number(value) < 0 || value == '') value = 1;
+
+        value = Math.max(Number(value), MIN_VALUE);
+        value = Math.min(Number(value), totalItemCount);
+
+        if(value === quantity) return;
+
+        setQuantity(value);
+    }
+
+    const changeCount = (totalItemCount: number) =>
+    {
+        updateQuantity(Number(quantity), totalItemCount);
+        attemptItemOffer(Number(quantity));
+    }
+
     useEffect(() =>
     {
         if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return;
@@ -159,18 +179,29 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             const count = item.getUnlockedCount();
 
                             return (
-                                <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
+                                <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
                                     { ((count > 0) && (groupItem === item)) &&
-                                    <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
-                                        <FontAwesomeIcon icon="chevron-right" />
-                                    </Button> }
+                                        <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
+                                            <FontAwesomeIcon icon="chevron-right" />
+                                        </Button>
+                                    }
                                 </LayoutGridItem>
                             );
                         }) }
                     </AutoGrid>
-                    <Base fullWidth className="badge bg-muted">
-                        { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
-                    </Base>
+                    <Column gap={ 1 } alignItems="end">
+                        <Grid overflow="hidden">
+                            <Column size={ 6 } overflow="hidden">
+                                <input type="number" className="form-control form-control-sm quantity-input" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ !groupItem } value={ quantity } onChange={ event => setQuantity(event.target.value == '' || isNaN(event.target.valueAsNumber) || event.target.valueAsNumber < 0 ? '' : event.target.valueAsNumber) } />
+                            </Column>
+                            <Column size={ 6 } overflow="hidden">
+                                <Button variant="secondary" disabled={ !groupItem } onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
+                            </Column>
+                        </Grid>
+                        <Base fullWidth className="badge bg-muted">
+                            { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
+                        </Base>
+                    </Column>
                 </Flex>
             </Column>
             <Column size={ 8 } overflow="hidden">
@@ -188,7 +219,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 if(!item) return <LayoutGridItem key={ i } />;
 
                                 return (
-                                    <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                    <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item)>
                                         { (ownGroupItem === item) &&
                                         <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
                                             <FontAwesomeIcon icon="chevron-left" />