feat: Add metadatas to structure component specification

app/src/js/applications/structures/visualization/components/index.js

@@ -43,6 +43,9 @@ const Components = ({ componentDefinitions = []}) => {
 					specification={{
 						attachment: selectedComponent.attachment,
 						required: selectedComponent.required,
+						notation: selectedComponent.notation,
+						labelLg1: selectedComponent.labelLg1,
+						labelLg2: selectedComponent.labelLg2,
 					}}
 				/>
 			)}

demo.js

@@ -0,0 +1,30 @@
+const createObject = (timestamp) => {
+	const date = new Date(0);
+
+	const [hours, minutes] = timestamp.split(':'); // ["30"]
+
+	if(!minutes){
+		date.setUTCHours(0, hours)
+
+	} else {
+		date.setUTCHours(hours, minutes)
+	}
+	return date;
+}
+
+const createObject = (timestamp) => {
+	const date = new Date(0);
+
+	if(timestamp.contains(':')){
+		const [hours, minutes] = timestamp.split(':'); // ["30"]
+		date.setUTCHours(hours, minutes)
+	} else {
+		date.setUTCHours(0, timestamp)
+	}
+
+	return date;
+}
+
+console.log(createObject("30"))
+
+console.log(createObject("01:30"));

packages/structures/src/components/component-selector/index.js

@@ -270,6 +270,9 @@ const ComponentSelector = ({
 					specification={{
 						attachment: selectedComponent.attachment,
 						required: selectedComponent.required,
+						notation: selectedComponent.notation,
+						labelLg1: selectedComponent.labelLg1,
+						labelLg2: selectedComponent.labelLg2,
 					}}
 					onSave={saveSpecification}
 				/>

packages/structures/src/components/component-specification-form/component-specification-form.spec.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ComponentSpecificationForm } from './index';
+
+describe('ComponentSpecificationForm', () => {
+	it('should render form inputs', async () => {
+		const component = {}
+		render(<ComponentSpecificationForm component={component} structureComponents={[]} selectedComponent={{ component }}/>);
+		await screen.findByLabelText("Notation")
+		await screen.findByLabelText("Libellé")
+		await screen.findByLabelText("Label")
+	});
+
+	[['Notation', 'notation'], ['Libellé', 'labelLg1'], ['Label', 'labelLg2']].forEach(([label, propertyName]) => {
+		it(`should call onChange if the ${propertyName} changed`, async () => {
+			const component = {}
+			const onChange = jest.fn();
+			render(<ComponentSpecificationForm component={component} structureComponents={[]} selectedComponent={{ component }} onChange={onChange}/>);
+			const input = await screen.findByLabelText(label);
+			fireEvent.change(input, { target: { value: 'value' }});
+			expect(onChange).toHaveBeenCalledWith({[propertyName]: "value"})
+		})
+	})
+
+})

packages/structures/src/components/component-specification-form/index.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import D from '../../i18n/build-dictionary';
+import D, {D1, D2} from '../../i18n/build-dictionary';
 import { Select } from '@inseefr/wilco';
 import { getAllAttachment } from '../../utils';
 import './component-specification-form.scss';
-import { MEASURE_PROPERTY_TYPE } from '../../utils/constants';
+import { ATTRIBUTE_PROPERTY_TYPE, MEASURE_PROPERTY_TYPE } from '../../utils/constants';
 import Api from '../../apis/structure-api';
 
 export const ComponentSpecificationForm = ({
@@ -14,7 +14,6 @@ export const ComponentSpecificationForm = ({
 	disabled = false,
 }) => {
 	const [attachments, setAttachments] = useState([]);
-
 	useEffect(() => {
 		Promise.all(structureComponents
 			.filter(c => c.component.type === MEASURE_PROPERTY_TYPE)
@@ -26,64 +25,124 @@ export const ComponentSpecificationForm = ({
 
 	return (
 		<React.Fragment>
-			<div className="row bauhaus-component-specification-form">
-				<div className="col-md-12">
-					<Select
-						id="attachment"
-						name="attachment"
-						label={D.attachmentTitle}
-						placeholder={D.attachmentTitle}
-						value={attachments.filter((c) =>
-							component.attachment?.some((a) => a.includes(c.value))
-						)}
-						multi
-						options={attachments}
-						onChange={(value) => {
+			<div className="row">
+				<div className='col-md-12'>
+				<label htmlFor="component-specification-notation">{D.idTitle}</label>
+				<input
+					type="text"
+					className="form-control"
+					value={component.notation}
+					name="component-specification-notation"
+					id="component-specification-notation"
+					onChange={(e) => {
+						onChange({
+							...component,
+							notation: e.target.value,
+						});
+					}}
+					disabled={disabled}
+				/>
+				</div>
+			</div>
+			<div className="row">
+				<div className='col-md-6'>
+				<label htmlFor="component-specification-labelLg1">{D1.label}</label>
+				<input
+					type="text"
+					className="form-control"
+					value={component.labelLg1}
+					name="component-specification-labelLg1"
+					id="component-specification-labelLg1"
+					onChange={(e) => {
+						onChange({
+							...component,
+							labelLg1: e.target.value,
+						});
+					}}
+					disabled={disabled}
+				/>
+				</div>
+				<div className='col-md-6'>
+					<label htmlFor="component-specification-labelLg2">{D2.label}</label>
+					<input
+						type="text"
+						className="form-control"
+						value={component.labelLg2}
+						name="component-specification-labelLg2"
+						id="component-specification-labelLg2"
+						onChange={(e) => {
 							onChange({
 								...component,
-								attachment: value?.map((v) => v.value),
+								labelLg2: e.target.value,
 							});
 						}}
 						disabled={disabled}
 					/>
 				</div>
 			</div>
-			<div className="row">
-				<fieldset className="col-md-12 checkbox ">
-					<legend>{D.requiredSpecificationTitle}</legend>
 
-					<label className="radio-inline">
-						<input
-							type="radio"
-							checked={component.required}
-							name="required"
-							onChange={() => {
+			{ selectedComponent.component.type === ATTRIBUTE_PROPERTY_TYPE &&
+				<>
+					<div className="row bauhaus-component-specification-form">
+						<div className="col-md-12">
+						<Select
+							id="attachment"
+							name="attachment"
+							label={D.attachmentTitle}
+							placeholder={D.attachmentTitle}
+							value={attachments.filter((c) =>
+								component.attachment?.some((a) => a.includes(c.value))
+							)}
+							multi
+							options={attachments}
+							onChange={(value) => {
 								onChange({
 									...component,
-									required: true,
+									attachment: value?.map((v) => v.value),
 								});
 							}}
 							disabled={disabled}
 						/>
-						{D.yes}
-					</label>
-					<label className="radio-inline">
-						<input
-							type="radio"
-							checked={!component.required}
-							name="required"
-							onChange={() => {
-								onChange({
-									...component,
-									required: false,
-								});
-							}}
-							disabled={disabled}
-						/>
-						{D.no}
-					</label>
-				</fieldset>
-			</div>
+					</div>
+					</div>
+					<div className="row">
+						<fieldset className="col-md-12 checkbox ">
+							<legend>{D.requiredSpecificationTitle}</legend>
+
+							<label className="radio-inline">
+								<input
+									type="radio"
+									checked={component.required}
+									name="required"
+									onChange={() => {
+										onChange({
+											...component,
+											required: true,
+										});
+									}}
+									disabled={disabled}
+								/>
+								{D.yes}
+							</label>
+							<label className="radio-inline">
+								<input
+									type="radio"
+									checked={!component.required}
+									name="required"
+									onChange={() => {
+										onChange({
+											...component,
+											required: false,
+										});
+									}}
+									disabled={disabled}
+								/>
+								{D.no}
+							</label>
+						</fieldset>
+					</div>
+				</>
+			}
 		</React.Fragment>
 	);
 };

packages/structures/src/components/component-specification-modal/component-specification-modal.spec.js

@@ -17,6 +17,7 @@ describe('<ComponentSpecificationModal />', () => {
 		const { container } = render(
 			<ComponentSpecificationModalBody
 				specification={specification}
+				selectedComponent={{component: {}}}
 				structureComponents={structureComponents}
 				onClose={onClose}
 			/>
@@ -29,20 +30,12 @@ describe('<ComponentSpecificationModal />', () => {
 		const { container } = render(
 			<ComponentSpecificationModalBody
 				specification={specification}
+				selectedComponent={{component: {}}}
 				structureComponents={structureComponents}
 				onSave={onSave}
 			/>
 		);
 		fireEvent.click(container.querySelector('.modal-footer button'));
 		expect(onSave).toHaveBeenCalled();
 	});
-	it('should display the component specification', async () => {
-		render(
-			<ComponentSpecificationModalBody
-				specification={specification}
-				structureComponents={structureComponents}
-			/>
-		);
-		await screen.findByText("DataSet");
-	});
 });

packages/structures/src/components/structure-component-selector/index.js

@@ -5,7 +5,6 @@ import D from '../../i18n/build-dictionary';
 import { CollapsiblePanel } from '../collapsible-panel';
 import { Table } from '@inseefr/wilco';
 import { ComponentDetail } from '../component-detail';
-import { ATTRIBUTE_PROPERTY_TYPE } from '../../utils/constants/dsd-components';
 
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
@@ -177,16 +176,14 @@ export const StructureComponentsSelector = ({
 						>
 							<span className="glyphicon glyphicon-eye-open"></span>
 						</button>
-						{component.type === ATTRIBUTE_PROPERTY_TYPE && (
-							<button
+						<button
 								data-component-id={component.identifiant}
 								onClick={specificationClickHandler}
 								aria-label={D.componentSpecificationTitle}
 								title={D.componentSpecificationTitle}
 							>
 								<span className="glyphicon glyphicon-cog"></span>
 							</button>
-						)}
 						{!readOnly && (
 							<button
 								data-component-id={component.identifiant}