feat: persist collapsed sections in localStorage
- Collapsed/expanded state survives page refresh - Key: logistics-section-collapsed - Each toggle saves to localStorage immediately
This commit is contained in:
parent
70ec6ec7a8
commit
55d42bfdc8
|
|
@ -52,6 +52,7 @@ const DEFAULT_FUNNEL_ORDER = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const STORAGE_KEY = "logistics-section-order";
|
const STORAGE_KEY = "logistics-section-order";
|
||||||
|
const COLLAPSED_KEY = "logistics-section-collapsed";
|
||||||
|
|
||||||
// Load custom order from localStorage, merge with defaults
|
// Load custom order from localStorage, merge with defaults
|
||||||
const loadCustomOrder = () => {
|
const loadCustomOrder = () => {
|
||||||
|
|
@ -73,6 +74,26 @@ const saveCustomOrder = (order) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Load collapsed sections from localStorage
|
||||||
|
const loadCollapsedSections = () => {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(COLLAPSED_KEY);
|
||||||
|
if (!raw) return new Set();
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
return new Set(Array.isArray(parsed) ? parsed : []);
|
||||||
|
} catch {
|
||||||
|
return new Set();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCollapsedSections = (collapsedSet) => {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...collapsedSet]));
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 7 columns: Клиент | Город | Тип | Дата | Водитель | Статус | Обновлён
|
// 7 columns: Клиент | Город | Тип | Дата | Водитель | Статус | Обновлён
|
||||||
const COLS = "grid-cols-[minmax(130px,2fr)_minmax(90px,1fr)_minmax(100px,0.8fr)_minmax(100px,1fr)_minmax(90px,1fr)_minmax(100px,1fr)_minmax(90px,0.8fr)]";
|
const COLS = "grid-cols-[minmax(130px,2fr)_minmax(90px,1fr)_minmax(100px,0.8fr)_minmax(100px,1fr)_minmax(90px,1fr)_minmax(100px,1fr)_minmax(90px,0.8fr)]";
|
||||||
const MIN_W = "min-w-[1080px]";
|
const MIN_W = "min-w-[1080px]";
|
||||||
|
|
@ -212,7 +233,7 @@ const SortableSection = ({ statusValue, label, groups, isCollapsed, onToggle, on
|
||||||
|
|
||||||
export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusOptions = ORDER_GROUP_DISPLAY_STATUS_OPTIONS, isLoading = false }) => {
|
export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusOptions = ORDER_GROUP_DISPLAY_STATUS_OPTIONS, isLoading = false }) => {
|
||||||
const [filters, setFilters] = React.useState({ query: "", displayStatus: "all", city: "" });
|
const [filters, setFilters] = React.useState({ query: "", displayStatus: "all", city: "" });
|
||||||
const [collapsedSections, setCollapsedSections] = React.useState(new Set());
|
const [collapsedSections, setCollapsedSections] = React.useState(() => loadCollapsedSections());
|
||||||
const [sectionOrder, setSectionOrder] = React.useState(() => {
|
const [sectionOrder, setSectionOrder] = React.useState(() => {
|
||||||
const custom = loadCustomOrder();
|
const custom = loadCustomOrder();
|
||||||
return custom || [...DEFAULT_FUNNEL_ORDER];
|
return custom || [...DEFAULT_FUNNEL_ORDER];
|
||||||
|
|
@ -351,6 +372,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
||||||
} else {
|
} else {
|
||||||
next.add(statusValue);
|
next.add(statusValue);
|
||||||
}
|
}
|
||||||
|
saveCollapsedSections(next);
|
||||||
return next;
|
return next;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue