diff options
author | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:58:42 +0800 |
---|---|---|
committer | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:58:42 +0800 |
commit | 59884c775c9d06e2195401a09e08650a5cf37b20 (patch) | |
tree | 80a2db253939f7a3aeb6e7be45c517c87d748511 /sdc-workflow-designer-ui/src/app/components/menus | |
parent | 8261a4ea8091c27b61ac581a852e2e18283b3cdd (diff) |
Display Extend Activities on WF Designer UI.
Display Extend Activities on WF Designer UI.
Use Extend Activities to Design Workflow and Save
Issue-ID: SDC-1130,SDC-1131
Change-Id: Iea62eb0edafb2270deaac89b458015e78d961cd0
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/menus')
10 files changed, 142 insertions, 182 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html index ee758fea..9537bfd7 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html @@ -12,20 +12,43 @@ */ --> -<div class="btn-left"> - <p-splitButton [label]="getCurrentPlanName()" icon="fa-arrows" (onClick)="showWorkflows()" [model]="workflows"></p-splitButton> +<div> + <label class="wf-name">{{name}}</label> + <!-- <button type="button" class="btn white btn-right" (click)="showRestConfigModal()"> + <i class="fa fa-cog"></i>{{ 'WORKFLOW.SETTING' | translate:param }} + </button> --> + <button type="button" class="plx-btn btn-right" (click)="checkBack(confirmSave)"> + <i class="fa fa-arrow-left"></i>{{ 'WORKFLOW.BACK' | translate }} + </button> + <button type="button" class="plx-btn plx-btn-primary btn-right" (click)="save()" [disabled]="!(canSave && hasRight)"> + <i class="fa fa-save"></i>{{ 'WORKFLOW.SAVE' | translate }} + </button> </div> -<div class="btn-right"> - <button type="button" class="btn white" (click)="save()"> - <i class="fa fa-save"></i>Save - </button> - <button type="button" class="btn white" (click)="showMicroserviceModal()"> - <i class="fa fa-cog"></i>Setting - </button> - <button type="button" class="btn white" (click)="download()"> - <i class="fa fa-download"></i>Download - </button> - <!-- <button type="button" class="btn white" (click)="test()">test</button> --> -</div> -<b4t-rest-config></b4t-rest-config> -<b4t-workflows></b4t-workflows> + +<wfm-rest-config></wfm-rest-config> + +<template #confirmSave let-c="close" let-d="dismiss"> + <div class="modal-header"> + <h4 class="modal-title">{{ 'WORKFLOW.CONFIRM' | translate }}</h4> + <button type="button" class="close" (click)="d('Cross click')"> + <span class="plx-ico-close-16"></span> + </button> + </div> + <div class="modal-body"> + <div class="row alert-modal"> + <span class="tip-img warning"></span> + <div class="tip-info"> + <div class="alert-title">{{ 'WORKFLOW.CONFIRM_SAVE1' | translate }}</div> + <div class="alert-result">{{ 'WORKFLOW.CONFIRM_SAVE2' | translate }}</div> + </div> + </div> + </div> + <div class="modal-footer"> + <div class="form-group"> + <div class="btnGroup modal-btn"> + <button type="button" class="plx-btn plx-btn-guide" (click)="saveBack();">{{ 'WORKFLOW.CONFIRM_SAVE_BACK' | translate }}</button> + <button type="button" class="plx-btn" (click)="back();">{{ 'WORKFLOW.CONFIRM_BACK' | translate }}</button> + </div> + </div> + </div> +</template> diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts index b58ec089..1c064f2c 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts @@ -11,72 +11,68 @@ */ import { Component, OnInit, ViewChild } from '@angular/core'; -import { WorkflowService } from '../../services/workflow.service'; -import { WorkflowsComponent } from "./workflows/workflows.component"; -import { BroadcastService } from "../../services/broadcast.service"; -import { PlanModel } from "../../model/plan-model"; +import { BroadcastService } from '../../services/broadcast.service'; +import { ModelService } from '../../services/model.service'; import { RestConfigComponent } from './rest-config/rest-config.component'; +import { AuthService } from '../../services/auth.service'; +import { InterfaceService } from '../../services/interface.service'; +import { ActivatedRoute } from '@angular/router/'; +import { PlxModal } from "../../paletx/plx-modal/modal"; @Component({ - selector: 'menus', - templateUrl: './menus.component.html', - styleUrls: ['./menus.component.css'] + selector: 'menus', + templateUrl: './menus.component.html', + styleUrls: ['./menus.component.css'] }) -export class MenusComponent { - @ViewChild(RestConfigComponent) public microserviceComponent: RestConfigComponent; - @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent; - public currentWorkflowId : string; - public workflows = []; +export class MenusComponent implements OnInit { + @ViewChild(RestConfigComponent) public restConfigComponent: RestConfigComponent; - constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) { - this.broadcastService.workflows.subscribe(wfs => { - this.workflows.splice(0, this.workflows.length); - if(wfs) { - wfs.forEach((value, key, map) => { - this.workflows.push({label: value.planName, command: () => { - this.workflowSelected(key, value.plan); - }}); - }); - } - }); - } + public name = ''; + public canSave = true; + public hasRight = false; - public save(): void { - this.workflowService.save(); - } + constructor(private activatedRoute: ActivatedRoute, private modelService: ModelService, + private broadcastService: BroadcastService, private authService: AuthService, + private plxModal: PlxModal) { } - public showMicroserviceModal(): void { - this.microserviceComponent.show(); - } + ngOnInit() { + this.activatedRoute.queryParams.subscribe(queryParams => { + let operation: string = queryParams.operation; + // default value is 'modify', which means save button is enabled. + this.canSave = null == operation || 'view' != operation.toLowerCase(); + }); + this.broadcastService.initModel.subscribe(planModel => { + this.name = planModel.name; + }); + this.broadcastService.saveRight$.subscribe(saveRight => { + this.hasRight = saveRight; + }); + // checkRights + this.authService.checkRights(); + } - public test() { - } + public save(): void { + this.modelService.save(); + } - public showWorkflows() { - this.workflowsComponent.show(); - } + public back(): void { + history.back(); + } - public workflowSelected(planId: string, planModel: PlanModel) { - - this.broadcastService.broadcast(this.broadcastService.planModel, planModel); - this.broadcastService.broadcast(this.broadcastService.planId, planId); + public checkBack(component: any): void { + if (this.modelService.isModify()) { + this.plxModal.open(component, { size: 'sm' }); + } else { + this.back(); } + } - public getCurrentPlanName() { - let planName = this.workflowService.getPlanName(this.currentWorkflowId); - return planName ? planName : 'Workflows' - } + public saveBack(): void { + this.modelService.save(this.back); + } + + public showRestConfigModal(): void { + this.restConfigComponent.show(); + } - public download() { - const filename = this.getCurrentPlanName() + '.json'; - const content = JSON.stringify(this.workflowService.planModel); - var eleLink = document.createElement('a'); - eleLink.download = filename; - eleLink.style.display = 'none'; - var blob = new Blob([content]); - eleLink.href = URL.createObjectURL(blob); - document.body.appendChild(eleLink); - eleLink.click(); - document.body.removeChild(eleLink); - } } diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html index ea0d3c68..9550ed33 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html @@ -1,13 +1,26 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +--> <div class="form-group row"> <label class="col-md-2 form-control-label text-md-right">Name</label> <div class="col-md-10"> <input class="form-control" [(ngModel)]="restConfig.name"> </div> </div> -<div class="form-group row"> +<!-- <div class="form-group row"> <label class="col-md-2 form-control-label text-md-right">BaseUrl</label> <div class="col-md-10"> - <input class="form-control" [(ngModel)]="restConfig.url"> + <input class="form-control" [(ngModel)]="restConfig.baseUrl"> </div> </div> <div class="form-group row"> @@ -31,5 +44,5 @@ <textarea class="form-control" [disabled]="restConfig.dynamic" rows="8" [ngModel]="detail" (ngModelChange)="onDetailChanged($event)"></textarea> </div> -</div> +</div> --> diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts index d99a9a10..e4d43d8c 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts @@ -22,7 +22,7 @@ import { RestService } from '../../../../services/rest.service'; * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config-detail', + selector: 'wfm-rest-config-detail', templateUrl: 'rest-config-detail.component.html', }) export class RestConfigDetailComponent implements OnChanges { @@ -35,7 +35,7 @@ export class RestConfigDetailComponent implements OnChanges { public ngOnChanges() { if (this.restConfig == null) { - this.restConfig = new RestConfig('', '', '', '', ''); + this.restConfig = new RestConfig('', '', '', ''); } this.parseSwagger2String(); } diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html index aa98bc80..f8d745c1 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html @@ -1,3 +1,16 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +--> <div class="scroll" style="overflow:hidden; max-height: 300px; height: 300px;"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> @@ -6,13 +19,13 @@ </div> <ul class="list-group"> - <li class="list-group-item d-flex justify-content-between align-items-center" + <!-- <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let restConfig of restService.getRestConfigs(); index as i"> <div (click)="onConfigSelected(restConfig)">{{restConfig.name}}</div> <div class="badge badge-danger badge-pill" (click)="deleteRestConfig(i)"> <i class="fa fa-minus"></i> </div> - </li> + </li> --> </ul> </div> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts index 43120e85..8a84c476 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts @@ -22,7 +22,7 @@ import { RestService } from '../../../../services/rest.service'; * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config-list', + selector: 'wfm-rest-config-list', templateUrl: 'rest-config-list.component.html', }) export class RestConfigListComponent { @@ -36,11 +36,9 @@ export class RestConfigListComponent { } public addRestConfig() { + // const restConfig = this.restService.addRestConfig(); - const restConfig = this.restService.newRestConfig(); - this.restService.addRestConfig(restConfig); - - this.onConfigSelected(restConfig); + // this.onConfigSelected(restConfig); } public deleteRestConfig(index: number) { diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html index 9bd5bfc0..a858b0fe 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html @@ -1,3 +1,16 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +--> <div class="modal fade" bsModal #restConfigModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> @@ -11,10 +24,10 @@ <div class="modal-body"> <div class="row"> <div class="col-sm-4"> - <b4t-rest-config-list (configSelected)="configSelected($event)"></b4t-rest-config-list> + <wfm-rest-config-list (configSelected)="configSelected($event)"></wfm-rest-config-list> </div> <div class="col-sm-8"> - <b4t-rest-config-detail [restConfig]="currentRestConfig"></b4t-rest-config-detail> + <wfm-rest-config-detail [restConfig]="currentRestConfig"></wfm-rest-config-detail> </div> </div> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts index 6a9c9c22..46ac3f90 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts @@ -21,7 +21,7 @@ import { RestConfigListComponent } from './rest-config-list/rest-config-list.com * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config', + selector: 'wfm-rest-config', templateUrl: 'rest-config.component.html', }) export class RestConfigComponent { diff --git a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html deleted file mode 100644 index 0f6c7ff2..00000000 --- a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html +++ /dev/null @@ -1,41 +0,0 @@ -<!--
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- * ZTE - initial API and implementation and/or initial documentation
- */
--->
-<div class="modal fade" bsModal #workflowsModal="bs-modal" [config]="{backdrop: 'static'}"
-tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title pull-left">Workflows</h4>
- <button type="button" class="close pull-right" aria-label="Close" (click)="workflowsModal.hide()">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- <ul class="list-group">
- <li class="list-group-item d-flex justify-content-between align-items-center"
- *ngFor="let key of workflows?.keys()">
- <div style="width:380px"><input class="form-control" [(ngModel)]="workflows.get(key).planName"></div>
- <div class="badge badge-danger badge-pill" (click)="deleteWorkflow(key)">
- <i class="fa fa-minus"></i>
- </div>
- </li>
- </ul>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn over-grey" (click)="addWorkflow()">Add</button>
- <button type="button" class="btn over-grey" (click)="workflowsModal.hide()">close</button>
- </div>
- </div>
- </div>
-</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts deleted file mode 100644 index afacd602..00000000 --- a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- * ZTE - initial API and implementation and/or initial documentation
- */
-
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { ModalDirective } from 'ngx-bootstrap/modal';
-
-import { WorkflowService } from "../../../services/workflow.service";
-import { PlanModel } from "../../../model/plan-model";
-
-/**
- * workflows component
- * open a model to set workflow info
- */
-@Component({
- selector: 'b4t-workflows',
- templateUrl: 'workflows.component.html',
-})
-export class WorkflowsComponent {
- @ViewChild('workflowsModal') public workflowsModal: ModalDirective;
-
- public workflows :Map<string, any>;
-
- constructor(private workflowService: WorkflowService) {
- }
-
- public show() {
- this.workflows = this.workflowService.getWorkflows();
- // this.workflowService.getWorkflows().forEach((value, key, map) => {
- // this.workflows.push({
- // "planName": value.planName,
- // "planId": key
- // });
- // });;
-
- this.workflowsModal.show();
- }
-
- public deleteWorkflow(planId: string) {
- this.workflowService.deleteWorkflow(planId);
- }
-
- public addWorkflow() {
- this.workflowService.addWorkflow();
- }
-
-}
|