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

feat: SaveViewDialog with selectable components (folder, view, filter, group, sort)

Browse Source
This commit is contained in:
Agent Zero
2026-07-28 14:09:15 +02:00
parent cd1e15eb09
commit 69c1962995
2 changed files with 180 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ContactsList.tsx
+34 -13
View File
@@ -23,6 +23,7 @@ import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, LayoutGrid
import { FilterPanel, applyFilters, emptyFilterState, type FilterState, type SavedFilter } from '@/components/contacts/FilterPanel';
import { SortPanel, applySorting, emptySortState, type SortState } from '@/components/contacts/SortPanel';
import { GroupPanel, applyGrouping, emptyGroupState, type GroupState, type GroupedContacts } from '@/components/contacts/GroupPanel';
import { SaveViewDialog, type SaveViewSelection } from '@/components/contacts/SaveViewDialog';
import {
useUnifiedContacts,
useUnifiedContact,
@@ -51,9 +52,10 @@ export function ContactsListPage() {
const [viewsOpen, setViewsOpen] = useState(true);
const [foldersOpen, setFoldersOpen] = useState(true);
const [multiSelectFolders, setMultiSelectFolders] = useState<string[]>([]);
const [savedViews, setSavedViews] = useState<{ id: string; name: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode }[]>([]);
const [savedViews, setSavedViews] = useState<{ id: string; name: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode; multiSelectFolders: string[]; selection: SaveViewSelection }[]>([]);
const [activeViewId, setActiveViewId] = useState<string | null>(null);
const [savedFilters, setSavedFilters] = useState<SavedFilter[]>([]);
const [saveViewDialogOpen, setSaveViewDialogOpen] = useState(false);
const openWindow = useWindowStore((s) => s.openWindow);
// Debounce search
@@ -202,10 +204,13 @@ export function ContactsListPage() {
setActiveView('list');
}, []);
// Save current view configuration as a custom view
// Save current view configuration as a custom view — opens dialog
const handleSaveView = useCallback(() => {
const name = window.prompt('Name für diese Ansicht:', 'Meine Ansicht');
if (!name) return;
setSaveViewDialogOpen(true);
}, []);
// Actually save the view with selection
const handleSaveViewConfirm = useCallback((name: string, selection: SaveViewSelection) => {
const id = `view-${Date.now()}`;
setSavedViews((prev) => [...prev, {
id,
@@ -215,17 +220,22 @@ export function ContactsListPage() {
groupState: { ...groupState },
selectedFilter,
viewMode,
multiSelectFolders: [...multiSelectFolders],
selection,
}]);
setActiveViewId(id);
}, [filterState, sortState, groupState, selectedFilter, viewMode]);
}, [filterState, sortState, groupState, selectedFilter, viewMode, multiSelectFolders]);
// Apply a saved custom view
const applySavedView = useCallback((view: { id: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode }) => {
setFilterState({ ...view.filterState });
setSortState({ ...view.sortState });
setGroupState({ ...view.groupState });
setSelectedFilter(view.selectedFilter);
setViewMode(view.viewMode);
// Apply a saved custom view — only selected components
const applySavedView = useCallback((view: { id: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode; multiSelectFolders: string[]; selection: SaveViewSelection }) => {
if (view.selection.folder) {
setSelectedFilter(view.selectedFilter);
setMultiSelectFolders(view.multiSelectFolders || []);
}
if (view.selection.viewMode) setViewMode(view.viewMode);
if (view.selection.filter) setFilterState({ ...view.filterState });
if (view.selection.group) setGroupState({ ...view.groupState });
if (view.selection.sort) setSortState({ ...view.sortState });
setActiveViewId(view.id);
setPage(1);
}, []);
@@ -398,7 +408,7 @@ export function ContactsListPage() {
];
registerItems('contacts', items);
return () => unregisterPlugin('contacts');
}, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, handleSaveFilter, handleLoadFilter, handleDeleteFilter, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId, multiSelectFolders, savedFilters]);
}, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, handleSaveViewConfirm, handleSaveFilter, handleLoadFilter, handleDeleteFilter, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId, multiSelectFolders, savedFilters, saveViewDialogOpen]);
return (
<div className="flex flex-col h-full" data-testid="contacts-list-page">
@@ -666,6 +676,17 @@ export function ContactsListPage() {
/>
</Modal>
)}
{/* Save View Dialog */}
<SaveViewDialog
open={saveViewDialogOpen}
onClose={() => setSaveViewDialogOpen(false)}
onSave={handleSaveViewConfirm}
hasFilter={filterState.conditions.length > 0}
hasGroup={groupState.conditions.length > 0}
hasSort={sortState.conditions.length > 0}
hasFolder={selectedFilter !== 'all' || multiSelectFolders.length > 0}
/>
</div>
);
}