🆙 Added delete Furni / Pets in inventory

2026-06-20 15:36:18 +00:00 · 2026-02-19 13:22:37 +01:00
parent 325453db36
commit 3cf8c9b89a
11 changed files with 403 additions and 71 deletions
@@ -0,0 +1,111 @@
+import { DeleteItemMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
+import { FurnitureItem, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../api';
+import { LayoutFurniImageView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { DeleteItemConfirmEvent } from '../../../../events';
+import { useNotification, useUiEvent } from '../../../../hooks';
+import { NitroButton, NitroInput } from '../../../../layout';
+
+export const InventoryFurnitureDeleteView: FC<{}> = props =>
+{
+    const [ item, setItem ] = useState<FurnitureItem>(null);
+    const [ amount, setAmount ] = useState(1);
+    const [ maxAmount, setMaxAmount ] = useState(1);
+    const { showConfirm = null } = useNotification();
+
+    const onClose = () =>
+    {
+        setItem(null);
+        setAmount(1);
+        setMaxAmount(1);
+    };
+
+    const updateAmount = (value: string) =>
+    {
+        let newValue = parseInt(value);
+
+        if(isNaN(newValue)) newValue = 1;
+
+        newValue = Math.max(newValue, 1);
+        newValue = Math.min(newValue, maxAmount);
+
+        setAmount(newValue);
+    };
+
+    const deleteItem = () =>
+    {
+        if(!item) return;
+
+        const furniTitle = LocalizeText(item.isWallItem ? 'wallItem.name.' + item.type : 'roomItem.name.' + item.type);
+
+        showConfirm(
+            LocalizeText('inventory.delete.confirm_delete.info', [ 'furniname', 'amount' ], [ furniTitle, amount.toString() ]),
+            () =>
+            {
+                SendMessageComposer(new DeleteItemMessageComposer(item.id, amount));
+                onClose();
+            },
+            () => onClose(),
+            null,
+            null,
+            LocalizeText('inventory.delete.confirm_delete.title')
+        );
+    };
+
+    useUiEvent<DeleteItemConfirmEvent>(DeleteItemConfirmEvent.DELETE_ITEM_CONFIRM, event =>
+    {
+        setItem(event.item);
+        setMaxAmount(event.amount);
+        setAmount(1);
+    });
+
+    if(!item) return null;
+
+    const furniTitle = LocalizeText(item.isWallItem ? 'wallItem.name.' + item.type : 'roomItem.name.' + item.type);
+
+    return (
+        <NitroCardView className="w-[340px]" uniqueKey="inventory-delete">
+            <NitroCardHeaderView
+                headerText={ LocalizeText('inventory.delete.confirm_delete.title') }
+                onCloseClick={ onClose } />
+            <div className="bg-[#DFDFDF] p-2">
+                <div className="flex items-center gap-2">
+                    <div className="shrink-0 w-[64px] h-[64px] bg-white rounded flex items-center justify-center">
+                        <LayoutFurniImageView
+                            extraData={ item.extra.toString() }
+                            productClassId={ item.type }
+                            productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } />
+                    </div>
+                    <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+                        <span className="font-bold text-sm truncate">{ furniTitle }</span>
+                        <div className="flex items-center gap-1">
+                            <FaCaretLeft
+                                className="cursor-pointer text-black fa-icon shrink-0"
+                                onClick={ () => updateAmount((amount - 1).toString()) } />
+                            <NitroInput
+                                className="quantity-input text-center !py-0.5"
+                                type="number"
+                                min={ 1 }
+                                max={ maxAmount }
+                                value={ amount }
+                                onChange={ event => updateAmount(event.target.value) } />
+                            <FaCaretRight
+                                className="cursor-pointer text-black fa-icon shrink-0"
+                                onClick={ () => updateAmount((amount + 1).toString()) } />
+                            <NitroButton className="text-xs py-0.5 px-1 shrink-0" onClick={ () => updateAmount(maxAmount.toString()) }>
+                                { LocalizeText('inventory.delete.max_amount.button') }
+                            </NitroButton>
+                        </div>
+                        <NitroButton
+                            className="!bg-danger hover:!bg-danger/80 w-full"
+                            disabled={ amount > maxAmount }
+                            onClick={ deleteItem }>
+                            { LocalizeText('inventory.delete.confirm_delete.button') }
+                        </NitroButton>
+                    </div>
+                </div>
+            </div>
+        </NitroCardView>
+    );
+};
@@ -1,14 +1,14 @@
 import { InfiniteGrid } from '@layout/InfiniteGrid';
 import { GetRoomEngine, GetSessionDataManager, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
+import { FaTrashAlt } from 'react-icons/fa';
 import { DispatchUiEvent, FurniCategory, GroupItem, LocalizeText, UnseenItemCategory, attemptItemPlacement } from '../../../../api';
 import { LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView } from '../../../../common';
-import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
+import { CatalogPostMarketplaceOfferEvent, DeleteItemConfirmEvent } from '../../../../events';
 import { useInventoryFurni, useInventoryUnseenTracker } from '../../../../hooks';
 import { NitroButton } from '../../../../layout';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
 import { InventoryFurnitureItemView } from './InventoryFurnitureItemView';
-import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';

 const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
 {
@@ -21,14 +21,23 @@ const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
    DispatchUiEvent(new CatalogPostMarketplaceOfferEvent(item));
 };

+const attemptDeleteItem = (groupItem: GroupItem) =>
+{
+    const item = groupItem.getLastItem();
+
+    if(!item) return;
+
+    DispatchUiEvent(new DeleteItemConfirmEvent(item, groupItem.getTotalCount()));
+};
+
 export const InventoryFurnitureView: FC<{
    roomSession: IRoomSession;
    roomPreviewer: RoomPreviewer;
+    filteredGroupItems: GroupItem[];
 }> = props =>
 {
-    const { roomSession = null, roomPreviewer = null } = props;
+    const { roomSession = null, roomPreviewer = null, filteredGroupItems = [] } = props;
    const [ isVisible, setIsVisible ] = useState(false);
-    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>([]);
    const { groupItems = [], selectedItem = null, activate = null, deactivate = null } = useInventoryFurni();
    const { resetItems = null } = useInventoryUnseenTracker();

@@ -112,7 +121,6 @@ export const InventoryFurnitureView: FC<{
    return (
        <div className="grid h-full grid-cols-12 gap-2">
            <div className="flex flex-col col-span-7 gap-1 overflow-hidden">
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                <InfiniteGrid<GroupItem>
                    columnCount={ 6 }
                    itemRender={ item => <InventoryFurnitureItemView groupItem={ item } /> }
@@ -121,25 +129,33 @@ export const InventoryFurnitureView: FC<{
            <div className="flex flex-col col-span-5">
                <div className="relative flex flex-col">
                    <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
+                    { selectedItem &&
+                        <NitroButton
+                            className="!bg-danger hover:!bg-danger/80 absolute bottom-2 end-2 p-1"
+                            onClick={ () => attemptDeleteItem(selectedItem) }>
+                            <FaTrashAlt className="fa-icon" />
+                        </NitroButton> }
                    { selectedItem && selectedItem.stuffData.isUnique &&
-                            <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
+                        <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
                    { (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
-                            <LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
+                        <LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
                </div>
                { selectedItem &&
-                        <div className="flex flex-col justify-between gap-2 grow">
-                            <span className="text-sm truncate grow">{ selectedItem.name }</span>
-                            <div className="flex flex-col gap-1">
-                                { !!roomSession &&
-                                    <NitroButton onClick={ event => attemptItemPlacement(selectedItem) }>
-                                        { LocalizeText('inventory.furni.placetoroom') }
-                                    </NitroButton> }
-                                { (selectedItem && selectedItem.isSellable) &&
-                                    <NitroButton onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
-                                        { LocalizeText('inventory.marketplace.sell') }
-                                    </NitroButton> }
-                            </div>
-                        </div> }
+                    <div className="flex flex-col justify-between gap-2 grow">
+                        <span className="text-sm truncate grow">{ selectedItem.name }</span>
+                        { selectedItem.description &&
+                            <span className="text-xs truncate">{ selectedItem.description }</span> }
+                        <div className="flex flex-col gap-1">
+                            { !!roomSession &&
+                                <NitroButton onClick={ event => attemptItemPlacement(selectedItem) }>
+                                    { LocalizeText('inventory.furni.placetoroom') }
+                                </NitroButton> }
+                            { selectedItem.isSellable &&
+                                <NitroButton onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
+                                    { LocalizeText('inventory.marketplace.sell') }
+                                </NitroButton> }
+                        </div>
+                    </div> }
            </div>
        </div>
    );