diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability')
4 files changed, 319 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less new file mode 100644 index 0000000000..edcb87db3d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less @@ -0,0 +1,77 @@ +@import './../../../../../assets/styles/variables.less'; +@import './../../../../../assets/styles/mixins.less'; +.main-container{ + color: @main_color_m; +} +.select-req-or-cap-span { + float: left; + margin-right: 15px; + font-size: 13px; +} +.select-type-label{ + .m_12_m; + margin-bottom: 2px; +} +.select-type{ + display: flex; + margin-bottom: 10px; + ui-element-dropdown{ + width: 40%; + font-size: 13px; + /deep/ select{ + height: 31px; + } + } +} +.table-and-list-container{ + display: flex; + padding-top: 10px; + .inner-container{ + height: 300px; + overflow-y: auto; + border: @main_color_o solid 1px; + } + .inner-container:not(:last-of-type){ + border-right: none; + } + .requirements-or-capabilities-container { + width: 40%; + &.empty-list{ + background-color: @tlv_color_t; + text-align: center; + &:before{ + content: 'Select "type" above'; + line-height: 298px; + } + } + .req-or-cap-item{ + border-bottom: @main_color_o solid 1px; + padding: 10px; + font-size: 13px; + &:hover:not(.selected){ + background-color:@tlv_color_t; cursor:pointer; + } + } + } + .properties-table-container{ + width: 60%; + display: flex; + &.cap-selected{ + background-color: @tlv_color_t; + border: @main_color_a solid 1px; + -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + } + properties-table{ + margin: 15px; + width: 100%; + } + } +} + +.selected{ + color: @main_color_a; + background-color: @tlv_color_v; + border-left: @main_color_a solid 4px; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html new file mode 100644 index 0000000000..bcd33efc30 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html @@ -0,0 +1,36 @@ +<div class="main-container"> + <span class="select-req-or-cap-span">Select:</span><radio-buttons + [(value)]="selectedReqOrCapOption" + [options]="selectOptions" + [readonly]="disabledSelectReqOrCapOption" + [direction]="'horizontal'" + (valueChange)="onSelectRequirementOrCapability($event)"> + +</radio-buttons> + <label class="select-type-label">Select type:</label> + <div class="select-type"> + <ui-element-dropdown [values]="types" [(value)]="selectedType" (valueChange)="onTypeSelected($event)"></ui-element-dropdown> + </div> + + <div class="table-and-list-container"> + <div class="inner-container requirements-or-capabilities-container" [ngClass]="{'empty-list':!selectedType}"> + <div *ngFor="let item of displayCapReqListFilterByType" + class="req-or-cap-item" + (click)="selectReqOrCapFromList(item)" + [ngClass]="{'selected':selectedReqOrCapModel && (item.uniqueId + item.ownerId + item.name) == (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name)}"> + {{item.getFullTitle()}} + </div> + </div> + <div class="inner-container properties-table-container" *ngIf="selectedReqOrCapOption == 'Capability'" [ngClass]="{'cap-selected':selectedReqOrCapModel}"> + <properties-table *ngIf="selectedReqOrCapModel" + class="properties-table" + [readonly]="true" + [fePropertiesMap]="capabilityProperties" + [selectedPropertyId]="''" + [hidePropertyType]="true"> + </properties-table> + </div> + + </div> +</div> + diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts new file mode 100644 index 0000000000..ab67dc1850 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts @@ -0,0 +1,182 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core'; +import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models"; +import {Dictionary} from "lodash"; +import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; +import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils"; +import {Requirement} from "../../../../models/requirement"; +import {Capability, RequirementCapabilityModel} from "../../../../models/capability"; + +const REQUIREMENT = 'Requirement'; +const CAPABILITY = 'Capability'; + +@Component({ + selector: 'select-requirement-or-capability', + templateUrl: './select-requirement-or-capability.component.html', + styleUrls: ['./select-reqiurement-or-capability.component.less'] +}) + +export class SelectRequirementOrCapabilityComponent implements OnInit { + + + @Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements + @Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities + + @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability ) + + @Input() currentComponent:ComponentModel; + @Input() componentInstanceId:string; + + @Input() selectedReqOrCapModel:RequirementCapabilityModel; + + @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>(); + @Output() updateCapabilityProperties:EventEmitter<Array<PropertyModel>> = new EventEmitter<Array<PropertyModel>>(); + + types:Array<string> = []; + selectedType:string; + + selectOptions:Array<RadioButtonModel>; + + requirementsTypes:Array<string> = []; + capabilitiesTypes:Array<string> = []; + + disabledSelectReqOrCapOption: boolean; // If we need to disable the option to choose requirement or capability + displayCapReqListFilterByType:RequirementCapabilityModel[]; + + capabilityProperties:InstanceFePropertiesMap; + + constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2, + private propertiesUtils:PropertiesUtils) { + this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)]; + } + + private initDefaultReqOrCapSelection = (): void => { + if(this.selectedReqOrCapOption){//for second step + this.disabledSelectReqOrCapOption = true; + } + if (this.selectedReqOrCapModel) {//init when there is selected req or cap + if (this.selectedReqOrCapModel instanceof Capability) { + this.selectedReqOrCapOption = this.selectOptions[1].value; + this.selectedType = this.selectedReqOrCapModel.type; + } else { + this.selectedReqOrCapOption = this.selectOptions[0].value; + this.selectedType = (<Requirement>this.selectedReqOrCapModel).capability; + } + } + if(Object.keys(this.optionalCapabilitiesMap).length === 0) { // If instance don't have capabilities + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[0].value; + } else if(Object.keys(this.optionalRequirementsMap).length === 0) { // If instance don't have requirements + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[1].value; + } + this.selectedReqOrCapOption = this.selectedReqOrCapOption || this.selectOptions[1].value; + this.types = this.selectedReqOrCapOption == this.selectOptions[0].value ? this.requirementsTypes : this.capabilitiesTypes; + setTimeout(() => { + if (this.selectedType) { + this.initCapReqListFilterByType(); + } else { + this.setDefaultValueType(); + } + }); + } + + initCapabilityPropertiesTable = ():void => { + if(this.selectedReqOrCapModel instanceof Capability ) { + let selectedCapability = <Capability>this.selectedReqOrCapModel; + if(selectedCapability.properties){ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false); + } + } + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.selectedReqOrCapModel) { + if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) { + this.setCapabilityProperties(); + } + } + } + + ngOnInit() { + this.initTypesList(); + this.initDefaultReqOrCapSelection(); + this.initCapabilityPropertiesTable(); + } + + private initTypesList = ():void => { + this.requirementsTypes = _.keys(this.optionalRequirementsMap); + this.requirementsTypes.unshift('All'); + this.capabilitiesTypes = _.keys(this.optionalCapabilitiesMap); + this.capabilitiesTypes.unshift('All'); + } + + private fillInDisplayCapReqListFilterByType = (allOptionalTypesMap:Dictionary<RequirementCapabilityModel[]>):void => { + if(this.selectedType === 'All'){ + this.displayCapReqListFilterByType = []; + _.map(allOptionalTypesMap,(reqOrCapArray:RequirementCapabilityModel[])=>{ + this.displayCapReqListFilterByType = this.displayCapReqListFilterByType.concat(reqOrCapArray); + }) + }else{ + this.displayCapReqListFilterByType = allOptionalTypesMap[this.selectedType]; + } + + // automatically select a *single* requirement or capability: + if (this.displayCapReqListFilterByType.length === 1) { + const selectedReqCap:RequirementCapabilityModel = this.displayCapReqListFilterByType[0]; + this.selectReqOrCapFromList((this.selectedType === CAPABILITY) ? <Capability>selectedReqCap : <Requirement>selectedReqCap); + } + } + + private initCapReqListFilterByType = ():void => { + if (this.selectedReqOrCapOption === CAPABILITY) { + this.fillInDisplayCapReqListFilterByType(this.optionalCapabilitiesMap); + } else { + this.fillInDisplayCapReqListFilterByType(this.optionalRequirementsMap); + } + } + + private onTypeSelected = ():void => { + this.initCapReqListFilterByType(); + if (this.displayCapReqListFilterByType.indexOf(this.selectedReqOrCapModel) === -1) { + this.selectReqOrCapFromList(null); + } + } + + private setDefaultValueType = ():void =>{ + // automatically select a *single* type from the list: + this.selectedType = (this.types.length === 2) ? this.types[1] : this.types[0]; + this.initCapReqListFilterByType(); + } + + private onSelectRequirementOrCapability = ():void => { + this.types = this.selectedReqOrCapOption === REQUIREMENT ? this.requirementsTypes : this.capabilitiesTypes; + this.selectReqOrCapFromList(null); + this.setDefaultValueType(); + } + + private selectReqOrCapFromList = (selected:Requirement|Capability):void => { + if (this.selectedReqOrCapModel !== selected) { + this.selectedReqOrCapModel = selected; + this.updateSelectedReqOrCap.emit(selected); + } + } + + + private setCapabilityProperties = ():void => { + let selectedCapability = <Capability>this.selectedReqOrCapModel; + if (selectedCapability.properties === undefined) { + this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name) + .subscribe((response:Array<PropertyModel>) => { + this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null; + this.updateCapabilityProperties.emit(response); + }, error => {}); + }else{ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false); + this.updateCapabilityProperties.emit(selectedCapability.properties); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts new file mode 100644 index 0000000000..cb12dea02a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from "@angular/core"; +import {SelectRequirementOrCapabilityComponent} from "./select-requirement-or-capability.component"; +import {FormsModule} from "@angular/forms"; +import {FormElementsModule} from "../../ui/form-components/form-elements.module"; +import {CommonModule} from "@angular/common"; +import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module"; +import {PropertyTableModule} from "../properties-table/property-table.module"; + +@NgModule({ + declarations: [ + SelectRequirementOrCapabilityComponent + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + GlobalPipesModule, + PropertyTableModule], + + exports: [SelectRequirementOrCapabilityComponent], + providers: [] +}) +export class SelectRequirementOrCapabilityModule { +}
\ No newline at end of file |