🆙 get the chooser fixed

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

@@ -1,51 +1,93 @@
-import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { GetSessionDataManager, FurniturePickupAllComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { LocalizeText, RoomObjectItem } from '../../../../api';
+import { LocalizeText, RoomObjectItem, SendMessageComposer } from '../../../../api';
-import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { NitroInput, classNames } from '../../../../layout';
 
-interface ChooserWidgetViewProps
+const LIMIT_FURNI_PICKALL = 100;
-{
+
+interface ChooserWidgetViewProps {
     title: string;
     items: RoomObjectItem[];
     selectItem: (item: RoomObjectItem) => void;
     onClose: () => void;
+    pickallFurni?: boolean;
 }
 
-export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
+export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props => {
-{
+    const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false } = props;
-    const { title = null, items = [], selectItem = null, onClose = null } = props;
     const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
     const [ searchValue, setSearchValue ] = useState('');
+    const [ checkAll, setCheckAll ] = useState(false);
+    const [ checkedIds, setCheckedIds ] = useState<number[]>([]);
     const canSeeId = GetSessionDataManager().isModerator;
 
-    const filteredItems = useMemo(() =>
+    const checkedId = (id?: number) => {
-    {
+        if (id) {
-        const value = searchValue.toLocaleLowerCase();
+            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([]);
+            }
+        }
+    }
 
-        return items.filter(item => item.name?.toLocaleLowerCase().includes(value));
+    const isChecked = (id: number) => checkedIds.includes(id);
+
+    const onClickPickAll = () => {
+        SendMessageComposer(new FurniturePickupAllComposer(...checkedIds));
+        setCheckedIds([]);
+        setCheckAll(false);
+    }
+
+    const filteredItems = useMemo(() => {
+        const value = searchValue.toLocaleLowerCase();
+        const itemsFilter = items.filter(item => item.name?.toLocaleLowerCase().includes(value));
+        return itemsFilter.sort((a, b) => a.name.localeCompare(b.name));
     }, [ items, searchValue ]);
 
-    useEffect(() =>
+    useEffect(() => {
-    {
         if (!selectedItem) return;
-
         selectItem(selectedItem);
     }, [ selectedItem, selectItem ]);
 
     return (
-        <NitroCardView className="nitro-chooser-widget" theme="primary-slim">
+        <NitroCardView className="w-[200px] h-[200px]" theme="primary-slim">
-            <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ title + (pickallFurni ? ` (${filteredItems.length})` : '') } onCloseClick={ onClose } />
             <NitroCardContentView gap={ 2 } overflow="hidden">
                 <NitroInput placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
-                <InfiniteScroll rowRender={ row =>
+                { pickallFurni && (
-                {
+                    <Flex gap={ 2 }>
-                    return (
+                        <input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ () => checkedId() } />
-                        <Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ event => setSelectedItem(row) }>
+                        <Text>{ LocalizeText('widget.chooser.checkall') }</Text>
+                    </Flex>
+                )}
+                <InfiniteScroll rowRender={ row => (
+                    <Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ () => setSelectedItem(row) }>
+                        { pickallFurni && (
+                            <input 
+                                className="flex-shrink-0 mx-1 form-check-input" 
+                                type="checkbox" 
+                                checked={ isChecked(row.id) } 
+                                onChange={ () => checkedId(row.id) }
+                                onClick={ e => e.stopPropagation() }
+                            />
+                        )}
                         <Text truncate>{ row.name } { canSeeId && (' - ' + row.id) }</Text>
                     </Flex>
-                    );
+                )} rows={ filteredItems } />
-                } } rows={ filteredItems } />
+                { pickallFurni && (
+                    <Button variant="secondary" onClick={ onClickPickAll } disabled={ !checkedIds.length }>
+                        { LocalizeText('widget.chooser.btn.pickall') }
+                    </Button>
+                )}
             </NitroCardContentView>
         </NitroCardView>
     );

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

@@ -1,20 +1,17 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeText } from '../../../../api';
-import { useFurniChooserWidget } from '../../../../hooks';
+import { useFurniChooserWidget, useRoom } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
-export const FurniChooserWidgetView: FC<{}> = props =>
+export const FurniChooserWidgetView: FC<{}> = props => {
-{
     const { items = null, onClose = null, selectItem = null, populateChooser = null } = useFurniChooserWidget();
+    const { roomSession = null } = useRoom();
 
-    useEffect(() =>
+    useEffect(() => {
-    {
         const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
+            linkReceived: (url: string) => {
-            {
                 const parts = url.split('/');
-
                 populateChooser();
             },
             eventUrlPrefix: 'furni-chooser/'
@@ -27,5 +24,7 @@ export const FurniChooserWidgetView: FC<{}> = props =>
 
     if (!items) return null;
 
-    return <ChooserWidgetView items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.furni.title') } onClose={ onClose } />;
+    return (
+        <ChooserWidgetView className="w-[200px] h-[200px]" items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.furni.title') } onClose={ onClose } pickallFurni={ roomSession?.isRoomOwner } />
+    );
 };

src/css/widgets/ChooserWidgets.css

@@ -0,0 +1 @@
+1