add single function to action and save it to frontend store.

Issue-ID: CCSDK-2017
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: I866eadb31bcb56aec5aa05a1dd4b0989c47c6210

11 files changed, 187 insertions, 62 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 8ec735aec..311ce7ad9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -61,20 +61,20 @@
                 [mode]="'push'"
                 #sidebarLeft>
         <div class="row">
-            <div class="col-12 p-0">
+            <!-- <div class="col-12 p-0">
                 <form>
                     <input type="text" class="form-control input-search-controller"
                            placeholder="Search actions and functions">
                 </form>
-            </div>
+            </div> -->
             <h1 class="col-12">Actions</h1>
             <div class="col-12 text-center p-0">
                 <div class="btn-group actionBtns" role="group">
                     <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button>
-                    <button type="button" class="btn">Import Action</button>
+                    <!-- <button type="button" class="btn">Import Action</button> -->
                 </div>
             </div>
-      <div class="col-12 actionsList">
+      <!-- <div class="col-12 actionsList">
         <b>Select from other packages:</b>
         <div class="actions-scroll">
           <div class="custom-control custom-checkbox">
@@ -106,7 +106,7 @@
           <button type="button" class="btn btn-secondary mr-3">Insert</button>
           <button type="button" class="btn btn-secondary">Cancel</button>
         </div>
-      </div>
+      </div> -->
 
         <h1 class="col-12">Functions</h1>
         <div id="palette-paper" class="col-12 componentsList">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index b19f5699b..130e0ae19 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -3,6 +3,8 @@ import * as joint from 'jointjs';
 import './jointjs/elements/palette.function.element';
 import './jointjs/elements/action.element';
 import './jointjs/elements/board.function.element';
+import { DesignerStore } from './designer.store';
+import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
 
 
 
@@ -26,7 +28,7 @@ export class DesignerComponent implements OnInit {
   paletteGraph: joint.dia.Graph;
   palettePaper: joint.dia.Paper;
 
-  constructor() {
+  constructor(private designerStore: DesignerStore) {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
   }
@@ -54,22 +56,37 @@ export class DesignerComponent implements OnInit {
     this.initializeBoard();
     this.initializePalette();
     // this.createEditBarOverThePaper();
+
+    //functions list is contants for now
     const list = [
       { modelName: 'component-netconf-executor'},
       { modelName: 'component-remote-ansible-executor' },
       { modelName: 'dg-generic' },
       { modelName: 'component-resource-resolution' }];
+      const cells = this.buildPaletteGraphFromList(list);
+      this.paletteGraph.resetCells(cells);
 
-    const cells = this.buildPaletteGraphFromList(list);
-    this.paletteGraph.resetCells(cells);
-
-    let idx = 0;
-    cells.forEach(cell => {
-      console.log(cell);
-      cell.translate(5, (cell.attributes.size.height + 5) * idx++);
+      let idx = 0;
+      cells.forEach(cell => {
+        console.log(cell);
+        cell.translate(5, (cell.attributes.size.height + 5) * idx++);
 
-    });
-    this.stencilPaperEventListeners();
+      });
+      this.stencilPaperEventListeners();
+      /**
+       * the code to retrieve from server is commented
+       */
+        // this.designerStore.state$.subscribe(state => {
+        //   console.log(state);
+        //   if (state.functions) {
+        //     console.log('functions-->' , state.functions);
+        //     // this.viewedFunctions = state.functions;
+        //     const list = state.functions;
+        //   }
+        // });
+        //action triggering
+        // this.designerStore.getFuntions();
+    
   }
 
   initializePalette() {
@@ -127,9 +144,6 @@ export class DesignerComponent implements OnInit {
         
         var parentBbox = parent.getBBox();
         var cellBbox = cell.getBBox();
-
-        console.log("parent ", parentBbox);
-        console.log("cell ", cellBbox);
         if (parentBbox.containsPoint(cellBbox.origin()) &&
           parentBbox.containsPoint(cellBbox.topRight()) &&
           parentBbox.containsPoint(cellBbox.corner()) &&
@@ -149,8 +163,12 @@ export class DesignerComponent implements OnInit {
 
   insertCustomActionIntoBoard() {
     this.actionIdCounter++;
-    const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter);
+    const actionId = "action_" + this.actionIdCounter;
+    const actionName = 'Action' + this.actionIdCounter;
+    const element = this.createCustomAction(actionId , actionName);
     this.boardGraph.addCell(element);
+    console.log('saving action to store action workflow....');
+    this.designerStore.addDeclarativeWorkFlow(actionName);
   }
 
   createCustomAction(id: string, label: string) {
@@ -192,7 +210,6 @@ export class DesignerComponent implements OnInit {
 
   stencilPaperEventListeners() {
     this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => {
-      console.log('pointerdown 2');
 
       $('body').append(`
         <div id="flyPaper"
@@ -232,38 +249,30 @@ export class DesignerComponent implements OnInit {
         if (mouseupX > target.left &&
           mouseupX < target.left + this.boardPaper.$el.width() &&
           mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) {
-          // const clonedShape = flyShape.clone();
-          const type = flyShape.attributes.attrs.type;
-          console.log(type);
-
-          //create board function element of the same type of palette function
-          //board function element is different in design from the palette function element
-          this.fuctionIdCounter++;
-          console.log(this.fuctionIdCounter);
-          const functionElementForBoard = 
-            this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type);
-
-          functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y);
-          this.boardGraph.addCell(functionElementForBoard);
-          const cellViewsBelow =
-            this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center());
-          console.log(cellViewsBelow);
-          if (cellViewsBelow.length) {
-            let cellViewBelow;
-            cellViewsBelow.forEach( cellItem => {
-              if (cellItem.model.id !== functionElementForBoard.id) {
-                cellViewBelow = cellItem;
-              }
-            });
+          const functionType = flyShape.attributes.attrs.type;
+          console.log(functionType);
+          const functionElementForBoard = this.dropFunctionOverAction(functionType, mouseupX, target, offset, mouseupY);
+
+          let parentCell = this.getParent(functionElementForBoard);
+
+          console.log("parentCell -->", parentCell);
+
+          if (parentCell && 
+              parentCell.model.attributes.type === ActionElementTypeName){
+                
+            const actionName = parentCell.model.attributes.attrs['#label'].text;
+            this.designerStore.addStepToDeclarativeWorkFlow(actionName, functionType);
+            this.designerStore.addNodeTemplate(functionType);
 
             // Prevent recursive embedding.
-            if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) {
-              console.log(cellViewBelow);
-              cellViewBelow.model.embed(functionElementForBoard);
+            if (parentCell &&
+              parentCell.model.get('parent') !== functionElementForBoard.id) {
+              parentCell.model.embed(functionElementForBoard);
             }
-            console.log(this.boardGraph);
+          }else{
+            console.log('function dropped outside action, rolling back...');
+            functionElementForBoard.remove();
           }
-
         }
         $('body').off('mousemove.fly').off('mouseup.fly');
         // flyShape.remove();
@@ -272,6 +281,32 @@ export class DesignerComponent implements OnInit {
     });
   }
 
+  private getParent(functionElementForBoard: joint.shapes.board.FunctionElement) {
+    const cellViewsBelow = this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center());
+    let cellViewBelow;
+    if (cellViewsBelow.length) {
+      cellViewsBelow.forEach(cellItem => {
+        if (cellItem.model.id !== functionElementForBoard.id) {
+          cellViewBelow = cellItem;
+        }
+      });
+    }
+    return cellViewBelow;
+  }
+
+  /**
+   * trigger actions related to Function dropped over the board:
+   * - create board function element of the same type of palette function 
+   * as board function element is different from the palette function element
+   * - save function to parent action in store
+  */
+  private dropFunctionOverAction(functionType: any, mouseupX: number, target: JQuery.Coordinates, offset: { x: number; y: number; }, mouseupY: number) {
+    this.fuctionIdCounter++;
+    const functionElementForBoard = this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', functionType);
+    functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y);
+    this.boardGraph.addCell(functionElementForBoard);
+    return functionElementForBoard;
+  }
   /**
    * this is a way to add the button like zoom in , zoom out , and source over jointjs paper
    * may be used if no other way is found
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
index c4564254f..aa3a6a668 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
@@ -23,7 +23,7 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../../common/core/services/api.typed.service';
 import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
-import {ModelType} from '../model/ModelType.model';
+import {ModelType} from './model/ModelType.model';
 
 
 @Injectable({
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
index be98eec88..f2972d03b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
@@ -22,8 +22,10 @@ limitations under the License.
 import {Injectable} from '@angular/core';
 import {Store} from '../../../../common/core/stores/Store';
 import {DesignerService} from './designer.service';
-import {ModelType} from '../model/ModelType.model';
-import {DesignerDashboardState} from '../model/designer-dashboard.state';
+import {ModelType} from './model/ModelType.model';
+import {DesignerDashboardState} from './model/designer.dashboard.state';
+import { DeclarativeWorkflow } from './model/designer.workflow';
+import { NodeTemplate } from './model/desinger.nodeTemplate.model';
 
 
 @Injectable({
@@ -35,15 +37,60 @@ export class DesignerStore extends Store<DesignerDashboardState> {
         super(new DesignerDashboardState());
     }
 
-    public getFuntions() {
+    public retrieveFuntions() {
         const modelDefinitionType = 'node_type';
         this.designerService.getFunctions(modelDefinitionType).subscribe(
-            (modelType: ModelType[]) => {
-                console.log(modelType);
+            (modelTypeList: ModelType[]) => {
+                console.log(modelTypeList);
                 this.setState({
                     ...this.state,
-                    functions: modelType,
+                    serverFunctions: modelTypeList,
                 });
             });
     }
+
+    /**
+     * adds empty workflow with name only.
+     * called when blank action is added to the board
+     * declarative workflow just contain the steps but its order is determind by dg-graph
+     */
+    addDeclarativeWorkFlow(workflowName: string) {
+        this.setState({
+            ...this.state,
+            template: {
+                ...this.state.template,
+                workflows:
+                    this.state.template.workflows.set(workflowName, new DeclarativeWorkflow())
+            }
+        });
+    }
+
+    addStepToDeclarativeWorkFlow(workflowName: string, stepType: string) {
+        const currentWorkflow: DeclarativeWorkflow = this.state.template.workflows.get(workflowName);
+        currentWorkflow.steps = {
+                target: stepType,
+                description: ''
+            };
+        const allNewWorkflowsMap =
+            this.state.template.workflows.set(workflowName, currentWorkflow);
+        this.setState({
+            ...this.state,
+            template: {
+                ...this.state.template,
+                workflows: allNewWorkflowsMap
+            }
+        });
+    }
+
+
+    addNodeTemplate(nodeTemplateName: string) {
+        this.setState({
+            ...this.state,
+            template: {
+                ...this.state.template,
+                node_templates:
+                    this.state.template.node_templates.set(nodeTemplateName, new NodeTemplate())
+            }
+        });
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts
index 5a86150e8..e1e980ed9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {DesignerStore} from '../designer.store';
-import {ModelType} from '../../model/ModelType.model';
+import {ModelType} from '../model/ModelType.model';
 
 
 @Component({
@@ -15,14 +15,14 @@ export class FunctionsComponent implements OnInit {
 
         this.designerStore.state$.subscribe(state => {
             console.log(state);
-            if (state.functions) {
-                this.viewedFunctions = state.functions;
+            if (state.serverFunctions) {
+                this.viewedFunctions = state.serverFunctions;
             }
         });
     }
 
     ngOnInit() {
-        this.designerStore.getFuntions();
+        this.designerStore.retrieveFuntions();
     }
 
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
index 212905814..7960e83d1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
@@ -1,4 +1,5 @@
 import * as joint from 'jointjs';
+import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
 /**
  * please refer to documentation in file palette.function.element.ts to get more details
  * about how to create new element type and define it in typescript
@@ -18,7 +19,7 @@ const rectWidth = 616;
 const rectHeight = 381;
 // custom element implementation
 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
-const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', {
+const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
     size: {width: rectWidth, height: rectHeight}
 },
     {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts
index c8498fa36..c8498fa36 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts
index dc65c009f..5ae62d84a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts
@@ -20,10 +20,15 @@ limitations under the License.
 */
 
 import {ModelType} from './ModelType.model';
+import { TopologyTemplate } from './designer.topologyTemplate.model';
 
 export class DesignerDashboardState {
 
-    functions: ModelType[];
-    actions: string[];
+    serverFunctions: ModelType[];
+    template: TopologyTemplate;
 
+    constructor() {
+        this.serverFunctions = [];
+        this.template = new TopologyTemplate();
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts
new file mode 100644
index 000000000..4e73c7986
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts
@@ -0,0 +1,13 @@
+import { DeclarativeWorkflow } from './designer.workflow';
+import { NodeTemplate } from './desinger.nodeTemplate.model';
+
+export class TopologyTemplate {
+
+    workflows: Map<string, DeclarativeWorkflow>;
+    'node_templates': Map<string, NodeTemplate>;
+
+    constructor() {
+        this.workflows = new Map();
+        this.node_templates = new Map();
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts
new file mode 100644
index 000000000..0687c1f47
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts
@@ -0,0 +1,14 @@
+export class Workflow {
+    inputs: {};
+    outputs?: {};
+}
+
+export class DeclarativeWorkflow implements Workflow {
+    steps: {};
+    inputs: {};
+    outputs?: {};
+
+    constructor() {
+        this.steps = {};
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
new file mode 100644
index 000000000..7f8556535
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
@@ -0,0 +1,10 @@
+export class NodeTemplate {
+    type: string;
+    properties?: {
+        'dependency-node-template'?: string[]
+    };
+    interfaces?: {};
+    artifacts?: {};
+    cabapilities?: {};
+    requirements?: {};
+}