2 files changed, 96 insertions, 0 deletions
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
new file mode 100644
index 00000000..0f6c7ff2
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html
@@ -0,0 +1,41 @@
+<!--
+/**
+ * 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">&times;</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
new file mode 100644
index 00000000..bf884983
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts
@@ -0,0 +1,55 @@
+/**
+ * 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/workflow/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<number, 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: number) {
+        this.workflowService.deleteWorkflow(planId);
+    }
+
+    public addWorkflow() {
+        this.workflowService.addWorkflow();
+    }
+
+}