diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
6 files changed, 469 insertions, 6 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html new file mode 100644 index 0000000000..d71a4fbecb --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html @@ -0,0 +1,35 @@ +<div class="service-dependencies"> + <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> + <div class="checkbox-label-mark-as-dependent"> + <checkbox + class="checkbox-label" + data-tests-id="checkbox-mark-as-dependent" + [label]="'Mark as Dependent'" + (checkedChange)="onMarkAsDependent()" + [(checked)]="isDependent" + [disabled]="readonly"> + </checkbox> + </div> + <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent"> + + <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}" + *ngFor="let rule of rulesList; let i = index"> + <div class="rule-details" [ngClass]="{'readonly': readonly}"> + <div class="rule-desc" (click)="!readonly && onSelectRule(i)" tooltips tooltip="{{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}"> + {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}} + </div> + <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span> + </div> + </div> + + <div class="w-sdc-designer-sidebar-section-footer" > + <button + class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue" + data-tests-id="add-rule-button" + (click)="onAddRule()" + [disabled]="readonly"> + {{'SERVICE_DEPENDENCY_ADD_RULE' | translate}} + </button> + </div> + </div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less new file mode 100644 index 0000000000..ae990dc85f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -0,0 +1,70 @@ +@import './../../../../../assets/styles/variables.less'; +@import './../../../../../assets/styles/variables-old.less'; +@import './../../../../../assets/styles/mixins_old.less'; +@import './../../../../../assets/styles/mixins.less'; + +.service-dependencies { + + /deep/ .checkbox-label-mark-as-dependent { + padding: 7px 18px; + position: relative; + height: 61px; + color: @main_color_a; + box-shadow: 0 2px 7px @main_color_o; + border-bottom: 1px solid @main_color_o; + .checkbox-label { + margin-top: 14px; + .checkbox-label-content { + font-size: 14px; + } + } + .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { + opacity: 0.5; + } + + loader { + top: 20px; + } + } + + .i-sdc-designer-sidebar-section-content-item-rules-section { + .i-sdc-designer-sidebar-section-content-item-rule { + border-bottom: 1px solid @main_color_o; + padding: 5px 10px 5px 18px; + position: relative; + height: 61px; + display: flex; + align-items: center; + justify-content: space-between; + + .rule-details { + .s_1; + display: flex; + flex: 1; + align-items: center; + justify-content: space-between; + margin-left: 5px; + width: 180px; + .delete-icon { + visibility: hidden; + } + &:not(.readonly):hover { + .a_1; + } + &:hover .delete-icon{ + visibility: visible; + } + &.readonly { + opacity: 0.5; + } + } + .rule-desc { + .sdc-ellipsis; + width: 220px; + position: relative; + padding-right: 1em; + } + + } + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts new file mode 100644 index 0000000000..ac87576540 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -0,0 +1,325 @@ +/*! + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import {Component, Input, Output, EventEmitter, ComponentRef} from '@angular/core'; +import {ModalService} from 'app/ng2/services/modal.service'; +import {Service, ComponentInstance, ModalModel, ButtonModel, PropertyBEModel, ServiceInstanceObject} from 'app/models'; +import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component'; +import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; +import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; +import {TranslateService} from 'app/ng2/shared/translator/translate.service'; + +export class ConstraintObject { + servicePropertyName: string; + constraintOperator: string; + sourceType: string; + sourceName: string; + value: string; + + constructor(input?: any) { + if (input) { + this.servicePropertyName = input.servicePropertyName; + this.constraintOperator = input.constraintOperator; + this.sourceType = input.sourceType; + this.sourceName = input.sourceName; + this.value = input.value; + } + } +} + +export class ConstraintObjectUI extends ConstraintObject{ + isValidValue: boolean; + + constructor(input?: any) { + super(input); + if(input) { + this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== ''; + } + } + + public updateValidity(isValidValue: boolean) { + this.isValidValue = isValidValue; + } + + public isValidRule(isStatic) { + let isValidValue = isStatic ? this.isValidValue : true; + return this.servicePropertyName != null && this.servicePropertyName !== '' + && this.value != null && this.value !== '' && isValidValue; + } +} + +export const OPERATOR_TYPES = { + EQUAL: 'equal', + GREATER_THAN: 'greater_than', + LESS_THAN: 'less_than' +}; + +class I18nTexts { + static uncheckModalTitle: string; + static uncheckModalText: string; + static modalApprove: string; + static modalCancel: string; + static modalCreate: string; + static modalSave: string; + static modalDelete: string; + static addRuleTxt: string; + static updateRuleTxt: string; + static deleteRuleTxt: string; + static deleteRuleMsg: string; + + public static translateTexts(translateService) { + I18nTexts.uncheckModalTitle = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TITLE"); + I18nTexts.uncheckModalText = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TEXT"); + I18nTexts.modalApprove = translateService.translate("MODAL_APPROVE"); + I18nTexts.modalCancel = translateService.translate("MODAL_CANCEL"); + I18nTexts.modalCreate = translateService.translate("MODAL_CREATE"); + I18nTexts.modalSave = translateService.translate("MODAL_SAVE"); + I18nTexts.modalDelete = translateService.translate("MODAL_DELETE"); + I18nTexts.addRuleTxt = translateService.translate("SERVICE_DEPENDENCY_ADD_RULE"); + I18nTexts.updateRuleTxt = translateService.translate("SERVICE_DEPENDENCY_UPDATE_RULE"); + I18nTexts.deleteRuleTxt = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE"); + I18nTexts.deleteRuleMsg = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE_MSG"); + } +} + + +@Component({ + selector: 'service-dependencies', + templateUrl: './service-dependencies.component.html', + styleUrls: ['service-dependencies.component.less'], + providers: [ModalService, TranslateService] +}) + +export class ServiceDependenciesComponent { + modalInstance: ComponentRef<ModalComponent>; + isDependent: boolean; + isLoading: boolean; + compositeServiceProperties: Array<PropertyBEModel> = []; + rulesList: Array<ConstraintObject> = []; + operatorTypes: Array<any>; + + @Input() readonly: boolean; + @Input() compositeService: Service; + @Input() currentServiceInstance: ComponentInstance; + @Input() selectedInstanceSiblings: Array<ServiceInstanceObject>; + @Input() selectedInstanceConstraints: Array<ConstraintObject> = []; + @Input() selectedInstanceProperties: Array<PropertyBEModel> = []; + @Output() updateRulesListEvent:EventEmitter<Array<ConstraintObject>> = new EventEmitter<Array<ConstraintObject>>(); + @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter(); + @Output() dependencyStatus = new EventEmitter<boolean>(); + + + constructor(private componentServiceNg2: ComponentServiceNg2, private ModalServiceNg2: ModalService, private translateService: TranslateService) { + } + + ngOnInit() { + this.isLoading = false; + this.operatorTypes = [ + {label: ">", value: OPERATOR_TYPES.GREATER_THAN}, + {label: "<", value: OPERATOR_TYPES.LESS_THAN}, + {label: "=", value: OPERATOR_TYPES.EQUAL} + ]; + this.componentServiceNg2.getServiceProperties(this.compositeService).subscribe((properties: Array<PropertyBEModel>) => { + this.compositeServiceProperties = properties; + }); + this.loadRules(); + this.translateService.languageChangedObservable.subscribe(lang => { + I18nTexts.translateTexts(this.translateService); + }); + } + + ngOnChanges(changes) { + if(changes.currentServiceInstance) { + this.currentServiceInstance = changes.currentServiceInstance.currentValue; + this.isDependent = this.currentServiceInstance.isDependent(); + } + if(changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) { + this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue; + this.loadRules(); + } + } + + public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => { + let actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); + let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); + let modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]); + return this.ModalServiceNg2.createCustomModal(modalModel); + } + + loadRules() { + this.rulesList = this.selectedInstanceConstraints && this.selectedInstanceConstraints.map((co: ConstraintObject) => ({ + servicePropertyName: co.servicePropertyName, + constraintOperator: co.constraintOperator, + sourceType: co.sourceType, + sourceName: co.sourceName !== 'SELF' ? co.sourceName : this.compositeService.name, + value: co.value, + })); + } + + onUncheckDependency = () => { + this.ModalServiceNg2.closeCurrentModal(); + this.isLoading = true; + let isDepOrig = this.isDependent; + let rulesListOrig = this.rulesList; + this.currentServiceInstance.unmarkAsDependent(); + this.updateComponentInstance(isDepOrig, rulesListOrig); + } + + onCloseRemoveDependencyModal = () => { + this.isDependent = true; + this.ModalServiceNg2.closeCurrentModal(); + } + + onCheckDependency = () => { + let isDepOrig = this.isDependent; + let rulesListOrig = this.rulesList; + this.currentServiceInstance.markAsDependent(); + this.rulesList = []; + this.updateComponentInstance(isDepOrig, rulesListOrig); + } + + onMarkAsDependent() { + if(!this.currentServiceInstance.isDependent()) { + this.onCheckDependency(); + } + else { + this.openRemoveDependencyModal().instance.open(); + } + } + + updateComponentInstance(isDependent_origVal : boolean, rulesList_orig: Array<ConstraintObject>) { + this.isLoading = true; + this.componentServiceNg2.updateComponentInstance(this.compositeService, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => { + this.currentServiceInstance = new ComponentInstance(updatedServiceIns); + this.isDependent = this.currentServiceInstance.isDependent(); + this.dependencyStatus.emit(this.isDependent); + if(this.isDependent) { + this.loadRulesListEvent.emit(); + } + this.isLoading = false; + }, err=> { + this.isDependent = isDependent_origVal; + this.rulesList = rulesList_orig; + this.isLoading = false; + console.log('An error has occurred.'); + }); + } + + onAddRule () { + let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal); + let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); + let modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard'); + this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal( + this.modalInstance, + ServiceDependenciesEditorComponent, + { + currentServiceName: this.currentServiceInstance.name, + operatorTypes: this.operatorTypes, + compositeServiceName: this.compositeService.name, + compositeServiceProperties: this.compositeServiceProperties, + selectedInstanceProperties: this.selectedInstanceProperties, + selectedInstanceSiblings: this.selectedInstanceSiblings + } + ); + this.modalInstance.instance.open(); + } + + onSelectRule(index: number) { + let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal); + let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); + let modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard'); + this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal( + this.modalInstance, + ServiceDependenciesEditorComponent, + { + serviceRuleIndex: index, + serviceRules: _.map(this.rulesList, rule => new ConstraintObjectUI(rule)), + currentServiceName: this.currentServiceInstance.name, + operatorTypes: this.operatorTypes, + compositeServiceName: this.compositeService.name, + compositeServiceProperties: this.compositeServiceProperties, + selectedInstanceProperties: this.selectedInstanceProperties, + selectedInstanceSiblings: this.selectedInstanceSiblings + } + ); + this.modalInstance.instance.open(); + } + + getDisabled = ():boolean => { + return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); + }; + + createRule = ():void => { + let newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule); + this.isLoading = true; + this.componentServiceNg2.createServiceFilterConstraints( + this.compositeService, + this.currentServiceInstance, + newRuleToCreate + ).subscribe( (response) => { + this.updateRulesListEvent.emit(response.properties); + this.isLoading = false; + }, err=> { + this.isLoading = false; + }); + this.ModalServiceNg2.closeCurrentModal(); + }; + + updateRules = ():void => { + let allRulesToUpdate: Array<ConstraintObject> = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map(rule => new ConstraintObject(rule)); + this.isLoading = true; + this.componentServiceNg2.updateServiceFilterConstraints( + this.compositeService, + this.currentServiceInstance, + allRulesToUpdate + ).subscribe((response) => { + this.updateRulesListEvent.emit(response.properties); + this.isLoading = false; + }, err => { + this.isLoading = false; + }); + this.ModalServiceNg2.closeCurrentModal(); + } + + getSymbol(constraintOperator) { + switch (constraintOperator) { + case OPERATOR_TYPES.LESS_THAN: return '<'; + case OPERATOR_TYPES.EQUAL: return '='; + case OPERATOR_TYPES.GREATER_THAN: return '>'; + } + } + + onDeleteRule = (index:number) => { + this.isLoading = true; + this.componentServiceNg2.deleteServiceFilterConstraints( + this.compositeService, + this.currentServiceInstance, + index + ).subscribe( (response) => { + this.updateRulesListEvent.emit(response.properties); + this.isLoading = false; + }, err=> { + this.isLoading = false; + }); + this.ModalServiceNg2.closeCurrentModal(); + }; + + openDeleteModal = (index:number) => { + this.ModalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg, + I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open(); + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts new file mode 100644 index 0000000000..7e66ed99c7 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -0,0 +1,24 @@ + +import { NgModule } from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {ServiceDependenciesComponent} from "./service-dependencies.component"; +import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; +import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; + +@NgModule({ + declarations: [ + ServiceDependenciesComponent + ], + imports: [ + CommonModule, + UiElementsModule, + TranslateModule + ], + exports: [], + entryComponents: [ + ServiceDependenciesComponent + ], + providers: [] +}) +export class ServiceDependenciesModule { +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts index 76b0b9ec2b..4f283fb3f1 100644 --- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts @@ -175,8 +175,12 @@ export class DynamicElementComponent { tmp.push(new DropdownValue(true,'TRUE')); tmp.push(new DropdownValue(false,'FALSE')); this.cmpRef.instance.values = tmp; - if(!_.isUndefined(this.value)){//contains the real value (and not a string) - this.value = JSON.parse(this.value); + try { + if (typeof this.value === 'string') { + this.value = JSON.parse(this.value); + } + } catch(err) { + this.value = null; } break; diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less index 9df2680b6f..5c061a4b5e 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less @@ -38,11 +38,16 @@ width:0; height:0; display:none; - &:checked ~ .checkbox-icon::before{ - .sprite-new; - .filled-checkbox-icon + &:checked { + ~ .checkbox-icon::before{ + .sprite-new; + .filled-checkbox-icon + } + &[disabled] ~ .checkbox-icon::before { + opacity: 0.5; + } } - &[disabled] ~ .checkbox-icon::before { + &[disabled]:not(:checked) ~ .checkbox-icon::before { /* TODO: add disabled styles here */ background-image: none; background-color: #EFEFEF; |