@gridsuite/commons-ui 0.59.2 → 0.60.0
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/dist/chunks/{criteria-based-filter-edition-dialog.CszM47bS.js → criteria-based-filter-edition-dialog.g-QT74FD.js} +47 -16
- package/dist/components/ElementSearchDialog/element-search-dialog.d.ts +4 -15
- package/dist/components/ElementSearchDialog/element-search-dialog.js +10 -80
- package/dist/components/ElementSearchDialog/element-search-input.d.ts +21 -0
- package/dist/components/ElementSearchDialog/element-search-input.js +85 -0
- package/dist/components/ElementSearchDialog/equipment-item.d.ts +8 -8
- package/dist/components/ElementSearchDialog/equipment-item.js +1 -1
- package/dist/components/ElementSearchDialog/index.d.ts +2 -0
- package/dist/components/ElementSearchDialog/index.js +6 -2
- package/dist/components/ElementSearchDialog/tag-renderer.d.ts +3 -3
- package/dist/components/ElementSearchDialog/use-element-search.d.ts +16 -0
- package/dist/components/ElementSearchDialog/use-element-search.js +57 -0
- package/dist/components/MuiVirtualizedTable/MuiVirtualizedTable.d.ts +1 -1
- package/dist/components/OverflowableText/overflowable-text.d.ts +3 -3
- package/dist/components/OverflowableText/overflowable-text.js +1 -2
- package/dist/components/dialogs/modify-element-selection.js +1 -1
- package/dist/components/filter/criteria-based/criteria-based-filter-edition-dialog.js +1 -1
- package/dist/components/filter/expert/expert-filter-constants.d.ts +129 -2
- package/dist/components/filter/expert/expert-filter-constants.js +165 -4
- package/dist/components/filter/expert/expert-filter-edition-dialog.js +1 -1
- package/dist/components/filter/expert/expert-filter-form.js +1 -1
- package/dist/components/filter/expert/expert-filter-utils.d.ts +3 -7
- package/dist/components/filter/expert/expert-filter-utils.js +127 -26
- package/dist/components/filter/expert/expert-filter.type.d.ts +42 -7
- package/dist/components/filter/expert/expert-filter.type.js +16 -0
- package/dist/components/filter/explicit-naming/explicit-naming-filter-edition-dialog.js +1 -1
- package/dist/components/filter/explicit-naming/explicit-naming-filter-form.js +1 -1
- package/dist/components/filter/filter-creation-dialog.js +1 -1
- package/dist/components/filter/filter-form.js +1 -1
- package/dist/components/filter/utils/filter-form-utils.js +1 -1
- package/dist/components/inputs/react-hook-form/ag-grid-table/bottom-right-buttons.js +1 -1
- package/dist/components/inputs/react-hook-form/ag-grid-table/csv-uploader/csv-uploader.js +2 -1
- package/dist/components/inputs/react-hook-form/ag-grid-table/custom-ag-grid-table.js +1 -1
- package/dist/components/inputs/react-hook-form/directory-items-input.js +1 -1
- package/dist/components/inputs/react-query-builder/composite-rule-editor/group-value-editor.d.ts +5 -0
- package/dist/components/inputs/react-query-builder/composite-rule-editor/group-value-editor.js +62 -0
- package/dist/components/inputs/react-query-builder/composite-rule-editor/rule-value-editor.d.ts +9 -0
- package/dist/components/inputs/react-query-builder/composite-rule-editor/rule-value-editor.js +65 -0
- package/dist/components/inputs/react-query-builder/custom-react-query-builder.js +1 -1
- package/dist/components/inputs/react-query-builder/element-value-editor.js +2 -1
- package/dist/components/inputs/react-query-builder/remove-button.js +1 -1
- package/dist/components/inputs/react-query-builder/value-editor.js +3 -1
- package/dist/components/translations/filter-expert-en.d.ts +23 -0
- package/dist/components/translations/filter-expert-en.js +24 -1
- package/dist/components/translations/filter-expert-fr.d.ts +23 -0
- package/dist/components/translations/filter-expert-fr.js +25 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +131 -127
- package/dist/utils/styles.d.ts +2 -2
- package/package.json +1 -1
|
@@ -56,8 +56,8 @@ import "../components/CustomAGGrid/custom-aggrid.js";
|
|
|
56
56
|
import { saveExplicitNamingFilter, saveCriteriaBasedFilter, saveExpertFilter } from "../components/filter/utils/filter-api.js";
|
|
57
57
|
import { formatQuery, QueryBuilder } from "react-querybuilder";
|
|
58
58
|
import { getNumberOfSiblings, recursiveRemove, countRules, getOperators, queryValidator, testQuery, importExpertRules } from "../components/filter/expert/expert-filter-utils.js";
|
|
59
|
-
import { COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS,
|
|
60
|
-
import { FieldType,
|
|
59
|
+
import { OPERATOR_OPTIONS, COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, fields } from "../components/filter/expert/expert-filter-constants.js";
|
|
60
|
+
import { FieldType, DataType } from "../components/filter/expert/expert-filter.type.js";
|
|
61
61
|
import { QueryBuilderDnD } from "@react-querybuilder/dnd";
|
|
62
62
|
import * as ReactDnD from "react-dnd";
|
|
63
63
|
import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
|
|
@@ -81,12 +81,14 @@ import "../components/inputs/react-hook-form/select-inputs/mui-select-input.js";
|
|
|
81
81
|
import "localized-countries";
|
|
82
82
|
import "localized-countries/data/fr";
|
|
83
83
|
import "localized-countries/data/en";
|
|
84
|
+
import { RECORD_SEP, UNIT_SEP } from "papaparse";
|
|
84
85
|
import "@mui/icons-material/Check";
|
|
85
86
|
import "@mui/material/CircularProgress";
|
|
86
87
|
import "@mui/material/TextField";
|
|
87
88
|
import { FILTER_EQUIPMENTS } from "../components/filter/utils/filter-form-utils.js";
|
|
88
89
|
import { ElementType } from "../utils/ElementType.js";
|
|
89
90
|
import PropertyValueEditor from "../components/inputs/react-query-builder/property-value-editor.js";
|
|
91
|
+
import GroupValueEditor from "../components/inputs/react-query-builder/composite-rule-editor/group-value-editor.js";
|
|
90
92
|
import ValueSelector from "../components/inputs/react-query-builder/value-selector.js";
|
|
91
93
|
import ErrorInput from "../components/inputs/react-hook-form/error-management/error-input.js";
|
|
92
94
|
import FieldErrorAlert from "../components/inputs/react-hook-form/error-management/field-error-alert.js";
|
|
@@ -248,6 +250,16 @@ const CsvUploader = ({
|
|
|
248
250
|
setImportedData([...results.data]);
|
|
249
251
|
setCreateError("");
|
|
250
252
|
},
|
|
253
|
+
config: {
|
|
254
|
+
// We use | for multi values in one cell, then we remove it from the default value for this config, to avoid delimiter autodetection
|
|
255
|
+
delimitersToGuess: [
|
|
256
|
+
",",
|
|
257
|
+
" ",
|
|
258
|
+
";",
|
|
259
|
+
RECORD_SEP,
|
|
260
|
+
UNIT_SEP
|
|
261
|
+
]
|
|
262
|
+
},
|
|
251
263
|
children: ({ getRootProps, acceptedFile }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { item: true, children: [
|
|
252
264
|
/* @__PURE__ */ jsx(
|
|
253
265
|
Button,
|
|
@@ -469,6 +481,7 @@ const CustomAgGridTable = ({
|
|
|
469
481
|
const [gridApi, setGridApi] = useState(null);
|
|
470
482
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
471
483
|
const [newRowAdded, setNewRowAdded] = useState(false);
|
|
484
|
+
const [isSortApplied, setIsSortApplied] = useState(false);
|
|
472
485
|
const { control, getValues, watch } = useFormContext();
|
|
473
486
|
const useFieldArrayOutput = useFieldArray({
|
|
474
487
|
control,
|
|
@@ -516,11 +529,14 @@ const CustomAgGridTable = ({
|
|
|
516
529
|
append(makeDefaultRowData2());
|
|
517
530
|
setNewRowAdded(true);
|
|
518
531
|
};
|
|
519
|
-
const getIndex = (
|
|
520
|
-
|
|
521
|
-
(
|
|
522
|
-
|
|
523
|
-
|
|
532
|
+
const getIndex = useCallback(
|
|
533
|
+
(val) => {
|
|
534
|
+
return getValues(name).findIndex(
|
|
535
|
+
(row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
|
|
536
|
+
);
|
|
537
|
+
},
|
|
538
|
+
[getValues, name]
|
|
539
|
+
);
|
|
524
540
|
useEffect(() => {
|
|
525
541
|
if (gridApi) {
|
|
526
542
|
gridApi.api.sizeColumnsToFit();
|
|
@@ -545,6 +561,20 @@ const CustomAgGridTable = ({
|
|
|
545
561
|
gridApi.api.ensureIndexVisible(lastIndex, "bottom");
|
|
546
562
|
}
|
|
547
563
|
};
|
|
564
|
+
const onCellEditingStopped = useCallback(
|
|
565
|
+
(event) => {
|
|
566
|
+
const rowIndex = getIndex(event.data);
|
|
567
|
+
if (rowIndex === -1) {
|
|
568
|
+
return;
|
|
569
|
+
}
|
|
570
|
+
update(rowIndex, event.data);
|
|
571
|
+
},
|
|
572
|
+
[getIndex, update]
|
|
573
|
+
);
|
|
574
|
+
const onSortChanged = useCallback((event) => {
|
|
575
|
+
const isAnycolumnhasSort = event.api.getColumnState().some((col) => col.sort);
|
|
576
|
+
setIsSortApplied(isAnycolumnhasSort);
|
|
577
|
+
}, []);
|
|
548
578
|
return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
|
|
549
579
|
/* @__PURE__ */ jsx(
|
|
550
580
|
Grid$1,
|
|
@@ -572,9 +602,8 @@ const CustomAgGridTable = ({
|
|
|
572
602
|
setSelectedRows(gridApi.api.getSelectedRows());
|
|
573
603
|
},
|
|
574
604
|
onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
|
|
575
|
-
onCellEditingStopped
|
|
576
|
-
|
|
577
|
-
},
|
|
605
|
+
onCellEditingStopped,
|
|
606
|
+
onSortChanged,
|
|
578
607
|
getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
|
|
579
608
|
pagination,
|
|
580
609
|
paginationPageSize,
|
|
@@ -594,8 +623,8 @@ const CustomAgGridTable = ({
|
|
|
594
623
|
handleDeleteRows,
|
|
595
624
|
handleMoveRowDown,
|
|
596
625
|
handleMoveRowUp,
|
|
597
|
-
disableUp: noRowSelected || isFirstSelected,
|
|
598
|
-
disableDown: noRowSelected || isLastSelected,
|
|
626
|
+
disableUp: noRowSelected || isFirstSelected || isSortApplied,
|
|
627
|
+
disableDown: noRowSelected || isLastSelected || isSortApplied,
|
|
599
628
|
disableDelete: noRowSelected,
|
|
600
629
|
csvProps,
|
|
601
630
|
useFieldArrayOutput
|
|
@@ -890,7 +919,7 @@ const ValueEditor = (props) => {
|
|
|
890
919
|
},
|
|
891
920
|
[props.field, getValues]
|
|
892
921
|
);
|
|
893
|
-
if (props.operator ===
|
|
922
|
+
if (props.operator === OPERATOR_OPTIONS.EXISTS.name || props.operator === OPERATOR_OPTIONS.NOT_EXISTS.name) {
|
|
894
923
|
return null;
|
|
895
924
|
}
|
|
896
925
|
if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(
|
|
@@ -898,10 +927,10 @@ const ValueEditor = (props) => {
|
|
|
898
927
|
)) {
|
|
899
928
|
return /* @__PURE__ */ jsx(CountryValueEditor, { ...props });
|
|
900
929
|
}
|
|
901
|
-
if (props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
|
|
930
|
+
if (props.field === FieldType.REGULATION_TYPE || props.field === FieldType.SVAR_REGULATION_MODE || props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
|
|
902
931
|
return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
|
|
903
932
|
}
|
|
904
|
-
if (props.operator ===
|
|
933
|
+
if (props.operator === OPERATOR_OPTIONS.IS_PART_OF.name || props.operator === OPERATOR_OPTIONS.IS_NOT_PART_OF.name) {
|
|
905
934
|
let equipmentTypes;
|
|
906
935
|
if (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
|
|
907
936
|
equipmentTypes = [VoltageLevel.type];
|
|
@@ -923,7 +952,7 @@ const ValueEditor = (props) => {
|
|
|
923
952
|
defaultValue: props.value
|
|
924
953
|
}
|
|
925
954
|
);
|
|
926
|
-
} else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
|
|
955
|
+
} else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.REGULATING_TERMINAL_VL_ID || props.field === FieldType.REGULATING_TERMINAL_CONNECTABLE_ID || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
|
|
927
956
|
return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
|
|
928
957
|
} else if (props.field === FieldType.PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_1 || props.field === FieldType.VOLTAGE_LEVEL_PROPERTY_2) {
|
|
929
958
|
let equipmentType;
|
|
@@ -941,6 +970,8 @@ const ValueEditor = (props) => {
|
|
|
941
970
|
valueEditorProps: props
|
|
942
971
|
}
|
|
943
972
|
);
|
|
973
|
+
} else if (props.fieldData.dataType === DataType.COMBINATOR) {
|
|
974
|
+
return /* @__PURE__ */ jsx(GroupValueEditor, { ...props });
|
|
944
975
|
}
|
|
945
976
|
return /* @__PURE__ */ jsx(Box, { sx: props.inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(
|
|
946
977
|
MaterialValueEditor,
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ElementSearchInputProps } from './element-search-input';
|
|
3
2
|
|
|
4
|
-
interface ElementSearchDialogProps {
|
|
3
|
+
export interface ElementSearchDialogProps<T> extends ElementSearchInputProps<T> {
|
|
4
|
+
onClose?: () => void;
|
|
5
5
|
open: boolean;
|
|
6
|
-
onClose: () => void;
|
|
7
|
-
searchingLabel?: string;
|
|
8
|
-
searchTerm: string;
|
|
9
|
-
onSearchTermChange: (searchTerm: string) => void;
|
|
10
|
-
onSelectionChange: (selection: EquipmentInfos) => void;
|
|
11
|
-
elementsFound: EquipmentInfos[];
|
|
12
|
-
renderElement: (props: any) => ReactNode;
|
|
13
|
-
searchTermDisabled?: boolean;
|
|
14
|
-
searchTermDisableReason?: string;
|
|
15
|
-
isLoading: boolean;
|
|
16
|
-
loadingText?: string;
|
|
17
6
|
}
|
|
18
|
-
declare const ElementSearchDialog: (props: ElementSearchDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const ElementSearchDialog: <T>(props: ElementSearchDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
19
8
|
export default ElementSearchDialog;
|
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import {
|
|
3
|
-
import { Dialog, DialogContent
|
|
4
|
-
import {
|
|
5
|
-
import { useIntl } from "react-intl";
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { Dialog, DialogContent } from "@mui/material";
|
|
4
|
+
import { ElementSearchInput } from "./element-search-input.js";
|
|
6
5
|
const ElementSearchDialog = (props) => {
|
|
7
|
-
const
|
|
8
|
-
const {
|
|
9
|
-
open,
|
|
10
|
-
onClose,
|
|
11
|
-
searchingLabel,
|
|
12
|
-
searchTerm,
|
|
13
|
-
onSearchTermChange,
|
|
14
|
-
onSelectionChange,
|
|
15
|
-
elementsFound,
|
|
16
|
-
renderElement,
|
|
17
|
-
searchTermDisabled,
|
|
18
|
-
searchTermDisableReason,
|
|
19
|
-
isLoading,
|
|
20
|
-
loadingText
|
|
21
|
-
} = props;
|
|
22
|
-
const displayedValue = useMemo(() => {
|
|
23
|
-
return searchTermDisabled || searchTermDisableReason ? searchTermDisableReason : searchTerm;
|
|
24
|
-
}, [searchTerm, searchTermDisabled, searchTermDisableReason]);
|
|
6
|
+
const { open, onClose, onSearchTermChange, ...rest } = props;
|
|
25
7
|
const handleClose = useCallback(() => {
|
|
26
8
|
onSearchTermChange("");
|
|
27
|
-
onClose();
|
|
9
|
+
onClose == null ? void 0 : onClose();
|
|
28
10
|
}, [onSearchTermChange, onClose]);
|
|
29
11
|
return /* @__PURE__ */ jsx(
|
|
30
12
|
Dialog,
|
|
@@ -35,68 +17,16 @@ const ElementSearchDialog = (props) => {
|
|
|
35
17
|
"aria-labelledby": "dialog-title-search",
|
|
36
18
|
fullWidth: true,
|
|
37
19
|
children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
|
|
38
|
-
|
|
20
|
+
ElementSearchInput,
|
|
39
21
|
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
forcePopupIcon: false,
|
|
43
|
-
fullWidth: true,
|
|
44
|
-
freeSolo: true,
|
|
45
|
-
onInputChange: (_event, value, reason) => {
|
|
46
|
-
if (!searchTermDisabled && reason !== "reset") {
|
|
47
|
-
onSearchTermChange(value);
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
onChange: (_event, newValue, reason) => {
|
|
51
|
-
if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
|
|
52
|
-
onSelectionChange(newValue);
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
getOptionLabel: (option) => typeof option === "string" ? option : option.label,
|
|
56
|
-
isOptionEqualToValue: (option, value) => {
|
|
57
|
-
if (typeof option === "string" || typeof value === "string") {
|
|
58
|
-
return option === value;
|
|
59
|
-
} else {
|
|
60
|
-
return option.id === value.id;
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
options: isLoading ? [] : elementsFound,
|
|
64
|
-
loading: isLoading,
|
|
65
|
-
loadingText,
|
|
66
|
-
autoHighlight: true,
|
|
67
|
-
noOptionsText: intl.formatMessage({
|
|
68
|
-
id: "element_search/noResult"
|
|
69
|
-
}),
|
|
70
|
-
renderOption: (optionProps, element, { inputValue }) => renderElement({
|
|
71
|
-
...optionProps,
|
|
72
|
-
element,
|
|
73
|
-
inputValue,
|
|
74
|
-
onClose: handleClose
|
|
75
|
-
}),
|
|
76
|
-
renderInput: (params) => /* @__PURE__ */ jsx(
|
|
77
|
-
TextField,
|
|
78
|
-
{
|
|
79
|
-
autoFocus: true,
|
|
80
|
-
...params,
|
|
81
|
-
label: searchingLabel ?? intl.formatMessage({
|
|
82
|
-
id: "element_search/label"
|
|
83
|
-
}),
|
|
84
|
-
InputProps: {
|
|
85
|
-
...params.InputProps,
|
|
86
|
-
startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
87
|
-
searchTermDisabled ? /* @__PURE__ */ jsx(SearchOff, { color: "disabled" }) : /* @__PURE__ */ jsx(Search, { color: "disabled" }),
|
|
88
|
-
params.InputProps.startAdornment
|
|
89
|
-
] })
|
|
90
|
-
},
|
|
91
|
-
value: displayedValue ?? ""
|
|
92
|
-
}
|
|
93
|
-
),
|
|
94
|
-
disabled: searchTermDisabled
|
|
22
|
+
onSearchTermChange,
|
|
23
|
+
...rest
|
|
95
24
|
}
|
|
96
25
|
) })
|
|
97
26
|
}
|
|
98
27
|
);
|
|
99
28
|
};
|
|
100
29
|
export {
|
|
30
|
+
ElementSearchDialog,
|
|
101
31
|
ElementSearchDialog as default
|
|
102
32
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
|
|
3
|
+
|
|
4
|
+
export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
|
|
5
|
+
element: T;
|
|
6
|
+
inputValue: string;
|
|
7
|
+
};
|
|
8
|
+
export interface ElementSearchInputProps<T> extends Pick<AutocompleteProps<T, false, false, true>, 'sx' | 'size' | 'loadingText' | 'loading'> {
|
|
9
|
+
searchTerm: string;
|
|
10
|
+
onSearchTermChange: (searchTerm: string) => void;
|
|
11
|
+
onSelectionChange: (selection: T) => void;
|
|
12
|
+
getOptionLabel: (option: T) => string;
|
|
13
|
+
isOptionEqualToValue: (option1: T, option2: T) => boolean;
|
|
14
|
+
elementsFound: T[];
|
|
15
|
+
renderElement: (props: RenderElementProps<T>) => ReactNode;
|
|
16
|
+
renderInput: (searchTerm: string, props: AutocompleteRenderInputParams) => ReactNode;
|
|
17
|
+
searchTermDisabled?: boolean;
|
|
18
|
+
searchTermDisableReason?: string;
|
|
19
|
+
showResults?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const ElementSearchInput: <T>(props: ElementSearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Autocomplete } from "@mui/material";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { useIntl } from "react-intl";
|
|
5
|
+
const ElementSearchInput = (props) => {
|
|
6
|
+
const {
|
|
7
|
+
elementsFound,
|
|
8
|
+
loading,
|
|
9
|
+
onSearchTermChange,
|
|
10
|
+
onSelectionChange,
|
|
11
|
+
renderElement,
|
|
12
|
+
renderInput,
|
|
13
|
+
getOptionLabel,
|
|
14
|
+
isOptionEqualToValue,
|
|
15
|
+
showResults,
|
|
16
|
+
searchTerm,
|
|
17
|
+
loadingText,
|
|
18
|
+
searchTermDisableReason,
|
|
19
|
+
searchTermDisabled,
|
|
20
|
+
size,
|
|
21
|
+
sx
|
|
22
|
+
} = props;
|
|
23
|
+
const intl = useIntl();
|
|
24
|
+
const displayedValue = useMemo(() => {
|
|
25
|
+
if (searchTermDisabled || searchTermDisableReason) {
|
|
26
|
+
return searchTermDisableReason ?? intl.formatMessage({
|
|
27
|
+
id: "element_search/searchDisabled"
|
|
28
|
+
});
|
|
29
|
+
} else {
|
|
30
|
+
return searchTerm ?? "";
|
|
31
|
+
}
|
|
32
|
+
}, [searchTerm, searchTermDisabled, searchTermDisableReason, intl]);
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
Autocomplete,
|
|
35
|
+
{
|
|
36
|
+
sx,
|
|
37
|
+
open: showResults,
|
|
38
|
+
freeSolo: true,
|
|
39
|
+
size,
|
|
40
|
+
id: "element-search",
|
|
41
|
+
forcePopupIcon: false,
|
|
42
|
+
fullWidth: true,
|
|
43
|
+
onInputChange: (_event, value, reason) => {
|
|
44
|
+
if (!searchTermDisabled && reason !== "reset") {
|
|
45
|
+
onSearchTermChange(value);
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
onChange: (_event, newValue, reason) => {
|
|
49
|
+
if (newValue != null && typeof newValue !== "string" && reason === "selectOption") {
|
|
50
|
+
onSelectionChange(newValue);
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
options: loading ? [] : elementsFound,
|
|
54
|
+
loading,
|
|
55
|
+
loadingText,
|
|
56
|
+
autoHighlight: true,
|
|
57
|
+
noOptionsText: intl.formatMessage({
|
|
58
|
+
id: "element_search/noResult"
|
|
59
|
+
}),
|
|
60
|
+
renderOption: (optionProps, element, { inputValue }) => renderElement({
|
|
61
|
+
...optionProps,
|
|
62
|
+
element,
|
|
63
|
+
inputValue
|
|
64
|
+
}),
|
|
65
|
+
renderInput: (params) => renderInput(displayedValue, params),
|
|
66
|
+
getOptionLabel: (option) => {
|
|
67
|
+
if (typeof option === "string") {
|
|
68
|
+
return option;
|
|
69
|
+
}
|
|
70
|
+
return getOptionLabel(option);
|
|
71
|
+
},
|
|
72
|
+
isOptionEqualToValue: (option, value) => {
|
|
73
|
+
if (typeof option !== "string" && typeof value !== "string") {
|
|
74
|
+
return isOptionEqualToValue(option, value);
|
|
75
|
+
} else {
|
|
76
|
+
return option === value;
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
disabled: searchTermDisabled
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
export {
|
|
84
|
+
ElementSearchInput
|
|
85
|
+
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { SxProps } from '@mui/material';
|
|
1
|
+
import { SxProps, Theme } from '@mui/material';
|
|
2
2
|
import { EquipmentInfos } from '../../utils/EquipmentType';
|
|
3
3
|
import { TagRenderer } from './index';
|
|
4
4
|
|
|
5
5
|
export interface EquipmentItemProps {
|
|
6
6
|
inputValue: string;
|
|
7
|
-
suffixRenderer
|
|
7
|
+
suffixRenderer?: typeof TagRenderer;
|
|
8
8
|
element: EquipmentInfos;
|
|
9
|
-
showsJustText
|
|
9
|
+
showsJustText?: boolean;
|
|
10
10
|
classes?: {
|
|
11
11
|
result?: string;
|
|
12
12
|
equipmentOption?: string;
|
|
@@ -15,11 +15,11 @@ export interface EquipmentItemProps {
|
|
|
15
15
|
equipmentVlTag?: string;
|
|
16
16
|
};
|
|
17
17
|
styles?: {
|
|
18
|
-
result?: SxProps
|
|
19
|
-
equipmentOption?: SxProps
|
|
20
|
-
equipmentTag?: SxProps
|
|
21
|
-
equipmentTypeTag?: SxProps
|
|
22
|
-
equipmentVlTag?: SxProps
|
|
18
|
+
result?: SxProps<Theme>;
|
|
19
|
+
equipmentOption?: SxProps<Theme>;
|
|
20
|
+
equipmentTag?: SxProps<Theme>;
|
|
21
|
+
equipmentTypeTag?: SxProps<Theme>;
|
|
22
|
+
equipmentVlTag?: SxProps<Theme>;
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
export declare const EquipmentItem: ({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { Box } from "@mui/material";
|
|
4
|
-
import "@mui/icons-material";
|
|
5
4
|
import { FormattedMessage } from "react-intl";
|
|
6
5
|
import { TagRenderer } from "./tag-renderer.js";
|
|
6
|
+
import "notistack";
|
|
7
7
|
import match from "autosuggest-highlight/match";
|
|
8
8
|
import parse from "autosuggest-highlight/parse";
|
|
9
9
|
import clsx from "clsx";
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElementSearchDialog } from "./element-search-dialog.js";
|
|
2
2
|
import { TagRenderer } from "./tag-renderer.js";
|
|
3
|
+
import { ElementSearchInput } from "./element-search-input.js";
|
|
4
|
+
import { useElementSearch } from "./use-element-search.js";
|
|
3
5
|
export {
|
|
6
|
+
ElementSearchInput,
|
|
4
7
|
TagRenderer,
|
|
5
|
-
|
|
8
|
+
ElementSearchDialog as default,
|
|
9
|
+
useElementSearch
|
|
6
10
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { SxProps } from '@mui/material';
|
|
1
|
+
import { SxProps, Theme } from '@mui/material';
|
|
2
2
|
import { EquipmentType } from '../../utils/EquipmentType';
|
|
3
3
|
|
|
4
4
|
interface TagRendererProps {
|
|
@@ -8,8 +8,8 @@ interface TagRendererProps {
|
|
|
8
8
|
equipmentVlTag?: string;
|
|
9
9
|
};
|
|
10
10
|
styles?: {
|
|
11
|
-
equipmentTag?: SxProps
|
|
12
|
-
equipmentVlTag?: SxProps
|
|
11
|
+
equipmentTag?: SxProps<Theme>;
|
|
12
|
+
equipmentVlTag?: SxProps<Theme>;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
element: {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2022, RTE (http://www.rte-france.com)
|
|
3
|
+
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
4
|
+
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
5
|
+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
6
|
+
*/
|
|
7
|
+
interface UseElementSearch<T> {
|
|
8
|
+
fetchElements: (newSearchTerm: string) => Promise<T[]>;
|
|
9
|
+
}
|
|
10
|
+
export declare const useElementSearch: <T>(props: UseElementSearch<T>) => {
|
|
11
|
+
searchTerm: string;
|
|
12
|
+
updateSearchTerm: (newSearchTerm: string) => void;
|
|
13
|
+
elementsFound: T[];
|
|
14
|
+
isLoading: boolean;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useState, useRef, useCallback } from "react";
|
|
2
|
+
import { useDebounce } from "../../hooks/useDebounce.js";
|
|
3
|
+
import { useSnackMessage } from "../../hooks/useSnackMessage.js";
|
|
4
|
+
const SEARCH_FETCH_TIMEOUT_MILLIS = 1e3;
|
|
5
|
+
const useElementSearch = (props) => {
|
|
6
|
+
const { fetchElements } = props;
|
|
7
|
+
const { snackError } = useSnackMessage();
|
|
8
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
9
|
+
const [searchTerm, setSearchTerm] = useState("");
|
|
10
|
+
const [elementsFound, setElementsFound] = useState([]);
|
|
11
|
+
const lastSearchTermRef = useRef("");
|
|
12
|
+
const searchMatchingElements = useCallback(
|
|
13
|
+
(newSearchTerm) => {
|
|
14
|
+
if (newSearchTerm.length === 0) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
lastSearchTermRef.current = newSearchTerm;
|
|
18
|
+
fetchElements(newSearchTerm).then((infos) => {
|
|
19
|
+
if (newSearchTerm === lastSearchTermRef.current) {
|
|
20
|
+
setElementsFound(infos);
|
|
21
|
+
setIsLoading(false);
|
|
22
|
+
}
|
|
23
|
+
}).catch((error) => {
|
|
24
|
+
if (newSearchTerm === lastSearchTermRef.current) {
|
|
25
|
+
setElementsFound([]);
|
|
26
|
+
setIsLoading(false);
|
|
27
|
+
snackError({
|
|
28
|
+
messageTxt: error.message,
|
|
29
|
+
headerId: "equipmentsSearchingError"
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
[snackError, fetchElements]
|
|
35
|
+
);
|
|
36
|
+
const debouncedSearchMatchingElements = useDebounce(
|
|
37
|
+
searchMatchingElements,
|
|
38
|
+
SEARCH_FETCH_TIMEOUT_MILLIS
|
|
39
|
+
);
|
|
40
|
+
const updateSearchTerm = useCallback(
|
|
41
|
+
(newSearchTerm) => {
|
|
42
|
+
setSearchTerm(newSearchTerm);
|
|
43
|
+
if (newSearchTerm.length === 0) {
|
|
44
|
+
setElementsFound([]);
|
|
45
|
+
setIsLoading(false);
|
|
46
|
+
} else {
|
|
47
|
+
setIsLoading(true);
|
|
48
|
+
}
|
|
49
|
+
debouncedSearchMatchingElements(newSearchTerm);
|
|
50
|
+
},
|
|
51
|
+
[debouncedSearchMatchingElements]
|
|
52
|
+
);
|
|
53
|
+
return { searchTerm, updateSearchTerm, elementsFound, isLoading };
|
|
54
|
+
};
|
|
55
|
+
export {
|
|
56
|
+
useElementSearch
|
|
57
|
+
};
|
|
@@ -100,7 +100,7 @@ declare class MuiVirtualizedTable extends PureComponent<MuiVirtualizedTableProps
|
|
|
100
100
|
}[]>;
|
|
101
101
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
102
102
|
}
|
|
103
|
-
declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "
|
|
103
|
+
declare const _default: import('@emotion/styled').StyledComponent<Pick<MuiVirtualizedTableProps, "filter" | "flexGrow" | "flexShrink" | "maxWidth" | "minWidth" | "width" | "columns" | "style" | "className" | "label" | "id" | "aria-label" | "name" | "rows" | "sort" | "numeric" | "tooltipSx" | "defersFilterChanges" | "onRowClick" | "onCellClick" | "exportCSVDataKeys" | "sortable" | "indexer" | "clickable" | "fractionDigits" | "unit" | "extra" | "nostat" | "cellDataGetter" | "cellRenderer" | "columnData" | "dataKey" | "defaultSortDirection" | "disableSort" | "headerClassName" | "headerRenderer" | "headerStyle"> & {
|
|
104
104
|
classes?: Record<string, string> | undefined;
|
|
105
105
|
headerHeight?: number | undefined;
|
|
106
106
|
rowHeight?: number | undefined;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Style } from 'node:util';
|
|
2
|
-
import { BoxProps, SxProps } from '@mui/material';
|
|
2
|
+
import { BoxProps, SxProps, Theme } from '@mui/material';
|
|
3
3
|
import { ReactElement } from 'react';
|
|
4
4
|
|
|
5
5
|
export interface OverflowableTextProps extends BoxProps {
|
|
6
6
|
text?: ReactElement | string;
|
|
7
7
|
maxLineCount?: number;
|
|
8
8
|
tooltipStyle?: Style;
|
|
9
|
-
tooltipSx?: SxProps
|
|
9
|
+
tooltipSx?: SxProps<Theme>;
|
|
10
10
|
}
|
|
11
|
-
export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<
|
|
11
|
+
export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
|
|
12
12
|
export default OverflowableText;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
|
|
3
|
-
import { Tooltip, Box } from "@mui/material";
|
|
4
|
-
import { styled } from "@mui/system";
|
|
3
|
+
import { styled, Tooltip, Box } from "@mui/material";
|
|
5
4
|
const overflowStyle = {
|
|
6
5
|
overflow: {
|
|
7
6
|
display: "inline-block",
|
|
@@ -20,7 +20,7 @@ const ModifyElementSelection = (props) => {
|
|
|
20
20
|
if (directory) {
|
|
21
21
|
fetchDirectoryElementPath(directory).then((res) => {
|
|
22
22
|
setActiveDirectoryName(
|
|
23
|
-
res.map((element) => element.elementName.trim()).
|
|
23
|
+
res.map((element) => element.elementName.trim()).join("/")
|
|
24
24
|
);
|
|
25
25
|
});
|
|
26
26
|
}
|
|
@@ -8,7 +8,7 @@ import "react-hook-form";
|
|
|
8
8
|
import "@hookform/resolvers/yup";
|
|
9
9
|
import "./criteria-based-filter-form.js";
|
|
10
10
|
import "../../../utils/yup-config.js";
|
|
11
|
-
import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.
|
|
11
|
+
import { b, p } from "../../../chunks/criteria-based-filter-edition-dialog.g-QT74FD.js";
|
|
12
12
|
import "../constants/filter-constants.js";
|
|
13
13
|
import "../../../utils/FetchStatus.js";
|
|
14
14
|
import "../../../services/explore.js";
|