Merge 964b9c0 into fd718f5

src/client/entity-editor/relationship-editor/relationship-editor.tsx

@@ -38,9 +38,11 @@ import type {
 	Relationship as _Relationship
 } from './types';
 import {faExternalLinkAlt, faPlus, faTimes} from '@fortawesome/free-solid-svg-icons';
+import {getInitAttribute, setAttribute} from './helper';
 
 import EntitySearchFieldOption from '../common/entity-search-field-option';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {NumberAttribute} from './attributes';
 import ReactSelect from 'react-select';
 import Relationship from './relationship';
 import _ from 'lodash';
@@ -158,6 +160,8 @@ type RelationshipModalState = {
 	relationshipType?: RelationshipType | null | undefined,
 	relationship?: _Relationship | null | undefined,
 	targetEntity?: EntitySearchResult | null | undefined,
+	attributePosition?: _Attribute,
+	attributeNumber?: _Attribute
 	attributes?: _Attribute[]
 };
 
@@ -166,6 +170,8 @@ function getInitState(
 ): RelationshipModalState {
 	if (_.isNull(initRelationship)) {
 		return {
+			attributeNumber: {attributeType: 2, value: {textValue: null}},
+			attributePosition: {attributeType: 1, value: {textValue: null}},
 			attributeSetId: null,
 			attributes: [],
 			relationship: null,
@@ -194,6 +200,8 @@ function getInitState(
 		}
 	}
 	const attributes = _.get(initRelationship, ['attributes']);
+	const attributePosition = getInitAttribute(attributes, 1);
+	const attributeNumber = getInitAttribute(attributes, 2);
 
 	const searchFormatOtherEntity = otherEntity && {
 		id: _.get(otherEntity, ['bbid']),
@@ -205,6 +213,8 @@ function getInitState(
 	};
 
 	return {
+		attributeNumber,
+		attributePosition,
 		attributeSetId: _.get(initRelationship, ['attributeSetId']),
 		attributes,
 		relationship: initRelationship,
@@ -267,11 +277,31 @@ class RelationshipModal
 		});
 	};
 
+	handleNumberAttributeChange = ({target}) => {
+		const value = target.value === '' ? null : target.value;
+		const attributeNumber = {
+			attributeType: 2,
+			value: {textValue: value}
+		};
+		const attributePosition = {
+			attributeType: 1,
+			value: {textValue: null}
+		};
+		this.setState({
+			attributeNumber,
+			attributePosition
+		});
+	};
+
 	handleAdd = () => {
 		const {onAdd} = this.props;
 		if (onAdd) {
 			if (this.state.relationship) {
-				onAdd(this.state.relationship);
+				const {relationship} = this.state;
+				// Before adding a relationship, set all the attributes state value
+				// (ex: number, position etc) to attributes property of the relationship object.
+				relationship.attributes = setAttribute(this.state, this.state.relationshipType.attributeTypes);
+				onAdd(relationship);
 			}
 		}
 	};
@@ -356,6 +386,13 @@ class RelationshipModal
 			relationshipTypes, baseEntity, otherEntity
 		);
 
+		// The attribute types belonging to the relationship type
+		const attributeTypes = this.state.relationshipType ? this.state.relationshipType.attributeTypes : null;
+		let attributes = [];
+		if (attributeTypes) {
+			// Name of the attribute type belonging to the relationship type. EX: ['position', 'number]
+			attributes = attributeTypes.map(attribute => attribute.name);
+		}
 		return (
 			<FormGroup>
 				<ControlLabel>Relationship</ControlLabel>
@@ -372,6 +409,14 @@ class RelationshipModal
 				{this.state.relationshipType &&
 					<HelpBlock>{this.state.relationshipType.description}</HelpBlock>
 				}
+				{
+					attributes.includes('number') ?
+						<NumberAttribute
+							value={this.state.attributeNumber.value.textValue}
+							onHandleChange={this.handleNumberAttributeChange}
+						/> :
+						null
+				}
 			</FormGroup>
 		);
 	}

src/client/entity-editor/relationship-editor/relationship-section.tsx

@@ -66,11 +66,13 @@ export function RelationshipList(
 	/* eslint-disable react/jsx-no-bind */
 	const renderedRelationships = _.map(
 		relationships,
-		({relationshipType, sourceEntity, targetEntity}, rowID) => (
+		({relationshipType, sourceEntity, targetEntity, attributes}, rowID) => (
 			<Row className="margin-top-d5" key={rowID}>
 				<Col md={onEdit || onRemove ? 8 : 12}>
 					<Relationship
 						link
+						showAttributes
+						attributes={attributes}
 						contextEntity={contextEntity}
 						relationshipType={relationshipType}
 						sourceEntity={sourceEntity}