catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core';
   2 import { Select } from '@ngxs/store';
   3 import { IAttributeModel } from 'app/models';
   4 import * as _ from 'lodash';
   5 import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
   6 import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component';
   7 import { AttributeModel } from '../../../../models';
   8 import { Resource } from '../../../../models';
   9 import { ModalsHandler } from '../../../../utils';
  10 import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
  11 import { TranslateService } from '../../../shared/translator/translate.service';
  12 import { WorkspaceState } from '../../../store/states/workspace.state';
  13 import { WorkspaceService } from '../workspace.service';
  14 import { AttributeModalComponent } from './attribute-modal.component';
  15
  16 @Component({
  17     selector: 'attributes',
  18     templateUrl: './attributes.component.html',
  19     styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less']
  20 })
  21 export class AttributesComponent implements OnInit {
  22
  23     @Select(WorkspaceState.isViewOnly)
  24     isViewOnly$: boolean;
  25
  26     @ViewChild('componentAttributesTable')
  27     private table: any;
  28
  29     private componentType: string;
  30     private componentUid: string;
  31
  32     private attributes: IAttributeModel[] = [];
  33     private temp: IAttributeModel[] = [];
  34     private customModalInstance: ModalComponent;
  35
  36     constructor(private workspaceService: WorkspaceService,
  37                 private topologyTemplateService: TopologyTemplateService,
  38                 private modalsHandler: ModalsHandler,
  39                 private modalService: SdcUiServices.ModalService,
  40                 private loaderService: SdcUiServices.LoaderService,
  41                 private translateService: TranslateService) {
  42
  43         this.componentType = this.workspaceService.metadata.componentType;
  44         this.componentUid = this.workspaceService.metadata.uniqueId;
  45     }
  46
  47     ngOnInit(): void {
  48         this.asyncInitComponent();
  49     }
  50
  51     async asyncInitComponent() {
  52         this.loaderService.activate();
  53         const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid);
  54         this.attributes = response.attributes;
  55         this.temp = [...response.attributes];
  56         this.loaderService.deactivate();
  57     }
  58
  59     getAttributes(): IAttributeModel[] {
  60         return this.attributes;
  61     }
  62
  63     addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => {
  64         this.loaderService.activate();
  65         let attributeFromServer: AttributeModel;
  66         this.temp = [...this.attributes];
  67
  68         const deactivateLoader = () => {
  69             this.loaderService.deactivate();
  70             return undefined;
  71         };
  72
  73         if (isEdit) {
  74             attributeFromServer = await this.topologyTemplateService
  75                                     .updateAttributeAsync(this.componentType, this.componentUid, attribute)
  76                                     .catch(deactivateLoader);
  77             if (attributeFromServer) {
  78                 const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId);
  79                 this.temp[indexOfUpdatedAttribute] = attributeFromServer;
  80             }
  81         } else {
  82             attributeFromServer = await this.topologyTemplateService
  83                                     .addAttributeAsync(this.componentType, this.componentUid, attribute)
  84                                     .catch(deactivateLoader);
  85             if (attributeFromServer) {
  86                 this.temp.push(attributeFromServer);
  87             }
  88         }
  89         this.attributes = this.temp;
  90         this.loaderService.deactivate();
  91     }
  92
  93     deleteAttribute = async (attributeToDelete: AttributeModel) => {
  94         this.loaderService.activate();
  95         this.temp = [...this.attributes];
  96         const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete);
  97         _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId);
  98         this.attributes = this.temp;
  99         this.loaderService.deactivate();
 100     };
 101
 102     openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) {
 103         const component = new Resource(undefined, undefined, undefined);
 104         component.componentType = this.componentType;
 105         component.uniqueId = this.componentUid;
 106
 107         const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE');
 108         const attributeModalConfig = {
 109             title,
 110             size: 'md',
 111             type: SdcUiCommon.ModalType.custom,
 112             buttons: [
 113                 {
 114                     id: 'save',
 115                     text: 'Save',
 116                     // spinner_position: Placement.left,
 117                     size: 'sm',
 118                     callback: () => this.modalCallBack(isEdit),
 119                     closeModal: true,
 120                     disabled: false,
 121                 }
 122             ] as SdcUiCommon.IModalButtonComponent[]
 123         };
 124
 125         this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, { attributeToEdit: selectedRow });
 126         this.customModalInstance.innerModalContent.instance.
 127             onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid);
 128     }
 129
 130     /***********************
 131      * Call Backs from UI  *
 132      ***********************/
 133
 134     /**
 135      * Called when 'Add' is clicked
 136      */
 137     onAddAttribute() {
 138         this.openAddEditModal(new AttributeModel(), false);
 139     }
 140
 141     /**
 142      * Called when 'Edit' button is clicked
 143      */
 144     onEditAttribute(event, row) {
 145         event.stopPropagation();
 146
 147         const attributeToEdit: AttributeModel = new AttributeModel(row);
 148         this.openAddEditModal(attributeToEdit, true);
 149     }
 150
 151     /**
 152      * Called when 'Delete' button is clicked
 153      */
 154     onDeleteAttribute(event, row: AttributeModel) {
 155         event.stopPropagation();
 156         const onOk = () => {
 157             this.deleteAttribute(row);
 158         };
 159
 160         const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE');
 161         const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT');
 162         const okButton = new SdcUiComponents.ModalButtonComponent();
 163         okButton.testId = 'OK';
 164         okButton.text = 'OK';
 165         okButton.type = SdcUiCommon.ButtonType.info;
 166         okButton.closeModal = true;
 167         okButton.callback = onOk;
 168
 169         this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
 170     }
 171
 172     onExpandRow(event) {
 173         if (event.type === 'click') {
 174             this.table.rowDetail.toggleExpandRow(event.row);
 175         }
 176     }
 177
 178     /**
 179      * Callback from Modal after "Save" is clicked
 180      *
 181      * @param {boolean} isEdit - Whether modal is edit or add attribute
 182      */
 183     modalCallBack = (isEdit: boolean) => {
 184         const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit;
 185         this.addOrUpdateAttribute(attribute, isEdit);
 186     }
 187
 188 }