+
0 ? 'text-danger' : 'text-muted' }` } />
{ totalFavs > 0 &&
@@ -163,7 +163,7 @@ const CatalogModernViewInner: FC<{}> = () =>
activateNode(child);
} }
>
-
+
= props =>
{
- const { icon = 0 } = props;
+ const { icon = 0, className = '' } = props;
- const getIconUrl = useMemo(() =>
+ const iconUrl = useMemo(() =>
{
return ((GetConfigurationValue('catalog.asset.icon.url')).replace('%name%', icon.toString()));
}, [ icon ]);
- return 
;
};
diff --git a/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx b/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
index 3b1cd21..4d1e38e 100644
--- a/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
+++ b/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
@@ -19,8 +19,8 @@ export const CatalogRailItemView: FC = props =>
title={ node.localization }
onClick={ onClick }
>
-
- = props =>
onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
>
{ /* Furni icon */ }
-
+
{ node.localization }
diff --git a/src/components/catalog/views/favorites/CatalogFavoritesView.tsx b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
index 676f771..77b02e6 100644
--- a/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
+++ b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
@@ -121,7 +121,7 @@ export const CatalogFavoritesView: FC
+
{ fav.iconUrl
?
: fav.nodeIconId !== null
diff --git a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
index d31d801..f897cad 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
@@ -86,7 +86,7 @@ export const CatalogNavigationItemView: FC = pro
>
{ adminMode &&
+
@@ -123,14 +149,12 @@ export const FurniEditorView: FC<{}> = () =>
{ activeTab === TAB_EDIT && selectedItem &&
| null;
interactions: string[];
loading: boolean;
- onUpdate: (id: number, fields: Record) => Promise;
- onDelete: (id: number) => Promise;
+ onUpdate: (id: number, fields: Record) => void;
+ onDelete: (id: number) => void;
onBack: () => void;
- onRefresh: (id: number) => void;
}
+const FIELD_TIPS: Record = {
+ stackHeight: 'Visual height when items are stacked on top of this furniture',
+ interactionType: 'Defines behavior when user interacts (e.g. default, gate, teleport, vendingmachine)',
+ customparams: 'Extra parameters for the interaction type (format depends on interaction)',
+ interactionModesCount: 'Number of visual states/animations this furniture has',
+};
+
+const PERM_GROUPS = [
+ { label: 'Gameplay', keys: [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay' ] },
+ { label: 'Trading', keys: [ 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell' ] },
+ { label: 'Inventory', keys: [ 'allowInventoryStack' ] },
+];
+
+interface SectionProps { title: string; children: React.ReactNode; defaultOpen?: boolean }
+
+const Section: FC = ({ title, children, defaultOpen = true }) =>
+{
+ const [ open, setOpen ] = useState(defaultOpen);
+
+ return (
+ = props =>
{
- const { item, catalogItems, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onRefresh } = props;
+ const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack } = props;
+ const saveRef = useRef<() => void>(null);
const [ form, setForm ] = useState({
itemName: '',
@@ -41,7 +90,7 @@ export const FurniEditorEditView: FC = props =>
customparams: '',
});
- const [ confirmDelete, setConfirmDelete ] = useState(false);
+ const [ showDeleteDialog, setShowDeleteDialog ] = useState(false);
useEffect(() =>
{
@@ -69,7 +118,7 @@ export const FurniEditorEditView: FC = props =>
customparams: item.customparams || '',
});
- setConfirmDelete(false);
+ setShowDeleteDialog(false);
}, [ item ]);
const setField = useCallback((key: string, value: unknown) =>
@@ -77,113 +126,183 @@ export const FurniEditorEditView: FC = props =>
setForm(prev => ({ ...prev, [key]: value }));
}, []);
- const handleSave = useCallback(async () =>
+ const isDirty = useMemo(() =>
{
- const ok = await onUpdate(item.id, form);
+ if(!item) return false;
- if(ok) onRefresh(item.id);
- }, [ item, form, onUpdate, onRefresh ]);
+ return form.itemName !== (item.itemName || '') ||
+ form.publicName !== (item.publicName || '') ||
+ form.spriteId !== (item.spriteId || 0) ||
+ form.type !== (item.type || 's') ||
+ form.width !== (item.width || 1) ||
+ form.length !== (item.length || 1) ||
+ form.stackHeight !== (item.stackHeight || 0) ||
+ form.allowStack !== !!item.allowStack ||
+ form.allowWalk !== !!item.allowWalk ||
+ form.allowSit !== !!item.allowSit ||
+ form.allowLay !== !!item.allowLay ||
+ form.allowGift !== !!item.allowGift ||
+ form.allowTrade !== !!item.allowTrade ||
+ form.allowRecycle !== !!item.allowRecycle ||
+ form.allowMarketplaceSell !== !!item.allowMarketplaceSell ||
+ form.allowInventoryStack !== !!item.allowInventoryStack ||
+ form.interactionType !== (item.interactionType || '') ||
+ form.interactionModesCount !== (item.interactionModesCount || 0) ||
+ form.customparams !== (item.customparams || '');
+ }, [ form, item ]);
- const handleDelete = useCallback(async () =>
+ const validation = useMemo(() =>
{
- if(!confirmDelete) return setConfirmDelete(true);
+ const errors: Record = {};
- const ok = await onDelete(item.id);
+ if(!form.itemName.trim()) errors.itemName = 'Required';
+ if(!form.publicName.trim()) errors.publicName = 'Required';
+ if(form.width < 1) errors.width = 'Min 1';
+ if(form.length < 1) errors.length = 'Min 1';
+ if(form.stackHeight < 0) errors.stackHeight = 'Min 0';
- if(ok) onBack();
- }, [ confirmDelete, item, onDelete, onBack ]);
+ return errors;
+ }, [ form ]);
- const inputClass = 'form-control form-control-sm';
- const labelClass = 'text-[11px] font-bold text-[#333] mb-0';
+ const isValid = useMemo(() => Object.keys(validation).length === 0, [ validation ]);
+
+ const handleSave = useCallback(() =>
+ {
+ if(!isValid) return;
+
+ onUpdate(item.id, form);
+ }, [ item, form, isValid, onUpdate ]);
+
+ // Expose save for keyboard shortcut
+ saveRef.current = handleSave;
+
+ const handleBack = useCallback(() =>
+ {
+ if(isDirty && !window.confirm('You have unsaved changes. Discard and go back?')) return;
+
+ onBack();
+ }, [ isDirty, onBack ]);
+
+ const handleDeleteConfirm = useCallback(() =>
+ {
+ onDelete(item.id);
+ setShowDeleteDialog(false);
+ }, [ item, onDelete ]);
+
+ // Keyboard shortcuts
+ useEffect(() =>
+ {
+ const handler = (e: KeyboardEvent) =>
+ {
+ if(e.ctrlKey && e.key === 's')
+ {
+ e.preventDefault();
+ saveRef.current?.();
+ }
+ };
+
+ window.addEventListener('keydown', handler);
+
+ return () => window.removeEventListener('keydown', handler);
+ }, []);
+
+ const inputClass = (field?: string) =>
+ `w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] min-h-[calc(1.5em+0.5rem+2px)] ${ field && validation[field] ? 'border-red-500 bg-red-50' : '' }`;
+ const labelClass = 'text-[11px] font-bold text-[#333] mb-0 flex items-center gap-0.5';
return (
-
-
-
-
- { item.id }
- |
-
- { item.spriteId }
+ { /* Header */ }
+
+
+
+
+ ID: { item.id }
+ |
+ Sprite: { item.spriteId }
+
+ ({ item.usageCount } in use)
- ({ item.usageCount } in use)
+ { isDirty && Unsaved changes }
- { /* Basic Info */ }
-
+
+ { open &&
+ );
+};
+
+const Tip: FC<{ field: string }> = ({ field }) =>
+{
+ const tip = FIELD_TIPS[field];
+
+ if(!tip) return null;
+
+ return (
+
+ ?
+
+ { tip }
+
+
+ );
+};
+
export const FurniEditorEditView: FC{ children }
}
+
+
+
- Basic Info
+
-
+
- { /* Dimensions */ }
-
- setField('itemName', e.target.value) } />
+ setField('itemName', e.target.value) } />
+ { validation.itemName && { validation.itemName } }
- setField('publicName', e.target.value) } />
+ setField('publicName', e.target.value) } />
+ { validation.publicName && { validation.publicName } }
- setField('spriteId', Number(e.target.value)) } />
+ setField('spriteId', Number(e.target.value)) } />
-
- Dimensions
+
-
+
- { /* Permissions */ }
-
- setField('width', Number(e.target.value)) } />
+ setField('width', Number(e.target.value)) } />
+ { validation.width && { validation.width } }
- setField('length', Number(e.target.value)) } />
+ setField('length', Number(e.target.value)) } />
+ { validation.length && { validation.length } }
-
- setField('stackHeight', Number(e.target.value)) } />
+
+ setField('stackHeight', Number(e.target.value)) } />
+ { validation.stackHeight && { validation.stackHeight } }
- Permissions
-
-
+
+
+
+ Ctrl+S
+
+
+ { /* Delete Confirmation Dialog */ }
+ { showDeleteDialog &&
+ = props =>
{
const { items, total, page, loading, onSearch, onSelect } = props;
const [ query, setQuery ] = useState('');
const [ typeFilter, setTypeFilter ] = useState('');
+ const [ sortField, setSortField ] = useState('id');
+ const [ sortDir, setSortDir ] = useState('asc');
useEffect(() =>
{
@@ -33,6 +45,45 @@ export const FurniEditorSearchView: FC = 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 = props =>
Search
setQuery(e.target.value) }
onKeyDown={ handleKeyDown }
/>
-
- Type
-
-
+
+ { [ '', 's', 'i' ].map(t => (
+
+ )) }
+
+ { total > 0 &&
+
+ { total } items found
+
+ }
+
-
- { [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell', 'allowInventoryStack' ].map(key => (
-
+
+
+
- { /* Interaction */ }
-
+ { PERM_GROUPS.map(group => (
+
-
+ { group.label }
+
)) }
+ { group.keys.map(key => (
+
+ )) }
+
+
- Interaction
+
+
- { /* Catalog References */ }
- { catalogItems.length > 0 &&
-
-
-
-
- setField('interactionModesCount', Number(e.target.value)) } />
+
+ setField('interactionModesCount', Number(e.target.value)) } />
-
- setField('customparams', e.target.value) } />
+
+ setField('customparams', e.target.value) } />
-
- Catalog ({ catalogItems.length })
-
- }
-
- { /* FurniData.json Entry */ }
{ furniDataEntry &&
-
- { catalogItems.map(ci => (
-
-
- { ci.catalogName } (page: { ci.pageName })
- { ci.costCredits }c + { ci.costPoints }p
-
- )) }
-
- FurniData.json
+
+
}
{ /* Actions */ }
-
{ Object.entries(furniDataEntry).map(([ key, value ]) => (
-
@@ -228,22 +330,42 @@ export const FurniEditorEditView: FC = props =>
)) }
setShowDeleteDialog(false) }>
+
+ }
);
};
diff --git a/src/components/furni-editor/views/FurniEditorSearchView.tsx b/src/components/furni-editor/views/FurniEditorSearchView.tsx
index 7b3f8c6..4fb9af5 100644
--- a/src/components/furni-editor/views/FurniEditorSearchView.tsx
+++ b/src/components/furni-editor/views/FurniEditorSearchView.tsx
@@ -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 ↕;
+
+ return { dir === 'asc' ? '▲' : '▼' };
+};
+
export const FurniEditorSearchView: FC e.stopPropagation() }>
+ Delete Item?
+
+ Are you sure you want to delete { item.publicName || item.itemName } (ID: { item.id })?
+ This action cannot be undone.
+
+
+
+
+
+
+ | ID | -Sprite | -Name | -Public Name | -Type | -Interaction | +||||
|---|---|---|---|---|---|---|---|---|---|
| + | handleSort('id') }>
+ ID |
+ handleSort('spriteId') }>
+ Sprite |
+ handleSort('itemName') }>
+ Name |
+ handleSort('publicName') }>
+ Public Name |
+ handleSort('type') }>
+ Type |
+ handleSort('interactionType') }>
+ Interaction |
|||
|
+ |
{ item.id } | { item.spriteId } | -{ item.itemName } | -{ item.publicName } | +{ item.itemName } | +{ item.publicName } | - + { item.type === 's' ? 'Floor' : 'Wall' } | @@ -99,7 +175,7 @@ export const FurniEditorSearchView: FC||
| No items found | +No items found |