🆕 chooser / furni

Added the option to select items in funri and pick them up.

The following is required in you Texts file:
"widget.chooser.checkall": "Select Furniture",
"widget.chooser.btn.pickall": "Pickup the selected furniture!"

Please be aware if you want to run this in the Default ARC emu you need to add a packet !

src/components/room/widgets/choosers/ChooserWidgetView.tsx

@@ -1,6 +1,9 @@
+import { FurniturePickupAllComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { GetSessionDataManager, LocalizeText, RoomObjectItem } from '../../../../api';
-import { classNames, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { GetSessionDataManager, LocalizeText, RoomObjectItem, SendMessageComposer } from '../../../../api';
+import { Base, Button, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common';
+
+const LIMIT_FURNI_PICKALL = 100;
 
 interface ChooserWidgetViewProps
 {
@@ -8,6 +11,7 @@ interface ChooserWidgetViewProps
     items: RoomObjectItem[];
     selectItem: (item: RoomObjectItem) => void;
     onClose: () => void;
+    pickallFurni?: boolean;
 }
 
 export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
@@ -17,11 +21,52 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
     const [ searchValue, setSearchValue ] = useState('');
     const canSeeId = GetSessionDataManager().isModerator;
 
+    const [ checkAll, setCheckAll ] = useState(false);
+    const [ checkedIds, setCheckedIds ] = useState<number[]>([]);
+    
+    const checkedId = (id?: number) =>
+    {
+        if (id) 
+        {
+            if (isChecked(id))
+                setCheckedIds(checkedIds.filter(x => x !== id));
+            else if(checkedIds.length < LIMIT_FURNI_PICKALL)
+                setCheckedIds([ ...checkedIds, id ]);
+        }
+        else
+        {
+            setCheckAll(value => !value);
+            
+            if (!checkAll)
+            {
+                const itemIds = filteredItems.map(x => x.id).slice(0, LIMIT_FURNI_PICKALL);
+                setCheckedIds(itemIds);
+            } 
+            else 
+            {
+                setCheckedIds([]);
+            }
+        }
+    }
+
+    const isChecked = (id: number) => checkedIds.includes(id);
+
+    const onClickPickAll = () =>
+    {
+        SendMessageComposer(new FurniturePickupAllComposer(...checkedIds));
+        setCheckedIds([]);
+        setCheckAll(false);
+    }
+
     const filteredItems = useMemo(() =>
     {
         const value = searchValue.toLocaleLowerCase();
 
-        return items.filter(item => item.name?.toLocaleLowerCase().includes(value));
+        const itemsFilter = items.filter(item => item.name?.toLocaleLowerCase().includes(value));
+
+        const itemsFilterSorted = itemsFilter.sort((a, b) => a.name.localeCompare(b.name));
+
+        return itemsFilterSorted
     }, [ items, searchValue ]);
 
     useEffect(() =>
@@ -33,17 +78,25 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 
     return (
         <NitroCardView className="nitro-chooser-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
-            <NitroCardContentView overflow="hidden" gap={ 2 }>
+            <NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ onClose } />
+            <NitroCardContentView overflow="hidden" gap={ 1 }>
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                { props.pickallFurni && <Flex gap={ 2 } className="text-black">
+                    <input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ (e) => checkedId() } />
+                    <label className="form-check-label">{ LocalizeText('widget.chooser.checkall') }</label>
+                </Flex> }
                 <InfiniteScroll rows={ filteredItems } rowRender={ row =>
                 {
                     return (
                         <Flex alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } pointer onClick={ event => setSelectedItem(row) }>
+                            { props.pickallFurni && <input className="flex-shrink-0 mx-1 form-check-input" type="checkbox" name="showMyFace" checked={ isChecked(row.id) } onChange={ (e) => checkedId(row.id) } /> }
                             <Text truncate>{ row.name } { canSeeId && (' - ' + row.id) }</Text>
                         </Flex>
                     );
                 } } />
+                { props.pickallFurni && <Button variant="secondary" onClick={ event => onClickPickAll() } disabled={ !checkedIds.length }>
+                    { LocalizeText('widget.chooser.btn.pickall') }
+                </Button> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/room/widgets/choosers/FurniChooserWidgetView.tsx

@@ -1,12 +1,13 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
-import { useFurniChooserWidget } from '../../../../hooks';
+import { useFurniChooserWidget, useRoom } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
 export const FurniChooserWidgetView: FC<{}> = props =>
 {
     const { items = null, onClose = null, selectItem = null, populateChooser = null } = useFurniChooserWidget();
+    const { roomSession = null } = useRoom()
 
     useEffect(() =>
     {
@@ -27,5 +28,5 @@ export const FurniChooserWidgetView: FC<{}> = props =>
     
     if (!items) return null;
 
-    return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } items={ items } selectItem={ selectItem } onClose={ onClose } />;
+    return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } items={ items } selectItem={ selectItem } onClose={ onClose } pickallFurni={ roomSession?.isRoomOwner } />;
 }