@cccsaurora/howler-ui 2.17.2-patch.629 → 2.17.2-patch.630
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.
|
@@ -7,10 +7,8 @@ import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers'
|
|
|
7
7
|
import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
|
|
8
8
|
import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
|
|
9
9
|
import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
|
|
10
|
-
import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
|
|
11
10
|
import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
|
|
12
11
|
import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
|
|
13
|
-
import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
|
|
14
12
|
import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
|
|
15
13
|
import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
|
|
16
14
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -38,15 +36,15 @@ const HitGrid = () => {
|
|
|
38
36
|
const query = useContextSelector(ParameterContext, ctx => ctx.query);
|
|
39
37
|
const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
|
|
40
38
|
const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
|
|
41
|
-
const [
|
|
42
|
-
const columnModalRef = useRef();
|
|
43
|
-
const [columns, setColumns] = useState([
|
|
39
|
+
const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
|
|
44
40
|
'howler.outline.threat',
|
|
45
41
|
'howler.outline.target',
|
|
46
42
|
'howler.outline.indicators',
|
|
47
43
|
'howler.outline.summary'
|
|
48
44
|
]);
|
|
49
|
-
const [columnWidths, setColumnWidths] =
|
|
45
|
+
const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
|
|
46
|
+
const [analyticIds, setAnalyticIds] = useState({});
|
|
47
|
+
const columnModalRef = useRef();
|
|
50
48
|
const [showAddColumn, setShowAddColumn] = useState(false);
|
|
51
49
|
const resizingCol = useRef();
|
|
52
50
|
const showSelectBar = useMemo(() => {
|
|
@@ -78,10 +76,10 @@ const HitGrid = () => {
|
|
|
78
76
|
}, []);
|
|
79
77
|
const onMouseUp = useCallback(() => {
|
|
80
78
|
const [col, element] = resizingCol.current;
|
|
81
|
-
setColumnWidths(
|
|
82
|
-
...
|
|
79
|
+
setColumnWidths({
|
|
80
|
+
...columnWidths,
|
|
83
81
|
[col]: element.style.width
|
|
84
|
-
})
|
|
82
|
+
});
|
|
85
83
|
element.style.width = null;
|
|
86
84
|
element.style.maxWidth = null;
|
|
87
85
|
document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
|
|
@@ -90,7 +88,7 @@ const HitGrid = () => {
|
|
|
90
88
|
});
|
|
91
89
|
window.removeEventListener('mousemove', onMouseMove);
|
|
92
90
|
window.removeEventListener('mouseup', onMouseUp);
|
|
93
|
-
}, [onMouseMove]);
|
|
91
|
+
}, [columnWidths, onMouseMove, setColumnWidths]);
|
|
94
92
|
const onMouseDown = useCallback((col, event) => {
|
|
95
93
|
event.stopPropagation();
|
|
96
94
|
event.preventDefault();
|
|
@@ -111,7 +109,7 @@ const HitGrid = () => {
|
|
|
111
109
|
const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
|
|
112
110
|
setColumns(arrayMove(columns, oldIndex, newIndex));
|
|
113
111
|
}
|
|
114
|
-
}, [columns]);
|
|
112
|
+
}, [columns, setColumns]);
|
|
115
113
|
const getSelectedId = useCallback((event) => {
|
|
116
114
|
const target = event.target;
|
|
117
115
|
const selectedElement = target.closest('[id]');
|
|
@@ -120,14 +118,14 @@ const HitGrid = () => {
|
|
|
120
118
|
}
|
|
121
119
|
return selectedElement.id;
|
|
122
120
|
}, []);
|
|
123
|
-
return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between",
|
|
121
|
+
return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
|
|
124
122
|
position: 'absolute',
|
|
125
123
|
left: 0,
|
|
126
124
|
right: 0,
|
|
127
125
|
bottom: 0,
|
|
128
126
|
borderBottomLeftRadius: theme.shape.borderRadius,
|
|
129
127
|
borderBottomRightRadius: theme.shape.borderRadius
|
|
130
|
-
} }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%",
|
|
128
|
+
} }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns([...columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
|
|
131
129
|
borderRight: 'thin solid',
|
|
132
130
|
borderRightColor: 'divider'
|
|
133
131
|
}, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
|
package/package.json
CHANGED
package/utils/constants.d.ts
CHANGED
|
@@ -55,6 +55,8 @@ export declare enum StorageKey {
|
|
|
55
55
|
SEARCH_PANE_WIDTH = "search_pane_width",
|
|
56
56
|
TEMPLATE_FIELD_COUNT = "template_field_count",
|
|
57
57
|
GRID_COLLAPSE_COLUMN = "grid_collapse_column",
|
|
58
|
+
GRID_COLUMNS = "grid_columns",
|
|
59
|
+
GRID_COLUMN_WIDTHS = "grid_column_widths",
|
|
58
60
|
QUERY_HISTORY = "query_history",
|
|
59
61
|
LOGIN_NONCE = "login_nonce",
|
|
60
62
|
DISPLAY_TYPE = "display_type"
|
package/utils/constants.js
CHANGED
|
@@ -60,6 +60,8 @@ export var StorageKey;
|
|
|
60
60
|
StorageKey["SEARCH_PANE_WIDTH"] = "search_pane_width";
|
|
61
61
|
StorageKey["TEMPLATE_FIELD_COUNT"] = "template_field_count";
|
|
62
62
|
StorageKey["GRID_COLLAPSE_COLUMN"] = "grid_collapse_column";
|
|
63
|
+
StorageKey["GRID_COLUMNS"] = "grid_columns";
|
|
64
|
+
StorageKey["GRID_COLUMN_WIDTHS"] = "grid_column_widths";
|
|
63
65
|
StorageKey["QUERY_HISTORY"] = "query_history";
|
|
64
66
|
StorageKey["LOGIN_NONCE"] = "login_nonce";
|
|
65
67
|
StorageKey["DISPLAY_TYPE"] = "display_type";
|