Skip to content

Commit 7110f22

Browse files
scalbertmSCALBERT Mathieu
scalbertm
and
SCALBERT Mathieu
authored
Feature/match network to rule (#13)
Co-authored-by: SCALBERT Mathieu <[email protected]>
1 parent 478ec9d commit 7110f22

20 files changed

+378
-77
lines changed

‎src/components/1-atoms/Autocomplete.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const Autocomplete = (props) => {
7676
const [updateFlag, setUpdateFlag] = useState(false);
7777

7878
useEffect(() => {
79+
// Also updates before closing the popup
7980
if (updateFlag && inputValue !== '') {
8081
if (isFree && !isMultiple) {
8182
let valueToSend = inputValue;

‎src/components/1-atoms/Select.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
Select as MuiSelect,
1818
} from '@material-ui/core';
1919

20-
import { useStyles, MenuProps } from './SelectStyles';
20+
import { MenuProps, useStyles } from './SelectStyles';
2121

2222
const Select = (props) => {
2323
const {
@@ -29,6 +29,7 @@ const Select = (props) => {
2929
multiple,
3030
outlined,
3131
error = false,
32+
disabled = false,
3233
} = props;
3334
const classes = useStyles();
3435

@@ -67,6 +68,7 @@ const Select = (props) => {
6768
value={value}
6869
onChange={onChange}
6970
{...multipleProps}
71+
disabled={disabled}
7072
// Either mess with the style (disappearing overflow) or allow scroll while Select is open
7173
MenuProps={{ disableScrollLock: true }}
7274
>
@@ -87,6 +89,7 @@ Select.propTypes = {
8789
helperText: PropTypes.string,
8890
outlined: PropTypes.bool,
8991
error: PropTypes.bool,
92+
disabled: PropTypes.bool,
9093
options: PropTypes.array.isRequired,
9194
value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
9295
setValue: PropTypes.func,

‎src/components/2-molecules/ModelSelect.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const ModelSelect = (props) => {
4646
);
4747

4848
useEffect(() => {
49+
// Update isAbsolute according to the group type for the rule
4950
if (groupType) {
5051
setIsAbsolute(
5152
![SetType.PREFIX, SetType.SUFFIX].includes(groupType)

‎src/components/2-molecules/DotStepper.jsx‎ renamed to ‎src/components/2-molecules/Stepper.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const nextLabel = 'Next';
1616
const backLabel = 'Back';
1717
const cancelLabel = 'Cancel';
1818

19-
const DotStepper = (props) => {
19+
const Stepper = (props) => {
2020
const {
2121
step,
2222
setStep,
@@ -28,6 +28,7 @@ const DotStepper = (props) => {
2828

2929
return (
3030
<MobileStepper
31+
variant={maxStep < 10 ? 'dots' : 'text'}
3132
backButton={
3233
<Button
3334
size="small"
@@ -57,7 +58,7 @@ const DotStepper = (props) => {
5758
);
5859
};
5960

60-
DotStepper.propTypes = {
61+
Stepper.propTypes = {
6162
step: PropTypes.number.isRequired,
6263
maxStep: PropTypes.number.isRequired,
6364
setStep: PropTypes.func.isRequired,
@@ -66,4 +67,4 @@ DotStepper.propTypes = {
6667
disabled: PropTypes.bool,
6768
};
6869

69-
export default DotStepper;
70+
export default Stepper;

‎src/components/3-organisms/Rule.jsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,16 @@ const Rule = (props) => {
3939
changeParameters = () => {},
4040
editGroup = () => {},
4141
controlledParameters = false,
42+
isNetworkAttached = false,
4243
} = props;
43-
const { type, composition, mappedModel, setGroup, groupType } = rule;
44+
const {
45+
type,
46+
composition,
47+
mappedModel,
48+
setGroup,
49+
groupType,
50+
matches = [],
51+
} = rule;
4452
const classes = useStyles(isRuleValid);
4553
// TODO intl
4654
const equipmentLabel = 'Each';
@@ -53,7 +61,8 @@ const Rule = (props) => {
5361
const useBasicModeLabel = 'Use simple filters mode';
5462
const useAdvancedModeLabel = 'Use advanced filters mode';
5563
const unusedFiltersLabel = 'You have unused filter(s)';
56-
64+
const matchesLabel = 'matched network equipments';
65+
const noMatchesLabel = 'None';
5766
const onChangeComposition = (event) => {
5867
changeComposition(event.target.value);
5968
};
@@ -154,6 +163,24 @@ const Rule = (props) => {
154163
editGroup={editGroup}
155164
controlledParameters={controlledParameters}
156165
/>
166+
{isNetworkAttached && (
167+
<Paper className={classes.matches}>
168+
<Grid container>
169+
<Grid item xs={4}>
170+
<Typography variant="h6">
171+
{`${matchesLabel} :`}
172+
</Typography>
173+
</Grid>
174+
<Grid item xs={8}>
175+
<Typography>
176+
{matches.length > 0
177+
? `${matches.join(', ')}`
178+
: noMatchesLabel}
179+
</Typography>
180+
</Grid>
181+
</Grid>
182+
</Paper>
183+
)}
157184
</Paper>
158185
);
159186
};
@@ -174,6 +201,7 @@ Rule.propTypes = {
174201
changeParameters: PropTypes.func.isRequired,
175202
editGroup: PropTypes.func.isRequired,
176203
controlledParameters: PropTypes.bool,
204+
isNetworkAttached: PropTypes.bool,
177205
};
178206

179207
export default Rule;

‎src/components/3-organisms/RuleStyle.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*/
77

88
import { makeStyles } from '@material-ui/core';
9+
910
export const useStyles = makeStyles({
1011
rulePaper: (isValid) => ({
1112
border: '2px solid',
@@ -33,4 +34,16 @@ export const useStyles = makeStyles({
3334
fontSize: '2em',
3435
},
3536
},
37+
matches: {
38+
backgroundColor: 'rgba(255, 255, 255, 0.16)',
39+
maxHeight: '8em',
40+
'& .MuiGrid-container': {
41+
// maxHeight: '10em',
42+
// overflowY: 'auto',
43+
'& .MuiGrid-item': {
44+
maxHeight: '7em',
45+
overflowY: 'auto',
46+
},
47+
},
48+
},
3649
});

‎src/components/3-organisms/SetEditor.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ const SetEditor = (props) => {
6666
definition.origin ===
6767
ParameterOrigin.NETWORK
6868
? networkLabel
69-
: correspondingParameter.value
69+
: correspondingParameter?.value
7070
}
7171
error={
7272
definition.origin ===
7373
ParameterOrigin.USER &&
7474
!isParameterValueValid(
75-
correspondingParameter.value,
75+
correspondingParameter?.value,
7676
definition.type
7777
)
7878
}

‎src/components/3-organisms/SetGroupEditor.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const SetGroupEditor = (props) => {
5151
<Grid item xs="auto">
5252
<Typography> {`${typeLabel} :`} </Typography>
5353
</Grid>
54-
<Grid item xs="8">
54+
<Grid item xs={8}>
5555
<Select
5656
options={[
5757
{
@@ -65,6 +65,7 @@ const SetGroupEditor = (props) => {
6565
]}
6666
value={type}
6767
setValue={changeType}
68+
disabled={name === ''}
6869
/>
6970
</Grid>
7071
</Grid>

‎src/containers/AutomatonContainer.jsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -108,34 +108,32 @@ const AutomatonContainer = ({ index, editParameters }) => {
108108
originIndex: index,
109109
});
110110

111-
useEffect(
112-
() => {
113-
if (!models.map((model) => model.name).includes(model)) {
114-
if (models.length === 1) {
115-
changeModel(models[0].name);
116-
} else {
117-
changeModel('');
118-
}
111+
useEffect(() => {
112+
// If selected model is not in the list
113+
if (!models.map((model) => model.name).includes(model)) {
114+
if (models.length === 1) {
115+
// Replace selected model with the only one available
116+
changeModel(models[0].name);
117+
} else {
118+
// Or remove selection (in case of Equipment Type Change)
119+
changeModel('');
119120
}
120-
const mappedModel = models.find(
121-
(modelToTest) => modelToTest.name === model
122-
);
123-
if (
124-
mappedModel &&
125-
!mappedModel.groups
126-
.map((group) => group.name)
127-
.includes(setGroup)
128-
) {
129-
if (mappedModel.groups.length === 1) {
130-
changeParameters(mappedModel.groups[0].name);
131-
} else {
132-
changeParameters('');
133-
}
121+
}
122+
const mappedModel = models.find(
123+
(modelToTest) => modelToTest.name === model
124+
);
125+
// Same process for sets group
126+
if (
127+
mappedModel &&
128+
!mappedModel.groups.map((group) => group.name).includes(setGroup)
129+
) {
130+
if (mappedModel.groups.length === 1) {
131+
changeParameters(mappedModel.groups[0].name);
132+
} else {
133+
changeParameters('');
134134
}
135-
},
136-
[models, changeModel, model, setGroup, changeParameters],
137-
changeParameters
138-
);
135+
}
136+
}, [models, changeModel, model, setGroup, changeParameters]);
139137

140138
return (
141139
<Automaton

‎src/containers/FilterContainer.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
import React, { useMemo } from 'react';
99
import { useDispatch, useSelector } from 'react-redux';
1010
import {
11+
getNetworkMatchesFromRule,
1112
makeGetFilter,
1213
makeIsFilterValid,
14+
makeIsRuleValid,
1315
MappingSlice,
1416
} from '../redux/slices/Mapping';
1517
import { makeGetNetworkValues } from '../redux/slices/Network';
@@ -36,6 +38,11 @@ const FilterContainer = ({ ruleIndex, filterIndex, equipmentType }) => {
3638
isFilterValid(state, { rule: ruleIndex, filter: filterIndex })
3739
);
3840

41+
const isRuleValidSelector = useMemo(makeIsRuleValid, []);
42+
const isRuleValid = useSelector((state) =>
43+
isRuleValidSelector(state, ruleIndex)
44+
);
45+
3946
const getNetworkValues = useMemo(makeGetNetworkValues, []);
4047
const networkValues = useSelector((state) =>
4148
getNetworkValues(state, { equipmentType, fullProperty })
@@ -65,14 +72,19 @@ const FilterContainer = ({ ruleIndex, filterIndex, equipmentType }) => {
6572
// operands only allow one string to select
6673
!multipleOperands.includes(operand);
6774

68-
const setValue = (value) =>
75+
const setValue = (value) => {
6976
dispatch(
7077
MappingSlice.actions.changeFilterValue({
7178
ruleIndex,
7279
filterIndex,
7380
value: isUniqueSelectFilter ? [value] : value,
7481
})
7582
);
83+
// Other cases called in RuleContainer, only case left is filter value change
84+
if (networkValues.length > 0 && isRuleValid && value) {
85+
dispatch(getNetworkMatchesFromRule(ruleIndex));
86+
}
87+
};
7688
const deleteFilter = () =>
7789
dispatch(
7890
MappingSlice.actions.deleteFilter({

0 commit comments

Comments
 (0)