X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FEditDescriptorModelProperties.js;h=65712f43f76d882b9ebffc23acdb3eb26adef6c9;hb=3f7d3075ddc01e1f26ecf4fa472189d67a8d9c50;hp=a2373e6466a3ea03771614a482ea113d925eed97;hpb=3a0a737a065670c4928fe841941aa9c4f4d02a56;p=osm%2FUI.git

diff --git a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js
index a2373e646..65712f43f 100644
--- a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js
+++ b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js
@@ -39,6 +39,7 @@ import SelectionManager from '../libraries/SelectionManager'
 import DeletionManager from '../libraries/DeletionManager'
 import DescriptorModelIconFactory from '../libraries/model/IconFactory'
 import getEventPath from '../libraries/getEventPath'
+import CatalogDataStore from '../stores/CatalogDataStore'
 
 import imgAdd from '../../../node_modules/open-iconic/svg/plus.svg'
 import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg'
@@ -46,12 +47,12 @@ import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg'
 import '../styles/EditDescriptorModelProperties.scss'
 
 function getDescriptorMetaBasicForType(type) {
-	const basicPropertiesFilter = d => _.contains(DESCRIPTOR_MODEL_FIELDS[type], d.name);
+	const basicPropertiesFilter = d => _.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
 	return DescriptorModelMetaFactory.getModelMetaForType(type, basicPropertiesFilter) || {properties: []};
 }
 
 function getDescriptorMetaAdvancedForType(type) {
-	const advPropertiesFilter = d => !_.contains(DESCRIPTOR_MODEL_FIELDS[type], d.name);
+	const advPropertiesFilter = d => !_.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
 	return DescriptorModelMetaFactory.getModelMetaForType(type, advPropertiesFilter) || {properties: []};
 }
 
@@ -73,6 +74,8 @@ function getTitle(model = {}) {
 export default function EditDescriptorModelProperties(props) {
 
 	const container = props.container;
+	const readonly = props.readonly;
+	const isEditable = !readonly; //true
 
 	if (!(DescriptorModelFactory.isContainer(container))) {
 		return
@@ -140,6 +143,9 @@ export default function EditDescriptorModelProperties(props) {
 			}
 			CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
 		}
+		if(readonly) {
+			return null;
+		}
 		return (
 				<Button className="inline-hint" onClick={onClickAddProperty.bind(container, property, path)} label="Add" src={imgAdd} />
 		);
@@ -157,6 +163,9 @@ export default function EditDescriptorModelProperties(props) {
 			}
 			CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
 		}
+		if(readonly) {
+			return null;
+		}
 		return (
 			<Button className="remove-property-action inline-hint" title="Remove" onClick={onClickRemoveProperty.bind(container, property, path)} label="Remove" src={imgRemove}/>
 		);
@@ -173,12 +182,15 @@ export default function EditDescriptorModelProperties(props) {
 	}
 
 	function buildField(container, property, path, value, fieldKey) {
+		let cds = CatalogDataStore;
+		let catalogs = cds.getTransientCatalogs();
 
 		const name = path.join('.');
-		const isEditable = true;
 		const isGuid = Property.isGuid(property);
+		const isBoolean = Property.isBoolean(property);
 		const onChange = onFormFieldValueChanged.bind(container);
 		const isEnumeration = Property.isEnumeration(property);
+		const isLeafRef = Property.isLeafRef(property);
 		const onFocus = onFocusPropertyFormInputElement.bind(container, property, path, value);
 		const placeholder = changeCase.title(property.name);
 		const className = ClassNames(property.name + '-input', {'-is-guid': isGuid});
@@ -197,28 +209,74 @@ export default function EditDescriptorModelProperties(props) {
 				const noValueDisplayText = changeCase.title(property.name);
 				options.unshift(<option key={'(value-not-in-enum)' + fieldKey.toString()} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
 			}
-			return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={value} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} readOnly={!isEditable}>{options}</select>;
+			return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={value} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} disabled={!isEditable}>{options}</select>;
+		}
+
+		if (isLeafRef) {
+			let fullFieldKey = _.isArray(fieldKey) ? fieldKey.join(':') : fieldKey;
+			let containerRef = container;
+			while (containerRef.parent) {
+				fullFieldKey = containerRef.parent.key + ':' + fullFieldKey;
+				containerRef = containerRef.parent;
+			}
+			const leafRefPathValues = Property.getLeafRef(property, path, value, fullFieldKey, catalogs, container);
+
+			const options = leafRefPathValues && leafRefPathValues.map((d, i) => {
+				return <option key={fieldKey.toString() + ':' + i} value={d.value}>{d.value}</option>;
+			});
+			const isValueSet = leafRefPathValues.filter(d => d.isSelected).length > 0;
+			if (!isValueSet || property.cardinality === '0..1') {
+				const noValueDisplayText = changeCase.title(property.name);
+				options.unshift(<option key={'(value-not-in-leafref)' + fieldKey.toString()} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
+			}
+			return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={value} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} disabled={!isEditable}>{options}</select>;
+		}
+
+		if (isBoolean) {
+			let fullFieldKey = _.isArray(fieldKey) ? fieldKey.join(':') : fieldKey;
+			let containerRef = container;
+			while (containerRef.parent) {
+				fullFieldKey = containerRef.parent.key + ':' + fullFieldKey;
+				containerRef = containerRef.parent;
+			}
+
+			const options = [
+				<option key={fieldKey.toString() + '-true'} value="TRUE">TRUE</option>,
+				<option key={fieldKey.toString() + '-false'} value="FALSE">FALSE</option>
+			]
+
+			// if (!isValueSet) {
+				const noValueDisplayText = changeCase.title(property.name);
+				options.unshift(<option key={'(value-not-in-leafref)' + fieldKey.toString()} value="" placeholder={placeholder}></option>);
+			// }
+			let val = value;
+			if(typeof(val) == 'number') {
+				val = value ? "TRUE" : "FALSE"
+			}
+			const isValueSet = (val != '' && val)
+			return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={val && val.toUpperCase()} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} disabled={!isEditable}>{options}</select>;
 		}
 
 		if (property['preserve-line-breaks']) {
-			return <textarea key={fieldKey.toString()} cols="5" id={fieldKey.toString()} name={name} value={value} placeholder={placeholder} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing} readOnly={!isEditable} />;
+			return <textarea key={fieldKey.toString()} cols="5" id={fieldKey.toString()} name={name} value={value} placeholder={placeholder} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing} readOnly={!!isEditable} />;
 		}
 
-		return <input key={fieldKey.toString()}
-					  id={fieldKey.toString()}
-					  type="text"
-					  name={name}
-					  value={fieldValue}
-					  className={className}
-					  placeholder={placeholder}
-					  onChange={onChange}
-					  onFocus={onFocus}
-					  onBlur={endEditing}
-					  onMouseDown={startEditing}
-					  onMouseOver={startEditing}
-					  onMouseOut={endEditing}
-					  onMouseLeave={endEditing}
-					  readOnly={!isEditable}
+		return <input
+					key={fieldKey.toString()}
+					id={fieldKey.toString()}
+					type="text"
+					name={name}
+					value={fieldValue}
+					className={className}
+					placeholder={placeholder}
+					onChange={onChange}
+					onFocus={onFocus}
+					onBlur={endEditing}
+					onMouseDown={startEditing}
+					onMouseOver={startEditing}
+					onMouseOut={endEditing}
+					onMouseLeave={endEditing}
+					readOnly={!isEditable}
 		/>;
 
 	}
@@ -245,9 +303,10 @@ export default function EditDescriptorModelProperties(props) {
 
 				event.preventDefault();
 
-				const name = event.target.name;
+				let name = event.target.name;
 				const value = event.target.value;
 
+
 				/*
 					Transient State is stored for convenience in the uiState field.
 					The choice yang type uses case elements to describe the "options".
@@ -255,22 +314,22 @@ export default function EditDescriptorModelProperties(props) {
 					the system to determine which type is selected by the name of
 					the element contained within the field.
 				 */
-
-				//const stateExample = {
-				//	uiState: {
-				//		choice: {
-				//			'conf-config': {
-				//				selected: 'rest',
-				//				'case': {
-				//					rest: {},
-				//					netconf: {},
-				//					script: {}
-				//				}
-				//			}
-				//		}
-				//	}
-				//};
-
+				/*
+					const stateExample = {
+						uiState: {
+							choice: {
+								'conf-config': {
+									selected: 'rest',
+									'case': {
+										rest: {},
+										netconf: {},
+										script: {}
+									}
+								}
+							}
+						}
+					};
+				*/
 				const statePath = ['uiState.choice'].concat(name);
 				const stateObject = utils.resolvePath(this.model, statePath.join('.')) || {};
 				const selected = stateObject.selected ? stateObject.selected.split('.')[1] : undefined;
@@ -278,19 +337,34 @@ export default function EditDescriptorModelProperties(props) {
 				utils.assignPathValue(this.model, statePath.join('.'), stateObject);
 
 				// write the current choice value into the state
-				const choiceObject = utils.resolvePath(this.model, [name, selected].join('.'));
+				let choiceObject = utils.resolvePath(this.model, [name, selected].join('.'));
+				let isTopCase = false;
 				if (choiceObject) {
-					utils.assignPathValue(stateObject, ['case', selected].join('.'), _.cloneDeep(choiceObject));
+					isTopCase = true;
+					choiceObject = utils.resolvePath(this.model, [selected].join('.'));
+				}
+				utils.assignPathValue(stateObject, [selected].join('.'), _.cloneDeep(choiceObject));
+
+				if(selected) {
+					if(this.model.uiState.choice.hasOwnProperty(name)) {
+						delete this.model[selected];
+						utils.removePathValue(this.model, [name, selected].join('.'), isTopCase);
+					} else {
+						// remove the current choice value from the model
+						utils.removePathValue(this.model, [name, selected].join('.'), isTopCase);
+					}
 				}
-
-				// remove the current choice value from the model
-				utils.removePathValue(this.model, [name, selected].join('.'));
 
 				// get any state for the new selected choice
-				const newChoiceObject = utils.resolvePath(stateObject, ['case', value].join('.')) || {};
+				const newChoiceObject = utils.resolvePath(stateObject, [value].join('.')) || {};
 
 				// assign new choice value to the model
-				utils.assignPathValue(this.model, [name, value].join('.'), newChoiceObject);
+				if (isTopCase) {
+					utils.assignPathValue(this.model, [name, value].join('.'), newChoiceObject);
+				} else {
+					utils.assignPathValue(this.model, [value].join('.'), newChoiceObject)
+				}
+
 
 				// update the selected name
 				utils.assignPathValue(this.model, statePath.concat('selected').join('.'), value);
@@ -317,7 +391,7 @@ export default function EditDescriptorModelProperties(props) {
 			return {optionName: d.name};
 		});
 
-		const options = [{optionName: ''}].concat(cases).map((d, i) => {
+		const options = [{optionName: '', optionValue: false}].concat(cases).map((d, i) => {
 			return (
 				<option key={i} value={d.optionValue} title={d.optionTitle}>
 					{d.optionName}
@@ -337,11 +411,19 @@ export default function EditDescriptorModelProperties(props) {
 			if(fieldProperties) {
 				//Check each case statement in model and see if it is present in container model.
 				cases.map(function(c){
-					if(fieldProperties.hasOwnProperty(c.optionName)) {
+					if(fieldProperties.hasOwnProperty(c.optionValue.split('.')[1])) {
 						utils.assignPathValue(container.model, ['uiState.choice', selectName, 'selected'].join('.'), c.optionValue);
 					}
 				});
 				selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', selectName, 'selected'].join('.'));
+			} else {
+				property.properties.map(function(p) {
+					let pname = p.properties[0].name;
+					if(container.model.hasOwnProperty(pname)) {
+						utils.assignPathValue(container.model, ['uiState.choice', selectName, 'selected'].join('.'), [p.name, pname].join('.'));
+					}
+				})
+				selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', selectName, 'selected'].join('.'));
 			}
 		}
 		//If selectedOptionValue is present, take first item in string which represents the case name.
@@ -358,13 +440,13 @@ export default function EditDescriptorModelProperties(props) {
 					{build(container, d, childPath, childValue, props)}
 				</div>
 			);
-		}) : (!isMissingDescriptorMeta) ? build(container, valueProperty, path.concat(valueProperty.name), utils.resolvePath(container.model, path.concat(valueProperty.name).join('.'))) : null
+		}) : (!isMissingDescriptorMeta) ? build(container, valueProperty, path.concat(valueProperty.name), utils.resolvePath(container.model, path.concat(valueProperty.name).join('.')) || container.model[valueProperty.name]) : null
 		// end magic
 		const onFocus = onFocusPropertyFormInputElement.bind(container, property, path, value);
 
 		return (
 			<div key={key} className="choice">
-				<select key={Date.now()} className={ClassNames({'-value-not-set': !selectedOptionValue})} name={selectName} value={selectedOptionValue} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing}>
+				<select key={Date.now()} className={ClassNames({'-value-not-set': !selectedOptionValue})} name={selectName} value={selectedOptionValue} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing} readOnly={!isEditable}>
 					{options}
 				</select>
 				{valueResponse}
@@ -510,6 +592,14 @@ export default function EditDescriptorModelProperties(props) {
 
 		if (property.type === 'choice') {
 			value = utils.resolvePath(container.model, ['uiState.choice'].concat(path, 'selected').join('.'));
+			if(!value) {
+				property.properties.map(function(p) {
+					let pname = p.properties[0].name;
+					if(container.model.hasOwnProperty(pname)) {
+						value = container.model[pname];
+					}
+				})
+			}
 		}
 
 		let displayValue = typeof value === 'object' ? '' : value;