feat: SaveViewDialog with selectable components (folder, view, filter, group, sort)
This commit is contained in:
Agent Zero
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Dialog for saving a custom view with selectable components.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Bookmark, Check, Folder, Filter, Group as GroupIcon, ArrowDownAZ, LayoutGrid } from 'lucide-react';
|
||||
|
||||
export interface SaveViewSelection {
|
||||
folder: boolean;
|
||||
viewMode: boolean;
|
||||
filter: boolean;
|
||||
group: boolean;
|
||||
sort: boolean;
|
||||
}
|
||||
|
||||
interface SaveViewDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (name: string, selection: SaveViewSelection) => void;
|
||||
hasFilter: boolean;
|
||||
hasGroup: boolean;
|
||||
hasSort: boolean;
|
||||
hasFolder: boolean;
|
||||
}
|
||||
|
||||
const defaultSelection: SaveViewSelection = {
|
||||
folder: true,
|
||||
viewMode: true,
|
||||
filter: true,
|
||||
group: true,
|
||||
sort: true,
|
||||
};
|
||||
|
||||
export function SaveViewDialog({ open, onClose, onSave, hasFilter, hasGroup, hasSort, hasFolder }: SaveViewDialogProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [selection, setSelection] = useState<SaveViewSelection>(defaultSelection);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const handleSave = () => {
|
||||
if (!name.trim()) return;
|
||||
onSave(name.trim(), selection);
|
||||
setName('');
|
||||
setSelection(defaultSelection);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const toggle = (key: keyof SaveViewSelection) => {
|
||||
setSelection((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const options: { key: keyof SaveViewSelection; label: string; icon: React.ReactNode; available: boolean; description: string }[] = [
|
||||
{ key: 'folder', label: 'Ordner-Auswahl', icon: <Folder className="w-4 h-4" strokeWidth={2} />, available: hasFolder, description: 'Aktuell ausgewählte Ordner' },
|
||||
{ key: 'viewMode', label: 'Ansichtsmodus', icon: <LayoutGrid className="w-4 h-4" strokeWidth={2} />, available: true, description: 'Liste, Tabelle oder Karten' },
|
||||
{ key: 'filter', label: 'Filter', icon: <Filter className="w-4 h-4" strokeWidth={2} />, available: hasFilter, description: 'Aktive Filterbedingungen' },
|
||||
{ key: 'group', label: 'Gruppierung', icon: <GroupIcon className="w-4 h-4" strokeWidth={2} />, available: hasGroup, description: 'Aktive Gruppierungen' },
|
||||
{ key: 'sort', label: 'Sortierung', icon: <ArrowDownAZ className="w-4 h-4" strokeWidth={2} />, available: hasSort, description: 'Aktive Sortierungen' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[5000] flex items-center justify-center bg-secondary-900/50" onClick={onClose}>
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-xl w-[420px] max-w-[90vw]"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-5 py-4 border-b border-secondary-100">
|
||||
<Bookmark className="w-5 h-5 text-primary-600" strokeWidth={2} />
|
||||
<h2 className="text-base font-semibold text-secondary-800">Ansicht speichern</h2>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-5 py-4 space-y-4">
|
||||
{/* Name input */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-secondary-600 mb-1">Name der Ansicht</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="z.B. Meine Firmen-Kontakte"
|
||||
autoFocus
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
|
||||
className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Component selection */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-secondary-600 mb-2">Was soll gespeichert werden?</label>
|
||||
<div className="space-y-1.5">
|
||||
{options.map((opt) => (
|
||||
<label
|
||||
key={opt.key}
|
||||
className={`
|
||||
flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors
|
||||
${opt.available ? 'hover:bg-secondary-50' : 'opacity-40 cursor-not-allowed'}
|
||||
`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selection[opt.key] && opt.available}
|
||||
disabled={!opt.available}
|
||||
onChange={() => opt.available && toggle(opt.key)}
|
||||
className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span className="flex items-center gap-2 flex-1">
|
||||
<span className="text-secondary-500">{opt.icon}</span>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-secondary-700">{opt.label}</div>
|
||||
<div className="text-[11px] text-secondary-400">{opt.description}</div>
|
||||
</div>
|
||||
</span>
|
||||
{!opt.available && (
|
||||
<span className="text-[10px] text-secondary-400 italic">nicht aktiv</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-secondary-100">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100 rounded-md transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!name.trim()}
|
||||
className="
|
||||
inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md transition-colors
|
||||
${name.trim() ? 'bg-primary-600 hover:bg-primary-700' : 'bg-secondary-300 cursor-not-allowed'}
|
||||
"
|
||||
>
|
||||
<Check className="w-4 h-4" strokeWidth={2} />
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user