Leopoldadmin/leocrm
1
0
Fork 0
Code Issues 363 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

toolbar: unified filter+sort dropdown with sections, fixed positioning, iconOnly support

Browse Source
This commit is contained in:
Agent Zero
2026-07-28 02:16:03 +02:00
parent bbaded656f
commit 7962d34fcf
3 changed files with 99 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ContactsList.tsx
+21 -29
View File
@@ -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') },