Merge pull request #111 from EmmanuelDemey/master

Start Geography + Bug with Concepts
InseeFr · Aug 10, 2020 · adc0acc · adc0acc
2 parents b9bca34 + 81432f9
commit adc0acc
Show file tree

Hide file tree

Showing 14 changed files with 294 additions and 152 deletions.
diff --git a/app/package.json b/app/package.json
@@ -41,7 +41,7 @@
 		"react-d3-tree": "1.10.3",
 		"react-draft-wysiwyg": "1.13.2",
 		"react-dropzone": "11.0.1",
-		"react-modal": "3.1.8",
+		"react-modal": "3.11.2",
 		"react-router-hash-link": "1.2.0",
 		"react-scripts": "3.4.1",
 		"react-select": "1.1.0",

diff --git a/app/src/js/applications/concepts/home-container.js b/app/src/js/applications/concepts/home-container.js
@@ -1,25 +1,20 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Loading } from '@inseefr/wilco';
 import ConceptsHome from './home';
 import { NOT_LOADED } from 'js/constants';
 import loadConceptList from 'js/actions/concepts/list';
 import { Auth } from 'bauhaus-utilities';
 
-class ConceptsHomeContainer extends Component {
-	componentWillMount() {
-		if (!this.props.concepts) {
-			this.props.loadConceptList();
+const ConceptsHomeContainer = ({ concepts, permission, loadConceptList }) => {
+	useEffect(() => {
+		if (!concepts) {
+			loadConceptList();
 		}
-	}
-
-	render() {
-		const { concepts, permission } = this.props;
-
-		if (!concepts) return <Loading />;
-		return <ConceptsHome concepts={concepts} permission={permission} />;
-	}
-}
+	}, [concepts, loadConceptList]);
+	if (!concepts) return <Loading />;
+	return <ConceptsHome concepts={concepts} permission={permission} />;
+};
 
 const mapStateToProps = state => {
 	const permission = Auth.getPermission(state);

diff --git a/app/src/js/applications/concepts/visualization/home-container.js b/app/src/js/applications/concepts/visualization/home-container.js
@@ -72,10 +72,8 @@ class ConceptVisualizationContainer extends Component {
 		}
 	}
 	render() {
-		const { validationRequested } = this.state;
-		const { deletionRequested } = this.state;
-		const { validationStatus } = this.props;
-		const { deleteStatus } = this.props;
+		const { validationRequested, deletionRequested } = this.state;
+		const { validationStatus, deleteStatus } = this.props;
 
 		if (validationRequested && validationStatus !== OK) {
 			//if validation is OK: nothing to do. We stay on this page and the concept will
@@ -128,21 +126,19 @@ class ConceptVisualizationContainer extends Component {
 			}
 
 			return (
-				<>
-					<ConceptVisualization
-						id={id}
-						permission={permission}
-						general={general}
-						notes={notes}
-						links={links}
-						validateConcept={this.handleConceptValidation}
-						deleteConcept={this.handleConceptDeletion}
-						validationStatus={validationStatus}
-						secondLang={secondLang}
-						langs={langs}
-						serverSideError={error}
-					/>
-				</>
+				<ConceptVisualization
+					id={id}
+					permission={permission}
+					general={general}
+					notes={notes}
+					links={links}
+					validateConcept={this.handleConceptValidation}
+					deleteConcept={this.handleConceptDeletion}
+					validationStatus={validationStatus}
+					secondLang={secondLang}
+					langs={langs}
+					serverSideError={error}
+				/>
 			);
 		}
 		return <Loading />;

diff --git a/app/src/js/applications/concepts/visualization/home.js b/app/src/js/applications/concepts/visualization/home.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
 import { PropTypes } from 'prop-types';
 import { ErrorBloc } from '@inseefr/wilco';
 import ConceptVisualizationControls from './controls';
@@ -14,106 +14,88 @@ import { propTypes as permissionOverviewPropTypes } from 'js/utils/auth/permissi
 import { getModalMessage } from 'js/utils/concepts/build-validation-message';
 import { CheckSecondLang, DateUtils, PageTitleBlock } from 'bauhaus-utilities';
 
-class ConceptVisualization extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			modalValid: false,
-		};
-		this.handleClickValidation = () => {
-			const {
-				id,
-				general: { valid },
-			} = this.props;
-			if (valid) this.setState({ modalValid: true });
-			else this.props.validateConcept(id);
-		};
-		this.handleCancelValidation = () => this.setState({ modalValid: false });
+const ConceptVisualization = ({
+	id,
+	permission,
+	links,
+	notes,
+	secondLang,
+	langs,
+	serverSideError,
+	general,
+	validateConcept,
+	deleteConcept,
+}) => {
+	const [modalValid, setModalValid] = useState(false);
 
-		this.handleConfirmValidation = () => {
-			this.handleCancelValidation();
-			this.props.validateConcept(this.props.id);
-		};
+	const handleClickValidation = useCallback(() => {
+		if (general.valid) setModalValid(true);
+		else validateConcept(id);
+	}, [id, general, validateConcept]);
 
-		this.handleClickDeletion = () => this.props.deleteConcept(this.props.id);
-	}
+	const handleCancelValidation = useCallback(() => {
+		setModalValid(false);
+	}, []);
+	const handleConfirmValidation = useCallback(() => {
+		this.handleCancelValidation();
+		validateConcept(id);
+	}, [id, validateConcept]);
+	const handleClickDeletion = useCallback(() => {
+		deleteConcept(id);
+	}, [id, deleteConcept]);
 
-	render() {
-		const {
-			id,
-			permission,
-			general,
-			links,
-			notes,
-			secondLang,
-			langs,
-			serverSideError,
-		} = this.props;
-		const { modalValid } = this.state;
-		const {
-			conceptVersion,
-			creator,
-			isValidated,
-			prefLabelLg1,
-			prefLabelLg2,
-			valid,
-		} = general;
+	const modalButtons = [
+		{
+			label: D.btnCancel,
+			action: handleCancelValidation,
+			style: 'primary',
+		},
+		{
+			label: D.btnValid,
+			action: handleConfirmValidation,
+			style: 'primary',
+		},
+	];
 
-		const modalButtons = [
-			{
-				label: D.btnCancel,
-				action: this.handleCancelValidation,
-				style: 'primary',
-			},
-			{
-				label: D.btnValid,
-				action: this.handleConfirmValidation,
-				style: 'primary',
-			},
-		];
-
-		return (
-			<>
-				<div className="container">
-					<PageTitleBlock
-						titleLg1={prefLabelLg1}
-						titleLg2={prefLabelLg2}
-						secondLang={secondLang}
-					/>
-
-					<ConceptVisualizationControls
-						id={id}
-						permission={permission}
-						creator={creator}
-						isValidated={isValidated === 'true'}
-						isValidOutOfDate={DateUtils.isOutOfDate(valid)}
-						conceptVersion={conceptVersion}
-						handleValidation={this.handleClickValidation}
-						handleDeletion={this.handleClickDeletion}
-					/>
-					<ErrorBloc error={serverSideError} />
-					<CheckSecondLang />
+	return (
+		<>
+			<div className="container">
+				<PageTitleBlock
+					titleLg1={general.prefLabelLg1}
+					titleLg2={general.prefLabelLg2}
+					secondLang={secondLang}
+				/>
 
-					<ConceptGeneral
-						secondLang={secondLang}
-						attr={general}
-						langs={langs}
-					/>
-					<ConceptLinks secondLang={secondLang} links={links} />
-					<ConceptNotes secondLang={secondLang} notes={notes} langs={langs} />
-				</div>
-				<ModalRmes
-					id="validation-concept-modal"
-					isOpen={modalValid}
-					title="Confirmation de la validation"
-					body={getModalMessage([{ prefLabelLg1, valid }])}
-					modalButtons={modalButtons}
-					closeCancel={this.handleCancelValidation}
+				<ConceptVisualizationControls
+					id={id}
+					permission={permission}
+					creator={general.creator}
+					isValidated={general.isValidated === 'true'}
+					isValidOutOfDate={DateUtils.isOutOfDate(general.valid)}
+					conceptVersion={general.conceptVersion}
+					handleValidation={handleClickValidation}
+					handleDeletion={handleClickDeletion}
 				/>
-			</>
-		);
-	}
-}
+				<ErrorBloc error={serverSideError} />
+				<CheckSecondLang />
+
+				<ConceptGeneral secondLang={secondLang} attr={general} langs={langs} />
+				<ConceptLinks secondLang={secondLang} links={links} />
+				<ConceptNotes secondLang={secondLang} notes={notes} langs={langs} />
+			</div>
+			<ModalRmes
+				id="validation-concept-modal"
+				isOpen={modalValid}
+				title="Confirmation de la validation"
+				body={getModalMessage([
+					{ prefLabelLg1: general.prefLabelLg1, valid: general.valid },
+				])}
+				modalButtons={modalButtons}
+				closeCancel={handleCancelValidation}
+			/>
+		</>
+	);
+};
 
 ConceptVisualization.propTypes = {
 	id: PropTypes.string, // not available for creation

diff --git a/app/src/js/applications/operations/msd/pages/sims-creation/sims-creation.scss b/app/src/js/applications/operations/msd/pages/sims-creation/sims-creation.scss
@@ -34,3 +34,21 @@
 .bauhaus-sims-field__RICH_TEXT_2col {
 	@include rich-text(1em);
 }
+
+.bauhaus-sims-geography-field {
+	display: flex;
+
+	.form-group {
+		flex-grow: 1;
+		div[class$='singleValue'] {
+			overflow: visible;
+		}
+	}
+	.btn-group {
+		margin-left: 1em;
+
+		.btn {
+			min-height: 38px;
+		}
+	}
+}
diff --git a/app/src/js/applications/operations/msd/pages/sims-creation/sims-field.js b/app/src/js/applications/operations/msd/pages/sims-creation/sims-field.js
@@ -6,11 +6,11 @@ import DatePickerRmes from 'js/applications/shared/date-picker-rmes';
 import InputRmes from 'js/applications/shared/input-rmes';
 import { EditorMarkdownToolbar, ArrayUtils } from 'bauhaus-utilities';
 import { Editor } from 'react-draft-wysiwyg';
-
+import SimsGeographyField from './sims-geography-field';
 import { Note, getLang, Select } from '@inseefr/wilco';
 import './sims-field.scss';
 
-const { RICH_TEXT, TEXT, DATE, CODE_LIST, ORGANIZATION } = rangeType;
+const { RICH_TEXT, TEXT, DATE, CODE_LIST, ORGANIZATION, GEOGRAPHY } = rangeType;
 
 const SimsCodeListSelect = props => {
 	let value;
@@ -166,6 +166,8 @@ class Field extends PureComponent {
 									multi={unbounded}
 								/>
 							)}
+
+							{msd.rangeType === GEOGRAPHY && <SimsGeographyField />}
 						</span>
 					)
 				}