From 2b77463e2a1012c328cd230289e3c9d2b9f6f23a Mon Sep 17 00:00:00 2001 From: duckietm Date: Fri, 23 May 2025 15:37:44 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=95=20Added=20Username=20to=20Chooser?= =?UTF-8?q?=20(upon=20request)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/room/widgets/RoomObjectItem.ts | 47 +++++--- .../widgets/choosers/ChooserWidgetView.scss | 6 +- .../widgets/choosers/ChooserWidgetView.tsx | 107 ++++++++++++++---- .../rooms/widgets/useFurniChooserWidget.ts | 36 ++++-- 4 files changed, 147 insertions(+), 49 deletions(-) diff --git a/src/api/room/widgets/RoomObjectItem.ts b/src/api/room/widgets/RoomObjectItem.ts index f4fb2d6..a2800b5 100644 --- a/src/api/room/widgets/RoomObjectItem.ts +++ b/src/api/room/widgets/RoomObjectItem.ts @@ -3,26 +3,41 @@ export class RoomObjectItem private _id: number; private _category: number; 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._category = category; this._name = name; + this._ownerId = ownerId; + this._ownerName = ownerName; + this._type = type; } - public get id(): number - { - return this._id; - } - - public get category(): number - { - return this._category; - } - - public get name(): string - { - return this._name; - } -} + public get id(): number { + return this._id; + } + + public get category(): number { + return this._category; + } + + public get name(): string { + return this._name; + } + + public get ownerId(): number { + return this._ownerId; + } + + public get ownerName(): string { + return this._ownerName ?? '#'; + } + + public get type(): string { + return this._type ?? '-'; + } +} \ No newline at end of file diff --git a/src/components/room/widgets/choosers/ChooserWidgetView.scss b/src/components/room/widgets/choosers/ChooserWidgetView.scss index 026e95b..f9abf77 100644 --- a/src/components/room/widgets/choosers/ChooserWidgetView.scss +++ b/src/components/room/widgets/choosers/ChooserWidgetView.scss @@ -1,4 +1,4 @@ .nitro-chooser-widget { - width: $nitro-chooser-width; - height: $nitro-chooser-height; -} + width: 420px; + height: 400px; +} \ No newline at end of file diff --git a/src/components/room/widgets/choosers/ChooserWidgetView.tsx b/src/components/room/widgets/choosers/ChooserWidgetView.tsx index e6655d2..65b3939 100644 --- a/src/components/room/widgets/choosers/ChooserWidgetView.tsx +++ b/src/components/room/widgets/choosers/ChooserWidgetView.tsx @@ -16,14 +16,30 @@ interface ChooserWidgetViewProps export const ChooserWidgetView: FC = 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(null); const [ searchValue, setSearchValue ] = useState(''); const canSeeId = GetSessionDataManager().isModerator; const [ checkAll, setCheckAll ] = useState(false); const [ checkedIds, setCheckedIds ] = useState([]); - + + 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) => { if (id) @@ -62,12 +78,15 @@ export const ChooserWidgetView: FC = props => { const value = searchValue.toLocaleLowerCase(); - 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 ]); + return items + .filter(item => + { + const matchesSearch = item.name?.toLocaleLowerCase().includes(value); + const matchesFilter = !pickallFurni ? (selectedFilter ? item.ownerName === selectedFilter : true) : (selectedFilter === 'all' || item.ownerName === selectedFilter); + return matchesSearch && matchesFilter; + }) + .sort((a, b) => a.name.localeCompare(b.name)); + }, [ items, searchValue, selectedFilter, pickallFurni ]); useEffect(() => { @@ -80,24 +99,68 @@ export const ChooserWidgetView: FC = props => - setSearchValue(event.target.value) } /> - { props.pickallFurni && - checkedId() } /> + + setSearchValue(event.target.value) } + /> + { pickallFurni && ( + + )} + + { pickallFurni && + checkedId() } /> } - - { - return ( - setSelectedItem(row) }> - { props.pickallFurni && checkedId(row.id) } /> } - { row.name } { canSeeId && (' - ' + row.id) } - - ); - } } /> - { props.pickallFurni && } ); -} +} \ No newline at end of file diff --git a/src/hooks/rooms/widgets/useFurniChooserWidget.ts b/src/hooks/rooms/widgets/useFurniChooserWidget.ts index 4542dba..e34be48 100644 --- a/src/hooks/rooms/widgets/useFurniChooserWidget.ts +++ b/src/hooks/rooms/widgets/useFurniChooserWidget.ts @@ -37,8 +37,13 @@ const useFurniChooserWidgetState = () => if(furniData && furniData.name.length) name = furniData.name; } - return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name); - }); + const ownerId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID) || 0; + const ownerName = roomObject.model.getValue(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 => { @@ -51,8 +56,13 @@ const useFurniChooserWidgetState = () => if(furniData && furniData.name.length) name = furniData.name; - return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name); - }); + const ownerId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID) || 0; + const ownerName = roomObject.model.getValue(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))); } @@ -84,7 +94,12 @@ const useFurniChooserWidgetState = () => if(furniData && furniData.name.length) name = furniData.name; } - item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name); + const ownerId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID) || 0; + const ownerName = roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_NAME) || + (GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(ownerId)?.name : null) || + `User_${ownerId}`; + + item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName); break; } @@ -96,11 +111,16 @@ const useFurniChooserWidgetState = () => if(furniData && furniData.name.length) name = furniData.name; - item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name); + const ownerId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID) || 0; + const ownerName = roomObject.model.getValue(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 => @@ -129,4 +149,4 @@ const useFurniChooserWidgetState = () => return { items, onClose, selectItem, populateChooser }; } -export const useFurniChooserWidget = useFurniChooserWidgetState; +export const useFurniChooserWidget = useFurniChooserWidgetState; \ No newline at end of file