duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 Added Username to Chooser (upon request)

Browse Source
This commit is contained in:
duckietm 2025-05-23 15:37:44 +02:00
parent dbb60f5424
commit 2b77463e2a
4 changed files with 147 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/api/room/widgets/RoomObjectItem.ts
View File

@ -3,26 +3,41 @@ export class RoomObjectItem
private _id: number; private _id: number;
private _category: number; private _category: number;
private _name: string; private _name: string;
private _ownerId: number;
private _ownerName: string;
private _type?: string;
constructor(id: number, category: number, name: string) constructor( id: number, category: number, name: string, ownerId: number = 0, ownerName: string = '#', type?: string )
{ {
this._id = id; this._id = id;
this._category = category; this._category = category;
this._name = name; this._name = name;
this._ownerId = ownerId;
this._ownerName = ownerName;
this._type = type;
} }
public get id(): number public get id(): number {
{ return this._id;
return this._id; }
}
public get category(): number public get category(): number {
{ return this._category;
return this._category; }
}
public get name(): string public get name(): string {
{ return this._name;
return this._name; }
}
public get ownerId(): number {
return this._ownerId;
}
public get ownerName(): string {
return this._ownerName ?? '#';
}
public get type(): string {
return this._type ?? '-';
}
} }

4
src/components/room/widgets/choosers/ChooserWidgetView.scss
View File

@ -1,4 +1,4 @@
.nitro-chooser-widget { .nitro-chooser-widget {
width: $nitro-chooser-width; width: 420px;
height: $nitro-chooser-height; height: 400px;
} }

103
src/components/room/widgets/choosers/ChooserWidgetView.tsx
View File

@ -16,7 +16,7 @@ interface ChooserWidgetViewProps
export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props => export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
{ {
const { title = null, items = [], selectItem = null, onClose = null } = props; const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false } = props;
const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null); const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
const [ searchValue, setSearchValue ] = useState(''); const [ searchValue, setSearchValue ] = useState('');
const canSeeId = GetSessionDataManager().isModerator; const canSeeId = GetSessionDataManager().isModerator;
@ -24,6 +24,22 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
const [ checkAll, setCheckAll ] = useState(false); const [ checkAll, setCheckAll ] = useState(false);
const [ checkedIds, setCheckedIds ] = useState<number[]>([]); const [ checkedIds, setCheckedIds ] = useState<number[]>([]);
const ownerNames = useMemo(() => {
const names = Array.from(new Set(items.map(item => item.ownerName || 'Unknown')));
return names.sort();
}, [items]);
const [ selectedFilter, setSelectedFilter ] = useState(() => {
if (pickallFurni) return 'all';
return ownerNames.length > 0 ? ownerNames[0] : '';
});
useEffect(() => {
if (!pickallFurni && ownerNames.length > 0 && !selectedFilter) {
setSelectedFilter(ownerNames[0]);
}
}, [pickallFurni, ownerNames, selectedFilter]);
const checkedId = (id?: number) => const checkedId = (id?: number) =>
{ {
if (id) if (id)
@ -62,12 +78,15 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
{ {
const value = searchValue.toLocaleLowerCase(); const value = searchValue.toLocaleLowerCase();
const itemsFilter = items.filter(item => item.name?.toLocaleLowerCase().includes(value)); return items
.filter(item =>
const itemsFilterSorted = itemsFilter.sort((a, b) => a.name.localeCompare(b.name)); {
const matchesSearch = item.name?.toLocaleLowerCase().includes(value);
return itemsFilterSorted const matchesFilter = !pickallFurni ? (selectedFilter ? item.ownerName === selectedFilter : true) : (selectedFilter === 'all' || item.ownerName === selectedFilter);
}, [ items, searchValue ]); return matchesSearch && matchesFilter;
})
.sort((a, b) => a.name.localeCompare(b.name));
}, [ items, searchValue, selectedFilter, pickallFurni ]);
useEffect(() => useEffect(() =>
{ {
@ -80,21 +99,65 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
<NitroCardView className="nitro-chooser-widget" theme="primary-slim"> <NitroCardView className="nitro-chooser-widget" theme="primary-slim">
<NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ onClose } />
<NitroCardContentView overflow="hidden" gap={ 1 }> <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) } /> <Flex gap={ 2 }>
{ props.pickallFurni && <Flex gap={ 2 } className="text-black"> <input
<input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ (e) => checkedId() } /> type="text"
className="form-control form-control-sm"
placeholder={ LocalizeText('generic.search') }
value={ searchValue }
onChange={ event => setSearchValue(event.target.value) }
/>
{ pickallFurni && (
<select
className="form-control form-control-sm"
value={ selectedFilter }
onChange={ event => setSelectedFilter(event.target.value) }
>
<option value="all">{ LocalizeText('roomsettings.access_rights.anyone') }</option>
{ ownerNames.length > 0 ? (
ownerNames.map((value, index) => (
<option key={ index } value={ value }>{ value }</option>
))
) : (
<option disabled>No owners found</option>
)}
</select>
)}
</Flex>
{ pickallFurni && <Flex gap={ 2 } className="text-black">
<input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ () => checkedId() } />
<label className="form-check-label">{ LocalizeText('widget.chooser.checkall') }</label> <label className="form-check-label">{ LocalizeText('widget.chooser.checkall') }</label>
</Flex> } </Flex> }
<InfiniteScroll rows={ filteredItems } rowRender={ row => <InfiniteScroll
{ rows={ filteredItems }
return ( rowRender={ row =>
<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) } /> } return (
<Text truncate>{ row.name } { canSeeId && (' - ' + row.id) }</Text> <Flex
</Flex> alignItems="center"
); className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') }
} } /> pointer
{ props.pickallFurni && <Button variant="secondary" onClick={ event => onClickPickAll() } disabled={ !checkedIds.length }> onClick={ event => setSelectedItem(row) }
>
{ pickallFurni && <input
className="flex-shrink-0 mx-1 form-check-input"
type="checkbox"
checked={ isChecked(row.id) }
onChange={ () => checkedId(row.id) }
/> }
<Text truncate>
{ row.name } { canSeeId && (' - ' + row.id) }
{ row.ownerName && row.ownerName !== '-' && ` (Owner: ${row.ownerName})` }
</Text>
</Flex>
);
} }
/>
{ pickallFurni && <Button
variant="secondary"
onClick={ onClickPickAll }
disabled={ !checkedIds.length }
>
{ LocalizeText('widget.chooser.btn.pickall') } { LocalizeText('widget.chooser.btn.pickall') }
</Button> } </Button> }
</NitroCardContentView> </NitroCardContentView>

34
src/hooks/rooms/widgets/useFurniChooserWidget.ts
View File

@ -37,8 +37,13 @@ const useFurniChooserWidgetState = () =>
if(furniData && furniData.name.length) name = furniData.name; if(furniData && furniData.name.length) name = furniData.name;
} }
return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name); const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
}); const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
(sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) ||
`User_${ownerId}`;
return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName);
}).filter(item => item !== null);
const floorItems = floorObjects.map(roomObject => const floorItems = floorObjects.map(roomObject =>
{ {
@ -51,8 +56,13 @@ const useFurniChooserWidgetState = () =>
if(furniData && furniData.name.length) name = furniData.name; if(furniData && furniData.name.length) name = furniData.name;
return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name); const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
}); const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
(sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) ||
`User_${ownerId}`;
return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName);
}).filter(item => item !== null);
setItems([ ...wallItems, ...floorItems ].sort((a, b) => ((a.name < b.name) ? -1 : 1))); setItems([ ...wallItems, ...floorItems ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
} }
@ -84,7 +94,12 @@ const useFurniChooserWidgetState = () =>
if(furniData && furniData.name.length) name = furniData.name; if(furniData && furniData.name.length) name = furniData.name;
} }
item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name); const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
(GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(ownerId)?.name : null) ||
`User_${ownerId}`;
item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName);
break; break;
} }
@ -96,11 +111,16 @@ const useFurniChooserWidgetState = () =>
if(furniData && furniData.name.length) name = furniData.name; if(furniData && furniData.name.length) name = furniData.name;
item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name); const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
(GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(ownerId)?.name : null) ||
`User_${ownerId}`;
item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName);
} }
} }
setItems(prevValue => [ ...prevValue, item ].sort((a, b) => ((a.name < b.name) ? -1 : 1))); if(item) setItems(prevValue => [ ...prevValue, item ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
}); });
useFurniRemovedEvent(!!items, event => useFurniRemovedEvent(!!items, event =>