diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes')
3 files changed, 372 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts new file mode 100644 index 0000000000..84769d7a62 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts @@ -0,0 +1,217 @@ +'use strict'; +import { + AttributeModel, + AttributesGroup, + Component, + ComponentInstance, + PropertyModel, + PropertiesGroup +} from "app/models"; +import {ICompositionViewModelScope} from "../../composition-view-model"; +import {ModalsHandler} from "app/utils"; +import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; +import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; + +interface IResourcePropertiesAndAttributesViewModelScope extends ICompositionViewModelScope { + properties:PropertiesGroup; + attributes:AttributesGroup; + propertiesMessage:string; + groupPropertiesByInstance:boolean; + showGroupsOfInstanceProperties:Array<boolean>; + addProperty():void; + updateProperty(property:PropertyModel):void; + deleteProperty(property:PropertyModel):void; + viewAttribute(attribute:AttributeModel):void; + groupNameByKey(key:string):string; + isPropertyOwner():boolean; + getComponentInstanceNameFromInstanceByKey(key:string):string; +} + +export class ResourcePropertiesViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$uibModal', + 'ModalsHandler', + 'ComponentServiceNg2' + + ]; + + + constructor(private $scope:IResourcePropertiesAndAttributesViewModelScope, + private $filter:ng.IFilterService, + private $uibModal:ng.ui.bootstrap.IModalService, + private ModalsHandler:ModalsHandler, + private ComponentServiceNg2:ComponentServiceNg2) { + + this.getComponentInstancesPropertiesAndAttributes(); + } + + private initComponentProperties = ():void => { + let result:PropertiesGroup = {}; + + if (this.$scope.selectedComponent) { + this.$scope.propertiesMessage = undefined; + this.$scope.groupPropertiesByInstance = false; + if (this.$scope.isComponentInstanceSelected()) { + if (this.$scope.currentComponent.selectedInstance.originType === 'VF') { + this.$scope.groupPropertiesByInstance = true; + } + result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesProperties[this.$scope.currentComponent.selectedInstance.uniqueId]; + } else if (this.$scope.currentComponent.isService()) { + // Temporally fix to hide properties for service (UI stack when there are many properties) + result = this.$scope.currentComponent.componentInstancesProperties; + this.$scope.propertiesMessage = "Note: properties for service are disabled"; + } else { + let key = this.$scope.selectedComponent.uniqueId; + result[key] = Array<PropertyModel>(); + let derived = Array<PropertyModel>(); + _.forEach(this.$scope.selectedComponent.properties, (property:PropertyModel) => { + if (key == property.parentUniqueId) { + result[key].push(property); + } else { + property.readonly = true; + derived.push(property); + } + }); + if (derived.length) { + result['derived'] = derived; + } + } + this.$scope.properties = result; + } + }; + + + private initComponentAttributes = ():void => { + let result:AttributesGroup = {}; + + if (this.$scope.selectedComponent) { + if (this.$scope.isComponentInstanceSelected()) { + result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesAttributes[this.$scope.currentComponent.selectedInstance.uniqueId]; + } else if (this.$scope.currentComponent.isService()) { + result = this.$scope.currentComponent.componentInstancesAttributes; + } + this.$scope.attributes = result; + } + }; + + /** + * This function is checking if the component is the value owner of the current property + * in order to notify the edit property modal which fields to disable + */ + private isPropertyValueOwner = ():boolean => { + return this.$scope.currentComponent.isService() || !!this.$scope.currentComponent.selectedInstance; + }; + + /** + * The function opens the edit property modal. + * It checks if the property is from the VF or from one of it's resource instances and sends the needed property list. + * For create property reasons an empty array is transferd + * + * @param property the wanted property to edit/create + */ + private openEditPropertyModal = (property:PropertyModel):void => { + this.ModalsHandler.openEditPropertyModal(property, + this.$scope.component, + (this.$scope.isPropertyOwner() ? + this.$scope.properties[property.parentUniqueId] : + this.$scope.properties[property.resourceInstanceUniqueId]) || [], + this.isPropertyValueOwner()).then(() => { + }); + }; + + private openAttributeModal = (atrribute:AttributeModel):void => { + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: 'app/view-models/forms/attribute-form/attribute-form-view.html', + controller: 'Sdc.ViewModels.AttributeFormViewModel', + size: 'sdc-md', + backdrop: 'static', + keyboard: false, + resolve: { + attribute: ():AttributeModel => { + return atrribute; + }, + component: ():Component => { + return this.$scope.currentComponent; + } + } + }; + this.$uibModal.open(modalOptions); + }; + + private getComponentInstancesPropertiesAndAttributes = () => { + + this.ComponentServiceNg2.getComponentInstanceAttributesAndProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => { + this.$scope.currentComponent.componentInstancesAttributes = genericResponse.componentInstancesAttributes; + this.$scope.currentComponent.componentInstancesProperties = genericResponse.componentInstancesProperties; + this.initScope(); + }); + }; + + private initScope = ():void => { + + + this.initComponentProperties(); + this.initComponentAttributes(); + + this.$scope.$watchCollection('currentComponent.properties', (newData:any):void => { + this.initComponentProperties(); + }); + + this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => { + if (angular.isDefined(newInstance)) { + this.initComponentProperties(); + this.initComponentAttributes(); + + } + }); + + this.$scope.isPropertyOwner = ():boolean => { + return this.$scope.currentComponent && this.$scope.currentComponent.isResource() && !this.$scope.isComponentInstanceSelected(); + }; + + this.$scope.updateProperty = (property:PropertyModel):void => { + this.openEditPropertyModal(property); + }; + + this.$scope.deleteProperty = (property:PropertyModel):void => { + + let onOk = ():void => { + this.$scope.currentComponent.deleteProperty(property.uniqueId); + }; + + let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + + this.$scope.viewAttribute = (attribute:AttributeModel):void => { + this.openAttributeModal(attribute); + }; + + this.$scope.groupNameByKey = (key:string):string => { + switch (key) { + case 'derived': + return "Derived"; + + case this.$scope.currentComponent.uniqueId: + return this.$filter("resourceName")(this.$scope.currentComponent.name); + + default: + return this.$filter("resourceName")((_.find(this.$scope.currentComponent.componentInstances, {uniqueId: key})).name); + } + }; + + this.$scope.getComponentInstanceNameFromInstanceByKey = (key:string):string => { + let instanceName:string = ""; + if (key !== undefined && this.$scope.selectedComponent.uniqueId == this.$scope.currentComponent.selectedInstance.componentUid) { + instanceName = this.$filter("resourceName")((_.find(this.$scope.selectedComponent.componentInstances, {uniqueId: key})).name); + } + return instanceName; + }; + + } +} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html new file mode 100644 index 0000000000..6df8b6a4d6 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html @@ -0,0 +1,117 @@ +<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content properties" id="main-scroll"> + + <div class="w-sdc-designer-sidebar-section"> + + <!--expand-collapse data-ng-if="isPropertyOwner() && !currentComponent.properties.length" expanded-selector=".w-sdc-composition-sidebar-section-content.{{currentComponent.name}}" + class="w-sdc-composition-sidebar-section-title"> + <span class="w-sdc-composition-sidebar-section-title-text" tooltips tooltip-content="{{currentComponent.name | resourceName}} Properties" + data-ng-bind="(currentComponent.name | resourceName)+ ' Properties'"></span> + <div class="w-sdc-composition-sidebar-section-title-icon"></div> + </expand-collapse--> + <!--properties--> + <expand-collapse data-ng-repeat-start="(key, group) in properties" + expanded-selector=".w-sdc-designer-sidebar-section-content.properties.{{$index}}"> + <div class="first-level"> + <div class="expand-collapse-title-icon"></div> + <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Properties'" + tooltips tooltip-content="{{groupNameByKey(key)}} Properties" + data-tests-id="vfi-properties"></span> + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content properties {{$index}}"> <!--data-ng-show="isShowDetailsSection" --> + <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="!groupPropertiesByInstance"> + <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow" + data-ng-repeat="property in group | orderBy: 'name' track by $index"> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" + data-ng-class="{'hand enabled': !$parent.isViewOnly}" + tooltips tooltip-content="{{property.name}}" + data-ng-click="!$parent.isViewOnly && updateProperty(property)" + data-tests-id="{{property.name}}">{{property.name}}</span> + </div> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()" + tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span> + <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()" + tooltips tooltip-content="{{property.value}}" + data-tests-id="value_{{property.name}}">{{property.value}}</span> + </div> + <button class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete" + data-ng-if="!$parent.isViewOnly&&(isPropertyOwner() && !property.readonly)" + data-ng-click="deleteProperty(property)" type="button"></button> + </div> + </div> + <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="groupPropertiesByInstance"> + <div data-ng-repeat-start="(instancesIds , InstanceProperties) in (group | groupBy:'path')" + class="vfci-properties-group" + data-ng-click="showGroupsOfInstanceProperties[$index]=!showGroupsOfInstanceProperties[$index]" + data-ng-class="{'expanded':showGroupsOfInstanceProperties[$index]}"> + <div class="second-level"> + <div class="expand-collapse-title-icon"></div> + <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1]) + ' Properties'" + tooltips tooltip-content="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1])}} Properties" + data-tests-id="vfci-properties"></span> + </div> + </div> + <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content instance-properties {{$index}}" data-ng-if="showGroupsOfInstanceProperties[$index]"> + <div class="i-sdc-designer-sidebar-section-content-item"> + <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow" + data-ng-repeat="instanceProperty in InstanceProperties | orderBy: 'name'"> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" + data-ng-class="{'hand enabled': !$parent.isViewOnly}" + tooltips tooltip-content="{{instanceProperty.name}}" + data-tests-id="vfci-property">{{instanceProperty.name}}</span> + </div> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-value" + tooltips tooltip-content="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}"> + {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span> + </div> + </div> + </div> + </div> + </div> + <!--<div class="w-sdc-designer-sidebar-section-footer" data-ng-if="(!$parent.isViewOnly && isPropertyOwner()) || showAddPropertyButton">--> + <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="addGrey" data-ng-click="addProperty()" type="button">--> + <!--Add Property--> + <!--</button>--> + <!--</div>--> + </div> + + + <!--attributes--> + <expand-collapse data-ng-repeat-start="(key, group) in attributes" + expanded-selector=".w-sdc-designer-sidebar-section-content.attributes.{{$index}}"> + <div class="first-level"> + <div class="expand-collapse-title-icon"></div> + <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Attributes'" + tooltips tooltip-content="{{groupNameByKey(key)}} Attributes"></span> + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content attributes {{$index}}"> <!--data-ng-show="isShowDetailsSection" --> + <div class="i-sdc-designer-sidebar-section-content-item"> + <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" + data-ng-repeat="attribute in group | orderBy: 'name' track by $index"> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" + data-ng-class="{'hand enabled': !$parent.isViewOnly}" + tooltips tooltip-content="{{attribute.name}}" + data-ng-click="!$parent.isViewOnly && viewAttribute(attribute)" + data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span> + </div> + <div> + <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()" + tooltips tooltip-content="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span> + <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()" + tooltips tooltip-content="{{attribute.value}}" data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span> + </div> + </div> + </div> + + </div> + + </div> +</perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less new file mode 100644 index 0000000000..41a90bff9d --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less @@ -0,0 +1,38 @@ +.w-sdc-designer-sidebar-tab-content.properties { + .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{ + font-weight: bold; + } + .i-sdc-designer-sidebar-section-content-item-button.update{ + right: 17px; + } + .i-sdc-designer-sidebar-section-content-item-button.delete{ + right: 35px; + } + + .w-sdc-designer-sidebar-properties-disabled { + .s_14_m; + padding: 20px 20px; + } + + .vfci-properties-group{ + background-color: @func_color_r; + } + + .expand-collapse-title-icon{ + .hand; + .sprite-new; + .expand-collapse-plus-icon; + vertical-align: middle; + margin: 0 6px; + } + + .expanded { + .expand-collapse-title-icon { + .expand-collapse-minus-icon; + } + } + + .w-sdc-designer-sidebar-section-title-text{ + vertical-align: middle; + } +} |