mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-20 07:26:19 +00:00
feat: FurniEditor WebSocket — full UI with toolbar icon, infostand button, Edit/Search views, Tailwind styling
This commit is contained in:
Life
@@ -1,5 +1,5 @@
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { Button, Column, Flex, Text } from '../../../common';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Button, Column, Flex, LayoutFurniIconImageView, Text } from '../../../common';
|
||||
import { FurniItem } from '../../../hooks/furni-editor';
|
||||
|
||||
interface FurniEditorSearchViewProps
|
||||
@@ -12,11 +12,23 @@ interface FurniEditorSearchViewProps
|
||||
onSelect: (id: number) => void;
|
||||
}
|
||||
|
||||
type SortField = 'id' | 'spriteId' | 'itemName' | 'publicName' | 'type' | 'interactionType';
|
||||
type SortDir = 'asc' | 'desc';
|
||||
|
||||
const SortArrow: FC<{ field: SortField; active: SortField; dir: SortDir }> = ({ field, active, dir }) =>
|
||||
{
|
||||
if(field !== active) return <span className="ml-0.5 opacity-30">↕</span>;
|
||||
|
||||
return <span className="ml-0.5">{ dir === 'asc' ? '▲' : '▼' }</span>;
|
||||
};
|
||||
|
||||
export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
{
|
||||
const { items, total, page, loading, onSearch, onSelect } = props;
|
||||
const [ query, setQuery ] = useState('');
|
||||
const [ typeFilter, setTypeFilter ] = useState('');
|
||||
const [ sortField, setSortField ] = useState<SortField>('id');
|
||||
const [ sortDir, setSortDir ] = useState<SortDir>('asc');
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
@@ -33,6 +45,45 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
if(e.key === 'Enter') handleSearch();
|
||||
}, [ handleSearch ]);
|
||||
|
||||
const handleSort = useCallback((field: SortField) =>
|
||||
{
|
||||
setSortDir(prev => (sortField === field ? (prev === 'asc' ? 'desc' : 'asc') : 'asc'));
|
||||
setSortField(field);
|
||||
}, [ sortField ]);
|
||||
|
||||
const handleTypeToggle = useCallback((type: string) =>
|
||||
{
|
||||
setTypeFilter(prev =>
|
||||
{
|
||||
const next = prev === type ? '' : type;
|
||||
|
||||
onSearch(query, next, 1);
|
||||
|
||||
return next;
|
||||
});
|
||||
}, [ query, onSearch ]);
|
||||
|
||||
const sortedItems = useMemo(() =>
|
||||
{
|
||||
const sorted = [ ...items ];
|
||||
|
||||
sorted.sort((a, b) =>
|
||||
{
|
||||
let va: string | number = a[sortField] ?? '';
|
||||
let vb: string | number = b[sortField] ?? '';
|
||||
|
||||
if(typeof va === 'string') va = va.toLowerCase();
|
||||
if(typeof vb === 'string') vb = vb.toLowerCase();
|
||||
|
||||
if(va < vb) return sortDir === 'asc' ? -1 : 1;
|
||||
if(va > vb) return sortDir === 'asc' ? 1 : -1;
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return sorted;
|
||||
}, [ items, sortField, sortDir ]);
|
||||
|
||||
const totalPages = Math.ceil(total / 20);
|
||||
|
||||
return (
|
||||
@@ -42,55 +93,80 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
<Text small bold>Search</Text>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] min-h-[calc(1.5em+0.5rem+2px)]"
|
||||
placeholder="ID, name or sprite ID..."
|
||||
value={ query }
|
||||
onChange={ e => setQuery(e.target.value) }
|
||||
onKeyDown={ handleKeyDown }
|
||||
/>
|
||||
</Column>
|
||||
<Column gap={ 0 } className="w-[80px]">
|
||||
<Text small bold>Type</Text>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={ typeFilter }
|
||||
onChange={ e => setTypeFilter(e.target.value) }
|
||||
>
|
||||
<option value="">All</option>
|
||||
<option value="s">Floor (s)</option>
|
||||
<option value="i">Wall (i)</option>
|
||||
</select>
|
||||
</Column>
|
||||
<Flex gap={ 1 }>
|
||||
{ [ '', 's', 'i' ].map(t => (
|
||||
<button
|
||||
key={ t || 'all' }
|
||||
className={ `px-2 py-1 text-[11px] rounded border cursor-pointer transition-colors ${
|
||||
typeFilter === t
|
||||
? 'bg-[#1e7295] text-white border-[#1e7295]'
|
||||
: 'bg-white text-[#333] border-[#ccc] hover:bg-[#f0f0f0]'
|
||||
}` }
|
||||
onClick={ () => handleTypeToggle(t) }
|
||||
>
|
||||
{ t === '' ? 'All' : t === 's' ? 'Floor' : 'Wall' }
|
||||
</button>
|
||||
)) }
|
||||
</Flex>
|
||||
<Button variant="primary" disabled={ loading } onClick={ handleSearch }>
|
||||
{ loading ? '...' : 'Search' }
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{ total > 0 &&
|
||||
<Text small variant="gray" className="text-[10px]">
|
||||
{ total } items found
|
||||
</Text>
|
||||
}
|
||||
|
||||
<Column gap={ 0 } className="flex-1 overflow-auto border border-[#ccc] rounded bg-white">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="bg-[#e8e8e8] sticky top-0">
|
||||
<th className="px-2 py-1 text-left">ID</th>
|
||||
<th className="px-2 py-1 text-left">Sprite</th>
|
||||
<th className="px-2 py-1 text-left">Name</th>
|
||||
<th className="px-2 py-1 text-left">Public Name</th>
|
||||
<th className="px-2 py-1 text-center">Type</th>
|
||||
<th className="px-2 py-1 text-left">Interaction</th>
|
||||
<tr className="bg-[#e8e8e8] sticky top-0 select-none">
|
||||
<th className="px-1 py-1 text-center w-[50px]"></th>
|
||||
<th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('id') }>
|
||||
ID<SortArrow field="id" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
<th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('spriteId') }>
|
||||
Sprite<SortArrow field="spriteId" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
<th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('itemName') }>
|
||||
Name<SortArrow field="itemName" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
<th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('publicName') }>
|
||||
Public Name<SortArrow field="publicName" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
<th className="px-2 py-1 text-center cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('type') }>
|
||||
Type<SortArrow field="type" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
<th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('interactionType') }>
|
||||
Interaction<SortArrow field="interactionType" active={ sortField } dir={ sortDir } />
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ items.map(item => (
|
||||
{ sortedItems.map(item => (
|
||||
<tr
|
||||
key={ item.id }
|
||||
className="cursor-pointer hover:bg-[#d4edfa] border-b border-[#eee] transition-colors"
|
||||
onClick={ () => onSelect(item.id) }
|
||||
>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="inline-block scale-125" />
|
||||
</td>
|
||||
<td className="px-2 py-1 font-mono">{ item.id }</td>
|
||||
<td className="px-2 py-1 font-mono">{ item.spriteId }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]">{ item.itemName }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]">{ item.publicName }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]" title={ item.itemName }>{ item.itemName }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]" title={ item.publicName }>{ item.publicName }</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span className={ `px-1 rounded text-white text-[10px] ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#6b7280]' }` }>
|
||||
<span className={ `px-1.5 py-0.5 rounded text-white text-[10px] font-medium ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#6b7280]' }` }>
|
||||
{ item.type === 's' ? 'Floor' : 'Wall' }
|
||||
</span>
|
||||
</td>
|
||||
@@ -99,7 +175,7 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
)) }
|
||||
{ items.length === 0 && !loading &&
|
||||
<tr>
|
||||
<td colSpan={ 6 } className="px-2 py-4 text-center text-[#999]">No items found</td>
|
||||
<td colSpan={ 7 } className="px-2 py-4 text-center text-[#999]">No items found</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
@@ -109,7 +185,7 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
{ totalPages > 1 &&
|
||||
<Flex gap={ 1 } justifyContent="between" alignItems="center">
|
||||
<Text small variant="gray">
|
||||
{ total } items - Page { page }/{ totalPages }
|
||||
Page { page }/{ totalPages }
|
||||
</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user