Skip to content

Commit 1921833

Browse files
BulotFBulotF
committed
split visualize-dropdown : visualize and external-questionnaire
1 parent 6e5609c commit 1921833

File tree

11 files changed

+144
-74
lines changed

11 files changed

+144
-74
lines changed

‎src/constants/pogues-constants.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -261,11 +261,6 @@ export const FORMULA_LANGUAGE = {
261261
VTL: 'VTL',
262262
};
263263

264-
export const DROPDOWN_TYPE = {
265-
VISUALIZATION: 'VISUALIZATION',
266-
EXTERNAL_ELEMENT: 'EXTERNAL_ELEMENT',
267-
};
268-
269264
export const CODELISTS_ACTIONS = {
270265
EDIT: {
271266
name: 'edit',

‎src/layout/generic-input/components/generic-input.jsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
33
import ReactModal from 'react-modal';
44
import NavigationPrompt from 'react-router-navigation-prompt';
55
import { Link } from 'react-router-dom';
6-
import { COMPONENT_TYPE, DROPDOWN_TYPE } from 'constants/pogues-constants';
6+
import { COMPONENT_TYPE } from 'constants/pogues-constants';
77
import { GENERIC_INPUT } from 'constants/dom-constants';
88
import Dictionary from 'utils/dictionary/dictionary';
99
import { VisualizeDropdown } from 'widgets/visualize-dropdown';
10+
import { ExternalQuestionnaireDropdown } from 'widgets/external-questionnaire-dropdown';
1011
import { ComponentNew } from 'layout/component-new';
1112
import Loader from 'layout/loader';
1213

1314
const { QUESTION, SEQUENCE, SUBSEQUENCE, LOOP, FILTER, EXTERNAL_ELEMENT } =
1415
COMPONENT_TYPE;
1516
const { COMPONENT_ID } = GENERIC_INPUT;
16-
const { VISUALIZATION } = DROPDOWN_TYPE;
1717

1818
// PropTypes and defaultProps
1919

@@ -227,14 +227,13 @@ function GenericInput(props) {
227227
{Dictionary.filtre}
228228
</button>
229229
)}
230-
<VisualizeDropdown
230+
<ExternalQuestionnaireDropdown
231231
disabled={
232232
selectedComponent &&
233233
selectedComponent.type !== SEQUENCE &&
234234
selectedComponent.type !== EXTERNAL_ELEMENT
235235
}
236236
top
237-
typeDropDown={EXTERNAL_ELEMENT}
238237
/>
239238
<button
240239
className="btn-yellow"
@@ -256,7 +255,6 @@ function GenericInput(props) {
256255
) : (
257256
<VisualizeDropdown
258257
top
259-
typeDropDown={VISUALIZATION}
260258
disabled={!isQuestionnaireValid}
261259
visualizeActiveQuestionnaire={visualizeActiveQuestionnaire}
262260
token={token}

‎src/layout/questionnaire-list-components/components/questionnaire-component.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { compose } from 'redux';
88
import DropZone from './drop-zone/drop-zone';
99

1010
import { QUESTIONNAIRE_COMPONENT } from 'constants/dom-constants';
11-
import { COMPONENT_TYPE, DROPDOWN_TYPE } from 'constants/pogues-constants';
11+
import { COMPONENT_TYPE } from 'constants/pogues-constants';
1212

1313
import { VisualizeDropdown } from 'widgets/visualize-dropdown';
1414
import { markdownVtlToString } from 'forms/controls/rich-textarea';
@@ -31,7 +31,6 @@ import { getIntegrityErrors } from 'utils/integrity/utils';
3131
const { COMPONENT_CLASS } = QUESTIONNAIRE_COMPONENT;
3232
const { QUESTION, SEQUENCE, SUBSEQUENCE, FILTER, EXTERNAL_ELEMENT } =
3333
COMPONENT_TYPE;
34-
const { VISUALIZATION } = DROPDOWN_TYPE;
3534

3635
const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop);
3736

@@ -214,7 +213,6 @@ const QuestionnaireComponent = props => {
214213
</button>
215214
)}
216215
<VisualizeDropdown
217-
typeDropDown={VISUALIZATION}
218216
componentId={component.id}
219217
visualizeActiveQuestionnaire={
220218
visualizeActiveQuestionnaire

‎src/layout/questionnaire-list/components/questionnaire-list.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,9 @@ const QuestionnaireList = props => {
7272
);
7373
const componentState = {
7474
id: checkedQuestionnaire,
75-
name: externalQuestionnaire.name,
75+
name:
76+
externalQuestionnaire.name ||
77+
externalQuestionnaire.label.replace(' ', ''),
7678
parent: activeQuestionnaire.id,
7779
weight: weight,
7880
children: [],

‎src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React, { useEffect, useState, useRef, useCallback } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classSet from 'react-classset';
4+
import { Link } from 'react-router-dom';
5+
6+
import Dictionary from 'utils/dictionary/dictionary';
7+
8+
/**
9+
* Component used in the actions toolbar and on each
10+
* component of the questionnaire. Will display a button
11+
* with a dropdown behavior with links to different
12+
* visualizations of the PDF : WEB, PDF or ODT
13+
*/
14+
function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) {
15+
const [dropdownOpen, setDropdownOpen] = useState(false);
16+
const wrapperRef = useRef(null);
17+
18+
const handleClickOutside = useCallback(event => {
19+
if (wrapperRef && !wrapperRef.current.contains(event.target)) {
20+
setDropdownOpen(false);
21+
}
22+
}, []);
23+
24+
useEffect(() => {
25+
window.addEventListener('mousedown', handleClickOutside);
26+
return () => {
27+
window.removeEventListener('mousedown', handleClickOutside);
28+
};
29+
}, [handleClickOutside]);
30+
31+
/**
32+
* Will toggle the dropdown menu
33+
*/
34+
const openDropDown = e => {
35+
e.preventDefault();
36+
e.stopPropagation();
37+
setDropdownOpen(!dropdownOpen);
38+
};
39+
40+
const classDropDown = classSet({
41+
'btn-group': true,
42+
dropup: top,
43+
'flex-column': !top,
44+
'flex-column-reverse': top,
45+
open: dropdownOpen,
46+
});
47+
const classDropDownTrigger = classSet({
48+
btn: true,
49+
'dropdown-toggle': true,
50+
'btn-yellow': false,
51+
'btn-white': true,
52+
disabled: disabled,
53+
});
54+
const classDropDownList = classSet({
55+
'dropdown-menu': true,
56+
});
57+
const linksQuestionnaire = [
58+
{
59+
actionType: 'tcmRef',
60+
actionLabel: Dictionary.tcmReference,
61+
page: 'tcm-composition',
62+
},
63+
{
64+
actionType: 'questRef',
65+
actionLabel: Dictionary.questionnaireReference,
66+
page: 'composition',
67+
},
68+
{
69+
actionType: 'questMerge',
70+
actionLabel: Dictionary.questionnaireMerge,
71+
page: 'merge',
72+
},
73+
];
74+
return (
75+
<div className={classDropDown} ref={wrapperRef}>
76+
<button
77+
className={classDropDownTrigger}
78+
disabled={disabled}
79+
data-toggle="dropdown"
80+
aria-haspopup="true"
81+
aria-expanded={dropdownOpen}
82+
onClick={e => openDropDown(e)}
83+
>
84+
{Dictionary.externalElement}
85+
<span className="caret" />
86+
</button>
87+
88+
<ul className={classDropDownList}>
89+
{linksQuestionnaire.map(link => {
90+
return (
91+
<li key={link.actionLabel}>
92+
<Link to={`/questionnaire/${questionnaireId}/${link.page}`}>
93+
{link.actionLabel}
94+
</Link>
95+
</li>
96+
);
97+
})}
98+
</ul>
99+
</div>
100+
);
101+
}
102+
103+
// PropTypes and defaultProps
104+
105+
ExternalQuestionnaireDropdown.propTypes = {
106+
disabled: PropTypes.bool.isRequired,
107+
top: PropTypes.bool.isRequired,
108+
};
109+
110+
export default ExternalQuestionnaireDropdown;

‎src/widgets/external-questionnaire-dropdown/containers/external-questionnaire-dropdown-container.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { connect } from 'react-redux';
2+
3+
import ExternalQuestionnaireDropdown from '../components/external-questionnaire-dropdown';
4+
5+
const mapStateToProps = state => ({
6+
questionnaireId: state.appState.activeQuestionnaire.id,
7+
});
8+
9+
const ExternalQuestionnaireDropdownContainer = connect(mapStateToProps)(
10+
ExternalQuestionnaireDropdown,
11+
);
12+
13+
export default ExternalQuestionnaireDropdownContainer;

‎src/widgets/external-questionnaire-dropdown/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as ExternalQuestionnaireDropdown } from './containers/external-questionnaire-dropdown-container';

‎src/widgets/visualize-dropdown/components/visualize-dropdown.jsx

Lines changed: 12 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useEffect, useState, useRef, useCallback } from 'react';
22
import PropTypes from 'prop-types';
33
import classSet from 'react-classset';
4-
import { Link } from 'react-router-dom';
54

65
import Dictionary from 'utils/dictionary/dictionary';
76

@@ -12,13 +11,11 @@ import Dictionary from 'utils/dictionary/dictionary';
1211
* visualizations of the PDF : WEB, PDF or ODT
1312
*/
1413
function VisualizeDropdown({
15-
questionnaireId,
1614
componentId,
1715
token,
1816
disabled,
1917
top,
2018
visualizeActiveQuestionnaire,
21-
typeDropDown,
2219
}) {
2320
const [dropdownOpen, setDropdownOpen] = useState(false);
2421
const wrapperRef = useRef(null);
@@ -65,8 +62,8 @@ function VisualizeDropdown({
6562
const classDropDownTrigger = classSet({
6663
btn: true,
6764
'dropdown-toggle': true,
68-
'btn-yellow': typeDropDown === 'VISUALIZATION',
69-
'btn-white': typeDropDown !== 'VISUALIZATION',
65+
'btn-yellow': true,
66+
'btn-white': false,
7067
disabled: disabled,
7168
});
7269
const classDropDownList = classSet({
@@ -84,23 +81,6 @@ function VisualizeDropdown({
8481
{ actionType: 'spec', actionLabel: Dictionary.VISUALIZE_SPECIFICATION },
8582
{ actionType: 'ddi', actionLabel: Dictionary.VISUALIZE_DDI },
8683
];
87-
const linksQuestionnaire = [
88-
{
89-
actionType: 'tcmRef',
90-
actionLabel: Dictionary.tcmReference,
91-
page: 'tcm-composition',
92-
},
93-
{
94-
actionType: 'questRef',
95-
actionLabel: Dictionary.questionnaireReference,
96-
page: 'composition',
97-
},
98-
{
99-
actionType: 'questMerge',
100-
actionLabel: Dictionary.questionnaireMerge,
101-
page: 'merge',
102-
},
103-
];
10484
return (
10585
<div className={classDropDown} ref={wrapperRef}>
10686
<button
@@ -111,31 +91,20 @@ function VisualizeDropdown({
11191
aria-expanded={dropdownOpen}
11292
onClick={e => openDropDown(e)}
11393
>
114-
{typeDropDown === 'VISUALIZATION' && Dictionary.visualise}
115-
{typeDropDown !== 'VISUALIZATION' && Dictionary.externalElement}
94+
{Dictionary.visualise}
11695
<span className="caret" />
11796
</button>
11897

11998
<ul className={classDropDownList}>
120-
{typeDropDown === 'VISUALIZATION'
121-
? links.map(link => {
122-
return (
123-
<li key={link.actionLabel}>
124-
<a href="#" onClick={e => visualize(e, link.actionType)}>
125-
{link.actionLabel}
126-
</a>
127-
</li>
128-
);
129-
})
130-
: linksQuestionnaire.map(link => {
131-
return (
132-
<li key={link.actionLabel}>
133-
<Link to={`/questionnaire/${questionnaireId}/${link.page}`}>
134-
{link.actionLabel}
135-
</Link>
136-
</li>
137-
);
138-
})}
99+
{links.map(link => {
100+
return (
101+
<li key={link.actionLabel}>
102+
<a href="#" onClick={e => visualize(e, link.actionType)}>
103+
{link.actionLabel}
104+
</a>
105+
</li>
106+
);
107+
})}
139108
</ul>
140109
</div>
141110
);

‎src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/widgets/visualize-dropdown/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default as VisualizeDropdown } from './containers/visualize-dropdown-container';
1+
export { default as VisualizeDropdown } from './components/visualize-dropdown';

‎src/widgets/visualize-dropdown/visualize-dropdown.spec.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ describe('Visualize Dropdown Component: ', () => {
1111
disabled: false,
1212
top: false,
1313
componentId: 'component-id',
14-
typeDropDown: 'VISUALIZATION',
1514
};
1615
const tree = renderer.create(<VisualizeDropdown {...props} />).toJSON();
1716

@@ -23,7 +22,6 @@ describe('Visualize Dropdown Component: ', () => {
2322
disabled: false,
2423
top: true,
2524
componentId: 'component-id',
26-
typeDropDown: 'VISUALIZATION',
2725
};
2826
const tree = renderer.create(<VisualizeDropdown {...props} />).toJSON();
2927

@@ -35,7 +33,6 @@ describe('Visualize Dropdown Component: ', () => {
3533
disabled: true,
3634
top: false,
3735
componentId: 'component-id',
38-
typeDropDown: 'VISUALIZATION',
3936
};
4037
const tree = renderer.create(<VisualizeDropdown {...props} />).toJSON();
4138

@@ -47,7 +44,6 @@ describe('Visualize Dropdown Component: ', () => {
4744
disabled: true,
4845
top: false,
4946
componentId: 'component-id',
50-
typeDropDown: 'VISUALIZATION',
5147
};
5248
const wrapper = shallow(<VisualizeDropdown {...props} />);
5349
expect(wrapper.find('div').hasClass('open')).toBeFalsy();
@@ -67,7 +63,6 @@ describe('Visualize Dropdown Component: ', () => {
6763
disabled: true,
6864
top: false,
6965
componentId: 'component-id',
70-
typeDropDown: 'VISUALIZATION',
7166
};
7267
const wrapper = shallow(<VisualizeDropdown {...props} />);
7368
wrapper

0 commit comments

Comments
 (0)