X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FEditDescriptorModelProperties.js;h=2a5da2191323c17c03296b13dc0995c13f95e8ef;hb=e5aa91b58880274720c3ea58c48ea557dd05583f;hp=59d2f95d6b508606f4a77c09bc63bc2f323bd6ab;hpb=58b264f094f5351c5662a6d5640e65ea890c14f4;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 59d2f95d6..2a5da2191 100644 --- a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js +++ b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js @@ -39,19 +39,22 @@ 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' 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: []}; } @@ -69,16 +72,7 @@ function getTitle(model = {}) { return model.id; } } - -export default function EditDescriptorModelProperties(props) { - - const container = props.container; - - if (!(DescriptorModelFactory.isContainer(container))) { - return - } - - function startEditing() { +function startEditing() { DeletionManager.removeEventListeners(); } @@ -173,16 +167,19 @@ 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 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}); - const fieldValue = value ? value.constructor.name == "String" ? value : '' : undefined; + const fieldValue = value ? (value.constructor.name != "Object") ? value : '' : undefined; if (isEnumeration) { const enumeration = Property.getEnumeration(property, value); const options = enumeration.map((d, i) => { @@ -200,6 +197,26 @@ export default function EditDescriptorModelProperties(props) { return {options}; } + 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 {d.value}; + }); + const isValueSet = leafRefPathValues.filter(d => d.isSelected).length > 0; + if (!isValueSet || property.cardinality === '0..1') { + const noValueDisplayText = changeCase.title(property.name); + options.unshift({noValueDisplayText}); + } + return {options}; + } + if (property['preserve-line-breaks']) { return ; } @@ -238,16 +255,17 @@ export default function EditDescriptorModelProperties(props) { }); } - function buildChoice(container, property, path, value, key) { + function buildChoice(container, property, path, value, key, props={}) { function onFormFieldValueChanged(event) { if (DescriptorModelFactory.isContainer(this)) { 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 +273,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 +296,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('.')); - if (choiceObject) { - utils.assignPathValue(stateObject, ['case', selected].join('.'), _.cloneDeep(choiceObject)); + let choiceObject = utils.resolvePath(this.model, [name, selected].join('.')); + let isTopCase = false; + if (!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 +350,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 ( {d.optionName} @@ -337,11 +370,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,7 +399,7 @@ export default function EditDescriptorModelProperties(props) { {build(container, d, childPath, childValue, props)} ); - }) : (!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); @@ -468,15 +509,15 @@ export default function EditDescriptorModelProperties(props) { if (isMissingDescriptorMeta) { field = No Descriptor Meta for {property.name}; } else if (property.type === 'choice') { - field = buildChoice(container, property, valuePath, value, key.join(':')); + field = buildChoice(container, property, valuePath, value, key.join(':'), props); } else if (isSimpleListView) { - field = buildSimpleListItem(container, property, valuePath, value, key, index); + field = buildSimpleListItem(container, property, valuePath, value, key, index, props); } else if (isLeafList) { - field = buildLeafListItem(container, property, valuePath, value, key, index); + field = buildLeafListItem(container, property, valuePath, value, key, index, props); } else if (hasProperties) { - field = buildElement(container, property, valuePath, value, key.join(':')) + field = buildElement(container, property, valuePath, value, key.join(':'), props) } else { - field = buildField(container, property, valuePath, value, key.join(':')); + field = buildField(container, property, valuePath, value, key.join(':'), props); } function onClickLeaf(property, path, value, event) { @@ -510,6 +551,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; @@ -538,8 +587,17 @@ export default function EditDescriptorModelProperties(props) { ); } +export default function EditDescriptorModelProperties(props, type) { + + const container = props.container; + + if (!(DescriptorModelFactory.isContainer(container))) { + return + } + + - const containerType = container.uiState['qualified-type'] || container.uiState.type; + const containerType = (_.isEmpty(type) ? false : type)|| container.uiState['qualified-type'] || container.uiState.type; const basicProperties = getDescriptorMetaBasicForType(containerType).properties; function buildBasicGroup() { @@ -577,7 +635,7 @@ export default function EditDescriptorModelProperties(props) { {properties.map(property => { const path = [property.name]; const value = container.model[property.name]; - return build(container, property, path, value, {toggle: true, width: props.width}); + return build(container, property, path, value, _.assign({toggle: true, width: props.width}, props)); })} We need this so when the user closes the panel it won't shift away and scare the bj out of them! @@ -609,3 +667,6 @@ export default function EditDescriptorModelProperties(props) { ); } +export {build} +// export buildElement; +// export buildChoice;