catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts

   1 import * as _ from "lodash";
   2 import {Component, Input, Output, ComponentRef, Inject} from '@angular/core';
   3 import {Component as IComponent} from 'app/models/components/component';
   4
   5 import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
   6 import {TranslateService} from "app/ng2/shared/translator/translate.service";
   7
   8 import {Observable} from "rxjs/Observable";
   9
  10 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
  11 import {ModalService} from 'app/ng2/services/modal.service';
  12 import {ModalModel, ButtonModel, InputBEModel, OperationModel, InterfaceModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
  13
  14 import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config";
  15 import {SdcUiComponents} from "sdc-ui/lib/angular";
  16 import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
  17
  18 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
  19 import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
  20 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
  21 import {PluginsService} from "app/ng2/services/plugins.service";
  22
  23 import {OperationCreatorComponent, OperationCreatorInput} from 'app/ng2/pages/interface-operation/operation-creator/operation-creator.component';
  24
  25 export class UIOperationModel extends OperationModel {
  26     isCollapsed: boolean = true;
  27     isEllipsis: boolean;
  28     MAX_LENGTH = 75;
  29     _description: string;
  30
  31     constructor(operation: OperationModel) {
  32         super(operation);
  33
  34         if (!operation.description) {
  35             this.description = '';
  36         }
  37
  38         if (this.description.length > this.MAX_LENGTH) {
  39             this.isEllipsis = true;
  40         } else {
  41             this.isEllipsis = false;
  42         }
  43     }
  44
  45     getDescriptionEllipsis(): string {
  46         if (this.isCollapsed && this.description.length > this.MAX_LENGTH) {
  47             return this.description.substr(0, this.MAX_LENGTH - 3) + '...';
  48         }
  49         return this.description;
  50     }
  51
  52     toggleCollapsed(e) {
  53         e.stopPropagation();
  54         this.isCollapsed = !this.isCollapsed;
  55     }
  56 }
  57
  58 class ModalTranslation {
  59     CREATE_TITLE: string;
  60     EDIT_TITLE: string;
  61     DELETE_TITLE: string;
  62     CANCEL_BUTTON: string;
  63     SAVE_BUTTON: string;
  64     CREATE_BUTTON: string;
  65     DELETE_BUTTON: string;
  66     deleteText: Function;
  67
  68     constructor(private TranslateService: TranslateService) {
  69         this.TranslateService.languageChangedObservable.subscribe(lang => {
  70             this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE");
  71             this.EDIT_TITLE = this.TranslateService.translate("INTERFACE_EDIT_TITLE");
  72             this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE");
  73             this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
  74             this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
  75             this.CREATE_BUTTON = this.TranslateService.translate("INTERFACE_CREATE_BUTTON");
  76             this.DELETE_BUTTON = this.TranslateService.translate("INTERFACE_DELETE_BUTTON");
  77             this.deleteText = (operationName) => this.TranslateService.translate("INTERFACE_DELETE_TEXT", {operationName});
  78         });
  79     }
  80 }
  81
  82 export class UIInterfaceModel extends InterfaceModel {
  83     isCollapsed: boolean = false;
  84
  85     constructor(interf?: any) {
  86         super(interf);
  87         this.operations = _.map(
  88             this.operations,
  89             operation => new UIOperationModel(operation)
  90         );
  91     }
  92
  93     toggleCollapse() {
  94         this.isCollapsed = !this.isCollapsed;
  95     }
  96 }
  97
  98 @Component({
  99     selector: 'interface-operation',
 100     templateUrl: './interface-operation.page.component.html',
 101     styleUrls: ['interface-operation.page.component.less'],
 102     providers: [ModalService, TranslateService]
 103 })
 104
 105 export class InterfaceOperationComponent {
 106
 107     interfaces: Array<UIInterfaceModel>;
 108     modalInstance: ComponentRef<ModalComponent>;
 109     openOperation: OperationModel;
 110     enableWorkflowAssociation: boolean;
 111     inputs: Array<InputBEModel>;
 112     isLoading: boolean;
 113     interfaceTypes:{ [interfaceType: string]: Array<string> };
 114     modalTranslation: ModalTranslation;
 115     workflowIsOnline: boolean;
 116     workflows: Array<any>;
 117
 118     @Input() component: IComponent;
 119     @Input() readonly: boolean;
 120     @Input() enableMenuItems: Function;
 121     @Input() disableMenuItems: Function;
 122
 123     constructor(
 124         @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
 125         @Inject("$state") private $state: ng.ui.IStateService,
 126         private TranslateService: TranslateService,
 127         private PluginsService: PluginsService,
 128         private ComponentServiceNg2: ComponentServiceNg2,
 129         private WorkflowServiceNg2: WorkflowServiceNg2,
 130         private ModalServiceNg2: ModalService,
 131         private ModalServiceSdcUI: SdcUiComponents.ModalService
 132     ) {
 133         this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation;
 134         this.modalTranslation = new ModalTranslation(TranslateService);
 135     }
 136
 137     ngOnInit(): void {
 138         this.isLoading = true;
 139         this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner'));
 140         const workflowSubscription = this.enableWorkflowAssociation && this.workflowIsOnline ? this.WorkflowServiceNg2.getWorkflows() : Promise.resolve();
 141         Observable.forkJoin(
 142             this.ComponentServiceNg2.getInterfaces(this.component),
 143             this.ComponentServiceNg2.getComponentInputs(this.component),
 144             this.ComponentServiceNg2.getInterfaceTypes(this.component),
 145             workflowSubscription
 146         ).subscribe((response: Array<any>) => {
 147             this.isLoading = false;
 148             this.initInterfaces(response[0].interfaces);
 149             this.sortInterfaces();
 150             this.inputs = response[1].inputs;
 151             this.interfaceTypes = response[2];
 152             this.workflows = response[3];
 153         });
 154     }
 155
 156     initInterfaces(interfaces: Array<InterfaceModel>): void {
 157         this.interfaces = _.map(interfaces, interf => new UIInterfaceModel(interf));
 158     }
 159
 160     sortInterfaces(): void {
 161         this.interfaces = _.filter(this.interfaces, interf => interf.operations && interf.operations.length > 0); // remove empty interfaces
 162         this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
 163         _.forEach(this.interfaces, interf => {
 164             interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
 165         });
 166     }
 167
 168     collapseAll(value: boolean = true): void {
 169         _.forEach(this.interfaces, interf => {
 170             interf.isCollapsed = value;
 171         });
 172     }
 173
 174     isAllCollapsed(): boolean {
 175         return _.every(this.interfaces, interf => interf.isCollapsed);
 176     }
 177
 178     isAllExpanded(): boolean {
 179         return _.every(this.interfaces, interf => !interf.isCollapsed);
 180     }
 181
 182     isListEmpty(): boolean {
 183         return _.filter(
 184             this.interfaces,
 185             interf => interf.operations && interf.operations.length > 0
 186         ).length === 0;
 187     }
 188
 189     getDisabled = (): boolean => {
 190         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
 191     }
 192
 193     onEditOperation = (operation?: OperationModel): void => {
 194
 195         const modalMap = {
 196             create: {
 197                 modalTitle: this.modalTranslation.CREATE_TITLE,
 198                 saveBtnText: this.modalTranslation.CREATE_BUTTON,
 199                 submitCallback: this.createOperation,
 200             },
 201             edit: {
 202                 modalTitle: this.modalTranslation.EDIT_TITLE,
 203                 saveBtnText: this.modalTranslation.SAVE_BUTTON,
 204                 submitCallback: this.updateOperation,
 205             }
 206         };
 207
 208         const modalData = operation ? modalMap.edit : modalMap.create;
 209
 210         if (this.openOperation) {
 211             if (operation ? operation.uniqueId === this.openOperation.uniqueId : !this.openOperation.uniqueId) {
 212                 operation = this.openOperation;
 213             }
 214         }
 215
 216         const cancelButton: IModalButtonComponent = {
 217             id: 'cancelButton',
 218             text: this.modalTranslation.CANCEL_BUTTON,
 219             type: 'secondary',
 220             size: 'small',
 221             closeModal: true,
 222             callback: () => {
 223                 this.openOperation = null;
 224             },
 225         };
 226
 227         const saveButton: IModalButtonComponent = {
 228             id: 'saveButton',
 229             text: modalData.saveBtnText,
 230             type: 'primary',
 231             size: 'small',
 232             closeModal: true,
 233             callback: () => {
 234                 const modalInstance = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance;
 235
 236                 const {operation, isUsingExistingWF, createParamLists} = modalInstance;
 237                 createParamLists();
 238                 this.openOperation = {...operation};
 239
 240                 if (this.enableWorkflowAssociation && !isUsingExistingWF()) {
 241                     operation.workflowId = null;
 242                     operation.workflowVersionId = null;
 243                 }
 244
 245                 modalData.submitCallback(operation);
 246             }
 247         };
 248
 249         const input: OperationCreatorInput = {
 250             allWorkflows: this.workflows,
 251             inputOperation: operation,
 252             interfaces: this.interfaces,
 253             inputProperties: this.inputs,
 254             enableWorkflowAssociation: this.enableWorkflowAssociation,
 255             readonly: this.readonly,
 256             interfaceTypes: this.interfaceTypes,
 257             validityChangedCallback: this.enableOrDisableSaveButton,
 258             workflowIsOnline: this.workflowIsOnline
 259         };
 260
 261         const modalConfig: IModalConfig = {
 262             title: modalData.modalTitle,
 263             size: 'l',
 264             type: 'custom',
 265             buttons: [saveButton, cancelButton] as IModalButtonComponent[]
 266         };
 267
 268         this.ModalServiceSdcUI.openCustomModal(modalConfig, OperationCreatorComponent, input);
 269
 270     }
 271
 272     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
 273         let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
 274         saveButton.disabled = !shouldEnable;
 275     }
 276
 277     onRemoveOperation = (event: Event, operation: OperationModel): void => {
 278         event.stopPropagation();
 279
 280         const confirmCallback = () => {
 281             this.ComponentServiceNg2
 282                 .deleteInterfaceOperation(this.component, operation)
 283                 .subscribe(() => {
 284                     const curInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
 285                     const index = _.findIndex(curInterf.operations, el => el.uniqueId === operation.uniqueId);
 286                     curInterf.operations.splice(index, 1);
 287                     if (!curInterf.operations.length) {
 288                         const interfIndex = _.findIndex(this.interfaces, interf => interf.type === operation.interfaceType);
 289                         this.interfaces.splice(interfIndex, 1);
 290                     }
 291                 });
 292         }
 293
 294         this.ModalServiceSdcUI.openAlertModal(
 295             this.modalTranslation.DELETE_TITLE,
 296             this.modalTranslation.deleteText(operation.name),
 297             this.modalTranslation.DELETE_BUTTON,
 298             confirmCallback,
 299             'deleteOperationModal'
 300         );
 301     }
 302
 303     private createOperation = (operation: OperationModel): void => {
 304         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: OperationModel) => {
 305             this.openOperation = null;
 306             let curInterf = _.find(
 307                 this.interfaces,
 308                 interf => interf.type === operation.interfaceType
 309             )
 310             if (!curInterf) {
 311                 curInterf = new UIInterfaceModel({
 312                     type: response.interfaceType,
 313                     uniqueId: response.uniqueId,
 314                     operations: []
 315                 });
 316                 this.interfaces.push(curInterf);
 317             }
 318             curInterf.operations.push(new UIOperationModel(response));
 319             this.sortInterfaces();
 320
 321             if (response.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
 322                 this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, response).subscribe();
 323             } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) {
 324                 this.$state.go('workspace.plugins', { path: 'workflowDesigner' });
 325             }
 326         });
 327     }
 328
 329     private updateOperation = (operation: OperationModel): void => {
 330         this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe(newOperation => {
 331             this.openOperation = null;
 332
 333             _.forEach(this.interfaces, interf => {
 334                 _.forEach(interf.operations, op => {
 335                     if (op.uniqueId === newOperation.uniqueId) {
 336                         const oldIndex = _.findIndex(interf.operations, el => el.uniqueId === op.uniqueId);
 337                         interf.operations.splice(oldIndex, 1);
 338                     }
 339                 })
 340             });
 341
 342             const newInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
 343             newInterf.operations.push(new UIOperationModel(newOperation));
 344             this.sortInterfaces();
 345
 346             if (newOperation.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
 347                 this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, newOperation).subscribe();
 348             }
 349         });
 350     }
 351
 352 }