@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

package/components/routes/hits/search/grid/HitGrid.js

@@ -1,132 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
-import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { uniq } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import HitContextMenu from '../HitContextMenu';
-import HitQuery from '../HitQuery';
-import QuerySettings from '../QuerySettings';
-import AddColumnModal from './AddColumnModal';
-import ColumnHeader from './ColumnHeader';
-import HitRow from './HitRow';
-const HitGrid = () => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const { onClick } = useHitSelection();
-    const { getMatchingAnalytic } = useMatchers();
-    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const query = useContextSelector(ParameterContext, ctx => ctx.query);
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
-    const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
-        'howler.outline.threat',
-        'howler.outline.target',
-        'howler.outline.indicators',
-        'howler.outline.summary'
-    ]);
-    const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
-    const [analyticIds, setAnalyticIds] = useState({});
-    const resizingCol = useRef();
-    const showSelectBar = useMemo(() => {
-        if (selectedHits.length > 1) {
-            return true;
-        }
-        if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
-            return true;
-        }
-        return false;
-    }, [selected, selectedHits]);
-    useEffect(() => {
-        response?.items.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analyticIds, response]);
-    const onMouseMove = useCallback((event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const [col, element] = resizingCol.current;
-        const rect = element.getBoundingClientRect();
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = rect.width + event.movementX + 'px';
-            el.style.width = rect.width + event.movementX + 'px';
-        });
-    }, []);
-    const onMouseUp = useCallback(() => {
-        const [col, element] = resizingCol.current;
-        setColumnWidths({
-            ...columnWidths,
-            [col]: element.style.width
-        });
-        element.style.width = null;
-        element.style.maxWidth = null;
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = null;
-            el.style.width = null;
-        });
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }, [columnWidths, onMouseMove, setColumnWidths]);
-    const onMouseDown = useCallback((col, event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        resizingCol.current = [col, event.target.parentElement];
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    }, [onMouseMove, onMouseUp]);
-    const onScroll = useCallback((event) => {
-        const target = event.target;
-        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
-            search(query, true);
-        }
-    }, [query, search]);
-    const handleDragEnd = useCallback((event) => {
-        const { active, over } = event;
-        if (over && active.id !== over.id) {
-            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
-            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
-            setColumns(arrayMove(columns, oldIndex, newIndex));
-        }
-    }, [columns, setColumns]);
-    const getSelectedId = useCallback((event) => {
-        const target = event.target;
-        const selectedElement = target.closest('[id]');
-        if (!selectedElement) {
-            return;
-        }
-        return selectedElement.id;
-    }, []);
-    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') }), response && (_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: {
-                                    position: 'absolute',
-                                    left: 0,
-                                    right: 0,
-                                    bottom: 0,
-                                    borderBottomLeftRadius: theme.shape.borderRadius,
-                                    borderBottomRightRadius: theme.shape.borderRadius
-                                } }))] }), _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(AddColumnModal, { columns: columns, addColumn: key => setColumns(uniq([...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: {
-                                                borderRight: 'thin solid',
-                                                borderRightColor: 'divider'
-                                            }, 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') })] }) }))] })] }));
-};
-export default HitGrid;

package/utils/hitFunctions.d.ts

@@ -1,2 +0,0 @@
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-export declare const getUserList: (hit: Hit) => Set<string>;

package/utils/hitFunctions.js

@@ -1,8 +0,0 @@
-export const getUserList = (hit) => {
-    const ids = new Set();
-    if (hit) {
-        hit.howler?.log?.forEach(l => ids.add(l.user));
-        hit.howler?.comment?.forEach(c => ids.add(c.user), ids);
-    }
-    return ids;
-};