toolbar: unified filter+sort dropdown with sections, fixed positioning, iconOnly support
This commit is contained in:
Agent Zero
@@ -88,65 +88,99 @@ function ToolbarSearch({ item }: { item: ToolbarItem }) {
|
||||
function ToolbarDropdown({ item }: { item: ToolbarItem }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
const menuRef = React.useRef<HTMLDivElement>(null);
|
||||
const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0 });
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
const target = e.target as Node;
|
||||
if (ref.current?.contains(target) || menuRef.current?.contains(target)) return;
|
||||
setOpen(false);
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [open]);
|
||||
|
||||
const handleToggle = () => {
|
||||
if (!open && ref.current) {
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
setMenuPos({ top: rect.bottom + 4, left: rect.left });
|
||||
}
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const activeOption = item.menuOptions?.find((o) => o.active);
|
||||
let lastSection: string | undefined = undefined;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
className={`
|
||||
inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium
|
||||
transition-colors duration-100 cursor-pointer
|
||||
${open || activeOption ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
|
||||
`}
|
||||
>
|
||||
{item.icon && <span className="w-4 h-4 flex-shrink-0">{item.icon}</span>}
|
||||
<span className="hidden sm:inline">{activeOption?.label || item.label}</span>
|
||||
<svg className={`w-3 h-3 transition-transform ${open ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<>
|
||||
<div ref={ref} className="relative flex-shrink-0">
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
className={`
|
||||
inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium
|
||||
transition-colors duration-100 cursor-pointer
|
||||
${open || activeOption ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
|
||||
`}
|
||||
>
|
||||
{item.icon && <span className="w-4 h-4 flex-shrink-0">{item.icon}</span>}
|
||||
{!item.iconOnly && <span className="hidden sm:inline">{activeOption?.label || item.label}</span>}
|
||||
<svg className={`w-3 h-3 transition-transform ${open ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{open && (
|
||||
<div
|
||||
className="absolute top-full left-0 mt-1 bg-white border border-secondary-200 rounded-lg shadow-lg z-[100] py-1"
|
||||
style={{ minWidth: item.menuWidth || '180px' }}
|
||||
ref={menuRef}
|
||||
className="fixed bg-white border border-secondary-200 rounded-lg shadow-lg py-1"
|
||||
style={{
|
||||
top: menuPos.top,
|
||||
left: menuPos.left,
|
||||
minWidth: item.menuWidth || '180px',
|
||||
zIndex: 3000,
|
||||
}}
|
||||
>
|
||||
{item.menuOptions?.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => {
|
||||
opt.onClick();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors
|
||||
${opt.active ? 'bg-primary-50 text-primary-700 font-medium' : 'text-secondary-700 hover:bg-secondary-100'}
|
||||
`}
|
||||
>
|
||||
{opt.icon && <span className="w-4 h-4 flex-shrink-0">{opt.icon}</span>}
|
||||
<span className="flex-1">{opt.label}</span>
|
||||
{opt.active && (
|
||||
<svg className="w-3.5 h-3.5 text-primary-600" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{item.menuOptions?.map((opt) => {
|
||||
const showSection = opt.section && opt.section !== lastSection;
|
||||
if (showSection) lastSection = opt.section;
|
||||
return (
|
||||
<React.Fragment key={opt.value}>
|
||||
{showSection && (
|
||||
<div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-secondary-400">
|
||||
{opt.section}
|
||||
</div>
|
||||
)}
|
||||
{opt.separator && <div className="my-1 border-t border-secondary-100" />}
|
||||
<button
|
||||
onClick={() => {
|
||||
opt.onClick();
|
||||
setOpen(false);
|
||||
}}
|
||||
disabled={opt.disabled}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors
|
||||
${opt.active ? 'bg-primary-50 text-primary-700 font-medium' : 'text-secondary-700 hover:bg-secondary-100'}
|
||||
${opt.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
|
||||
`}
|
||||
>
|
||||
{opt.icon && <span className="w-4 h-4 flex-shrink-0">{opt.icon}</span>}
|
||||
<span className="flex-1">{opt.label}</span>
|
||||
{opt.active && (
|
||||
<svg className="w-3.5 h-3.5 text-primary-600" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -209,43 +209,35 @@ export function ContactsListPage() {
|
||||
onSearch: handleSearch,
|
||||
onClick: () => {},
|
||||
},
|
||||
// Sort by
|
||||
// Unified filter dropdown — filter + sort in one panel
|
||||
{
|
||||
id: 'sort-by',
|
||||
plugin: 'contacts',
|
||||
label: t('common.sort'),
|
||||
type: 'select' as const,
|
||||
group: 'sort',
|
||||
selectOptions: sortOptions,
|
||||
selectValue: sortBy,
|
||||
onSelect: (val: string) => { setSortBy(val); setPage(1); },
|
||||
onClick: () => {},
|
||||
},
|
||||
// Sort order toggle
|
||||
{
|
||||
id: 'sort-order',
|
||||
plugin: 'contacts',
|
||||
label: sortOrder === 'asc' ? t('common.sortDesc') : t('common.sortAsc'),
|
||||
type: 'button' as const,
|
||||
group: 'sort',
|
||||
icon: sortOrder === 'asc'
|
||||
? <ArrowDownAZ className="w-3.5 h-3.5" strokeWidth={2} />
|
||||
: <ArrowUpZA className="w-3.5 h-3.5" strokeWidth={2} />,
|
||||
onClick: () => handleSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc'),
|
||||
},
|
||||
// Type filter dropdown (all / companies / persons)
|
||||
{
|
||||
id: 'filter-type',
|
||||
id: 'filter-sort',
|
||||
plugin: 'contacts',
|
||||
label: t('common.filter', 'Filter'),
|
||||
type: 'dropdown' as const,
|
||||
group: 'filter',
|
||||
icon: <Filter className="w-3.5 h-3.5" strokeWidth={2} />,
|
||||
menuWidth: '200px',
|
||||
iconOnly: true,
|
||||
menuWidth: '240px',
|
||||
menuOptions: [
|
||||
{ value: 'all', label: t('common.all'), active: selectedFilter === 'all', onClick: () => handleSelectFilter('all') },
|
||||
// Section: Filter
|
||||
{ value: 'all', label: t('common.all'), section: t('common.filter', 'Filter'), active: selectedFilter === 'all', onClick: () => handleSelectFilter('all') },
|
||||
{ value: 'company', label: t('contacts.companies'), active: selectedFilter === 'company', onClick: () => handleSelectFilter('company') },
|
||||
{ value: 'person', label: t('contacts.persons'), active: selectedFilter === 'person', onClick: () => handleSelectFilter('person') },
|
||||
// Separator
|
||||
{ value: 'sep-sort', label: '', separator: true, onClick: () => {} },
|
||||
// Section: Sort by
|
||||
...sortOptions.map((opt) => ({
|
||||
value: `sort-${opt.value}`, label: opt.label, section: t('common.sortBy', 'Sortieren nach'),
|
||||
active: sortBy === opt.value, onClick: () => { setSortBy(opt.value); setPage(1); },
|
||||
})),
|
||||
// Separator
|
||||
{ value: 'sep-order', label: '', separator: true, onClick: () => {} },
|
||||
// Section: Sort order
|
||||
{ value: 'sort-asc', label: t('common.sortAsc', 'Aufsteigend'), section: t('common.sortOrder', 'Sortierreihenfolge'),
|
||||
icon: <ArrowDownAZ className="w-3.5 h-3.5" strokeWidth={2} />, active: sortOrder === 'asc', onClick: () => handleSortChange(sortBy, 'asc') },
|
||||
{ value: 'sort-desc', label: t('common.sortDesc', 'Absteigend'),
|
||||
icon: <ArrowUpZA className="w-3.5 h-3.5" strokeWidth={2} />, active: sortOrder === 'desc', onClick: () => handleSortChange(sortBy, 'desc') },
|
||||
],
|
||||
onClick: () => {},
|
||||
},
|
||||
@@ -256,7 +248,7 @@ export function ContactsListPage() {
|
||||
label: t('common.view', 'Ansicht'),
|
||||
type: 'dropdown' as const,
|
||||
group: 'view',
|
||||
icon: <List className="w-3.5 h-3.5" strokeWidth={2} />,
|
||||
icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
|
||||
menuWidth: '180px',
|
||||
menuOptions: [
|
||||
{ value: 'list', label: t('contacts.viewList'), icon: <List className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'list', onClick: () => setViewMode('list') },
|
||||
|
||||
@@ -15,8 +15,9 @@ export interface ToolbarItem {
|
||||
selectOptions?: { value: string; label: string }[];
|
||||
selectValue?: string;
|
||||
onSelect?: (value: string) => void;
|
||||
menuOptions?: { value: string; label: string; icon?: React.ReactNode; active?: boolean; onClick: () => void }[];
|
||||
menuOptions?: { value: string; label: string; icon?: React.ReactNode; active?: boolean; onClick: () => void; section?: string; separator?: boolean; disabled?: boolean }[];
|
||||
menuWidth?: string;
|
||||
iconOnly?: boolean;
|
||||
}
|
||||
|
||||
interface PluginToolbarState {
|
||||
|
||||
Reference in New Issue
Block a user