@cccsaurora/howler-ui 2.13.0-dev.129 → 2.13.0-dev.131
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.
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, Tooltip, useTheme } from '@mui/material';
|
|
2
|
+
import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, useTheme } from '@mui/material';
|
|
3
3
|
import api from '@cccsaurora/howler-ui/api';
|
|
4
4
|
import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
|
|
5
5
|
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { useTranslation } from 'react-i18next';
|
|
7
|
-
import { Check, Delete, SsidChart } from '@mui/icons-material';
|
|
7
|
+
import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material';
|
|
8
|
+
import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
|
|
8
9
|
import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
|
|
10
|
+
import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
|
|
9
11
|
import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
|
|
10
12
|
import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
|
|
11
13
|
import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
|
|
12
14
|
import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
|
|
15
|
+
import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
|
|
13
16
|
import { useSearchParams } from 'react-router-dom';
|
|
14
17
|
import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
|
|
15
18
|
import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
|
|
@@ -17,6 +20,8 @@ import OverviewEditor from './OverviewEditor';
|
|
|
17
20
|
import { useStartingTemplate } from './startingTemplate';
|
|
18
21
|
const OverviewViewer = () => {
|
|
19
22
|
const theme = useTheme();
|
|
23
|
+
const app = useApp();
|
|
24
|
+
const { lightTheme, darkTheme } = useThemeBuilder(useMyTheme());
|
|
20
25
|
const { t } = useTranslation();
|
|
21
26
|
const [params, setParams] = useSearchParams();
|
|
22
27
|
const { getOverviews } = useContext(OverviewContext);
|
|
@@ -24,6 +29,7 @@ const OverviewViewer = () => {
|
|
|
24
29
|
const [overviewList, setOverviewList] = useState([]);
|
|
25
30
|
const [selectedOverview, setSelectedOverview] = useState(null);
|
|
26
31
|
const [content, setContent] = useState('');
|
|
32
|
+
const [chosenTheme, setChosenTheme] = useState(app.theme);
|
|
27
33
|
const [analytics, setAnalytics] = useState([]);
|
|
28
34
|
const [detections, setDetections] = useState([]);
|
|
29
35
|
const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
|
|
@@ -173,7 +179,8 @@ const OverviewViewer = () => {
|
|
|
173
179
|
}, [onMouseMove, onMouseUp]);
|
|
174
180
|
const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
|
|
175
181
|
const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
|
|
176
|
-
|
|
182
|
+
const activeTheme = chosenTheme === 'light' ? lightTheme : darkTheme;
|
|
183
|
+
return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
|
|
177
184
|
if (e.ctrlKey && e.key === 's') {
|
|
178
185
|
if (!noChange) {
|
|
179
186
|
onSave();
|
|
@@ -199,20 +206,22 @@ const OverviewViewer = () => {
|
|
|
199
206
|
transform: `translateX(${x}px)`,
|
|
200
207
|
zIndex: 1000,
|
|
201
208
|
borderRadius: theme.shape.borderRadius
|
|
202
|
-
}, onMouseDown: onMouseDown }), _jsx(Box, { flex: 1, px: 2, sx: {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
209
|
+
}, onMouseDown: onMouseDown }), _jsx(ThemeProvider, { theme: activeTheme, children: _jsx(Box, { flex: 1, px: 2, sx: {
|
|
210
|
+
position: 'absolute',
|
|
211
|
+
top: 0,
|
|
212
|
+
left: `calc(50% + 7px + ${x}px)`,
|
|
213
|
+
bottom: 0,
|
|
214
|
+
right: 0,
|
|
215
|
+
display: 'flex',
|
|
216
|
+
alignItems: 'stretch',
|
|
217
|
+
justifyContent: 'stretch',
|
|
218
|
+
px: 1,
|
|
219
|
+
pt: 1,
|
|
220
|
+
mt: -1,
|
|
221
|
+
'& > *': { width: '100%' },
|
|
222
|
+
'& > div > :first-child': { mt: 0 },
|
|
223
|
+
backgroundColor: activeTheme.palette.background.default,
|
|
224
|
+
color: activeTheme.palette.text.primary
|
|
225
|
+
}, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) }) })] }))] })] }));
|
|
217
226
|
};
|
|
218
227
|
export default OverviewViewer;
|
|
@@ -587,6 +587,8 @@
|
|
|
587
587
|
"route.overviews.manager.search": "Search Overviews",
|
|
588
588
|
"route.overviews.manager.delete": "Delete Overview",
|
|
589
589
|
"route.overviews.manager.delete.success": "Overview Removed.",
|
|
590
|
+
"route.overviews.theme.light": "Preview in Light Mode",
|
|
591
|
+
"route.overviews.theme.dark": "Preview in Dark Mode",
|
|
590
592
|
"route.dossiers": "Dossiers",
|
|
591
593
|
"route.dossiers.default": "Default",
|
|
592
594
|
"route.dossiers.search.prompt": "Search by title, query, or owner.",
|
|
@@ -585,7 +585,8 @@
|
|
|
585
585
|
"route.overviews.manager.search": "Rechercher les vues d'ensemble",
|
|
586
586
|
"route.overviews.manager.delete": "Supprimer la vue d'ensemble",
|
|
587
587
|
"route.overviews.manager.delete.success": "Vue d'ensemble Supprimée.",
|
|
588
|
-
"route.overviews.
|
|
588
|
+
"route.overviews.theme.light": "Prévoyez en mode clair",
|
|
589
|
+
"route.overviews.theme.dark": "Prévoyez en mode sombre",
|
|
589
590
|
"route.dossiers": "Dossiers",
|
|
590
591
|
"route.dossiers.default": "Défaut",
|
|
591
592
|
"route.dossiers.search.prompt": "Recherche par titre, requête ou propriétaire.",
|