Improve the frontend and fix TODOs
This commit is contained in:
@@ -278,13 +278,63 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
setSearchValue(e.target.value);
|
||||
}, []);
|
||||
|
||||
// Filter navigation items based on search
|
||||
const filteredItems = useMemo(() => {
|
||||
if (!searchValue.trim()) {
|
||||
return visibleItems;
|
||||
}
|
||||
|
||||
const searchLower = searchValue.toLowerCase();
|
||||
|
||||
const filterItems = (items: NavigationItem[]): NavigationItem[] => {
|
||||
return items.filter(item => {
|
||||
// Check if item label matches
|
||||
const labelMatches = item.label.toLowerCase().includes(searchLower);
|
||||
|
||||
// Check if any child matches
|
||||
if (item.children && item.children.length > 0) {
|
||||
const childrenMatch = item.children.some(child =>
|
||||
child.label.toLowerCase().includes(searchLower)
|
||||
);
|
||||
return labelMatches || childrenMatch;
|
||||
}
|
||||
|
||||
return labelMatches;
|
||||
}).map(item => {
|
||||
// If item has children, filter them too
|
||||
if (item.children && item.children.length > 0) {
|
||||
return {
|
||||
...item,
|
||||
children: item.children.filter(child =>
|
||||
child.label.toLowerCase().includes(searchLower)
|
||||
)
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
};
|
||||
|
||||
return filterItems(visibleItems);
|
||||
}, [visibleItems, searchValue]);
|
||||
|
||||
const handleSearchSubmit = useCallback((e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (searchValue.trim()) {
|
||||
// TODO: Implement search functionality
|
||||
console.log('Search:', searchValue);
|
||||
// Search is now live-filtered as user types
|
||||
if (searchValue.trim() && filteredItems.length > 0) {
|
||||
// Navigate to first matching item
|
||||
const firstItem = filteredItems[0];
|
||||
if (firstItem.to) {
|
||||
navigate(firstItem.to);
|
||||
setSearchValue('');
|
||||
} else if (firstItem.children && firstItem.children.length > 0) {
|
||||
const firstChild = firstItem.children[0];
|
||||
if (firstChild.to) {
|
||||
navigate(firstChild.to);
|
||||
setSearchValue('');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [searchValue]);
|
||||
}, [searchValue, filteredItems, navigate]);
|
||||
|
||||
const clearSearch = useCallback(() => {
|
||||
setSearchValue('');
|
||||
@@ -734,7 +784,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
{/* Navigation */}
|
||||
<nav className={clsx('flex-1 overflow-y-auto overflow-x-hidden', isCollapsed ? 'px-1 py-4' : 'p-4')}>
|
||||
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
|
||||
{visibleItems.map(item => renderItem(item))}
|
||||
{filteredItems.map(item => renderItem(item))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -785,14 +835,14 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
<div className="py-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/app/settings/personal-info');
|
||||
navigate('/app/settings');
|
||||
setIsProfileMenuOpen(false);
|
||||
if (onClose) onClose();
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
{t('common:profile.my_profile', 'Mi perfil')}
|
||||
<Settings className="h-4 w-4" />
|
||||
{t('common:profile.settings', 'Ajustes')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -934,7 +984,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
|
||||
<ul className="space-y-2 pb-4">
|
||||
{visibleItems.map(item => renderItem(item))}
|
||||
{filteredItems.map(item => renderItem(item))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -975,17 +1025,6 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
{isProfileMenuOpen && (
|
||||
<div className="mx-4 mb-2 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg py-2">
|
||||
<div className="py-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/app/settings/profile');
|
||||
setIsProfileMenuOpen(false);
|
||||
if (onClose) onClose();
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
{t('common:profile.profile', 'Perfil')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/app/settings');
|
||||
@@ -995,7 +1034,18 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
|
||||
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
{t('common:profile.settings', 'Configuración')}
|
||||
{t('common:profile.settings', 'Ajustes')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/app/settings/organizations');
|
||||
setIsProfileMenuOpen(false);
|
||||
if (onClose) onClose();
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
<Factory className="h-4 w-4" />
|
||||
{t('common:profile.my_locations', 'Mis Locales')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user