diff options
author | Arielk <Ariel.Kenan@amdocs.com> | 2019-01-13 18:31:13 +0200 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2019-01-14 11:10:24 +0000 |
commit | 86a37526357337a9143c1f5e27c0976e68b15d1d (patch) | |
tree | 7d531c531d0ef73d4c8c6c8f84c6eaeb18854bdb /catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts | |
parent | 5b9d9a134778d4dc7bf45474ba13be6ba0c46282 (diff) |
Interface operation screen enhancements
Change-Id: I2b510a4bf27ddf5730ed044cf77aebd955ad5862
Issue-ID: SDC-2044
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts | 287 |
1 files changed, 212 insertions, 75 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts index e19d3457b3..e9b2001de1 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts @@ -3,12 +3,17 @@ import {Component, Input, Output, ComponentRef, Inject} from '@angular/core'; import {Component as IComponent} from 'app/models/components/component'; import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config"; +import {TranslateService} from "app/ng2/shared/translator/translate.service"; import {Observable} from "rxjs/Observable"; import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; import {ModalService} from 'app/ng2/services/modal.service'; -import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models'; +import {ModalModel, ButtonModel, InputBEModel, OperationModel, InterfaceModel, CreateOperationResponse, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models'; + +import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config"; +import {SdcUiComponents} from "sdc-ui/lib/angular"; +import {ModalButtonComponent} from "sdc-ui/lib/angular/components"; import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; @@ -16,21 +21,96 @@ import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; import {OperationCreatorComponent, OperationCreatorInput} from './operation-creator/operation-creator.component'; +export class UIOperationModel extends OperationModel { + isCollapsed: boolean = true; + isEllipsis: boolean; + MAX_LENGTH = 75; + _description: string; + + constructor(operation: OperationModel) { + super(operation); + + if (!operation.description) { + this.description = ''; + } + + if (this.description.length > this.MAX_LENGTH) { + this.isEllipsis = true; + } else { + this.isEllipsis = false; + } + } + + getDescriptionEllipsis(): string { + if (this.isCollapsed && this.description.length > this.MAX_LENGTH) { + return this.description.substr(0, this.MAX_LENGTH - 3) + '...'; + } + return this.description; + } + + toggleCollapsed(e) { + e.stopPropagation(); + this.isCollapsed = !this.isCollapsed; + } +} + +class ModalTranslation { + CREATE_TITLE: string; + EDIT_TITLE: string; + DELETE_TITLE: string; + CANCEL_BUTTON: string; + SAVE_BUTTON: string; + CREATE_BUTTON: string; + DELETE_BUTTON: string; + deleteText: Function; + + constructor(private TranslateService: TranslateService) { + this.TranslateService.languageChangedObservable.subscribe(lang => { + this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE"); + this.EDIT_TITLE = this.TranslateService.translate("INTERFACE_EDIT_TITLE"); + this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE"); + this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON"); + this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON"); + this.CREATE_BUTTON = this.TranslateService.translate("INTERFACE_CREATE_BUTTON"); + this.DELETE_BUTTON = this.TranslateService.translate("INTERFACE_DELETE_BUTTON"); + this.deleteText = (operationName) => this.TranslateService.translate("INTERFACE_DELETE_TEXT", {operationName}); + }); + } +} + +export class UIInterfaceModel extends InterfaceModel { + isCollapsed: boolean = false; + + constructor(interf?: any) { + super(interf); + this.operations = _.map( + this.operations, + operation => new UIOperationModel(operation) + ); + } + + toggleCollapse() { + this.isCollapsed = !this.isCollapsed; + } +} + @Component({ selector: 'interface-operation', templateUrl: './interface-operation.page.component.html', styleUrls: ['interface-operation.page.component.less'], - providers: [ModalService] + providers: [ModalService, TranslateService] }) export class InterfaceOperationComponent { + interfaces: Array<UIInterfaceModel>; modalInstance: ComponentRef<ModalComponent>; - operationList: Array<OperationModel> = []; openOperation: OperationModel; enableWorkflowAssociation: boolean; inputs: Array<InputBEModel>; isLoading: boolean; + interfaceTypes:{ [interfaceType: string]: Array<string> }; + modalTranslation: ModalTranslation; @Input() component: IComponent; @Input() readonly: boolean; @@ -40,40 +120,79 @@ export class InterfaceOperationComponent { constructor( @Inject(SdcConfigToken) private sdcConfig: ISdcConfig, @Inject("$state") private $state: ng.ui.IStateService, + private TranslateService: TranslateService, private ComponentServiceNg2: ComponentServiceNg2, private WorkflowServiceNg2: WorkflowServiceNg2, private ModalServiceNg2: ModalService, + private ModalServiceSdcUI: SdcUiComponents.ModalService ) { this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation; + this.modalTranslation = new ModalTranslation(TranslateService); } ngOnInit(): void { this.isLoading = true; Observable.forkJoin( - this.ComponentServiceNg2.getInterfaceOperations(this.component), - this.ComponentServiceNg2.getComponentInputs(this.component) - ).subscribe((response) => { + this.ComponentServiceNg2.getInterfaces(this.component), + this.ComponentServiceNg2.getComponentInputs(this.component), + this.ComponentServiceNg2.getInterfaceTypes(this.component) + ).subscribe((response: Array<any>) => { this.isLoading = false; - this.component.interfaceOperations = response[0].interfaceOperations; - this.operationList = _.toArray(response[0].interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType)); + this.initInterfaces(response[0].interfaces); + this.sortInterfaces(); this.inputs = response[1].inputs; + this.interfaceTypes = response[2]; + }); + } + + initInterfaces(interfaces: Array<InterfaceModel>): void { + this.interfaces = _.map(interfaces, interf => new UIInterfaceModel(interf)); + } + + sortInterfaces(): void { + this.interfaces = _.filter(this.interfaces, interf => interf.operations && interf.operations.length > 0); // remove empty interfaces + this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically + _.forEach(this.interfaces, interf => { + interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically + }); + } + + collapseAll(value: boolean = true): void { + _.forEach(this.interfaces, interf => { + interf.isCollapsed = value; }); } + isAllCollapsed(): boolean { + return _.every(this.interfaces, interf => interf.isCollapsed); + } + + isAllExpanded(): boolean { + return _.every(this.interfaces, interf => !interf.isCollapsed); + } + + isListEmpty(): boolean { + return _.filter( + this.interfaces, + interf => interf.operations && interf.operations.length > 0 + ).length === 0; + } + getDisabled = (): boolean => { return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); } onEditOperation = (operation?: OperationModel): void => { + const modalMap = { create: { - modalTitle: 'Create a New Operation', - saveBtnText: 'Create', + modalTitle: this.modalTranslation.CREATE_TITLE, + saveBtnText: this.modalTranslation.CREATE_BUTTON, submitCallback: this.createOperation, }, edit: { - modalTitle: 'Edit Operation', - saveBtnText: 'Save', + modalTitle: this.modalTranslation.EDIT_TITLE, + saveBtnText: this.modalTranslation.SAVE_BUTTON, submitCallback: this.updateOperation, } }; @@ -86,23 +205,28 @@ export class InterfaceOperationComponent { } } - const cancelButton: ButtonModel = new ButtonModel( - 'Cancel', - 'outline white', - () => { + const cancelButton: IModalButtonComponent = { + id: 'cancelButton', + text: this.modalTranslation.CANCEL_BUTTON, + type: 'secondary', + size: 'small', + closeModal: true, + callback: () => { this.openOperation = null; - this.ModalServiceNg2.closeCurrentModal(); }, - ); - - const saveButton: ButtonModel = new ButtonModel( - modalData.saveBtnText, - 'blue', - () => { - this.modalInstance.instance.dynamicContent.instance.createParamLists(); - this.ModalServiceNg2.closeCurrentModal(); + }; - const {operation, isUsingExistingWF} = this.modalInstance.instance.dynamicContent.instance; + const saveButton: IModalButtonComponent = { + id: 'saveButton', + text: modalData.saveBtnText, + type: 'primary', + size: 'small', + closeModal: true, + callback: () => { + const modalInstance = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance; + + const {operation, isUsingExistingWF, createParamLists} = modalInstance; + createParamLists(); this.openOperation = {...operation}; if (this.enableWorkflowAssociation && !isUsingExistingWF()) { @@ -111,74 +235,81 @@ export class InterfaceOperationComponent { } modalData.submitCallback(operation); - }, - this.getDisabled, - ); - - const modalModel: ModalModel = new ModalModel( - 'l', - modalData.modalTitle, - '', - [saveButton, cancelButton], - 'standard', - ); - - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + } + }; - let input: OperationCreatorInput = { - operation, + const input: OperationCreatorInput = { + inputOperation: operation, inputProperties: this.inputs, enableWorkflowAssociation: this.enableWorkflowAssociation, readonly: this.readonly, - isService: this.component.isService() - } + isService: this.component.isService(), + interfaceTypes: this.interfaceTypes, + validityChangedCallback: this.enableOrDisableSaveButton + }; - this.ModalServiceNg2.addDynamicContentToModal( - this.modalInstance, - OperationCreatorComponent, - input, - ); + const modalConfig: IModalConfig = { + title: modalData.modalTitle, + size: 'l', + type: 'custom', + buttons: [saveButton, cancelButton] as IModalButtonComponent[] + }; + + this.ModalServiceSdcUI.openCustomModal(modalConfig, OperationCreatorComponent, input); - this.modalInstance.instance.open(); + } + + private enableOrDisableSaveButton = (shouldEnable: boolean): void => { + let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton'); + saveButton.disabled = !shouldEnable; } onRemoveOperation = (event: Event, operation: OperationModel): void => { event.stopPropagation(); const confirmCallback = () => { - this.ModalServiceNg2.closeCurrentModal(); this.ComponentServiceNg2 .deleteInterfaceOperation(this.component, operation) .subscribe(() => { - const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId); - this.operationList.splice(index, 1); - this.component.interfaceOperations = this.operationList; + const curInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType); + const index = _.findIndex(curInterf.operations, el => el.uniqueId === operation.uniqueId); + curInterf.operations.splice(index, 1); + if (!curInterf.operations.length) { + const interfIndex = _.findIndex(this.interfaces, interf => interf.type === operation.interfaceType); + this.interfaces.splice(interfIndex, 1); + } }); } - this.modalInstance = this.ModalServiceNg2.createActionModal( - operation.operationType, - 'Are you sure you want to delete this operation?', - 'Delete', + this.ModalServiceSdcUI.openAlertModal( + this.modalTranslation.DELETE_TITLE, + this.modalTranslation.deleteText(operation.name), + this.modalTranslation.DELETE_BUTTON, confirmCallback, - 'Cancel', + 'deleteOperationModal' ); - - this.modalInstance.instance.open(); } private createOperation = (operation: OperationModel): void => { this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: CreateOperationResponse) => { this.openOperation = null; - this.operationList.push(new OperationModel(response)); - this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType)); + let curInterf = _.find( + this.interfaces, + interf => interf.type === operation.interfaceType + ) + if (!curInterf) { + curInterf = new UIInterfaceModel({ + type: response.interfaceType, + uniqueId: response.uniqueId, + operations: [] + }); + this.interfaces.push(curInterf); + } + curInterf.operations.push(new UIOperationModel(response)); + this.sortInterfaces(); if (response.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) { - const operationId = response.uniqueId; - const workflowId = response.workflowId; - const versionId = response.workflowVersionId; - const artifactId = response.artifactUUID; - this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, operationId, workflowId, versionId, artifactId).subscribe(); + this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, response).subscribe(); } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) { this.$state.go('workspace.plugins', { path: 'workflowDesigner' }); } @@ -188,16 +319,22 @@ export class InterfaceOperationComponent { private updateOperation = (operation: OperationModel): void => { this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe(newOperation => { this.openOperation = null; - const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId); - this.operationList.splice(index, 1, newOperation); - this.component.interfaceOperations = this.operationList; + + _.forEach(this.interfaces, interf => { + _.forEach(interf.operations, op => { + if (op.uniqueId === newOperation.uniqueId) { + const oldIndex = _.findIndex(interf.operations, el => el.uniqueId === op.uniqueId); + interf.operations.splice(oldIndex, 1); + } + }) + }); + + const newInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType); + newInterf.operations.push(new UIOperationModel(newOperation)); + this.sortInterfaces(); if (newOperation.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) { - const operationId = newOperation.uniqueId; - const workflowId = newOperation.workflowId; - const versionId = newOperation.workflowVersionId; - const artifactId = newOperation.artifactUUID; - this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, operationId, workflowId, versionId, artifactId).subscribe(); + this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, newOperation).subscribe(); } }); } |