Merge tag '0.10.0' of http://10.73.97.24/oecloud.io/oe-feel-designer …

…into release Added functionality for CRUD for Decision Tables.
EdgeVerve · Oct 25, 2018 · 4f799c7 · 4f799c7
2 parents 60057fd + 2483f22
commit 4f799c7
Show file tree

Hide file tree

Showing 34 changed files with 1,064 additions and 309 deletions.
diff --git a/docs/images/component_setting.png b/docs/images/component_setting.png
diff --git a/docs/images/connection_drawn.png b/docs/images/connection_drawn.png
diff --git a/docs/images/create_new_components.png b/docs/images/create_new_components.png
diff --git a/docs/images/create_new_connection.png b/docs/images/create_new_connection.png
diff --git a/docs/images/create_new_graph.png b/docs/images/create_new_graph.png
diff --git a/docs/images/decision_table_edit.png b/docs/images/decision_table_edit.png
diff --git a/docs/images/decision_value_setting.png b/docs/images/decision_value_setting.png
diff --git a/docs/images/empty_state.png b/docs/images/empty_state.png
diff --git a/docs/images/node_selection.png b/docs/images/node_selection.png
diff --git a/docs/images/open_list.png b/docs/images/open_list.png
diff --git a/docs/images/open_list_table.png b/docs/images/open_list_table.png
diff --git a/docs/images/save_graph_dialog.png b/docs/images/save_graph_dialog.png
diff --git a/docs/images/save_launch.png b/docs/images/save_launch.png
diff --git a/docs/images/save_service_dialog.png b/docs/images/save_service_dialog.png
diff --git a/docs/images/service_list.png b/docs/images/service_list.png
diff --git a/docs/images/service_selected.png b/docs/images/service_selected.png
diff --git a/docs/images/setting_decision_table.png b/docs/images/setting_decision_table.png
diff --git a/docs/images/simulate_node.png b/docs/images/simulate_node.png
diff --git a/docs/oe-feel-designer.md b/docs/oe-feel-designer.md
@@ -7,8 +7,8 @@ Here is the Landing Page.
 ![Landing Page](images/empty_state.png)
 
 
-## ***Graph Creation***
-Click on `Select Decision grpah` which will show the existing list of decision grpahs and new graph can be created by clicking on `Create new graph` button on top right of the list screen.
+## ***Decision Graph Creation***
+Click on `Select Decision graph` which will show the existing list of decision graphs and new graph can be created by clicking on `Create Decision graph` button under the options part on the right.
 
 ![Decision list](images/open_list.png)
 
@@ -54,7 +54,11 @@ Clicking on the `launch setting` icon will display a configuration page for the
 For decision table the rules are listed in a data-table with buttons to add input,output columns and a  rule. The names of the columns or the values in the row can be edited inline.
 
 ![Decision Table](images/decision_value_setting.png)
-Hovering over a rule record allows the user to move the rule up/down the rule list and also to delete the rule. Once all the settings are done click on the `save` icon at the top right of the page to return to the design view.
+Hovering over a rule record allows the user to move the rule up/down the rule list and also to delete the rule.
+
+> In addition to entering the rule data , the user can upload a valid Decision Table Excel using the `choose or drop files` file uploader button to populate the rulelist and hitPolicy. __Note__ : The Name of the decision Table will not be updated from the file and needs to be manually changed.
+
+Once all the settings are done click on the `save` icon at the top right of the page to return to the design view.
 
 #### **Node selection**
 On selection of a node, the node is highlighted and additional options are shown in the floating button to the top right of the screen.
@@ -75,4 +79,13 @@ The list of decision services associated with the current graph can be viewed by
 
 From here a service can be selected,edited or deleted. Once the service is selected the related nodes are highlighted and the service name appears near the floating button.
 
-![Service Selected](images/service_selected.png)
+![Service Selected](images/service_selected.png)
+
+## ***Decision table Creation***
+Click on `Select Decision graph` which will show the existing list of decision graphs, clicking on the Decision Table section in left displays the list of decision Tables available. A new decision Table can be created by clicking the `Create Decision Table` button under the options part on the right.
+
+![Decision Table List](images/open_list_table.png)
+
+This launches the decision Table editor used when editing the decision graph nodes, The user can enter the data or upload a valid Excel that populates the rules list and Hit Policy. Once the decision Table name is also configured the user can press the save icon on the top to save the Decision Table.
+
+![Decision Table Edit](images/decision_table_edit.png)
diff --git a/elements/oe-feel-boxed-invocation-setting.html b/elements/oe-feel-boxed-invocation-setting.html
@@ -14,7 +14,8 @@
         </style>
         <div class="component-container">
             <div>
-                <oe-input label="Target" value={{data.target}}></oe-input>
+                <oe-combo label="Target" value={{data.target}} listdata={{targetList}} 
+                valueproperty="name" displayproperty="name"></oe-combo>
             </div>
             <oe-feel-parameter-list parameters={{data.parameters}}></oe-feel-parameter-list>
         </div>
@@ -24,8 +25,11 @@
             is:"oe-feel-boxed-invocation-setting",
             properties: {
                 data: {
-                    type: Object,
-                    observer: '_dataChanged'
+                    type: Object
+                },
+                targetList:{
+                    type:Array,
+                    value:[]
                 }
             },
             getData:function(){

diff --git a/elements/oe-feel-component.html b/elements/oe-feel-component.html
@@ -110,6 +110,19 @@
                 box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.2);
             }
 
+            #validity-display{
+                position: absolute;
+                top: 2px;
+                left: 2px;
+            }
+
+            #validity-display.validation-true{
+                color:green;
+            }
+            #validity-display.validation-false{
+                color: red;
+            }
+
             #connectorTrigger {
                 width: 6px;
                 height: 6px;
@@ -167,6 +180,11 @@
                     </div>
                 </iron-pages>
             </div>
+            <div id="validity-display" class$="validation-[[node.__validity.valid]]" hidden=[[!node.__validity]]>
+                <iron-icon icon="[[_getValidityIcon(node.__validity.valid)]]">
+                </iron-icon>
+                <paper-tooltip hidden=[[node.__validity.valid]]>[[node.__validity.errorMessage]]</paper-tooltip>
+            </div>
             <div id="connectorTrigger" on-track="_handleConnectorLaunch"></div>
         </div>
     </template>
@@ -184,6 +202,9 @@
             _computeIcon: function (selected) {
                 return selected ? "check-box" : "check-box-outline-blank";
             },
+            _getValidityIcon:function(valid){
+                return valid ? "done" : "error";
+            },
             _launchSetting: function () {
                 this.fire('open-node-setting', this.node);
             },

diff --git a/elements/oe-feel-decision-table-setting.html b/elements/oe-feel-decision-table-setting.html
@@ -188,6 +188,10 @@
                 }
             }
 
+            #hit-policy-selection{
+                padding: 8px;
+            }
+
             #decisionTable {
                 --oe-data-table-data: {
                     padding-right: 24px;
@@ -234,7 +238,7 @@
 
         </style>
         <div class="component-container">
-            <div class="hit-policy-selection">
+            <div class="hit-policy-selection layout horizontal center justified">
                 <oe-combo label="Hit policy" id="hit-selector" listdata="[[hitPolicyList]]" value={{data.hitPolicy}} displayproperty="name"
                     valueproperty="code">
                     <template item-template>
@@ -244,6 +248,11 @@
                         </div>
                     </template>
                 </oe-combo>
+                <div class="upload-section">
+                    <oe-file-input show-clear value-type="dataUrl" value={{tempDocObj.documentData}}
+                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+                    </oe-file-input>
+                </div>
             </div>
             <div class="expression-table">
                 <div class="column-config" hidden="[[!showConfig]]">
@@ -284,13 +293,21 @@
                 data: {
                     type: Object,
                     observer: '_dataChanged'
+                },
+                tempDocObj:{
+                    type: Object,
+                    value:function(){
+                        return {};
+                    }
                 }
             },
             listeners: {
                 'oe-data-table-action-update-columns': '_launchColumnConfig',
                 'oe-data-table-action-add-rule': '_addRule',
                 'oe-data-table-row-action': '_handleRowAction'
             },
+            behaviors: [OEUtils.AjaxBehavior],
+            observers:['_documentChanged(tempDocObj.documentData)'],
             ready: function () {
                 var hitPolicies = [{
                         name: 'Unique',
@@ -518,13 +535,40 @@
                 newArr.fill('-');
                 this.push('decisionRows', newArr);
             },
+            _documentChanged:function(){
+                if(!this.tempDocObj.documentData){
+                    return;
+                }
+                var payload = this.tempDocObj;
+                this.makeAjaxCall(OEUtils._getRestApiUrl('/DecisionTables/parseExcel'), "POST", payload, null, null, function (err, resp) {
+                    if (resp) {
+                        delete resp.context;
+                        var excelData = JSON.parse(JSON.stringify(resp));
+                        var inputExprs = resp.inputValues || resp.inputValuesList;
+                        excelData.inputValues = (new Array(inputExprs.length)).fill("");
+                        delete excelData.inputValuesList;
+                        this.set('tempDocObj',{});
+                        this.fire('oe-show-confirm',{
+                            ok:function(){
+                                this.set('data',excelData);
+                            }.bind(this),
+                            message:"This will overwrite existing data.Do you want to proceed ?"
+                        });
+                    }else{
+                        this.resolveError(err);
+                    }
+                }.bind(this));
+            },
             getData: function () {
                 var valueRow = this.decisionRows[0];
                 var inputLength = this.data.inputExpressionList.length;
                 this.data.ruleList = this.decisionRows.slice(1);
                 this.data.outputValues = valueRow.splice(inputLength);
                 this.data.inputValues = valueRow;
                 return this.data;
+            },
+            _validate:function(){
+                return !!this.data.hitPolicy;
             }
         })
     </script>