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

contacts toolbar: consolidate views and filters into dropdowns

Browse Source
This commit is contained in:
Agent Zero
2026-07-28 00:45:55 +02:00
parent 5378372aba
commit 722335c923
3 changed files with 93 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ContactsList.tsx
+24 -55
View File
@@ -19,7 +19,7 @@ import { SavedFilters } from '@/components/SavedFilters';
import { SavedFilterBar } from '@/components/common/SavedFilterBar';
import { TagSelector } from '@/components/tags/TagSelector';
import type { Tag } from '@/api/tags';
import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, LayoutGrid, List, Plus, Printer } from 'lucide-react';
import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, Filter, LayoutGrid, List, Plus, Printer, Table2 } from 'lucide-react';
import {
useUnifiedContacts,
useUnifiedContact,
@@ -233,68 +233,37 @@ export function ContactsListPage() {
: <ArrowUpZA className="w-3.5 h-3.5" strokeWidth={2} />,
onClick: () => handleSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc'),
},
// Type filter: All
// Type filter dropdown (all / companies / persons)
{
id: 'filter-all',
id: 'filter-type',
plugin: 'contacts',
label: t('common.all'),
type: 'button' as const,
label: t('common.filter', 'Filter'),
type: 'dropdown' as const,
group: 'filter',
active: selectedFilter === 'all',
onClick: () => handleSelectFilter('all'),
icon: <Filter className="w-3.5 h-3.5" strokeWidth={2} />,
menuWidth: '200px',
menuOptions: [
{ value: 'all', label: t('common.all'), 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') },
],
onClick: () => {},
},
// Type filter: Companies
// View mode dropdown (list / table / cards)
{
id: 'filter-company',
id: 'view-mode',
plugin: 'contacts',
label: t('contacts.companies'),
type: 'button' as const,
group: 'filter',
active: selectedFilter === 'company',
onClick: () => handleSelectFilter('company'),
},
// Type filter: Persons
{
id: 'filter-person',
plugin: 'contacts',
label: t('contacts.persons'),
type: 'button' as const,
group: 'filter',
active: selectedFilter === 'person',
onClick: () => handleSelectFilter('person'),
},
// View mode: List
{
id: 'view-list',
plugin: 'contacts',
label: t('contacts.viewList'),
type: 'button' as const,
label: t('common.view', 'Ansicht'),
type: 'dropdown' as const,
group: 'view',
active: viewMode === 'list',
icon: <List className="w-3.5 h-3.5" strokeWidth={2} />,
onClick: () => setViewMode('list'),
},
// View mode: Table
{
id: 'view-table',
plugin: 'contacts',
label: t('contacts.viewTable'),
type: 'button' as const,
group: 'view',
active: viewMode === 'table',
icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
onClick: () => setViewMode('table'),
},
// View mode: Cards
{
id: 'view-cards',
plugin: 'contacts',
label: t('contacts.viewCards'),
type: 'button' as const,
group: 'view',
active: viewMode === 'cards',
icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
onClick: () => setViewMode('cards'),
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') },
{ value: 'table', label: t('contacts.viewTable'), icon: <Table2 className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'table', onClick: () => setViewMode('table') },
{ value: 'cards', label: t('contacts.viewCards'), icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'cards', onClick: () => setViewMode('cards') },
],
onClick: () => {},
},
// Saved filters
{