@tap-payments/os-micro-frontend-shared 0.1.373 → 0.1.374-test.1-test.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/AnimatedSpinnerIcon/style.d.ts +0 -1
- package/build/components/Chip/style.d.ts +0 -1
- package/build/components/CountBadge/style.d.ts +0 -1
- package/build/components/Dialog/style.d.ts +0 -1
- package/build/components/FlippingCard/style.d.ts +0 -1
- package/build/components/ImageWrapper/ImageWrapper.d.ts +0 -1
- package/build/components/JSONViewer/style.d.ts +0 -1
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +0 -1
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +0 -1
- package/build/components/Sandbox/style.js +3 -2
- package/build/components/SearchButton/styles.d.ts +0 -1
- package/build/components/StatusIcons/AuthIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +0 -1
- package/build/components/StatusIcons/SourceIcons/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AgreementCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/PayoutReportCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/style.d.ts +0 -1
- package/build/components/TableHeader/FiltersRow.d.ts +1 -1
- package/build/components/TableHeader/FiltersRow.js +4 -2
- package/build/components/TableHeader/TableHeader.d.ts +1 -1
- package/build/components/TableHeader/TableHeader.js +2 -2
- package/build/components/TableHeader/TableView/CreateViewDialog.d.ts +3 -0
- package/build/components/TableHeader/TableView/CreateViewDialog.js +91 -0
- package/build/components/TableHeader/TableView/CustomViews.js +1 -1
- package/build/components/TableHeader/TableView/TableView.js +0 -1
- package/build/components/TableHeader/TableView/ViewSelector.d.ts +5 -0
- package/build/components/TableHeader/TableView/ViewSelector.js +46 -0
- package/build/components/TableHeader/TableView/ViewsDropdown.d.ts +5 -0
- package/build/components/TableHeader/TableView/ViewsDropdown.js +243 -0
- package/build/components/TableHeader/TableView/components/ColumnList.d.ts +3 -0
- package/build/components/TableHeader/TableView/components/ColumnList.js +70 -0
- package/build/components/TableHeader/TableView/components/ViewsSubmenu.d.ts +3 -0
- package/build/components/TableHeader/TableView/components/ViewsSubmenu.js +52 -0
- package/build/components/TableHeader/TableView/components/index.d.ts +2 -0
- package/build/components/TableHeader/TableView/components/index.js +2 -0
- package/build/components/TableHeader/TableView/constants.d.ts +10 -0
- package/build/components/TableHeader/TableView/constants.js +10 -0
- package/build/components/TableHeader/TableView/data.d.ts +5 -0
- package/build/components/TableHeader/TableView/data.js +48 -0
- package/build/components/TableHeader/TableView/hooks/index.d.ts +6 -0
- package/build/components/TableHeader/TableView/hooks/index.js +6 -0
- package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.d.ts +22 -0
- package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.js +88 -0
- package/build/components/TableHeader/TableView/hooks/useDialogPosition.d.ts +8 -0
- package/build/components/TableHeader/TableView/hooks/useDialogPosition.js +16 -0
- package/build/components/TableHeader/TableView/hooks/useNestedSubmenu.d.ts +7 -0
- package/build/components/TableHeader/TableView/hooks/useNestedSubmenu.js +34 -0
- package/build/components/TableHeader/TableView/hooks/useOriginalColumns.d.ts +6 -0
- package/build/components/TableHeader/TableView/hooks/useOriginalColumns.js +18 -0
- package/build/components/TableHeader/TableView/hooks/useSubmenuHover.d.ts +8 -0
- package/build/components/TableHeader/TableView/hooks/useSubmenuHover.js +43 -0
- package/build/components/TableHeader/TableView/hooks/useViewSelector.d.ts +59 -0
- package/build/components/TableHeader/TableView/hooks/useViewSelector.js +219 -0
- package/build/components/TableHeader/TableView/hooks/useViewsManager.d.ts +12 -0
- package/build/components/TableHeader/TableView/hooks/useViewsManager.js +139 -0
- package/build/components/TableHeader/TableView/index.d.ts +12 -3
- package/build/components/TableHeader/TableView/index.js +13 -3
- package/build/components/TableHeader/TableView/styles.d.ts +127 -0
- package/build/components/TableHeader/TableView/styles.js +426 -0
- package/build/components/TableHeader/TableView/types.d.ts +198 -0
- package/build/components/TableHeader/TableView/types.js +1 -0
- package/build/components/TableHeader/TableView/utils.d.ts +121 -0
- package/build/components/TableHeader/TableView/utils.js +457 -0
- package/build/components/TableHeader/type.d.ts +22 -1
- package/build/components/TableReports/components/DownloadButton/style.d.ts +0 -1
- package/build/components/TableReports/style.d.ts +0 -1
- package/build/components/Toolbar/Toolbar.js +1 -1
- package/build/components/VirtualTables/components/style.d.ts +0 -1
- package/build/constants/apps.js +0 -1
- package/build/constants/assets.d.ts +1 -0
- package/build/constants/assets.js +1 -0
- package/build/types/reports.d.ts +0 -21
- package/package.json +4 -3
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const useNestedSubmenu: () => {
|
|
2
|
+
hoveredNestedColumn: string | null;
|
|
3
|
+
nestedSubmenuAnchorEl: HTMLElement | null;
|
|
4
|
+
openNestedSubmenu: (columnName: string, element: HTMLElement) => void;
|
|
5
|
+
closeNestedSubmenu: () => void;
|
|
6
|
+
cancelNestedClose: () => void;
|
|
7
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useState, useRef, useCallback } from 'react';
|
|
2
|
+
import { SUBMENU_CLOSE_DELAY } from '../constants';
|
|
3
|
+
export const useNestedSubmenu = () => {
|
|
4
|
+
const [hoveredNestedColumn, setHoveredNestedColumn] = useState(null);
|
|
5
|
+
const [nestedSubmenuAnchorEl, setNestedSubmenuAnchorEl] = useState(null);
|
|
6
|
+
const nestedCloseTimeoutRef = useRef(null);
|
|
7
|
+
const openNestedSubmenu = useCallback((columnName, element) => {
|
|
8
|
+
if (nestedCloseTimeoutRef.current) {
|
|
9
|
+
clearTimeout(nestedCloseTimeoutRef.current);
|
|
10
|
+
nestedCloseTimeoutRef.current = null;
|
|
11
|
+
}
|
|
12
|
+
setHoveredNestedColumn(columnName);
|
|
13
|
+
setNestedSubmenuAnchorEl(element);
|
|
14
|
+
}, []);
|
|
15
|
+
const closeNestedSubmenu = useCallback(() => {
|
|
16
|
+
nestedCloseTimeoutRef.current = setTimeout(() => {
|
|
17
|
+
setHoveredNestedColumn(null);
|
|
18
|
+
setNestedSubmenuAnchorEl(null);
|
|
19
|
+
}, SUBMENU_CLOSE_DELAY);
|
|
20
|
+
}, []);
|
|
21
|
+
const cancelNestedClose = useCallback(() => {
|
|
22
|
+
if (nestedCloseTimeoutRef.current) {
|
|
23
|
+
clearTimeout(nestedCloseTimeoutRef.current);
|
|
24
|
+
nestedCloseTimeoutRef.current = null;
|
|
25
|
+
}
|
|
26
|
+
}, []);
|
|
27
|
+
return {
|
|
28
|
+
hoveredNestedColumn,
|
|
29
|
+
nestedSubmenuAnchorEl,
|
|
30
|
+
openNestedSubmenu,
|
|
31
|
+
closeNestedSubmenu,
|
|
32
|
+
cancelNestedClose,
|
|
33
|
+
};
|
|
34
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export const useOriginalColumns = (defaultColumns) => {
|
|
3
|
+
const [originalColumns, setOriginalColumns] = useState([]);
|
|
4
|
+
const saveOriginalState = useCallback(() => {
|
|
5
|
+
setOriginalColumns(defaultColumns.map((col) => {
|
|
6
|
+
var _a;
|
|
7
|
+
return (Object.assign(Object.assign({}, col), { selected: col.selected, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: item.selected }))) }));
|
|
8
|
+
}));
|
|
9
|
+
}, [defaultColumns]);
|
|
10
|
+
const clearOriginalState = useCallback(() => {
|
|
11
|
+
setOriginalColumns([]);
|
|
12
|
+
}, []);
|
|
13
|
+
return {
|
|
14
|
+
originalColumns,
|
|
15
|
+
saveOriginalState,
|
|
16
|
+
clearOriginalState,
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useState, useRef, useCallback } from 'react';
|
|
2
|
+
import { SUBMENU_CLOSE_DELAY } from '../constants';
|
|
3
|
+
export const useSubmenuHover = () => {
|
|
4
|
+
const [hoveredColumn, setHoveredColumn] = useState(null);
|
|
5
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
6
|
+
const closeTimeoutRef = useRef(null);
|
|
7
|
+
const openSubmenu = useCallback((columnName, element) => {
|
|
8
|
+
if (closeTimeoutRef.current) {
|
|
9
|
+
clearTimeout(closeTimeoutRef.current);
|
|
10
|
+
closeTimeoutRef.current = null;
|
|
11
|
+
}
|
|
12
|
+
setHoveredColumn(columnName);
|
|
13
|
+
setAnchorEl(element);
|
|
14
|
+
}, []);
|
|
15
|
+
const closeSubmenu = useCallback(() => {
|
|
16
|
+
closeTimeoutRef.current = setTimeout(() => {
|
|
17
|
+
setHoveredColumn(null);
|
|
18
|
+
setAnchorEl(null);
|
|
19
|
+
}, SUBMENU_CLOSE_DELAY);
|
|
20
|
+
}, []);
|
|
21
|
+
const cancelClose = useCallback(() => {
|
|
22
|
+
if (closeTimeoutRef.current) {
|
|
23
|
+
clearTimeout(closeTimeoutRef.current);
|
|
24
|
+
closeTimeoutRef.current = null;
|
|
25
|
+
}
|
|
26
|
+
}, []);
|
|
27
|
+
const forceClose = useCallback(() => {
|
|
28
|
+
if (closeTimeoutRef.current) {
|
|
29
|
+
clearTimeout(closeTimeoutRef.current);
|
|
30
|
+
closeTimeoutRef.current = null;
|
|
31
|
+
}
|
|
32
|
+
setHoveredColumn(null);
|
|
33
|
+
setAnchorEl(null);
|
|
34
|
+
}, []);
|
|
35
|
+
return {
|
|
36
|
+
hoveredColumn,
|
|
37
|
+
anchorEl,
|
|
38
|
+
openSubmenu,
|
|
39
|
+
closeSubmenu,
|
|
40
|
+
cancelClose,
|
|
41
|
+
forceClose,
|
|
42
|
+
};
|
|
43
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { type MouseEvent } from 'react';
|
|
2
|
+
import type { ColumnViewProps } from '../../../../types/index.js';
|
|
3
|
+
import type { ViewMenuItem, LayoutSection, ViewMode, TemplateAPIMetadata } from '../types';
|
|
4
|
+
import type { ViewOption } from '../../type';
|
|
5
|
+
export interface UseViewSelectorProps {
|
|
6
|
+
mode: ViewMode;
|
|
7
|
+
onViewChange?: (selectedView?: ViewMenuItem) => void;
|
|
8
|
+
onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
|
|
9
|
+
onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
|
|
10
|
+
onCreateCustomView?: (data: {
|
|
11
|
+
name: string;
|
|
12
|
+
selectedColumns: ColumnViewProps[];
|
|
13
|
+
layout: LayoutSection;
|
|
14
|
+
}) => Promise<void>;
|
|
15
|
+
onEditCustomView?: (viewId: string, data: {
|
|
16
|
+
name: string;
|
|
17
|
+
selectedColumns: ColumnViewProps[];
|
|
18
|
+
layout: LayoutSection;
|
|
19
|
+
}) => Promise<void>;
|
|
20
|
+
onDeleteCustomView?: (viewId: string) => Promise<void>;
|
|
21
|
+
resetTableViews?: (view: {
|
|
22
|
+
id: string;
|
|
23
|
+
label: string;
|
|
24
|
+
}) => void;
|
|
25
|
+
setTableViews?: (columns: ColumnViewProps[]) => void;
|
|
26
|
+
tableViews: ColumnViewProps[];
|
|
27
|
+
customViews: ViewMenuItem[];
|
|
28
|
+
defaultColumns: ColumnViewProps[];
|
|
29
|
+
defaultTemplate?: ViewMenuItem;
|
|
30
|
+
setInternalCustomViews: (views: ViewMenuItem[]) => void;
|
|
31
|
+
setInternalTableViews: (views: ColumnViewProps[]) => void;
|
|
32
|
+
setDefaultColumns?: (columns: ColumnViewProps[]) => void;
|
|
33
|
+
apiMetadata?: TemplateAPIMetadata;
|
|
34
|
+
}
|
|
35
|
+
export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }: UseViewSelectorProps) => {
|
|
36
|
+
anchorViewEl: HTMLDivElement | null;
|
|
37
|
+
defaultViewEl: HTMLDivElement | null;
|
|
38
|
+
setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
|
|
39
|
+
isCreateDialogOpen: boolean;
|
|
40
|
+
editingView: ViewMenuItem | null;
|
|
41
|
+
selectedViewInfo: ViewOption;
|
|
42
|
+
shouldUseCurrentState: boolean;
|
|
43
|
+
handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
|
|
44
|
+
handleCloseViewDropdown: () => void;
|
|
45
|
+
handleClose: () => void;
|
|
46
|
+
handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
|
|
47
|
+
handleOpenCreateDialog: (useCurrentState?: boolean) => void;
|
|
48
|
+
handleOpenEditDialog: (view: ViewMenuItem) => void;
|
|
49
|
+
handleCloseCreateDialog: () => void;
|
|
50
|
+
handleSaveView: (data: {
|
|
51
|
+
name: string;
|
|
52
|
+
selectedColumns: ColumnViewProps[];
|
|
53
|
+
layout: LayoutSection;
|
|
54
|
+
}) => Promise<void>;
|
|
55
|
+
handleDeleteView: (viewId: string) => Promise<void>;
|
|
56
|
+
handleResetViews: (views: string[]) => void;
|
|
57
|
+
handleTableViewsChange: (newTableViews: ColumnViewProps[]) => void;
|
|
58
|
+
updateSelectedView: (updatedView: ViewMenuItem) => void;
|
|
59
|
+
};
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
11
|
+
import { createCustomViewMenuItem } from '../utils';
|
|
12
|
+
export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }) => {
|
|
13
|
+
const [anchorViewEl, setAnchorViewEl] = useState(null);
|
|
14
|
+
const [defaultViewEl, setDefaultViewElement] = useState(null);
|
|
15
|
+
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
|
16
|
+
const [editingView, setEditingView] = useState(null);
|
|
17
|
+
const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
|
|
18
|
+
const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
|
|
19
|
+
const [selectedView, setSelectedView] = useState(undefined);
|
|
20
|
+
const hasInitializedRef = useRef(false);
|
|
21
|
+
const prevModeRef = useRef(mode);
|
|
22
|
+
// Update editingView when customViews changes to ensure it reflects the latest saved state
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (editingView && customViews.length > 0) {
|
|
25
|
+
const updatedView = customViews.find((view) => view.id === editingView.id);
|
|
26
|
+
if (updatedView && updatedView !== editingView) {
|
|
27
|
+
setEditingView(updatedView);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}, [customViews, editingView]);
|
|
31
|
+
// Update selectedView when customViews changes to ensure it reflects the latest saved state
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (selectedView && selectedView.isCustom && customViews.length > 0) {
|
|
34
|
+
const updatedView = customViews.find((view) => view.id === selectedView.id);
|
|
35
|
+
if (updatedView) {
|
|
36
|
+
// Compare submenu to detect changes (deep comparison would be better, but this works for now)
|
|
37
|
+
const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
|
|
38
|
+
const labelChanged = updatedView.label !== selectedView.label;
|
|
39
|
+
if (submenuChanged || labelChanged) {
|
|
40
|
+
// Create a new object reference to ensure React detects the change
|
|
41
|
+
const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
|
|
42
|
+
setSelectedView(newSelectedView);
|
|
43
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, [customViews, selectedView, onViewChange]);
|
|
48
|
+
// Notify parent of initial view on mount only
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
// Only initialize once on mount, don't reset if user has already selected a view
|
|
51
|
+
if (hasInitializedRef.current)
|
|
52
|
+
return;
|
|
53
|
+
// Use defaultTemplate if available, otherwise undefined (built-in default view)
|
|
54
|
+
const initialView = defaultTemplate || undefined;
|
|
55
|
+
setSelectedView(initialView);
|
|
56
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
|
|
57
|
+
hasInitializedRef.current = true;
|
|
58
|
+
}, [defaultTemplate, onViewChange]);
|
|
59
|
+
// Update selected view when mode changes
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
// Skip initial mount
|
|
62
|
+
if (!hasInitializedRef.current)
|
|
63
|
+
return;
|
|
64
|
+
// Only run if mode actually changed
|
|
65
|
+
if (prevModeRef.current === mode)
|
|
66
|
+
return;
|
|
67
|
+
prevModeRef.current = mode;
|
|
68
|
+
if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === 'default' && defaultTemplate) {
|
|
69
|
+
// Mode has changed, update with new default template columns
|
|
70
|
+
const updatedView = Object.assign(Object.assign({}, defaultTemplate), { submenu: defaultTemplate.submenu ? [...defaultTemplate.submenu] : undefined });
|
|
71
|
+
setSelectedView(updatedView);
|
|
72
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
|
|
73
|
+
}
|
|
74
|
+
else if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.isCustom) && customViews.length > 0) {
|
|
75
|
+
// If viewing a custom view, update it with the new columns for this mode
|
|
76
|
+
const updatedCustomView = customViews.find((view) => view.id === selectedView.id);
|
|
77
|
+
if (updatedCustomView) {
|
|
78
|
+
const newView = Object.assign(Object.assign({}, updatedCustomView), { submenu: updatedCustomView.submenu ? [...updatedCustomView.submenu] : undefined });
|
|
79
|
+
setSelectedView(newView);
|
|
80
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, [mode, defaultTemplate, customViews, selectedView, onViewChange]);
|
|
84
|
+
const handleTableViewsChange = useCallback((newTableViews) => {
|
|
85
|
+
const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
|
|
86
|
+
setTableViewsState(newTableViews);
|
|
87
|
+
onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
|
|
88
|
+
}, [setTableViews, setInternalTableViews, onTableViewsChange]);
|
|
89
|
+
const handleCustomViewsChange = useCallback((newCustomViews) => {
|
|
90
|
+
setInternalCustomViews(newCustomViews);
|
|
91
|
+
onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
|
|
92
|
+
}, [setInternalCustomViews, onCustomViewsChange]);
|
|
93
|
+
const handleViewButtonClick = useCallback((event) => {
|
|
94
|
+
setAnchorViewEl(event.currentTarget);
|
|
95
|
+
setDefaultViewElement(event.currentTarget);
|
|
96
|
+
}, []);
|
|
97
|
+
const handleCloseViewDropdown = useCallback(() => {
|
|
98
|
+
setDefaultViewElement(null);
|
|
99
|
+
}, []);
|
|
100
|
+
const handleClose = useCallback(() => {
|
|
101
|
+
setAnchorViewEl(null);
|
|
102
|
+
setDefaultViewElement(null);
|
|
103
|
+
setSelectedViewInfo({ label: 'Default', id: 'default' });
|
|
104
|
+
}, []);
|
|
105
|
+
const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
|
|
106
|
+
setSelectedViewInfo(selected);
|
|
107
|
+
// Update selected view and notify parent
|
|
108
|
+
const newSelectedView = viewMenuItem || undefined;
|
|
109
|
+
setSelectedView(newSelectedView);
|
|
110
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
|
|
111
|
+
handleCloseViewDropdown();
|
|
112
|
+
}, [handleCloseViewDropdown, onViewChange]);
|
|
113
|
+
// Internal function to update selected view and notify parent
|
|
114
|
+
// Used when default columns change via "Okay" button
|
|
115
|
+
const updateSelectedView = useCallback((updatedView) => {
|
|
116
|
+
setSelectedView(updatedView);
|
|
117
|
+
setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
|
|
118
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
|
|
119
|
+
}, [onViewChange, setSelectedViewInfo]);
|
|
120
|
+
const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
|
|
121
|
+
setEditingView(null);
|
|
122
|
+
setShouldUseCurrentState(useCurrentState);
|
|
123
|
+
setIsCreateDialogOpen(true);
|
|
124
|
+
setDefaultViewElement(null);
|
|
125
|
+
}, []);
|
|
126
|
+
const handleOpenEditDialog = useCallback((view) => {
|
|
127
|
+
setEditingView(view);
|
|
128
|
+
setShouldUseCurrentState(true);
|
|
129
|
+
setIsCreateDialogOpen(true);
|
|
130
|
+
}, []);
|
|
131
|
+
const handleCloseCreateDialog = useCallback(() => {
|
|
132
|
+
setIsCreateDialogOpen(false);
|
|
133
|
+
setEditingView(null);
|
|
134
|
+
setShouldUseCurrentState(false);
|
|
135
|
+
}, []);
|
|
136
|
+
const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
|
137
|
+
try {
|
|
138
|
+
if (editingView) {
|
|
139
|
+
// Use templateId for API calls, not the internal view id
|
|
140
|
+
const templateId = editingView.templateId || editingView.id;
|
|
141
|
+
yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
|
|
142
|
+
// Update state after promise resolves successfully
|
|
143
|
+
const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
|
|
144
|
+
const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
|
|
145
|
+
handleCustomViewsChange(updatedViews);
|
|
146
|
+
// If the updated view is currently selected, update selectedView to reflect changes
|
|
147
|
+
// Create a new object reference to ensure React detects the change
|
|
148
|
+
if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
|
|
149
|
+
const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
|
|
150
|
+
setSelectedView(newSelectedView);
|
|
151
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
|
|
156
|
+
// Update state after promise resolves successfully
|
|
157
|
+
const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
|
|
158
|
+
const updatedViews = [...customViews, newView];
|
|
159
|
+
handleCustomViewsChange(updatedViews);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
catch (error) {
|
|
163
|
+
// Error will be handled by the toast in CreateViewDialog
|
|
164
|
+
throw error;
|
|
165
|
+
}
|
|
166
|
+
}), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
|
|
167
|
+
const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
168
|
+
try {
|
|
169
|
+
// Find the view to get its templateId
|
|
170
|
+
const viewToDelete = customViews.find((view) => view.id === viewId);
|
|
171
|
+
const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
|
|
172
|
+
yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
|
|
173
|
+
// Update state after promise resolves successfully
|
|
174
|
+
const updatedViews = customViews.filter((view) => view.id !== viewId);
|
|
175
|
+
handleCustomViewsChange(updatedViews);
|
|
176
|
+
// If the deleted view was selected, reset to default
|
|
177
|
+
if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
|
|
178
|
+
setSelectedView(undefined);
|
|
179
|
+
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
catch (error) {
|
|
183
|
+
// Error will be handled by the toast in CreateViewDialog
|
|
184
|
+
throw error;
|
|
185
|
+
}
|
|
186
|
+
}), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
|
|
187
|
+
const handleResetViews = useCallback((views) => {
|
|
188
|
+
if (resetTableViews) {
|
|
189
|
+
resetTableViews({ id: views[0], label: views[0] });
|
|
190
|
+
}
|
|
191
|
+
else {
|
|
192
|
+
// Reset to default columns from templates
|
|
193
|
+
handleTableViewsChange([...defaultColumns]);
|
|
194
|
+
}
|
|
195
|
+
}, [resetTableViews, defaultColumns, handleTableViewsChange]);
|
|
196
|
+
return {
|
|
197
|
+
// State
|
|
198
|
+
anchorViewEl,
|
|
199
|
+
defaultViewEl,
|
|
200
|
+
setDefaultViewElement,
|
|
201
|
+
isCreateDialogOpen,
|
|
202
|
+
editingView,
|
|
203
|
+
selectedViewInfo,
|
|
204
|
+
shouldUseCurrentState,
|
|
205
|
+
// Handlers
|
|
206
|
+
handleViewButtonClick,
|
|
207
|
+
handleCloseViewDropdown,
|
|
208
|
+
handleClose,
|
|
209
|
+
handleSelectedViewInfo,
|
|
210
|
+
handleOpenCreateDialog,
|
|
211
|
+
handleOpenEditDialog,
|
|
212
|
+
handleCloseCreateDialog,
|
|
213
|
+
handleSaveView,
|
|
214
|
+
handleDeleteView,
|
|
215
|
+
handleResetViews,
|
|
216
|
+
handleTableViewsChange,
|
|
217
|
+
updateSelectedView,
|
|
218
|
+
};
|
|
219
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ColumnViewProps } from '../../../../types/index.js';
|
|
3
|
+
import type { UseViewsManagerProps, ViewMenuItem } from '../types';
|
|
4
|
+
export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManagerProps) => {
|
|
5
|
+
defaultColumns: ColumnViewProps[];
|
|
6
|
+
setDefaultColumns: (newColumns: ColumnViewProps[]) => void;
|
|
7
|
+
internalTableViews: ColumnViewProps[];
|
|
8
|
+
setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
|
|
9
|
+
internalCustomViews: ViewMenuItem[];
|
|
10
|
+
setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
|
|
11
|
+
defaultTemplate: ViewMenuItem | undefined;
|
|
12
|
+
};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { useState, useEffect, useMemo, useCallback } from 'react';
|
|
2
|
+
import { transformTemplatesToViewMenuItems } from '../utils';
|
|
3
|
+
export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
|
|
4
|
+
// Maintain internal templates state that can be modified
|
|
5
|
+
const [internalTemplates, setInternalTemplates] = useState(() => templates);
|
|
6
|
+
// Update internal templates when external templates prop changes
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (templates) {
|
|
9
|
+
setInternalTemplates(templates);
|
|
10
|
+
}
|
|
11
|
+
}, [templates]);
|
|
12
|
+
// Transform templates internally - this is the only source of data
|
|
13
|
+
const transformedTemplates = useMemo(() => {
|
|
14
|
+
if (!internalTemplates)
|
|
15
|
+
return null;
|
|
16
|
+
const templatesArray = Array.isArray(internalTemplates) ? internalTemplates : internalTemplates.templates;
|
|
17
|
+
const { customViews, defaultTemplateColumns, defaultTemplate } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
|
|
18
|
+
// Only use default template columns - no fallback to layout data
|
|
19
|
+
// The default view must come from a template with default: true
|
|
20
|
+
const effectiveLayoutData = defaultTemplateColumns
|
|
21
|
+
? [
|
|
22
|
+
{
|
|
23
|
+
code: mode === 'advanced' ? 'Advanced' : 'Sheet',
|
|
24
|
+
columns: defaultTemplateColumns.map((col, idx) => {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
return ({
|
|
27
|
+
code: col.name,
|
|
28
|
+
name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
|
|
29
|
+
order: idx + 1,
|
|
30
|
+
default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
|
|
31
|
+
fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
|
|
32
|
+
var _a;
|
|
33
|
+
return ({
|
|
34
|
+
code: item.name,
|
|
35
|
+
name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang: '' }],
|
|
36
|
+
default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
|
|
37
|
+
});
|
|
38
|
+
}),
|
|
39
|
+
});
|
|
40
|
+
}),
|
|
41
|
+
},
|
|
42
|
+
]
|
|
43
|
+
: [];
|
|
44
|
+
return {
|
|
45
|
+
customViews,
|
|
46
|
+
layoutData: effectiveLayoutData,
|
|
47
|
+
defaultTemplateColumns,
|
|
48
|
+
defaultTemplate,
|
|
49
|
+
};
|
|
50
|
+
}, [internalTemplates, mode, lang]);
|
|
51
|
+
const [defaultColumns, setDefaultColumns] = useState([]);
|
|
52
|
+
const [internalTableViews, setInternalTableViews] = useState([]);
|
|
53
|
+
const [internalCustomViews, setInternalCustomViews] = useState([]);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
// Only use default template columns from template with default: true
|
|
56
|
+
// No fallback to layout data - default must come from templates array
|
|
57
|
+
if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns) {
|
|
58
|
+
// Create new array references to ensure state updates
|
|
59
|
+
const newColumns = [...transformedTemplates.defaultTemplateColumns];
|
|
60
|
+
setDefaultColumns(newColumns);
|
|
61
|
+
setInternalTableViews(newColumns);
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
// No default template found - set empty arrays
|
|
65
|
+
setDefaultColumns([]);
|
|
66
|
+
setInternalTableViews([]);
|
|
67
|
+
}
|
|
68
|
+
}, [mode, transformedTemplates]);
|
|
69
|
+
// Update custom views when templates/mode change
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {
|
|
72
|
+
// Create new array reference to ensure state updates
|
|
73
|
+
setInternalCustomViews([...transformedTemplates.customViews]);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
setInternalCustomViews([]);
|
|
77
|
+
}
|
|
78
|
+
}, [mode, transformedTemplates]);
|
|
79
|
+
// Custom setDefaultColumns that also updates the internal templates
|
|
80
|
+
const setDefaultColumnsWithTemplateUpdate = useCallback((newColumns) => {
|
|
81
|
+
setDefaultColumns(newColumns);
|
|
82
|
+
// Update the internal templates to persist the changes
|
|
83
|
+
setInternalTemplates((prevTemplates) => {
|
|
84
|
+
if (!prevTemplates)
|
|
85
|
+
return prevTemplates;
|
|
86
|
+
const templatesArray = Array.isArray(prevTemplates) ? prevTemplates : prevTemplates.templates;
|
|
87
|
+
const templatesCopy = templatesArray.map((t) => (Object.assign({}, t)));
|
|
88
|
+
// Find the default template
|
|
89
|
+
const defaultTemplateIndex = templatesCopy.findIndex((t) => t.default);
|
|
90
|
+
if (defaultTemplateIndex === -1)
|
|
91
|
+
return prevTemplates;
|
|
92
|
+
const defaultTemplate = Object.assign({}, templatesCopy[defaultTemplateIndex]);
|
|
93
|
+
const layoutCopy = [...defaultTemplate.layout];
|
|
94
|
+
// Find and update the appropriate layout section
|
|
95
|
+
const layoutCode = mode === 'advanced' ? 'Advanced' : 'Sheet';
|
|
96
|
+
const layoutSectionIndex = layoutCopy.findIndex((section) => section.code === layoutCode);
|
|
97
|
+
if (layoutSectionIndex !== -1) {
|
|
98
|
+
// Convert ColumnViewProps back to template format
|
|
99
|
+
const updatedColumns = newColumns.map((col, idx) => {
|
|
100
|
+
var _a, _b;
|
|
101
|
+
return ({
|
|
102
|
+
code: col.name,
|
|
103
|
+
name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
|
|
104
|
+
order: idx + 1,
|
|
105
|
+
default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
|
|
106
|
+
fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
|
|
107
|
+
var _a;
|
|
108
|
+
return ({
|
|
109
|
+
code: item.name,
|
|
110
|
+
name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang }],
|
|
111
|
+
order: null,
|
|
112
|
+
default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
|
|
113
|
+
});
|
|
114
|
+
}),
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
layoutCopy[layoutSectionIndex] = Object.assign(Object.assign({}, layoutCopy[layoutSectionIndex]), { columns: updatedColumns });
|
|
118
|
+
defaultTemplate.layout = layoutCopy;
|
|
119
|
+
templatesCopy[defaultTemplateIndex] = defaultTemplate;
|
|
120
|
+
}
|
|
121
|
+
// Return updated templates in the same format as the input
|
|
122
|
+
if (Array.isArray(prevTemplates)) {
|
|
123
|
+
return templatesCopy;
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
return Object.assign(Object.assign({}, prevTemplates), { templates: templatesCopy });
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
}, [mode, lang]);
|
|
130
|
+
return {
|
|
131
|
+
defaultColumns,
|
|
132
|
+
setDefaultColumns: setDefaultColumnsWithTemplateUpdate,
|
|
133
|
+
internalTableViews,
|
|
134
|
+
setInternalTableViews,
|
|
135
|
+
internalCustomViews,
|
|
136
|
+
setInternalCustomViews,
|
|
137
|
+
defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
|
|
138
|
+
};
|
|
139
|
+
};
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export default
|
|
1
|
+
export { default } from './TableView';
|
|
2
|
+
export { default as TableView } from './TableView';
|
|
3
|
+
export { default as DefaultViews } from './DefaultViews';
|
|
4
|
+
export { default as CustomViews } from './CustomViews';
|
|
5
|
+
export { default as ViewSelector } from './ViewSelector';
|
|
6
|
+
export { default as ViewsDropdown } from './ViewsDropdown';
|
|
7
|
+
export { default as CreateViewDialog } from './CreateViewDialog';
|
|
8
|
+
export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse, TemplateAPIMetadata, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
|
|
9
|
+
export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
|
|
10
|
+
export { useSubmenuHover } from './hooks';
|
|
11
|
+
export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
|
|
12
|
+
export { defaultViewList, advancedColumns, sheetColumns } from './data';
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export default
|
|
1
|
+
export { default } from './TableView';
|
|
2
|
+
export { default as TableView } from './TableView';
|
|
3
|
+
export { default as DefaultViews } from './DefaultViews';
|
|
4
|
+
export { default as CustomViews } from './CustomViews';
|
|
5
|
+
export { default as ViewSelector } from './ViewSelector';
|
|
6
|
+
export { default as ViewsDropdown } from './ViewsDropdown';
|
|
7
|
+
export { default as CreateViewDialog } from './CreateViewDialog';
|
|
8
|
+
export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
|
|
9
|
+
export { useSubmenuHover } from './hooks';
|
|
10
|
+
export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
|
|
11
|
+
// Note: defaultViewList, advancedColumns, sheetColumns are only exported for demo purposes
|
|
12
|
+
// They should not be used as defaults in production - all data should come from API
|
|
13
|
+
export { defaultViewList, advancedColumns, sheetColumns } from './data';
|