Add progress bar on click microflow

ClevrSolutions · Oct 6, 2020 · c60fe92 · c60fe92
1 parent a4e117d
commit c60fe92
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/src/ChartJS/widgets/BarChart/BarChart.xml b/src/ChartJS/widgets/BarChart/BarChart.xml
@@ -236,6 +236,21 @@
             <description>Microflow to invoke when chart canvas is clicked</description>
             <returnType type="Void"></returnType>
         </property>
+        <property key="progressBarType" type="enumeration" defaultValue="none">
+            <caption>Progress bar</caption>
+            <category>Behavior</category>
+            <description>Type of progress bar to show when executing a microflow</description>
+            <enumerationValues>
+                <enumerationValue key="none">None</enumerationValue>
+                <enumerationValue key="blocking">Blocking</enumerationValue>
+                <enumerationValue key="regular">Regular</enumerationValue>
+            </enumerationValues>
+        </property>
+        <property key="microflowProgressString" type="translatableString" required="false">
+            <caption>Progress message</caption>
+            <category>Behavior</category>
+            <description>Progress bar text to display when executing a microflow</description>
+        </property>
         <property key="onclickDataSetMf" type="microflow" required="false" entityProperty="datasetentity">
             <caption>On Click Dataset Microflow</caption>
             <category>Behavior</category>

diff --git a/src/ChartJS/widgets/Core.js b/src/ChartJS/widgets/Core.js
@@ -37,6 +37,8 @@ export default defineWidget('Core', template, {
 
     // Set in the modeler
     responsiveRatio: 0,
+    progressBarType: "none",
+    microflowProgressString: "Loading",
 
     // Internal variables
     _chartJS: null,
@@ -70,7 +72,6 @@ export default defineWidget('Core', template, {
 
     startup() {
         this.log('startup');
-
         // Activate chartJS (and clone it, making sure globals are not overwritten for other instances).
         this._chartJS = clone(ChartJS);
 
@@ -330,6 +331,40 @@ export default defineWidget('Core', template, {
         this._ctx = this.canvasNode.getContext('2d');
     },
 
+    _executeWithProgress(microflow, guid, cb, errCb) {
+        // Wrap original function to add progress bar to all calls.
+        let callback = cb, errorCallback = errCb;
+        if ("blocking" === this.progressBarType || "regular" === this.progressBarType) {
+            this._progressId = mx.ui.showProgress(this.microflowProgressString || "", "blocking" === this.progressBarType);
+            callback = this._wrapCallback(cb);
+            errorCallback = this._wrapCallback(errCb);
+        }
+        this._execute(microflow, guid, callback, errorCallback);
+    },
+
+    _wrapCallback(cb) {
+        let callback = null;
+        if ("function" === typeof cb) {
+            callback = () => {
+                cb && cb();
+                this._hideProgress();
+            };
+        } else {
+            callback = () => {
+                this._hideProgress();
+            };
+        }
+        return callback;
+    },
+
+    _hideProgress() {
+        if (null !== this._progressId) {
+            this.log("Hide progress");
+            mx.ui.hideProgress(this._progressId);
+            this._progressId = null;
+        }
+    },
+
     _processData() {
         this.log('_processData needs to be replaced');
     },
@@ -356,16 +391,16 @@ export default defineWidget('Core', template, {
                     datasetObject = this._activeDatasets[ pointIndex ].obj;
                 }
 
-                this._execute(this.onclickDataSetMf, datasetObject && datasetObject.getGuid());
+                this._executeWithProgress(this.onclickDataSetMf, datasetObject && datasetObject.getGuid());
             }
 
             if (this.onclickDataPointMf && dataPointObject) {
-                this._execute(this.onclickDataPointMf, dataPointObject && dataPointObject.getGuid());
+                this._executeWithProgress(this.onclickDataPointMf, dataPointObject && dataPointObject.getGuid());
             }
         }
 
         if (this.onclickmf) {
-            this._execute(this.onclickmf, this._mxObj && this._mxObj.getGuid());
+            this._executeWithProgress(this.onclickmf, this._mxObj && this._mxObj.getGuid());
         }
     },
 

diff --git a/src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml b/src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml
@@ -205,6 +205,21 @@
                 <description>Microflow to invoke when chart canvas is clicked</description>
                 <returnType type="Void"></returnType>
             </property>
+            <property key="progressBarType" type="enumeration" defaultValue="none">
+                <caption>Progress bar</caption>
+                <category>Behavior</category>
+                <description>Type of progress bar to show when executing a microflow</description>
+                <enumerationValues>
+                    <enumerationValue key="none">None</enumerationValue>
+                    <enumerationValue key="blocking">Blocking</enumerationValue>
+                    <enumerationValue key="regular">Regular</enumerationValue>
+                </enumerationValues>
+            </property>
+            <property key="microflowProgressString" type="translatableString" required="false">
+                <caption>Progress message</caption>
+                <category>Behavior</category>
+                <description>Progress bar text to display when executing a microflow</description>
+            </property>
             <property key="onclickDataSetMf" type="microflow" required="false" entityProperty="datasetentity">
                 <caption>On Click Dataset Microflow</caption>
                 <category>Behavior</category>