Add CRUD and export operation for workflows.
Issue-ID: SDC-72
Change-Id: Ie2ef818a6979cc13b9e2dad7cea3b3121727146f
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
* ZTE - initial API and implementation and/or initial documentation
*/
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxTreeSelectModule } from 'ngx-tree-select';
import { SequenceFlowComponent } from "./components/sequence-flow/sequence-flow.component";
import { ScriptTaskComponent } from "./components/property/script-task/script-task.component";
import { DragSelectDirective } from "./directive/drag-select/drag-select.directive";
+import { WorkflowsComponent } from "./components/menu/workflows/workflows.component";
@NgModule({
declarations: [
SequenceFlowComponent,
StartEventParametersComponent,
ToolbarComponent,
+ WorkflowsComponent,
],
imports: [
+ BrowserAnimationsModule,
BrowserModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
}
ngOnInit(): void {
- this.route.queryParams.subscribe(params => {
- if (params.id) {
- this.dataAccessService.catalogService.loadWorkflow(params.id).subscribe(workflow => {
- this.workflowService.workflow = workflow;
- });
- }
- });
+ // this.route.queryParams.subscribe(params => {
+ // if (params.id) {
+ // this.dataAccessService.catalogService.loadWorkflow(params.id).subscribe(workflow => {
+ // this.workflowService.workflow = workflow;
+ // });
+ // }
+ // });
}
public ngAfterViewInit() {
-->
<div class="btn-right">
+ <p-splitButton label="Workflows" icon="fa-check" (onClick)="showWorkflows()" [model]="getWorkflows()"></p-splitButton>
<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-microservice></b4t-microservice>
+<b4t-workflows></b4t-workflows>
import { WorkflowService } from '../../services/workflow.service';
import { MicroserviceComponent } from "./microservice/microservice.component";
+import { WorkflowsComponent } from "./workflows/workflows.component";
+import { BroadcastService } from "../../services/broadcast.service";
+import { Workflow } from "../../model/workflow/workflow";
@Component({
selector: 'b4t-menu',
})
export class MenuComponent {
@ViewChild(MicroserviceComponent) public microserviceComponent: MicroserviceComponent;
+ @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent;
- constructor(private workflowService: WorkflowService) { }
+ constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) {
+ }
public save(): void {
this.workflowService.save();
public test() {
}
+
+ public showWorkflows() {
+ this.workflowsComponent.show();
+ }
+
+ public getWorkflows(workflow: Workflow) {
+ const workflows = this.workflowService.getWorkflows();
+ if(workflows) {
+ return workflows.map(workflow => {
+ return {label: workflow.name, command: () => {
+ this.workflowSelected(workflow);
+ }};
+ });
+ } else {
+ return [];
+ }
+ }
+
+ public workflowSelected(workflow: Workflow) {
+ this.broadcastService.broadcast(this.broadcastService.workflow, workflow);
+ }
+
+ public download() {
+ const filename = this.workflowService.workflow.name + '.json';
+ const content = JSON.stringify(this.workflowService.workflow);
+ // 创建隐藏的可下载链接
+ var eleLink = document.createElement('a');
+ eleLink.download = filename;
+ eleLink.style.display = 'none';
+ // 字符内容转变成blob地址
+ var blob = new Blob([content]);
+ eleLink.href = URL.createObjectURL(blob);
+ // 触发点击
+ document.body.appendChild(eleLink);
+ eleLink.click();
+ // 然后移除
+ document.body.removeChild(eleLink);
+ }
}
--- /dev/null
+<!--\r
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+-->\r
+<div class="modal fade" bsModal #workflowsModal="bs-modal" [config]="{backdrop: 'static'}"\r
+tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">\r
+ <div class="modal-dialog">\r
+ <div class="modal-content">\r
+ <div class="modal-header">\r
+ <h4 class="modal-title pull-left">Workflows</h4>\r
+ <button type="button" class="close pull-right" aria-label="Close" (click)="workflowsModal.hide()">\r
+ <span aria-hidden="true">×</span>\r
+ </button>\r
+ </div>\r
+ <div class="modal-body">\r
+ <ul class="list-group">\r
+ <li class="list-group-item d-flex justify-content-between align-items-center"\r
+ *ngFor="let workflow of workflows">\r
+ <div style="width:380px"><input class="form-control" [(ngModel)]="workflow.name"></div>\r
+ <div class="badge badge-danger badge-pill" (click)="deleteWorkflow(workflow)">\r
+ <i class="fa fa-minus"></i>\r
+ </div>\r
+ </li>\r
+ </ul>\r
+ </div>\r
+ <div class="modal-footer">\r
+ <button type="button" class="btn over-grey" (click)="addWorkflow()">Add</button>\r
+ <button type="button" class="btn over-grey" (click)="workflowsModal.hide()">close</button>\r
+ </div>\r
+ </div>\r
+ </div>\r
+</div>\r
--- /dev/null
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+\r
+import { AfterViewInit, Component, ViewChild } from '@angular/core';\r
+import { ModalDirective } from 'ngx-bootstrap/modal';\r
+\r
+import { WorkflowService } from "../../../services/workflow.service";\r
+import { Workflow } from "../../../model/workflow/workflow";\r
+\r
+/**\r
+ * workflows component\r
+ * open a model to set workflow info\r
+ */\r
+@Component({\r
+ selector: 'b4t-workflows',\r
+ templateUrl: 'workflows.component.html',\r
+})\r
+export class WorkflowsComponent {\r
+ @ViewChild('workflowsModal') public workflowsModal: ModalDirective;\r
+\r
+ public workflows: Workflow[];\r
+\r
+ constructor(private workflowService: WorkflowService) {\r
+ }\r
+\r
+ public show() {\r
+ this.workflows = this.workflowService.getWorkflows();\r
+ this.workflowsModal.show();\r
+ }\r
+\r
+ public deleteWorkflow(workflow: Workflow) {\r
+ this.workflowService.deleteWorkflow(workflow.name);\r
+ }\r
+\r
+ public addWorkflow() {\r
+ this.workflowService.addWorkflow();\r
+ }\r
+\r
+}\r
import { WorkflowNode } from '../model/workflow/workflow-node';
import { SequenceFlow } from "../model/workflow/sequence-flow";
+import { Workflow } from "../model/workflow/workflow";
/**
* BroadcastService
public jsPlumbInstance = new Subject<any>();
public jsPlumbInstance$ = this.jsPlumbInstance.asObservable();
+ public workflows = new Subject<Workflow[]>();
+ public workflows$ = this.workflows.asObservable();
+
+ public workflow = new Subject<Workflow>();
+ public workflow$ = this.workflow.asObservable();
+
public showProperty = new Subject<boolean>();
public showProperty$ = this.showProperty.asObservable();
constructor(protected httpService: HttpService) {}\r
\r
public abstract loadWorkflow(workflowId: string): Observable<Workflow>;\r
+ public abstract loadWorkflows(): Observable<Workflow[]>;\r
\r
public abstract saveWorkflow(workflow: Workflow): Observable<boolean>;\r
}\r
super(httpService);\r
}\r
\r
- public loadWorkflows(): Observable<WorkflowNode[]> {\r
+ public loadWorkflows(): Observable<Workflow[]> {\r
// TODO load data from sdc\r
const url = 'api/workflows';\r
- return this.httpService.get(url);\r
+ return this.httpService.get(url).map(response => response.data);\r
}\r
\r
public loadWorkflow(workflowId: string): Observable<Workflow> {\r
public subscriptionMap = new Map<string, Subscription>();\r
\r
constructor(private processService: WorkflowProcessService, private broadcastService: BroadcastService) {\r
+ this.jsplumbInstance = jsp.jsPlumb.getInstance({\r
+ Container: 'canvas'\r
+ });\r
this.initJsPlumbInstance();\r
+ this.broadcastService.workflow.subscribe(Workflow => {\r
+ this.jsplumbInstance.reset();\r
+ this.unsubscriptionAll();\r
+ this.initJsPlumbInstance();\r
+ this.buttonDraggable();\r
+ this.buttonDroppable();\r
+ });\r
}\r
\r
\r
public initJsPlumbInstance() {\r
- this.jsplumbInstance = jsp.jsPlumb.getInstance({\r
- Container: 'canvas'\r
- });\r
-\r
this.jsplumbInstance.importDefaults({\r
Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],\r
Connector: [\r
});\r
}\r
\r
+ private unsubscriptionAll() {\r
+ this.subscriptionMap.forEach(subscription => subscription.unsubscribe());\r
+ }\r
+\r
public initNode() {\r
this.processService.getProcess().forEach(node => {\r
this.jsplumbInstance.draggable(node.id, {\r
source: sequenceFlow.sourceRef,\r
target: sequenceFlow.targetRef,\r
});\r
- if (sequenceFlow.condition) {\r
- connection.setLabel(sequenceFlow.condition);\r
+ if (sequenceFlow.name) {\r
+ connection.setLabel(sequenceFlow.name);\r
}\r
});\r
}\r
import { DataAccessService } from "./data-access/data-access.service";\r
import { Observable } from "rxjs/Observable";\r
import { Workflow } from "../model/workflow/workflow";\r
+import { Configs } from "../model/workflow/configs";\r
+import { BroadcastService } from "./broadcast.service";\r
\r
/**\r
* WorkflowService\r
@Injectable()\r
export class WorkflowService {\r
\r
+ public workflows: Workflow[];\r
public workflow: Workflow;\r
+ public workflowIndex = 0;\r
\r
- constructor(private dataAccessService: DataAccessService) {\r
-\r
+ constructor(private broadcastService: BroadcastService, private dataAccessService: DataAccessService) {\r
+ this.dataAccessService.catalogService.loadWorkflows().subscribe(workflows => {\r
+ this.workflows = workflows;\r
+ this.broadcastWorkflows();\r
+ });\r
+ this.broadcastService.workflow.subscribe(workflow => this.workflow = workflow);\r
}\r
\r
public save(): Observable<boolean> {\r
console.log(JSON.stringify(this.workflow));\r
return this.dataAccessService.catalogService.saveWorkflow(this.workflow);\r
}\r
+\r
+ public getWorkflows(): Workflow[] {\r
+ return this.workflows;\r
+ }\r
+\r
+ public addWorkflow() {\r
+ this.workflows.push(new Workflow('wf' + this.workflowIndex, '', [], new Configs([])));\r
+ this.workflowIndex++;\r
+ this.broadcastWorkflows();\r
+ }\r
+\r
+ public deleteWorkflow(workflowName: string): Workflow {\r
+ const index = this.workflows.findIndex(workflow => (workflow.name === workflowName));\r
+ if(index !== -1) {\r
+ return this.workflows.splice(index, 1)[0];\r
+ }\r
+ this.broadcastWorkflows();\r
+\r
+ return undefined;\r
+ }\r
+\r
+ public broadcastWorkflows() {\r
+ this.broadcastService.broadcast(this.broadcastService.workflows, this.workflows);\r
+ }\r
}\r
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
-import { RadioButtonModule, TreeModule } from 'primeng/primeng';
+import { RadioButtonModule, SplitButtonModule, TreeModule } from 'primeng/primeng';
import { RouterModule } from '@angular/router';
const module = [
FormsModule,
RadioButtonModule,
RouterModule,
+ SplitButtonModule,
TreeModule,
];
left: 6px;
}
/*.input-group .form-control {
- height: 26px !important;
+ height: 26px !important;
}*/
.input-group {
/* width:400px;*/
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
-/*
+/*
.alert-success {
color: #fff;
- background-color: #73cf22;
+ background-color: #73cf22;
border-color:#73cf22;
}
.alert-info {
color: #fff;
- background-color: #00abff;
- border-color:#00abff;
+ background-color: #00abff;
+ border-color:#00abff;
}
.alert-warning {
color: #fff;
- background-color: #f7c515;
- border-color:#f7c515;
+ background-color: #f7c515;
+ border-color:#f7c515;
}
.alert-danger {
color: #fff;
background-color: #ff5b55;
- border-color:#ff5b55;
+ border-color:#ff5b55;
}*/
.close {
color: #f2f2f2;
z-index: 10000;
}
.modal .modal-dialog {
- max-width: 1000px;
+ /* max-width: 1000px; */
}
.modal .close {
color: #bbb;
Code Review / sdc / sdc-workflow-designer.git / commitdiff