@tap-payments/os-micro-frontend-shared 0.1.438-test.3 → 0.1.438-test.31
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/TableHeader/TableView/ViewsDropdown.js +1 -3
- package/build/components/TableHeader/TableView/ViewsMenu.js +3 -8
- package/build/components/TableHeader/TableView/components/ColumnList.js +4 -1
- package/build/components/TableHeader/TableView/components/ViewsSubmenu.js +4 -1
- package/build/components/TableHeader/TableView/constants.d.ts +14 -0
- package/build/components/TableHeader/TableView/constants.js +14 -0
- package/build/components/TableHeader/TableView/hooks/useCustomTableViews.js +23 -19
- package/build/components/TableHeader/TableView/hooks/useViewsManager.js +7 -2
- package/build/components/TableHeader/TableView/hooks/useViewsMenu.js +12 -2
- package/build/components/TableHeader/TableView/types.d.ts +0 -2
- package/build/components/TableHeader/TableView/utils/customTableViews.d.ts +17 -0
- package/build/components/TableHeader/TableView/utils/customTableViews.js +30 -0
- package/build/components/TableHeader/TableView/utils/index.d.ts +1 -0
- package/build/components/TableHeader/TableView/utils/index.js +1 -0
- package/build/components/TableHeader/TableView/utils/viewMenu.js +2 -1
- package/build/utils/columns.d.ts +1 -7
- package/build/utils/columns.js +6 -7
- package/package.json +2 -2
|
@@ -18,7 +18,6 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
|
|
|
18
18
|
const { t } = useTranslation();
|
|
19
19
|
const { hoveredColumn: hoveredViewId, anchorEl: submenuAnchorEl, openSubmenu, closeSubmenu, cancelClose, forceClose } = useSubmenuHover();
|
|
20
20
|
const [hoveredCustomId, setHoveredCustomId] = React.useState(null);
|
|
21
|
-
const [showModifiedBadge, setShowModifiedBadge] = React.useState(false);
|
|
22
21
|
const [draftColumns, setDraftColumns] = React.useState(null);
|
|
23
22
|
const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
|
|
24
23
|
const views = useMemo(() => {
|
|
@@ -82,7 +81,6 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
|
|
|
82
81
|
if (isDefaultView && defaultTemplate && colsToApply.length) {
|
|
83
82
|
if (draftHasChanges) {
|
|
84
83
|
onSaveDefaultColumns === null || onSaveDefaultColumns === void 0 ? void 0 : onSaveDefaultColumns(colsToApply);
|
|
85
|
-
setShowModifiedBadge(true);
|
|
86
84
|
}
|
|
87
85
|
updateSelectedView === null || updateSelectedView === void 0 ? void 0 : updateSelectedView(Object.assign(Object.assign({}, defaultTemplate), { id: String(defaultTemplate.id), submenu: deepCloneColumns(colsToApply), columns: colsToApply.map((c) => c.name) }));
|
|
88
86
|
}
|
|
@@ -136,7 +134,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl,
|
|
|
136
134
|
setHoveredCustomId(null);
|
|
137
135
|
else if (hasSubmenu(item, defaultColumns))
|
|
138
136
|
closeSubmenu();
|
|
139
|
-
}, onClick: () => selectView(item), sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { style: { width: 15, height: 15 }, src: smallBlueCheckIcon, alt: "check" }) : _jsx(Space, {}), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.default && item.id === selectedViewInfo.id &&
|
|
137
|
+
}, onClick: () => selectView(item), sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { style: { width: 15, height: 15 }, src: smallBlueCheckIcon, alt: "check" }) : _jsx(Space, {}), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.default && item.id === selectedViewInfo.id && modifiedFromBase && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomId === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
|
|
140
138
|
e.stopPropagation();
|
|
141
139
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
142
140
|
onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useCallback
|
|
2
|
+
import { memo, useCallback } from 'react';
|
|
3
3
|
import { useTranslation } from 'react-i18next';
|
|
4
4
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
5
5
|
import { Icon, StyledButton } from '../../index.js';
|
|
@@ -10,9 +10,7 @@ import { ViewWrapper } from './styles';
|
|
|
10
10
|
import { useViewsManager } from './hooks';
|
|
11
11
|
import { useViewsMenu } from './hooks/useViewsMenu';
|
|
12
12
|
function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView, tableMode = 'default', lang = 'en', }) {
|
|
13
|
-
var _a;
|
|
14
13
|
const { t } = useTranslation();
|
|
15
|
-
const [modifiedModes, setModifiedModes] = useState({});
|
|
16
14
|
const { defaultColumns, defaultTemplate, customViews, allTemplates, baseDefaultColumns } = useViewsManager({
|
|
17
15
|
tableMode,
|
|
18
16
|
templates,
|
|
@@ -32,10 +30,7 @@ function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomVi
|
|
|
32
30
|
if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id))
|
|
33
31
|
return;
|
|
34
32
|
onUpdateDefaultView === null || onUpdateDefaultView === void 0 ? void 0 : onUpdateDefaultView(columns);
|
|
35
|
-
|
|
36
|
-
}, [
|
|
37
|
-
return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, defaultModified: (_a = modifiedModes[tableMode]) !== null && _a !== void 0 ? _a : false, onMarkDefaultModified: () => {
|
|
38
|
-
setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
|
|
39
|
-
}, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));
|
|
33
|
+
}, [defaultTemplate, onUpdateDefaultView]);
|
|
34
|
+
return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));
|
|
40
35
|
}
|
|
41
36
|
export default memo(ViewsMenu);
|
|
@@ -64,7 +64,10 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
|
|
|
64
64
|
},
|
|
65
65
|
] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
|
|
66
66
|
var _a, _b;
|
|
67
|
-
return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected,
|
|
67
|
+
return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
|
|
68
|
+
if (!isDate)
|
|
69
|
+
onSubItemToggle(column.name, subItem.name);
|
|
70
|
+
} }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
|
|
68
71
|
}) })] })) })))] }), column.name));
|
|
69
72
|
}) })) }))] }));
|
|
70
73
|
};
|
|
@@ -62,7 +62,10 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
|
|
|
62
62
|
}
|
|
63
63
|
}, sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
|
|
64
64
|
var _a, _b;
|
|
65
|
-
return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected,
|
|
65
|
+
return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
|
|
66
|
+
if (!isDate)
|
|
67
|
+
onNestedItemToggle(column.name, subItem.name);
|
|
68
|
+
} }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
|
|
66
69
|
}) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }), column.name));
|
|
67
70
|
}) })) })] }));
|
|
68
71
|
};
|
|
@@ -23,3 +23,17 @@ export declare const DATE_COLUMN_CONFIG: {
|
|
|
23
23
|
readonly isDefaultPinned: true;
|
|
24
24
|
readonly pinnable: true;
|
|
25
25
|
};
|
|
26
|
+
export declare const CUSTOM_TABLE_REQUIRED_COLUMN_LABELS: {
|
|
27
|
+
readonly date: "Date";
|
|
28
|
+
readonly index: "Index";
|
|
29
|
+
};
|
|
30
|
+
export declare const CUSTOM_TABLE_MODE_ALIASES: {
|
|
31
|
+
sheet: string[];
|
|
32
|
+
default: string[];
|
|
33
|
+
text: string[];
|
|
34
|
+
};
|
|
35
|
+
export declare const OTHER_SECTION_CODE: {
|
|
36
|
+
readonly sheet: "Advanced";
|
|
37
|
+
readonly default: "Sheet";
|
|
38
|
+
readonly text: "text";
|
|
39
|
+
};
|
|
@@ -23,3 +23,17 @@ export const DATE_COLUMN_CONFIG = {
|
|
|
23
23
|
isDefaultPinned: true,
|
|
24
24
|
pinnable: true,
|
|
25
25
|
};
|
|
26
|
+
export const CUSTOM_TABLE_REQUIRED_COLUMN_LABELS = {
|
|
27
|
+
date: 'Date',
|
|
28
|
+
index: 'Index',
|
|
29
|
+
};
|
|
30
|
+
export const CUSTOM_TABLE_MODE_ALIASES = {
|
|
31
|
+
sheet: ['sheet'],
|
|
32
|
+
default: ['advanced', 'default'],
|
|
33
|
+
text: ['text'],
|
|
34
|
+
};
|
|
35
|
+
export const OTHER_SECTION_CODE = {
|
|
36
|
+
sheet: 'Advanced',
|
|
37
|
+
default: 'Sheet',
|
|
38
|
+
text: 'text',
|
|
39
|
+
};
|
|
@@ -8,35 +8,42 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
11
|
+
import { OTHER_SECTION_CODE } from '../constants';
|
|
12
|
+
import { handleTemplateUpdate, mapColumnsToLayoutSection, convertTemplateToColumnsView, isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate, addRequiredColumns, } from '../utils';
|
|
11
13
|
import { updateColumnSelection } from '../../../../utils/index.js';
|
|
12
|
-
import { handleTemplateUpdate, mapColumnsToLayoutSection, convertTemplateToColumnsView, convertTemplatesToColumnsView, isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate, } from '../utils';
|
|
13
14
|
export function useCustomTableViews({ templates, setTemplates, createTemplate, updateTemplate, deleteTemplate, tableMode, lang = 'en', columnModifiers, }) {
|
|
14
15
|
const [selectedTemplateId, setSelectedTemplateId] = useState(undefined);
|
|
15
16
|
const defaultTemplate = useMemo(() => { var _a; return (_a = templates.find((t) => t.default)) !== null && _a !== void 0 ? _a : templates[0]; }, [templates]);
|
|
16
17
|
useEffect(() => {
|
|
17
|
-
if (!defaultTemplate)
|
|
18
|
+
if (!defaultTemplate)
|
|
18
19
|
setSelectedTemplateId(undefined);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
if (!selectedTemplateId)
|
|
20
|
+
}, [defaultTemplate]);
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (defaultTemplate && !selectedTemplateId)
|
|
22
23
|
setSelectedTemplateId(defaultTemplate.id);
|
|
24
|
+
}, [defaultTemplate, selectedTemplateId]);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (!selectedTemplateId)
|
|
23
27
|
return;
|
|
24
|
-
}
|
|
25
28
|
const isSelectedTemplateExists = templates.some((t) => isTemplateMatchingId(t, selectedTemplateId));
|
|
26
|
-
if (!isSelectedTemplateExists)
|
|
27
|
-
setSelectedTemplateId(defaultTemplate.id);
|
|
28
|
-
|
|
29
|
-
}, [templates, defaultTemplate, selectedTemplateId]);
|
|
29
|
+
if (!isSelectedTemplateExists)
|
|
30
|
+
setSelectedTemplateId(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id);
|
|
31
|
+
}, [templates, selectedTemplateId, defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id]);
|
|
30
32
|
const onCreateCustomView = useCallback(({ name, layout }) => __awaiter(this, void 0, void 0, function* () {
|
|
31
|
-
var _a;
|
|
33
|
+
var _a, _b, _c, _d;
|
|
32
34
|
const created = yield createTemplate({ name, layout: [layout] });
|
|
33
35
|
if (created) {
|
|
34
|
-
const
|
|
36
|
+
const otherCode = (_a = OTHER_SECTION_CODE[tableMode]) !== null && _a !== void 0 ? _a : OTHER_SECTION_CODE.default;
|
|
37
|
+
const hasOtherSection = (_b = created.layout) === null || _b === void 0 ? void 0 : _b.some((s) => { var _a; return ((_a = s.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === otherCode.toLowerCase(); });
|
|
38
|
+
const templateWithOtherLayout = hasOtherSection
|
|
39
|
+
? created
|
|
40
|
+
: Object.assign(Object.assign({}, created), { layout: [...((_c = created.layout) !== null && _c !== void 0 ? _c : []), { code: otherCode, columns: [] }] });
|
|
41
|
+
const normalized = handleTemplateUpdate(templateWithOtherLayout);
|
|
35
42
|
setTemplates((prev) => [...prev, normalized]);
|
|
36
43
|
setSelectedTemplateId(normalized.id);
|
|
37
|
-
return { id: created.id, name: (
|
|
44
|
+
return { id: created.id, name: (_d = created.name) !== null && _d !== void 0 ? _d : '' };
|
|
38
45
|
}
|
|
39
|
-
}), [createTemplate, setTemplates]);
|
|
46
|
+
}), [createTemplate, setTemplates, tableMode]);
|
|
40
47
|
const onDeleteCustomView = useCallback((templateId) => __awaiter(this, void 0, void 0, function* () {
|
|
41
48
|
yield deleteTemplate(templateId);
|
|
42
49
|
setTemplates((prev) => prev.filter((t) => !isTemplateMatchingId(t, templateId)));
|
|
@@ -88,9 +95,6 @@ export function useCustomTableViews({ templates, setTemplates, createTemplate, u
|
|
|
88
95
|
if (selectedTemplate) {
|
|
89
96
|
templateColumnsView = convertTemplateToColumnsView(selectedTemplate, tableMode);
|
|
90
97
|
}
|
|
91
|
-
if (templateColumnsView.length === 0 && (templates === null || templates === void 0 ? void 0 : templates.length) > 0) {
|
|
92
|
-
templateColumnsView = convertTemplatesToColumnsView(templates, tableMode);
|
|
93
|
-
}
|
|
94
98
|
if (templateColumnsView.length === 0) {
|
|
95
99
|
return [];
|
|
96
100
|
}
|
|
@@ -103,9 +107,9 @@ export function useCustomTableViews({ templates, setTemplates, createTemplate, u
|
|
|
103
107
|
selected: mod.selected,
|
|
104
108
|
});
|
|
105
109
|
}
|
|
106
|
-
return result;
|
|
110
|
+
return addRequiredColumns(result, tableMode);
|
|
107
111
|
}
|
|
108
|
-
return templateColumnsView;
|
|
112
|
+
return addRequiredColumns(templateColumnsView, tableMode);
|
|
109
113
|
}, [tableMode, templates, selectedTemplateId, defaultTemplate, columnModifiers]);
|
|
110
114
|
return {
|
|
111
115
|
customViews,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
1
|
+
import { useMemo, useRef } from 'react';
|
|
2
2
|
import { mapTemplatesToMenuItems, deepCloneColumns } from '../utils';
|
|
3
3
|
export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
|
|
4
|
+
var _a;
|
|
5
|
+
const initialDefaultColumnsRef = useRef({});
|
|
4
6
|
const parsedData = useMemo(() => {
|
|
5
7
|
if (!templates || templates.length === 0) {
|
|
6
8
|
return {
|
|
@@ -19,6 +21,9 @@ export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
|
|
|
19
21
|
defaultColumns,
|
|
20
22
|
};
|
|
21
23
|
}, [templates, tableMode, lang]);
|
|
24
|
+
if (!initialDefaultColumnsRef.current[tableMode] && parsedData.defaultColumns.length > 0) {
|
|
25
|
+
initialDefaultColumnsRef.current[tableMode] = parsedData.defaultColumns;
|
|
26
|
+
}
|
|
22
27
|
return {
|
|
23
28
|
menuItems: parsedData.menuItems,
|
|
24
29
|
defaultItem: parsedData.defaultItem,
|
|
@@ -27,6 +32,6 @@ export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
|
|
|
27
32
|
customViews: parsedData.menuItems,
|
|
28
33
|
defaultTemplate: parsedData.defaultItem,
|
|
29
34
|
allTemplates: parsedData.allItems,
|
|
30
|
-
baseDefaultColumns: parsedData.defaultColumns,
|
|
35
|
+
baseDefaultColumns: (_a = initialDefaultColumnsRef.current[tableMode]) !== null && _a !== void 0 ? _a : parsedData.defaultColumns,
|
|
31
36
|
};
|
|
32
37
|
};
|
|
@@ -98,16 +98,26 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
|
|
|
98
98
|
setAnchorEl(null);
|
|
99
99
|
}, []);
|
|
100
100
|
const handleOpenEditDialog = useCallback((view) => {
|
|
101
|
-
|
|
101
|
+
var _a;
|
|
102
|
+
const latestView = (_a = allTemplates.find((templateView) => templateView.id === view.id)) !== null && _a !== void 0 ? _a : view;
|
|
103
|
+
setEditingView(latestView);
|
|
102
104
|
setShouldUseCurrentState(true);
|
|
103
105
|
setIsCreateDialogOpen(true);
|
|
104
|
-
}, []);
|
|
106
|
+
}, [allTemplates]);
|
|
105
107
|
const handleCloseCreateDialog = useCallback(() => {
|
|
106
108
|
setIsCreateDialogOpen(false);
|
|
107
109
|
setEditingView(null);
|
|
108
110
|
setShouldUseCurrentState(false);
|
|
109
111
|
setInitialColumnsForCreate(null);
|
|
110
112
|
}, []);
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
if (!isCreateDialogOpen || !(editingView === null || editingView === void 0 ? void 0 : editingView.id))
|
|
115
|
+
return;
|
|
116
|
+
const latestEditingView = allTemplates.find((view) => view.id === editingView.id);
|
|
117
|
+
if (latestEditingView) {
|
|
118
|
+
setEditingView(latestEditingView);
|
|
119
|
+
}
|
|
120
|
+
}, [isCreateDialogOpen, editingView === null || editingView === void 0 ? void 0 : editingView.id, allTemplates]);
|
|
111
121
|
const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
|
112
122
|
if (editingView) {
|
|
113
123
|
const viewId = editingView.id;
|
|
@@ -125,8 +125,6 @@ export interface ViewsDropdownProps {
|
|
|
125
125
|
setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
|
|
126
126
|
anchorEl: Element | null;
|
|
127
127
|
onClose?: () => void;
|
|
128
|
-
defaultModified?: boolean;
|
|
129
|
-
onMarkDefaultModified?: () => void;
|
|
130
128
|
onCreateCustomView?: (useCurrentState?: boolean, initialColumns?: ColumnViewProps[]) => void;
|
|
131
129
|
customViews?: ViewMenuItem[];
|
|
132
130
|
onEditCustomView?: (view: ViewMenuItem) => void;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ColumnsView, TableMode } from '../../../../types/index.js';
|
|
2
|
+
import type { Template } from '../types';
|
|
3
|
+
import { updateColumnSelection } from '../../../../utils/index.js';
|
|
4
|
+
export { updateColumnSelection };
|
|
5
|
+
export declare const getLayoutCodesForMode: (mode: TableMode) => string[];
|
|
6
|
+
export declare const getOtherModeSectionCode: (mode: TableMode) => string;
|
|
7
|
+
export declare const buildRequiredColumnView: (code: 'date' | 'index', sortOrder: number) => {
|
|
8
|
+
code: "date" | "index";
|
|
9
|
+
name: {
|
|
10
|
+
text: "Date" | "Index";
|
|
11
|
+
lang: string;
|
|
12
|
+
}[];
|
|
13
|
+
selected: boolean;
|
|
14
|
+
sort_order: number;
|
|
15
|
+
};
|
|
16
|
+
export declare const addRequiredColumns: (columns: ColumnsView[], mode: TableMode) => ColumnsView[];
|
|
17
|
+
export declare const hasLayoutSectionForMode: (template: Template | undefined, mode: TableMode) => boolean;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { CUSTOM_TABLE_MODE_ALIASES, OTHER_SECTION_CODE, CUSTOM_TABLE_REQUIRED_COLUMN_LABELS } from '../constants';
|
|
2
|
+
import { isTableSheetMode, updateColumnSelection } from '../../../../utils/index.js';
|
|
3
|
+
export { updateColumnSelection };
|
|
4
|
+
const getColumnKey = (column) => { var _a, _b, _c, _d; return (_d = ((_a = column.code) !== null && _a !== void 0 ? _a : (_c = (_b = column.name) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text)) === null || _d === void 0 ? void 0 : _d.toLowerCase(); };
|
|
5
|
+
export const getLayoutCodesForMode = (mode) => { var _a; return [...((_a = CUSTOM_TABLE_MODE_ALIASES[mode]) !== null && _a !== void 0 ? _a : CUSTOM_TABLE_MODE_ALIASES.default)]; };
|
|
6
|
+
export const getOtherModeSectionCode = (mode) => { var _a; return (_a = OTHER_SECTION_CODE[mode]) !== null && _a !== void 0 ? _a : OTHER_SECTION_CODE.default; };
|
|
7
|
+
export const buildRequiredColumnView = (code, sortOrder) => ({
|
|
8
|
+
code,
|
|
9
|
+
name: [{ text: CUSTOM_TABLE_REQUIRED_COLUMN_LABELS[code], lang: 'en' }],
|
|
10
|
+
selected: true,
|
|
11
|
+
sort_order: sortOrder,
|
|
12
|
+
});
|
|
13
|
+
export const addRequiredColumns = (columns, mode) => {
|
|
14
|
+
var _a, _b;
|
|
15
|
+
const updatedColumns = [...columns];
|
|
16
|
+
const existingDate = updatedColumns.find((column) => getColumnKey(column) === 'date');
|
|
17
|
+
const dateColumn = existingDate ? Object.assign(Object.assign({}, existingDate), { code: (_a = existingDate.code) !== null && _a !== void 0 ? _a : 'date', selected: true }) : buildRequiredColumnView('date', 1);
|
|
18
|
+
const existingIndex = updatedColumns.find((column) => getColumnKey(column) === 'index');
|
|
19
|
+
const indexColumn = isTableSheetMode(mode)
|
|
20
|
+
? existingIndex
|
|
21
|
+
? Object.assign(Object.assign({}, existingIndex), { code: (_b = existingIndex.code) !== null && _b !== void 0 ? _b : 'index', selected: true }) : buildRequiredColumnView('index', 0)
|
|
22
|
+
: undefined;
|
|
23
|
+
const restColumns = updatedColumns.filter((column) => {
|
|
24
|
+
const key = getColumnKey(column);
|
|
25
|
+
return key !== 'index' && key !== 'date';
|
|
26
|
+
});
|
|
27
|
+
const orderedColumns = isTableSheetMode(mode) ? [indexColumn, dateColumn, ...restColumns] : [dateColumn, ...restColumns];
|
|
28
|
+
return orderedColumns.filter((column) => Boolean(column));
|
|
29
|
+
};
|
|
30
|
+
export const hasLayoutSectionForMode = (template, mode) => { var _a, _b; return (_b = (_a = template === null || template === void 0 ? void 0 : template.layout) === null || _a === void 0 ? void 0 : _a.some((section) => { var _a, _b; return getLayoutCodesForMode(mode).includes((_b = (_a = section.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : ''); })) !== null && _b !== void 0 ? _b : false; };
|
|
@@ -4,3 +4,4 @@ export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, are
|
|
|
4
4
|
export { getSubmenuFromTemplateLayout, getColumnOrder, handleTemplateUpdate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';
|
|
5
5
|
export { isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate } from './templateState';
|
|
6
6
|
export type { TemplateLike } from './templateState';
|
|
7
|
+
export { getLayoutCodesForMode, getOtherModeSectionCode, buildRequiredColumnView, addRequiredColumns, hasLayoutSectionForMode, updateColumnSelection, } from './customTableViews';
|
|
@@ -3,3 +3,4 @@ export { createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMen
|
|
|
3
3
|
export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, toggleSingleColumn, toggleAllCurrentColumns, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, normalizeColumnsSelected, areColumnsEqual, resetColumnsToDefault, initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, } from './columnState';
|
|
4
4
|
export { getSubmenuFromTemplateLayout, getColumnOrder, handleTemplateUpdate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';
|
|
5
5
|
export { isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate } from './templateState';
|
|
6
|
+
export { getLayoutCodesForMode, getOtherModeSectionCode, buildRequiredColumnView, addRequiredColumns, hasLayoutSectionForMode, updateColumnSelection, } from './customTableViews';
|
|
@@ -23,7 +23,8 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
|
|
|
23
23
|
const withDate = columns.some((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; }) ? columns : [dateColumn, ...columns];
|
|
24
24
|
const dateIndex = withDate.findIndex((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; });
|
|
25
25
|
const withDateFirst = dateIndex > 0 ? [withDate[dateIndex], ...withDate.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'date'; })] : withDate;
|
|
26
|
-
const
|
|
26
|
+
const withoutIndex = withDateFirst.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index'; });
|
|
27
|
+
const finalColumns = [indexColumn, ...withoutIndex];
|
|
27
28
|
const item = {
|
|
28
29
|
id: template.default ? 'default' : viewId,
|
|
29
30
|
label: template.name,
|
package/build/utils/columns.d.ts
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { IColumnProps, ColumnViewProps, ColumnsView } from '../types/index.js';
|
|
2
|
-
export declare function filterShownColumns
|
|
3
|
-
actions: string;
|
|
4
|
-
action_icon?: string;
|
|
5
|
-
}>>, tableViews: ColumnViewProps[]): IColumnProps<T & {
|
|
6
|
-
actions: string;
|
|
7
|
-
action_icon?: string | undefined;
|
|
8
|
-
}>[];
|
|
2
|
+
export declare function filterShownColumns(columns: IColumnProps[], tableViews: ColumnViewProps[], isCustomView?: boolean): IColumnProps<any>[];
|
|
9
3
|
export declare function isParameterSelected(columns: ColumnViewProps[], columnId: string, parameter: string): boolean;
|
|
10
4
|
export declare function mapDataToViews(columnData?: ColumnsView[], language?: string): ColumnViewProps[];
|
|
11
5
|
export declare function mapViewsToData(columns: ColumnViewProps[]): ColumnsView[];
|
package/build/utils/columns.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import startCase from 'lodash/startCase';
|
|
2
2
|
import { getNameText } from './index.js';
|
|
3
|
-
export function filterShownColumns(columns, tableViews) {
|
|
3
|
+
export function filterShownColumns(columns, tableViews, isCustomView) {
|
|
4
4
|
return columns.filter((column) => {
|
|
5
5
|
var _a, _b, _c, _d, _e;
|
|
6
6
|
const columnId = (_a = column === null || column === void 0 ? void 0 : column.id) === null || _a === void 0 ? void 0 : _a.toString();
|
|
@@ -13,7 +13,8 @@ export function filterShownColumns(columns, tableViews) {
|
|
|
13
13
|
const isColumnWithMenuItems = !!column.tableViewId && (((_b = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.menuItems) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
|
|
14
14
|
const isMenuItemSelected = (_d = (_c = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.menuItems) === null || _c === void 0 ? void 0 : _c.find((item) => { var _a, _b, _c; return ((_a = item.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = column.tableViewId) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _d === void 0 ? void 0 : _d.selected;
|
|
15
15
|
const isColumnSelected = !!selectedColumn && (isMenuItemSelected || !isColumnWithMenuItems);
|
|
16
|
-
const
|
|
16
|
+
const customViewFixedColumns = isCustomView ? ['index', 'date'] : [];
|
|
17
|
+
const isBasicColumn = ['actions', 'action_icon', ...customViewFixedColumns].includes((_e = columnId === null || columnId === void 0 ? void 0 : columnId.toLowerCase()) !== null && _e !== void 0 ? _e : '');
|
|
17
18
|
if (isColumnSelected || isBasicColumn) {
|
|
18
19
|
return true;
|
|
19
20
|
}
|
|
@@ -32,14 +33,13 @@ export function isParameterSelected(columns, columnId, parameter) {
|
|
|
32
33
|
export function mapDataToViews(columnData, language) {
|
|
33
34
|
var _a;
|
|
34
35
|
return (((_a = columnData === null || columnData === void 0 ? void 0 : columnData.filter((c) => { var _a, _b; return !!((_b = (_a = c.name) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.text); })) === null || _a === void 0 ? void 0 : _a.map((column) => {
|
|
35
|
-
var _a;
|
|
36
|
+
var _a, _b, _c;
|
|
36
37
|
return ({
|
|
37
38
|
code: column.code,
|
|
38
39
|
label: getNameText(column.name, language),
|
|
39
40
|
name: getNameText(column.name, language) || '',
|
|
40
41
|
selected: (column === null || column === void 0 ? void 0 : column.selected) !== false,
|
|
41
|
-
menuItems: (_a = column.fields
|
|
42
|
-
.map((field) => {
|
|
42
|
+
menuItems: (_c = (_b = (_a = column.fields) === null || _a === void 0 ? void 0 : _a.map((field) => {
|
|
43
43
|
var _a, _b;
|
|
44
44
|
return (_b = (_a = field.parameters) === null || _a === void 0 ? void 0 : _a.filter((p) => !!p.code)) === null || _b === void 0 ? void 0 : _b.map((param) => {
|
|
45
45
|
return {
|
|
@@ -48,8 +48,7 @@ export function mapDataToViews(columnData, language) {
|
|
|
48
48
|
selected: (param === null || param === void 0 ? void 0 : param.selected) !== false,
|
|
49
49
|
};
|
|
50
50
|
});
|
|
51
|
-
})
|
|
52
|
-
.flat()) === null || _a === void 0 ? void 0 : _a.filter((item) => !!item.name),
|
|
51
|
+
})) === null || _b === void 0 ? void 0 : _b.flat()) === null || _c === void 0 ? void 0 : _c.filter((item) => !!item.name),
|
|
53
52
|
});
|
|
54
53
|
})) || []);
|
|
55
54
|
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.438-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.438-test.31",
|
|
5
|
+
"testVersion": 31,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|