@gridsuite/commons-ui 0.59.1 → 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.DcXcQOoT.js → criteria-based-filter-edition-dialog.g-QT74FD.js} +57 -22
- 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-hook-form/error-management/error-input.js +10 -8
- 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/dist/utils/types.d.ts +3 -0
- 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,
|
|
@@ -476,10 +489,14 @@ const CustomAgGridTable = ({
|
|
|
476
489
|
});
|
|
477
490
|
const { append, remove, update, swap, move } = useFieldArrayOutput;
|
|
478
491
|
const rowData = watch(name);
|
|
479
|
-
const isFirstSelected = (
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
492
|
+
const isFirstSelected = Boolean(
|
|
493
|
+
(rowData == null ? void 0 : rowData.length) && ((_a = gridApi == null ? void 0 : gridApi.api.getRowNode(rowData[0][FieldConstants.AG_GRID_ROW_UUID])) == null ? void 0 : _a.isSelected())
|
|
494
|
+
);
|
|
495
|
+
const isLastSelected = Boolean(
|
|
496
|
+
(rowData == null ? void 0 : rowData.length) && ((_b = gridApi == null ? void 0 : gridApi.api.getRowNode(
|
|
497
|
+
rowData[rowData.length - 1][FieldConstants.AG_GRID_ROW_UUID]
|
|
498
|
+
)) == null ? void 0 : _b.isSelected())
|
|
499
|
+
);
|
|
483
500
|
const noRowSelected = selectedRows.length === 0;
|
|
484
501
|
const handleMoveRowUp = () => {
|
|
485
502
|
selectedRows.map((row) => getIndex(row)).sort().forEach((idx) => {
|
|
@@ -512,11 +529,14 @@ const CustomAgGridTable = ({
|
|
|
512
529
|
append(makeDefaultRowData2());
|
|
513
530
|
setNewRowAdded(true);
|
|
514
531
|
};
|
|
515
|
-
const getIndex = (
|
|
516
|
-
|
|
517
|
-
(
|
|
518
|
-
|
|
519
|
-
|
|
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
|
+
);
|
|
520
540
|
useEffect(() => {
|
|
521
541
|
if (gridApi) {
|
|
522
542
|
gridApi.api.sizeColumnsToFit();
|
|
@@ -541,18 +561,32 @@ const CustomAgGridTable = ({
|
|
|
541
561
|
gridApi.api.ensureIndexVisible(lastIndex, "bottom");
|
|
542
562
|
}
|
|
543
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
|
+
}, []);
|
|
544
578
|
return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
|
|
545
579
|
/* @__PURE__ */ jsx(
|
|
546
580
|
Grid$1,
|
|
547
581
|
{
|
|
548
582
|
item: true,
|
|
549
583
|
xs: 12,
|
|
550
|
-
className: theme.aggrid,
|
|
584
|
+
className: theme.aggrid.theme,
|
|
551
585
|
sx: style(cssProps).grid,
|
|
552
586
|
children: /* @__PURE__ */ jsx(
|
|
553
587
|
AgGridReact,
|
|
554
588
|
{
|
|
555
|
-
rowData
|
|
589
|
+
rowData,
|
|
556
590
|
onGridReady,
|
|
557
591
|
getLocaleText,
|
|
558
592
|
cacheOverflowSize: 10,
|
|
@@ -568,9 +602,8 @@ const CustomAgGridTable = ({
|
|
|
568
602
|
setSelectedRows(gridApi.api.getSelectedRows());
|
|
569
603
|
},
|
|
570
604
|
onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
|
|
571
|
-
onCellEditingStopped
|
|
572
|
-
|
|
573
|
-
},
|
|
605
|
+
onCellEditingStopped,
|
|
606
|
+
onSortChanged,
|
|
574
607
|
getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
|
|
575
608
|
pagination,
|
|
576
609
|
paginationPageSize,
|
|
@@ -590,8 +623,8 @@ const CustomAgGridTable = ({
|
|
|
590
623
|
handleDeleteRows,
|
|
591
624
|
handleMoveRowDown,
|
|
592
625
|
handleMoveRowUp,
|
|
593
|
-
disableUp: noRowSelected || isFirstSelected,
|
|
594
|
-
disableDown: noRowSelected || isLastSelected,
|
|
626
|
+
disableUp: noRowSelected || isFirstSelected || isSortApplied,
|
|
627
|
+
disableDown: noRowSelected || isLastSelected || isSortApplied,
|
|
595
628
|
disableDelete: noRowSelected,
|
|
596
629
|
csvProps,
|
|
597
630
|
useFieldArrayOutput
|
|
@@ -886,7 +919,7 @@ const ValueEditor = (props) => {
|
|
|
886
919
|
},
|
|
887
920
|
[props.field, getValues]
|
|
888
921
|
);
|
|
889
|
-
if (props.operator ===
|
|
922
|
+
if (props.operator === OPERATOR_OPTIONS.EXISTS.name || props.operator === OPERATOR_OPTIONS.NOT_EXISTS.name) {
|
|
890
923
|
return null;
|
|
891
924
|
}
|
|
892
925
|
if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(
|
|
@@ -894,10 +927,10 @@ const ValueEditor = (props) => {
|
|
|
894
927
|
)) {
|
|
895
928
|
return /* @__PURE__ */ jsx(CountryValueEditor, { ...props });
|
|
896
929
|
}
|
|
897
|
-
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) {
|
|
898
931
|
return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
|
|
899
932
|
}
|
|
900
|
-
if (props.operator ===
|
|
933
|
+
if (props.operator === OPERATOR_OPTIONS.IS_PART_OF.name || props.operator === OPERATOR_OPTIONS.IS_NOT_PART_OF.name) {
|
|
901
934
|
let equipmentTypes;
|
|
902
935
|
if (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
|
|
903
936
|
equipmentTypes = [VoltageLevel.type];
|
|
@@ -919,7 +952,7 @@ const ValueEditor = (props) => {
|
|
|
919
952
|
defaultValue: props.value
|
|
920
953
|
}
|
|
921
954
|
);
|
|
922
|
-
} 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) {
|
|
923
956
|
return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
|
|
924
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) {
|
|
925
958
|
let equipmentType;
|
|
@@ -937,6 +970,8 @@ const ValueEditor = (props) => {
|
|
|
937
970
|
valueEditorProps: props
|
|
938
971
|
}
|
|
939
972
|
);
|
|
973
|
+
} else if (props.fieldData.dataType === DataType.COMBINATOR) {
|
|
974
|
+
return /* @__PURE__ */ jsx(GroupValueEditor, { ...props });
|
|
940
975
|
}
|
|
941
976
|
return /* @__PURE__ */ jsx(Box, { sx: props.inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(
|
|
942
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";
|