diff options
Diffstat (limited to 'catalog-ui')
3 files changed, 213 insertions, 211 deletions
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html index 094045e8b4..590217d0a5 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html +++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html @@ -5,14 +5,14 @@ <!-- ATTRIBUTE NAME - MANDATORY --> <div> <sdc-input - #attributeName - label="Name" - [required]="true" - [(value)]="attributeToEdit.name" - [disabled]="isEdit" - name="attributeName" - testId="attributeName" - [maxLength]="255"> + #attributeName + label="Name" + [required]="true" + [(value)]="attributeToEdit.name" + [disabled]="isEdit" + name="attributeName" + testId="attributeName" + [maxLength]="255"> </sdc-input> <sdc-validation [validateElement]="attributeName" (validityChanged)="onValidityChange($event, 'name')"> <sdc-required-validator message="{{'VALIDATION_ERROR_REQUIRED' | translate : { 'field' : 'Name' } }}"></sdc-required-validator> @@ -38,6 +38,7 @@ <!-- ATTRIBUTE TYPE - MANDATORY --> <sdc-dropdown #attributeType [disabled]="false" label="Type" [required]="true" [selectedOption]="toDropDownOption(this.attributeToEdit.type)" placeHolder="Choose Type" + testId="attributeType" [options]="types" (changed)="onTypeSelected($event)"> <sdc-validation [validateElement]="attributeType" (validityChanged)="onValidityChange($event, 'type')"> <sdc-required-validator message="'required field'"></sdc-required-validator> @@ -48,15 +49,15 @@ <!-- ATTRIBUTE DEFAULT VALUE TEXT - OPTIONAL --> <div *ngIf="attributeToEdit.type != 'boolean'"> <sdc-input - #_default - [required]="false" - label="Default Value" - [(value)]="attributeToEdit._default" - [disabled]="false" - name="_default" - testId="defaultValue" - [maxLength]="255" - (valueChange)="defaultValueChanged()"> + #_default + [required]="false" + label="Default Value" + [(value)]="attributeToEdit._default" + [disabled]="false" + name="_default" + testId="defaultValue" + [maxLength]="255" + (valueChange)="defaultValueChanged()"> </sdc-input> <sdc-validation [validateElement]="_default" (validityChanged)="onValidityChange($event, 'default')"> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html index 6d50bbe11b..a04849a7f6 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html @@ -17,27 +17,27 @@ <div class="action-bar-wrapper"> <svg-icon-label - *ngIf="!(this.isViewOnly$ | async)" - class="add-attr-icon" - [name]="'plus'" - [mode]="'primary'" - [size]="'medium'" - [label]="'Add'" - [labelPlacement]="'right'" - [labelClassName]="'externalActionLabel'" - (click)="onAddAttribute()"> + *ngIf="!(this.isViewOnly$ | async)" + class="add-attr-icon" + [name]="'plus'" + [mode]="'primary'" + [size]="'medium'" + [label]="'Add'" + [labelPlacement]="'right'" + [labelClassName]="'externalActionLabel'" + (click)="onAddAttribute()"> </svg-icon-label> </div> <ngx-datatable - columnMode="flex" - [footerHeight]="0" - [limit]="50" - [headerHeight]="40" - [rowHeight]="35" - [rows]="attributes" - #componentAttributesTable - (activate)="onExpandRow($event)"> + columnMode="flex" + [footerHeight]="0" + [limit]="50" + [headerHeight]="40" + [rowHeight]="35" + [rows]="attributes" + #componentAttributesTable + (activate)="onExpandRow($event)"> <ngx-datatable-row-detail [rowHeight]="80"> <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template> @@ -48,9 +48,10 @@ <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="2"> <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded"> - <div class="expand-collapse-cell"> + <div class="expand-collapse-cell" [attr.data-tests-id]="'attrib-name_'+row.name"> <svg-icon [clickable]="true" class="expand-collapse-icon" - [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'" + [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" + [mode]="'primary'" [size]="'medium'"></svg-icon> <span>{{ row.name }}</span> </div> @@ -76,14 +77,16 @@ <svg-icon [clickable]="true" [mode]="'primary2'" [name]="'edit-o'" + [testId]="'edit_'+row.name" [size]="'medium'" (click)="onEditAttribute($event, row)"> </svg-icon> <svg-icon [clickable]="true" [mode]="'primary2'" [name]="'trash-o'" - (click)="onDeleteAttribute($event, row)" - [size]="'medium'"> + [testId]="'delete_'+row.name" + [size]="'medium'" + (click)="onDeleteAttribute($event, row)"> </svg-icon> </div> </ng-template> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts index ca8d5460e8..d85755bce8 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts @@ -1,188 +1,186 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { Select } from '@ngxs/store'; -import { IAttributeModel } from 'app/models'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Select} from '@ngxs/store'; +import {IAttributeModel} from 'app/models'; import * as _ from 'lodash'; -import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular'; -import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component'; -import { AttributeModel } from '../../../../models'; -import { Resource } from '../../../../models'; -import { ModalsHandler } from '../../../../utils'; -import { TopologyTemplateService } from '../../../../ng2/services/component-services/topology-template.service'; -import { TranslateService } from '../../../../ng2/shared/translator/translate.service'; -import { WorkspaceState } from '../../../../ng2/store/states/workspace.state'; -import { WorkspaceService } from '../../../../ng2/pages/workspace/workspace.service'; -import { AttributeModalComponent } from '../../../../ng2/pages/workspace/attributes/attribute-modal.component'; +import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular'; +import {ModalComponent} from 'onap-ui-angular/dist/modals/modal.component'; +import {AttributeModel, Resource} from '../../../../models'; +import {ModalsHandler} from '../../../../utils'; +import {TopologyTemplateService} from '../../../../ng2/services/component-services/topology-template.service'; +import {TranslateService} from '../../../../ng2/shared/translator/translate.service'; +import {WorkspaceState} from '../../../../ng2/store/states/workspace.state'; +import {WorkspaceService} from '../../../../ng2/pages/workspace/workspace.service'; +import {AttributeModalComponent} from '../../../../ng2/pages/workspace/attributes/attribute-modal.component'; @Component({ - selector: 'attributes', - templateUrl: './attributes.component.html', - styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less'] + selector: 'attributes', + templateUrl: './attributes.component.html', + styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less'] }) export class AttributesComponent implements OnInit { - @Select(WorkspaceState.isViewOnly) - isViewOnly$: boolean; - - @ViewChild('componentAttributesTable') - private table: any; - - private componentType: string; - private componentUid: string; - - private attributes: IAttributeModel[] = []; - private temp: IAttributeModel[] = []; - private customModalInstance: ModalComponent; - - constructor(private workspaceService: WorkspaceService, - private topologyTemplateService: TopologyTemplateService, - private modalsHandler: ModalsHandler, - private modalService: SdcUiServices.ModalService, - private loaderService: SdcUiServices.LoaderService, - private translateService: TranslateService) { - - this.componentType = this.workspaceService.metadata.componentType; - this.componentUid = this.workspaceService.metadata.uniqueId; - } - - ngOnInit(): void { - this.asyncInitComponent(); - } - - async asyncInitComponent() { - this.loaderService.activate(); - const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid); - this.attributes = response.attributes; - this.temp = [...response.attributes]; - this.loaderService.deactivate(); - } + @Select(WorkspaceState.isViewOnly) + isViewOnly$: boolean; + + @ViewChild('componentAttributesTable') + private table: any; + + private componentType: string; + private componentUid: string; + + private attributes: IAttributeModel[] = []; + private temp: IAttributeModel[] = []; + private customModalInstance: ModalComponent; + + constructor(private workspaceService: WorkspaceService, + private topologyTemplateService: TopologyTemplateService, + private modalsHandler: ModalsHandler, + private modalService: SdcUiServices.ModalService, + private loaderService: SdcUiServices.LoaderService, + private translateService: TranslateService) { + + this.componentType = this.workspaceService.metadata.componentType; + this.componentUid = this.workspaceService.metadata.uniqueId; + } + + ngOnInit(): void { + this.asyncInitComponent(); + } + + async asyncInitComponent() { + this.loaderService.activate(); + const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid); + this.attributes = response.attributes; + this.temp = [...response.attributes]; + this.loaderService.deactivate(); + } + + getAttributes(): IAttributeModel[] { + return this.attributes; + } + + addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => { + this.loaderService.activate(); + let attributeFromServer: AttributeModel; + this.temp = [...this.attributes]; + + const deactivateLoader = () => { + this.loaderService.deactivate(); + return undefined; + }; - getAttributes(): IAttributeModel[] { - return this.attributes; + if (isEdit) { + attributeFromServer = await this.topologyTemplateService + .updateAttributeAsync(this.componentType, this.componentUid, attribute) + .catch(deactivateLoader); + if (attributeFromServer) { + const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId); + this.temp[indexOfUpdatedAttribute] = attributeFromServer; + } + } else { + attributeFromServer = await this.topologyTemplateService + .addAttributeAsync(this.componentType, this.componentUid, attribute) + .catch(deactivateLoader); + if (attributeFromServer) { + this.temp.push(attributeFromServer); + } } - - addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => { - this.loaderService.activate(); - let attributeFromServer: AttributeModel; - this.temp = [...this.attributes]; - - const deactivateLoader = () => { - this.loaderService.deactivate(); - return undefined; - }; - - if (isEdit) { - attributeFromServer = await this.topologyTemplateService - .updateAttributeAsync(this.componentType, this.componentUid, attribute) - .catch(deactivateLoader); - if (attributeFromServer) { - const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId); - this.temp[indexOfUpdatedAttribute] = attributeFromServer; - } - } else { - attributeFromServer = await this.topologyTemplateService - .addAttributeAsync(this.componentType, this.componentUid, attribute) - .catch(deactivateLoader); - if (attributeFromServer) { - this.temp.push(attributeFromServer); - } + this.attributes = this.temp; + this.loaderService.deactivate(); + } + + deleteAttribute = async (attributeToDelete: AttributeModel) => { + this.loaderService.activate(); + this.temp = [...this.attributes]; + const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete); + _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId); + this.attributes = this.temp; + this.loaderService.deactivate(); + }; + + openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) { + const component = new Resource(undefined, undefined, undefined); + component.componentType = this.componentType; + component.uniqueId = this.componentUid; + + const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE'); + const attributeModalConfig = { + title, + size: 'md', + type: SdcUiCommon.ModalType.custom, + buttons: [ + { + id: 'save', + text: 'Save', + // spinner_position: Placement.left, + size: 'sm', + callback: () => this.modalCallBack(isEdit), + closeModal: true, + disabled: false, } - this.attributes = this.temp; - this.loaderService.deactivate(); - } - - deleteAttribute = async (attributeToDelete: AttributeModel) => { - this.loaderService.activate(); - this.temp = [...this.attributes]; - const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete); - _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId); - this.attributes = this.temp; - this.loaderService.deactivate(); + ] as SdcUiCommon.IModalButtonComponent[] }; - openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) { - const component = new Resource(undefined, undefined, undefined); - component.componentType = this.componentType; - component.uniqueId = this.componentUid; - - const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE'); - const attributeModalConfig = { - title, - size: 'md', - type: SdcUiCommon.ModalType.custom, - buttons: [ - { - id: 'save', - text: 'Save', - // spinner_position: Placement.left, - size: 'sm', - callback: () => this.modalCallBack(isEdit), - closeModal: true, - disabled: false, - } - ] as SdcUiCommon.IModalButtonComponent[] - }; - - this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, { attributeToEdit: selectedRow }); - this.customModalInstance.innerModalContent.instance. - onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid); - } - - /*********************** - * Call Backs from UI * - ***********************/ - - /** - * Called when 'Add' is clicked - */ - onAddAttribute() { - this.openAddEditModal(new AttributeModel(), false); - } - - /** - * Called when 'Edit' button is clicked - */ - onEditAttribute(event, row) { - event.stopPropagation(); - - const attributeToEdit: AttributeModel = new AttributeModel(row); - this.openAddEditModal(attributeToEdit, true); - } - - /** - * Called when 'Delete' button is clicked - */ - onDeleteAttribute(event, row: AttributeModel) { - event.stopPropagation(); - const onOk = () => { - this.deleteAttribute(row); - }; - - const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE'); - const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT'); - const okButton = new SdcUiComponents.ModalButtonComponent(); - okButton.testId = 'OK'; - okButton.text = 'OK'; - okButton.type = SdcUiCommon.ButtonType.info; - okButton.closeModal = true; - okButton.callback = onOk; - - this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); - } - - onExpandRow(event) { - if (event.type === 'click') { - this.table.rowDetail.toggleExpandRow(event.row); - } - } + this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, {attributeToEdit: selectedRow}); + this.customModalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid); + } + + /*********************** + * Call Backs from UI * + ***********************/ + + /** + * Called when 'Add' is clicked + */ + onAddAttribute() { + this.openAddEditModal(new AttributeModel(), false); + } + + /** + * Called when 'Edit' button is clicked + */ + onEditAttribute(event, row) { + event.stopPropagation(); + + const attributeToEdit: AttributeModel = new AttributeModel(row); + this.openAddEditModal(attributeToEdit, true); + } + + /** + * Called when 'Delete' button is clicked + */ + onDeleteAttribute(event, row: AttributeModel) { + event.stopPropagation(); + const onOk = () => { + this.deleteAttribute(row); + }; - /** - * Callback from Modal after "Save" is clicked - * - * @param {boolean} isEdit - Whether modal is edit or add attribute - */ - modalCallBack = (isEdit: boolean) => { - const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit; - this.addOrUpdateAttribute(attribute, isEdit); + const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE'); + const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT', {name: row.name}); + const okButton = new SdcUiComponents.ModalButtonComponent(); + okButton.testId = 'OK'; + okButton.text = 'OK'; + okButton.type = SdcUiCommon.ButtonType.info; + okButton.closeModal = true; + okButton.callback = onOk; + + this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); + } + + onExpandRow(event) { + if (event.type === 'click') { + this.table.rowDetail.toggleExpandRow(event.row); } + } + + /** + * Callback from Modal after "Save" is clicked + * + * @param {boolean} isEdit - Whether modal is edit or add attribute + */ + modalCallBack = (isEdit: boolean) => { + const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit; + this.addOrUpdateAttribute(attribute, isEdit); + } } |