From 4f1ee50380d15f9cb35e483e5bf45d9788bd3897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Mon, 10 Jan 2022 17:55:50 -0300
Subject: [PATCH 1/9] feat (translator): new condition statement

---
 .../dccs/components/control/dcc-compute.js    | 69 ++++++++++++-------
 .../public/translator/item-templates.js       |  2 +-
 src/adonisjs/public/translator/translator.js  | 45 ++++++++++--
 3 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/src/adonisjs/public/dccs/components/control/dcc-compute.js b/src/adonisjs/public/dccs/components/control/dcc-compute.js
index 13683f67..3586ed9e 100644
--- a/src/adonisjs/public/dccs/components/control/dcc-compute.js
+++ b/src/adonisjs/public/dccs/components/control/dcc-compute.js
@@ -13,21 +13,25 @@ class DCCCompute extends DCCBase {
 
     if (this.hasAttribute('id')) {
       this.computeStatus = this.computeStatus.bind(this)
-      this._subscribe('compute/status/' + this.id)
+      this._subscribe('compute/status/' + this.id, this.computeStatus)
     }
 
     this._notifyCompleted = this.hasAttribute('id')
 
+    this._condition = (this.hasAttribute('condition'))
+      ? DCCCompute.compileStatementSet(this.condition.toLowerCase()) : null
+
     this._compiled = null
     if (this.hasAttribute('expression')) {
       this._compiled =
         DCCCompute.compileStatementSet(this.expression.toLowerCase())
       if (this.hasAttribute('dependency')) {
-        this.newExpressionUpdate = this.newExpressionUpdate.bind(this)
+        this._dependencyCompleted = this._dependencyCompleted.bind(this)
         this._subscribe('compute/completed/' + this.dependency,
-                        this.newExpressionUpdate)
+                        this._dependencyCompleted)
+        this._publish('compute/status/' + this.dependency)
       } else if (this._compiled != null && this.active)
-        await this.newExpressionUpdate()
+        await this._newExpressionUpdate()
     }
 
     if (this.hasAttribute('id'))
@@ -36,6 +40,7 @@ class DCCCompute extends DCCBase {
 
   async disconnectedCallback() {
     await this._unsubscribeVariables()
+    this._unsubscribe('compute/status/' + this.id, this.computeStatus)
   }
 
   async _subscribeVariables () {
@@ -53,7 +58,13 @@ class DCCCompute extends DCCBase {
     }
   }
 
-  async newExpressionUpdate () {
+  _dependencyCompleted () {
+    this._unsubscribe('compute/completed/' + this.dependency,
+                      this._dependencyCompleted)
+    this._newExpressionUpdate()
+  }
+
+  async _newExpressionUpdate () {
     await this.update()
     await this._subscribeVariables()
   }
@@ -64,7 +75,17 @@ class DCCCompute extends DCCBase {
 
   static get observedAttributes () {
     return DCCBase.observedAttributes.concat(
-      ['expression', 'onload', 'active', 'dependency'])
+      ['condition', 'expression', 'active', 'dependency'])
+  }
+
+  get condition () {
+    return this.getAttribute('condition')
+  }
+
+  set condition (newValue) {
+    this.setAttribute('condition', newValue)
+    this._condition = (newValue != null)
+      ? DCCCompute.compileStatementSet(newValue.toLowerCase()) : null
   }
 
   get expression () {
@@ -73,17 +94,11 @@ class DCCCompute extends DCCBase {
 
   set expression (newValue) {
     this.setAttribute('expression', newValue)
+    this._compiled = (newValue != null)
+      ? DCCCompute.compileStatementSet(newValue.toLowerCase()) : null
     this._newExpressionUpdate()
   }
 
-  get onload () {
-    return this.hasAttribute('onload')
-  }
-
-  set onload (isOnload) {
-    if (isOnload) { this.setAttribute('onload', '') } else { this.removeAttribute('onload') }
-  }
-
   // defines if the display is activelly updated
   get active () {
     return this.hasAttribute('active')
@@ -111,17 +126,20 @@ class DCCCompute extends DCCBase {
   }
 
   async update () {
-    const result = await DCCCompute.computeExpression(
-      this._compiled, this._bus)
-    if (result) {
-      this._completed = true
-      await this.multiRequest('true', null)
-      if (this._notifyCompleted) {
-        this._notifyCompleted = false
-        await this._publish('compute/completed/' + this.id)
-      }
-    } else
-      await this.multiRequest('false', null)
+    if (this._condition == null ||
+        await DCCCompute.computeExpression(this._condition, this._bus)) {
+      const result = await DCCCompute.computeExpression(
+        this._compiled, this._bus)
+      if (result)
+        await this.multiRequest('true', null)
+      else
+        await this.multiRequest('false', null)
+    }
+    this._completed = true
+    if (this._notifyCompleted) {
+      this._notifyCompleted = false
+      await this._publish('compute/completed/' + this.id)
+    }
   }
 
   computeStatus () {
@@ -359,6 +377,7 @@ class DCCCompute extends DCCBase {
               case '*': stack.push(a * b); break
               case '/': stack.push(a / b); break
               case '^': stack.push(Math.pow(a, b)); break
+              case '=': stack.push(a == b); break;
               case '>': stack.push(a > b); break;
               case '<': stack.push(a < b); break;
               case '>=': stack.push(a >= b); break;
diff --git a/src/adonisjs/public/translator/item-templates.js b/src/adonisjs/public/translator/item-templates.js
index 55a3f5a8..dac1a8ce 100644
--- a/src/adonisjs/public/translator/item-templates.js
+++ b/src/adonisjs/public/translator/item-templates.js
@@ -47,7 +47,7 @@
     output:
 '<dcc-expression id=\'dcc[seq]\'[author] expression=\'[variable][index]\'[variant] active></dcc-expression>',
     compute:
-'<dcc-compute id=\'dcc[seq]\' expression=\'[expression]\'[connect][dependency] active></dcc-compute>',
+'<dcc-compute id=\'dcc[seq]\' expression=\'[expression]\'[connect][condition][dependency] active></dcc-compute>',
     timer:
 `<dcc-timer cycles="[cycles]" interval="1000" autostart>
   <connect-dcc trigger="begin" to="dcc[to]" topic="style/display/none"></connect-dcc>
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index 90c09e18..c006992e 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -874,7 +874,19 @@ class Translator {
         compiled[c].render = false
     }
 
-    // twelfth cycle - update formal annotations
+    // twelfth cycle - attach conditions to conditioned
+    for (let c = 0; c < compiled.length; c++) {
+      if (compiled[c].type == 'condition' && c < compiled.length - 1 &&
+          compiled[c+1].type == 'compute') {
+        compiled[c+1].condition = compiled[c].expression
+        compiled[c+1]._source = compiled[c]._source + compiled[c+1]._source
+        compiled.splice(c, 1)
+        c--
+      }
+      if (c >= 0) { compiled[c].seq = c + 1 }
+    }
+
+    // thirteenth cycle - update formal annotations
     // <TODO> provisory update of formal annotations - both processes will be merged
     let formalOpen = null
     for (let c = 0; c < compiled.length; c++) {
@@ -1095,6 +1107,7 @@ class Translator {
         // case "talk-close": obj = this._talkcloseMdToObj(match); break;
       case 'input' : obj = this._inputMdToObj(match); break
       case 'output' : obj = this._outputMdToObj(match); break
+      case 'condition' : obj = this._conditionMdToObj(match); break
       case 'compute' : obj = this._computeMdToObj(match); break
         // <TODO> provisory: annotation recognition is duplicated to support code generation
       case 'annotation' : obj = this._annotationMdToObj(match); break
@@ -2458,8 +2471,20 @@ class Translator {
   }
 
   /*
-    * Compute Md to Obj
-    */
+   * Condition Md to Obj
+   */
+  _conditionMdToObj (matchArray) {
+    const condition = {
+      type: 'condition',
+      expression: matchArray[1].trim()
+    }
+
+    return condition
+  }
+
+  /*
+   * Compute Md to Obj
+   */
   _computeMdToObj (matchArray) {
     const compute = {
       type: 'compute',
@@ -2492,6 +2517,8 @@ class Translator {
     let compute
     const dependency = (this._lastCompute != null)
       ? (' dependency="' + this._lastCompute + '"') : ''
+    const condition = (obj.condition != null)
+      ? (' condition="' + obj.condition + '"') : ''
     if (obj.conditional) {
       const timer = obj.expression.match(/timer[ \t]*=[ \t]*(\d+)/im)
       if (timer != null && timer[1]) {
@@ -2502,12 +2529,14 @@ class Translator {
         compute = Translator.htmlTemplates.compute
           .replace('[seq]', obj.seq)
           .replace('[expression]', obj.expression)
+          .replace('[condition]', condition)
           .replace('[dependency]', dependency)
           .replace('[connect]', ' connect="true:dcc' + (obj.seq+1) +
                    ':style/display/initial"')
         compute += Translator.htmlTemplates.compute
           .replace('[seq]', obj.seq)
           .replace('[expression]', obj.expression)
+          .replace('[condition]', condition)
           .replace('[dependency]', dependency)
           .replace('[connect]', ' connect="false:dcc' + (obj.seq+1) +
                    ':style/display/none"')
@@ -2517,6 +2546,7 @@ class Translator {
       compute = Translator.htmlTemplates.compute
                   .replace('[seq]', obj.seq)
                   .replace('[expression]', obj.expression)
+                  .replace('[condition]', condition)
                   .replace('[dependency]', dependency)
                   .replace('[connect]', '')
     this._lastCompute = 'dcc' + obj.seq
@@ -2659,11 +2689,12 @@ class Translator {
   Translator.marksKnotTitle = /((?:^[ \t]*(?:#+)[ \t]*(?:[^\( \t\n\r\f][^\(\n\r\f]*)(?:\((?:\w[\w \t,]*)\))?(?:\:[ \t]*[^\(\n\r\f][^\(\n\r\f\t]*)?[ \t]*#*[ \t]*$)|(?:^[ \t]*(?:[^\( \t\n\r\f][^\(\n\r\f]*)(?:\((?:\w[\w \t,]*)\))?(?:\:[ \t]*[^\(\n\r\f][^\(\n\r\f\t]*)?[ \t]*[\f\n\r][\n\r]?(?:==+|--+)$))/igm
 
   Translator.fragment = {
-    // compute: '~[ \\t]*(\\w+)?[ \\t]*([+\\-*/=])[ \\t]*(\\d+(?:\\.\\d+)?)',
-    compute: '~[ \\t]*([\\w+\\-*/=:<>\\.\\(\\) \\t]+)(\\?)?',
+    expression: '([\\w+\\-*/=:<>\\.\\(\\) \\t]+)(\\?)?',
     option: '^[ \\t]*([\\+\\*])[ \\t]+((?:[^<\\n\\r\\f]|<(?!-))*)?((?:(?:(?:&lt;)|<)?-(?:(?:&gt;)|>))|(?:\\(-\\)))[ \\t]*([^">~\\n\\r\\f(]+)(?:"([^"\\n\\r\\f]*)")?[ \\t]*(?:(\\>)?\\(\\(([^)]*)\\)\\))?(\\?)?[ \\t]*'
   }
 
+  Translator.fragment.compute = '~[ \\t]*' + Translator.fragment.expression
+
   Translator.element = {
     knot: {
       mark: /(?:^[ \t]*(#+)[ \t]*([^\( \t\n\r\f\:#][^\(\n\r\f\:#]*)(?:\((\w[\w \t,]*)\))?[ \t]*(?:\:[ \t]*([^\(\n\r\f#][^\(\n\r\f\t#]*))?[ \t]*(#+)?[ \t]*$)|^(?:(==+|--+)[\f\n\r][\n\r]?)?(?:[ \t]*([^\( \t\n\r\f\:][^\(\n\r\f\:]*)(?:\((\w[\w \t,]*)\))?[ \t]*(?:\:[ \t]*([^\(\n\r\f][^\(\n\r\f\t]*))?[ \t]*[\f\n\r][\n\r]?(==+|--+)$)/im,
@@ -2722,9 +2753,11 @@ class Translator {
       mark: /\^([\w \t\.]+)(?:\[([\w \t]+)\])?(?:\(([\w \t]+)\))?\^/im,
       inline: true
     },
+    condition: {
+      mark: new RegExp('\\$[ \\t]*\\(' + Translator.fragment.expression + '\\)[ \\t]*', 'im')
+    },
     compute: {
       mark: new RegExp(Translator.fragment.compute + '$', 'im')
-      // mark: /~[ \t]*(\w+)?[ \t]*([+\-*/=])[ \t]*(\d+(?:\.\d+)?)$/im
     },
     'context-open': {
       mark: /\{\{(?:([^\:\n\r\f]+)\:)?([\w \t\+\-\*\."=%]+)?(?:@(\w+))?(?:\/((?:\w+\:)?\w+)(?:[ \t]+((?:\w+\:)?\w+))?\/)?$/im

From 39ad6f5495ad106225cbdd6654b7e0c9140c6a39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Mon, 10 Jan 2022 21:39:21 -0300
Subject: [PATCH 2/9] refactor (playground): all fused in a single playground

---
 .../public/dccs/playground/index-data.html    | 154 ------------------
 .../public/dccs/playground/index-dhtml.html   | 103 ------------
 .../public/dccs/playground/index.html         |  14 ++
 3 files changed, 14 insertions(+), 257 deletions(-)
 delete mode 100644 src/adonisjs/public/dccs/playground/index-data.html
 delete mode 100644 src/adonisjs/public/dccs/playground/index-dhtml.html

diff --git a/src/adonisjs/public/dccs/playground/index-data.html b/src/adonisjs/public/dccs/playground/index-data.html
deleted file mode 100644
index 7655773c..00000000
--- a/src/adonisjs/public/dccs/playground/index-data.html
+++ /dev/null
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-   <meta charset="utf-8">
-   <title>DCCs Playground</title>
-
-   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
-
-   <script src="../../config/config.js"></script>
-
-   <link rel="stylesheet" href="../../lib/fontawesome-5-10-1/css/all.min.css">
-   <link rel="stylesheet" href="../../lib/bootstrap-4.4.1/css/bootstrap.min.css">
-   <link href="../../lib/quill-1-3-7/quill.snow.css" rel="stylesheet">
-
-   <link rel="stylesheet" href="../../infra/css/common-player.css">
-   <link rel="stylesheet" href="../../infra/css/common-author.css">
-
-   <script src="../../lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-   <script src="../../lib/popper-1-15-0/popper.min.js"></script>
-   <script src="../../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
-   <script src="../../lib/axios-0.21.0/axios.min.js"></script>
-
-   <script src="../../dccs/base/primitive-dcc.js"></script>
-   <script src="../../dccs/base/scope-dcc.js"></script>
-   <script src="../../dccs/base/dcc.js"></script>
-   <script src="../../dccs/base/dcc-base.js"></script>
-   <script src="../../dccs/base/dcc-visual.js"></script>
-   <script src="../../dccs/base/dcc-block.js"></script>
-
-   <script src="../../dccs/components/visual/dcc-button.js"></script>
-   <script src="../../dccs/components/visual/dcc-input.js"></script>
-   <script src="../../dccs/components/visual/dcc-input-typed.js"></script>
-
-   <script src="../../dccs/components/data/dcc-model.js"></script>
-   <script src="../../dccs/components/data/dcc-submit.js"></script>
-   <script src="../../dccs/components/data/dcc-record.js"></script>
-   <script src="../../dccs/components/data/dcc-form.js"></script>
-
-   <script src="../../dccs/components/web/dcc-include.js"></script>
-   <script src="../../dccs/components/web/dcc-dhtml.js"></script>
-   <script src="../../dccs/components/web/dcc-rest.js"></script>
-
-   <script src="../../infra/bus.js"></script>
-   <script src="../../infra/basic.js"></script>
-   <script src="../../infra/dcc-common-server-proxy.js"></script>
-   <script src="../../infra/dcc-rest-proxy.js"></script>
-
-   <script src="../../dccs/base/subscribe-dcc.js"></script>
-   <script src="../../dccs/base/trigger-dcc.js"></script>
-   <script src="../../dccs/base/property-dcc.js"></script>
-   <script src="../../dccs/base/connect-dcc.js"></script>
-
-   <script src="js/model-components.js"></script>
-   <script src="js/rest-components.js"></script>
-   <script src="js/submit-components.js"></script>
-   <script src="js/form-components.js"></script>
-
-   <script>
-      function start() {
-         document.querySelector("#json-message").value = "";
-         MessageBus.i.subscribe("control/render/example", render);
-         MessageBus.i.subscribe("#", showJson);
-
-         let parameters = window.location.search.substr(1);
-         if (parameters != null && parameters.length > 0) {
-            const source = parameters.match(/source=([\w-\/]+)/i);
-            if (source != null) {
-               let caseScript = document.createElement("script");
-               caseScript.src = "gallery/" + source[1] + ".js";
-               document.head.appendChild(caseScript);
-            }
-         }
-      }
-
-      function render(topic, message) {
-         document.querySelector("#render-panel").innerHTML = document.querySelector("#editor").value;
-      }
-
-      function insertSource(name, source) {
-         document.querySelector("#editor").value = source;
-         render();
-      }
-
-      function showJson(topic, message) {
-         if (topic != "control/render/example")
-            document.querySelector("#json-message").value =
-               document.querySelector("#json-message").value +
-               "topic: " + topic + "\n" +
-               "message: " + JSON.stringify(message) + "\n\n";
-      }
-   </script>
-
-</head>
-
-<body onload="start()">
-   <script>
-      // MessageBus.page = new MessageBus(false);
-      Basic.service.rootPath = "../../";
-   </script>
-
-  <main role="main">
-    <div class="d-flex flex-column vh-100 hidden-overflow">
-      <div class="container-fluid">
-        <nav aria-label="breadcrumb">
-          <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item"><a href="#">Developers</a></li>
-            <li class="breadcrumb-item active" aria-current="page">Playground</li>
-          </ol>
-        </nav>
-      </div>
-
-      <div class="container-fluid">
-        <h1>DCC Playground</h1>
-        <p class="lead">Test your Digital Content Components (DCCs) here.</p>
-      </div>
-
-      <div class="container-fluid">
-        <nav class="navbar navbar-light">
-          <dcc-button topic="control/render/example" label="RENDER" xstyle="in">
-          </dcc-button>
-        </nav>
-      </div>
-
-      <div class=" d-flex h-100 mb-3">
-        <div class=" d-flex col-6 flex-column align-items-stretch">
-          <div class="d-flex std-panel h-50 flex-column">
-            <div class="panel-label">Editor</div>
-            <div class="d-flex h-100 w-100">
-               <textarea id="editor" class="w-100 h-100 std-monospace"></textarea>
-            </div>
-          </div>
-          <div class="d-flex std-panel h-50 flex-column">
-            <div class="panel-label">Messages</div>
-            <div class="d-flex h-100 w-100">
-               <textarea id="json-message" class="w-100 h-100 std-monospace"></textarea>
-            </div>
-          </div>
-        </div>
-
-
-        <div class="align-items-stretch col-6">
-          <div class="std-panel h-100 w-100">
-             <div class="panel-label">Result</div>
-             <div id="render-panel" class="h-100 w-100"></div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </main>
-
-   </body>
-</html>
diff --git a/src/adonisjs/public/dccs/playground/index-dhtml.html b/src/adonisjs/public/dccs/playground/index-dhtml.html
deleted file mode 100644
index 5be147ed..00000000
--- a/src/adonisjs/public/dccs/playground/index-dhtml.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-   <meta charset="utf-8">
-   <title>DCCs Playground</title>
-
-   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
-
-   <script src="../../config/config.js"></script>
-
-   <link rel="stylesheet" href="../../lib/fontawesome-5-10-1/css/all.min.css">
-   <link rel="stylesheet" href="../../lib/bootstrap-4.4.1/css/bootstrap.min.css">
-   <link href="../../lib/quill-1-3-7/quill.snow.css" rel="stylesheet">
-
-   <link rel="stylesheet" href="../../infra/css/common-player.css">
-   <link rel="stylesheet" href="../../infra/css/common-author.css">
-
-   <script src="../../lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-   <script src="../../lib/popper-1-15-0/popper.min.js"></script>
-   <script src="../../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
-   <script src="../../lib/axios-0.21.0/axios.min.js"></script>
-
-   <script src="../../dccs/base/primitive-dcc.js"></script>
-   <script src="../../dccs/base/scope-dcc.js"></script>
-   <script src="../../dccs/base/dcc.js"></script>
-   <script src="../../dccs/base/dcc-base.js"></script>
-   <script src="../../dccs/base/dcc-visual.js"></script>
-   <script src="../../dccs/base/dcc-block.js"></script>
-   <script src="../../dccs/components/visual/dcc-button.js"></script>
-   <script src="../../dccs/components/visual/dcc-input.js"></script>
-   <script src="../../dccs/components/visual/dcc-input-typed.js"></script>
-
-   <script src="../../dccs/components/data/dcc-model.js"></script>
-   <script src="../../dccs/components/data/dcc-submit.js"></script>
-   <script src="../../dccs/components/data/dcc-record.js"></script>
-
-   <script src="../../dccs/components/web/dcc-include.js"></script>
-   <script src="../../dccs/components/web/dcc-dhtml.js"></script>
-   <script src="../../dccs/components/web/dcc-rest.js"></script>
-
-   <script src="../../infra/bus.js"></script>
-   <script src="../../infra/basic.js"></script>
-   <script src="../../infra/dcc-common-server-proxy.js"></script>
-   <script src="../../infra/dcc-rest-proxy.js"></script>
-
-   <script src="../../dccs/base/subscribe-dcc.js"></script>
-   <script src="../../dccs/base/trigger-dcc.js"></script>
-   <script src="../../dccs/base/property-dcc.js"></script>
-   <script src="../../dccs/base/connect-dcc.js"></script>
-
-   <script src="js/model-components.js"></script>
-   <script src="js/rest-components.js"></script>
-   <script src="js/submit-components.js"></script>
-
-   <script>
-      function start() {
-         document.querySelector("#json-message").value = "";
-         MessageBus.i.subscribe("control/render/example", render);
-         MessageBus.i.subscribe("#", showJson);
-
-         let parameters = window.location.search.substr(1);
-         if (parameters != null && parameters.length > 0) {
-            const source = parameters.match(/source=([\w-\/]+)/i);
-            if (source != null) {
-               let caseScript = document.createElement("script");
-               caseScript.src = "gallery/" + source[1] + ".js";
-               document.head.appendChild(caseScript);
-            }
-         }
-      }
-
-      function render(topic, message) {
-         document.querySelector("#render-panel").innerHTML = document.querySelector("#editor").value;
-      }
-
-      function insertSource(name, source) {
-         document.querySelector("#editor").value = source;
-         render();
-      }
-
-      function showJson(topic, message) {
-         if (topic != "control/render/example")
-            document.querySelector("#json-message").value =
-               document.querySelector("#json-message").value +
-               "topic: " + topic + "\n" +
-               "message: " + JSON.stringify(message) + "\n\n";
-      }
-   </script>
-
-</head>
-
-  <body>
-
-<dcc-dhtml>
-  {{nome}}
- <div>EDIT</div>
- <div>PREVIEW</div>
- <dcc-button></dcc-button>
- <div>DELETE</div>
-</dcc-dhtml>
-
-  </body>
-</html>
diff --git a/src/adonisjs/public/dccs/playground/index.html b/src/adonisjs/public/dccs/playground/index.html
index faa3c745..3579a94f 100644
--- a/src/adonisjs/public/dccs/playground/index.html
+++ b/src/adonisjs/public/dccs/playground/index.html
@@ -6,6 +6,8 @@
 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
 
+   <script src="../../config/config.js"></script>
+
    <link rel="stylesheet" href="../../lib/fontawesome-5-10-1/css/all.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1/css/bootstrap.min.css">
 
@@ -16,12 +18,14 @@
    <script src="../../lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
    <script src="../../lib/popper-1-15-0/popper.min.js"></script>
    <script src="../../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+   <script src="../../lib/axios-0.21.0/axios.min.js"></script>
 
    <script src="../../config/config-standalone.js"></script>
 
    <script src="../../infra/bus.js"></script>
    <script src="../../infra/basic.js"></script>
    <script src="../../infra/dcc-common-server-proxy.js"></script>
+   <script src="../../infra/dcc-rest-proxy.js"></script>
 
    <script src="../../dccs/base/primitive-dcc.js"></script>
    <script src="../../dccs/base/scope-dcc.js"></script>
@@ -64,10 +68,15 @@
    <script src="../../dccs/components/visual/dcc-graph.js"></script>
 
    <script src="../../dccs/components/data/dcc-table-csv.js"></script>
+   <script src="../../dccs/components/data/dcc-model.js"></script>
+   <script src="../../dccs/components/data/dcc-submit.js"></script>
+   <script src="../../dccs/components/data/dcc-record.js"></script>
+   <script src="../../dccs/components/data/dcc-form.js"></script>
 
    <script src="../../dccs/components/web/dcc-rss.js"></script>
    <script src="../../dccs/components/web/dcc-aggregator.js"></script>
    <script src="../../dccs/components/web/dcc-dhtml.js"></script>
+   <script src="../../dccs/components/web/dcc-rest.js"></script>
 
    <script src="../../dccs/components/web/dcc-include.js"></script>
    <script src="../../dccs/components/web/dcc-play.js"></script>
@@ -86,6 +95,11 @@
    <script src="../../dccs/components/ml/learningjs.js"></script>
    <script src="../../dccs/components/ml/dcc-decision-tree.js"></script>
 
+   <script src="js/model-components.js"></script>
+   <script src="js/rest-components.js"></script>
+   <script src="js/submit-components.js"></script>
+   <script src="js/form-components.js"></script>
+
    <script src="../../player/js/state.js"></script>
 
    <script>

From a5e41639373ba8ccc53b2f3987f7a0a72563e108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Mon, 10 Jan 2022 22:37:00 -0300
Subject: [PATCH 3/9] fix (dcc-html): iteration in a subfield

---
 .../author/drafts/category/cases/index.html   | 14 +++++-----
 .../public/author/drafts/feedback/index.html  | 10 +++----
 src/adonisjs/public/author/drafts/index.html  | 14 +++++-----
 .../public/author/partials/case-list-min.html | 14 +++++-----
 .../public/dccs/components/web/dcc-dhtml.js   | 16 ++++++++----
 .../public/dccs/playground/index.html         |  7 ++---
 .../dccs/playground/js/rest-components.js     | 26 +++++++++++++++++++
 .../player/home/category/cases/index.html     |  8 +++---
 src/adonisjs/public/player/home/index.html    |  8 +++---
 .../public/report/category/cases/index.html   | 12 ++++-----
 .../category/cases/play/index-celular.html    | 10 +++----
 .../report/category/cases/play/index.html     |  8 +++---
 12 files changed, 90 insertions(+), 57 deletions(-)

diff --git a/src/adonisjs/public/author/drafts/category/cases/index.html b/src/adonisjs/public/author/drafts/category/cases/index.html
index a56e4520..138aa077 100644
--- a/src/adonisjs/public/author/drafts/category/cases/index.html
+++ b/src/adonisjs/public/author/drafts/category/cases/index.html
@@ -255,23 +255,23 @@ <h5 class="" id="modal-notice-txt"></h5>
               <div class="share-cases-element wrapper-checkbox-select-case" hidden>
                 <div class="col">
                   <div class="form-check share-checkbox">
-                    <input class="form-check-input" type="checkbox" id="c{{c.cases.id}}" value="{{c.cases.id}}">
+                    <input class="form-check-input" type="checkbox" id="c{{c.id}}" value="{{c.id}}">
                   </div>
                 </div>
               </div>
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  <label class="ml-2">{{c.cases.title}}</label>
+                  <label class="ml-2">{{c.title}}</label>
 
                   <div class="row">
-                    <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+                    <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
                   </div>
                 </div>
 
                 <div class="d-flex justify-content-end justify-content-center buttons-container">
-                  <div id="e{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
-                  <div id="p{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
-                  <div id="d{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
+                  <div id="e{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
+                  <div id="p{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
+                  <div id="d{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/author/drafts/feedback/index.html b/src/adonisjs/public/author/drafts/feedback/index.html
index 222b90d6..de6e33d7 100644
--- a/src/adonisjs/public/author/drafts/feedback/index.html
+++ b/src/adonisjs/public/author/drafts/feedback/index.html
@@ -243,21 +243,21 @@ <h5 class="" id="modal-notice-txt"></h5>
               <div class="share-cases-element wrapper-checkbox-select-case" hidden>
                 <div class="col">
                   <div class="form-check share-checkbox">
-                    <input class="form-check-input" type="checkbox" id="c{{c.cases.id}}" value="{{c.cases.id}}">
+                    <input class="form-check-input" type="checkbox" id="c{{c.id}}" value="{{c.id}}">
                   </div>
                 </div>
               </div>
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  <label class="ml-2">{{c.cases.title}}</label>
+                  <label class="ml-2">{{c.title}}</label>
 
                   <div class="row">
-                    <h6>Created by: {{c.cases.username}} ({{c.cases.institution_acronym}}) || {{c.cases.feedback}}</h6>
+                    <h6>Created by: {{c.username}} ({{c.institution_acronym}}) || {{c.feedback}}</h6>
                   </div>
                 </div>
 
                 <div class="d-flex justify-content-end justify-content-center buttons-container">
-                  <div id="e{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW FEEDBACK</div>
+                  <div id="e{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW FEEDBACK</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/author/drafts/index.html b/src/adonisjs/public/author/drafts/index.html
index 757a3c3c..53b7179b 100644
--- a/src/adonisjs/public/author/drafts/index.html
+++ b/src/adonisjs/public/author/drafts/index.html
@@ -282,23 +282,23 @@ <h5 class="" id="modal-notice-txt"></h5>
               <div class="share-cases-element wrapper-checkbox-select-case" hidden>
                 <div class="col">
                   <div class="form-check share-checkbox">
-                    <input class="form-check-input" type="checkbox" id="c{{c.cases.id}}" value="{{c.cases.id}}">
+                    <input class="form-check-input" type="checkbox" id="c{{c.id}}" value="{{c.id}}">
                   </div>
                 </div>
               </div>
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  <label class="ml-2">{{c.cases.title}}</label>
+                  <label class="ml-2">{{c.title}}</label>
 
                   <div class="row">
-                    <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+                    <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
                   </div>
                 </div>
 
                 <div class="d-flex justify-content-end justify-content-center buttons-container">
-                  <div id="e{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
-                  <div id="p{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
-                  <div id="d{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
+                  <div id="e{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
+                  <div id="p{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
+                  <div id="d{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/author/partials/case-list-min.html b/src/adonisjs/public/author/partials/case-list-min.html
index 03842ba5..c1c677cf 100644
--- a/src/adonisjs/public/author/partials/case-list-min.html
+++ b/src/adonisjs/public/author/partials/case-list-min.html
@@ -59,22 +59,22 @@
     <!-- checkbox for selecting cases -->
     <!-- <div class="col">
       <div class="form-check" id="share-checkbox">
-        <input class="form-check-input" type="checkbox" id="c{{c.cases.id}}" value="{{c.cases.id}}">
+        <input class="form-check-input" type="checkbox" id="c{{c.id}}" value="{{c.id}}">
       </div>
     </div> -->
-    <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+    <div id="b{{c.id}}" class="row draft-author-case-container">
       <div class="col draft-case-title">
-        <label class="ml-2">{{c.cases.title}}</label>
+        <label class="ml-2">{{c.title}}</label>
 
         <div class="row">
-          <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+          <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
         </div>
       </div>
 
       <div class="d-flex justify-content-end justify-content-center buttons-container">
-        <div id="e{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
-        <div id="p{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
-        <div id="d{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
+        <div id="e{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
+        <div id="p{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
+        <div id="d{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
       </div>
     </div>
     {{@endfor}}
diff --git a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
index 4a9029d9..d2c6e4b1 100644
--- a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
+++ b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
@@ -31,6 +31,10 @@ class DCCDHTML extends DCCBase {
 
     this._renderHTML()
 
+    if (this.innerHTML.length > 0) {
+      this._originalHTML = this.innerHTML
+      this.innerHTML = ''
+    }
     this._observer = new MutationObserver(this._contentUpdated)
     this._observer.observe(this,
                            {attributes: true, childList: true, subtree: true})
@@ -104,11 +108,13 @@ class DCCDHTML extends DCCBase {
         const vhtml = eachBlocks[part+2].split(/(?:<!--[ \t]*)?\{\{[ \t]*@endfor[ \t]*\}\}(?:[ \t]*-->)?/im)
         const phtml = this._replaceFields(vhtml[0], '', record)
         if (phtml.includes('{{')) {
-          const it = (field == '.') ? record : record[field]
-          for (let i of it)
-            html += this._replaceFields(
-              // phtml, item, i)
-              phtml, (field == '.') ? item : item + '.' + field, i)
+          const it = (record != null) ? ((field == '.') ? record : record[field]) : null
+          if (it != null && typeof it[Symbol.iterator] === 'function') { // check if it is iterable
+            for (let i of it)
+              html += this._replaceFields(
+                phtml, item, i)
+                // phtml, (field == '.') ? item : item + '.' + field, i)
+          }
         }
         if (vhtml.length > 1)
           html += this._replaceFields(vhtml[1], '', record)
diff --git a/src/adonisjs/public/dccs/playground/index.html b/src/adonisjs/public/dccs/playground/index.html
index 3579a94f..af43b910 100644
--- a/src/adonisjs/public/dccs/playground/index.html
+++ b/src/adonisjs/public/dccs/playground/index.html
@@ -20,12 +20,10 @@
    <script src="../../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
    <script src="../../lib/axios-0.21.0/axios.min.js"></script>
 
-   <script src="../../config/config-standalone.js"></script>
+   <!-- <script src="../../config/config-standalone.js"></script> -->
 
    <script src="../../infra/bus.js"></script>
    <script src="../../infra/basic.js"></script>
-   <script src="../../infra/dcc-common-server-proxy.js"></script>
-   <script src="../../infra/dcc-rest-proxy.js"></script>
 
    <script src="../../dccs/base/primitive-dcc.js"></script>
    <script src="../../dccs/base/scope-dcc.js"></script>
@@ -36,6 +34,9 @@
    <script src="../../dccs/base/property-dcc.js"></script>
    <script src="../../dccs/base/dcc-base.js"></script>
 
+   <script src="../../infra/dcc-common-server-proxy.js"></script>
+   <script src="../../infra/dcc-rest-proxy.js"></script>
+
    <script src="../../dccs/components/control/dcc-timer.js"></script>
    <script src="../../dccs/base/dcc-visual.js"></script>
    <script src="../../dccs/components/visual/dcc-monitor.js"></script>
diff --git a/src/adonisjs/public/dccs/playground/js/rest-components.js b/src/adonisjs/public/dccs/playground/js/rest-components.js
index 0ebcafec..743be919 100644
--- a/src/adonisjs/public/dccs/playground/js/rest-components.js
+++ b/src/adonisjs/public/dccs/playground/js/rest-components.js
@@ -132,4 +132,30 @@ DCC.component(
   }
 )
 
+DCC.component(
+  'harena-logger-list',
+  'dcc-rest',
+  {
+    environment: {
+      'url-manager': HarenaConfig.manager.url + HarenaConfig.manager.api,
+      'caseId': '1490b6f1-548d-4224-a6b6-060fa3c7410a'
+    },
+    oas: {
+      paths: {
+        '{url-manager}/logger/list': {
+          'get': {
+            operationId: 'loggers',
+            parameters: [
+              {name: 'url-manager',
+               in: 'path'},
+              {name: 'caseId',
+               in: 'query'}
+            ]
+          }
+        }
+      }
+    }
+  }
+)
+
 })()
diff --git a/src/adonisjs/public/player/home/category/cases/index.html b/src/adonisjs/public/player/home/category/cases/index.html
index 48f76241..506f43e9 100644
--- a/src/adonisjs/public/player/home/category/cases/index.html
+++ b/src/adonisjs/public/player/home/category/cases/index.html
@@ -143,15 +143,15 @@
             <dcc-dhtml id="harena-dhtml-cases" connect="retrieve:harena-cases:service/request/get" subscribe="service/response/get/harena-cases-filter:update">
               <input type="hidden" id="pages" value="{{pages}}">
               {{@foreach cases c}}
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  {{c.cases.title}}
+                  {{c.title}}
                   <div class="row">
-                    <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+                    <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
                   </div>
                 </div>
                 <div class="d-flex justify-content-end buttons-container">
-                  <div id="v{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW</div>
+                  <div id="v{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/player/home/index.html b/src/adonisjs/public/player/home/index.html
index 67676fbb..9d76b99d 100644
--- a/src/adonisjs/public/player/home/index.html
+++ b/src/adonisjs/public/player/home/index.html
@@ -145,15 +145,15 @@
             <dcc-dhtml id="harena-dhtml-cases" connect="retrieve:harena-cases:service/request/get" subscribe="service/response/get/harena-cases-filter:update">
               <input type="hidden" id="pages" value="{{pages}}">
               {{@foreach cases c}}
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  {{c.cases.title}}
+                  {{c.title}}
                   <div class="row">
-                    <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+                    <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
                   </div>
                 </div>
                 <div class="d-flex justify-content-end buttons-container">
-                  <div id="v{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW</div>
+                  <div id="v{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">VIEW</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/report/category/cases/index.html b/src/adonisjs/public/report/category/cases/index.html
index f27dcac5..a79ef088 100644
--- a/src/adonisjs/public/report/category/cases/index.html
+++ b/src/adonisjs/public/report/category/cases/index.html
@@ -182,22 +182,22 @@ <h5 class="modal-title">Filter by:</h5>
               <div class="share-cases-element wrapper-checkbox-select-case" hidden>
                 <div class="col">
                   <div class="form-check share-checkbox">
-                    <input class="form-check-input" type="checkbox" id="c{{c.cases.id}}" value="{{c.cases.id}}">
+                    <input class="form-check-input" type="checkbox" id="c{{c.id}}" value="{{c.id}}">
                   </div>
                 </div>
               </div>
-              <div id="b{{c.cases.id}}" class="row draft-author-case-container">
+              <div id="b{{c.id}}" class="row draft-author-case-container">
                 <div class="col draft-case-title">
-                  <label class="ml-2">{{c.cases.title}}</label>
+                  <label class="ml-2">{{c.title}}</label>
 
                   <div class="row">
-                    <h6>Created by {{c.cases.author_grade}}: {{c.cases.username}} ({{c.cases.institution_acronym}})</h6>
+                    <h6>Created by {{c.author_grade}}: {{c.username}} ({{c.institution_acronym}})</h6>
                   </div>
                 </div>
 
-                <a href="/report/category/cases/play?id={{c.cases.id}}">
+                <a href="/report/category/cases/play?id={{c.id}}">
                   <div class="d-flex justify-content-end justify-content-center buttons-container">
-                    <div id="r{{c.cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">REPORT</div>
+                    <div id="r{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2">REPORT</div>
                   </div>
                 </a>
               </div>
diff --git a/src/adonisjs/public/report/category/cases/play/index-celular.html b/src/adonisjs/public/report/category/cases/play/index-celular.html
index 4e7e829d..38023e06 100644
--- a/src/adonisjs/public/report/category/cases/play/index-celular.html
+++ b/src/adonisjs/public/report/category/cases/play/index-celular.html
@@ -128,15 +128,15 @@
                 <div class="share-cases-element wrapper-checkbox-select-case">
                   <div class="col">
                     <div class="form-check share-checkbox">
-                      <input class="form-check-input" type="checkbox" id="c{{lg.logs.id}}" value="{{lg.logs.id}}">
+                      <input class="form-check-input" type="checkbox" id="c{{lg.id}}" value="{{lg.id}}">
                     </div>
                   </div>
                 </div>
-                <div id="b{{lg.logs.id}}" class="row draft-author-case-container">
+                <div id="b{{lg.id}}" class="row draft-author-case-container">
                   <div class="col draft-case-title" style="margin-left:15px">
-                    <label class="ml-2">{{lg.logs.username}} / {{lg.logs.created_at}}</label><br>
-                    Instance: {{lg.logs.instance_id}}<br>
-                    {{lg.logs.log}}
+                    <label class="ml-2">{{lg.username}} / {{lg.created_at}}</label><br>
+                    Instance: {{lg.instance_id}}<br>
+                    {{lg.log}}
                   </div>
 
                 </div>
diff --git a/src/adonisjs/public/report/category/cases/play/index.html b/src/adonisjs/public/report/category/cases/play/index.html
index b12ef66e..0b7a245e 100644
--- a/src/adonisjs/public/report/category/cases/play/index.html
+++ b/src/adonisjs/public/report/category/cases/play/index.html
@@ -94,17 +94,17 @@
                 <div class="share-cases-element wrapper-checkbox-select-case">
                   <div class="col">
                     <div class="form-check share-checkbox">
-                      <input class="form-check-input" type="checkbox" id="c{{lg.logs.id}}" value="{{lg.logs.id}}">
+                      <input class="form-check-input" type="checkbox" id="c{{lg.id}}" value="{{lg.id}}">
                     </div>
                   </div>
                 </div>
-                <div id="b{{lg.logs.id}}" class="row draft-author-case-container">
+                <div id="b{{lg.id}}" class="row draft-author-case-container">
                   <div class="col draft-case-title" style="margin-left:15px">
-                    <label class="ml-2">{{lg.logs.username}} / {{lg.logs.created_at}}</label>
+                    <label class="ml-2">{{lg.username}} / {{lg.created_at}}</label>
 
                     <!--
                     <div class="row">
-                      <h6>user {{lg.logs.username}}; case ; instance {{lg.logs.instance_id}}</h6>
+                      <h6>user {{lg.username}}; case ; instance {{lg.instance_id}}</h6>
                     </div>
                     -->
                   </div>

From 70664f8408f2fd37bbc5126c3a7b3d1ca7469855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 11 Jan 2022 13:23:47 -0300
Subject: [PATCH 4/9] fix (report/inputs): adjusts in the presentation of
 multivalorated

---
 .../components/visual/dcc-input-summary.js    | 29 ++++++++++++++---
 src/adonisjs/public/report/js/report.js       | 31 ++++++++++++++++---
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/adonisjs/public/dccs/components/visual/dcc-input-summary.js b/src/adonisjs/public/dccs/components/visual/dcc-input-summary.js
index b7a08711..c76362d3 100644
--- a/src/adonisjs/public/dccs/components/visual/dcc-input-summary.js
+++ b/src/adonisjs/public/dccs/components/visual/dcc-input-summary.js
@@ -38,8 +38,25 @@ class DCCInputSummary extends DCCVisual {
   _presentValue (value) {
     let html = ''
     if (Array.isArray(value)) {
-      for (const a in value)
-        html += this._presentValue(value[a]) + ((a < value.length-1) ? '; ' : '')
+      if ((typeof value[0] === 'string' || value[0] instanceof String) &&
+          (value[0].endsWith(':false') || value[0].endsWith(':true'))) {
+        let result = ''
+        html += '<table>'
+        for (const a in value) {
+          const v = value[a].substring(value[a].lastIndexOf(':') + 1)
+          html += '<tr><td style="border: 1px solid darkgray">' +
+                  value[a].substring(0, value[a].lastIndexOf(':')) +
+                  '<td style="border: 1px solid darkgray; color:' +
+                  ((v == 'true') ? 'blue' : 'red') + '">' + v + '<td></tr>'
+        }
+        html += '</table>'
+      } else {
+        html += '<table>'
+        for (const a in value)
+          html += '<tr><td style="border: 1px solid darkgray">' +
+                  this._presentValue(value[a]) + '<td></tr>'
+        html += '</table>'
+      }
     } else if (typeof value === 'object') {
       html += '['
       const ov = Object.values(value)
@@ -48,9 +65,11 @@ class DCCInputSummary extends DCCVisual {
       html += ']'
     } else if (value.endsWith(':false') || value.endsWith(':true')) {
       const v = value.substring(value.lastIndexOf(':') + 1)
-      html = value.substring(0, value.lastIndexOf(':')) +
-             '<td style="border: 1px solid darkgray; color:' +
-             ((v == 'true') ? 'blue' : 'red') + '">' + v + '</td>'
+      html = '<table><tr><td style="border: 1px solid darkgray">' +
+             value.substring(0, value.lastIndexOf(':')) +
+             '</td><td style="border: 1px solid darkgray; color:' +
+             ((v == 'true') ? 'blue' : 'red') + '">' + v + '</td>' +
+             '<tr></table>'
     } else
       html = value
     return html
diff --git a/src/adonisjs/public/report/js/report.js b/src/adonisjs/public/report/js/report.js
index eaf26cb3..9d527f6e 100644
--- a/src/adonisjs/public/report/js/report.js
+++ b/src/adonisjs/public/report/js/report.js
@@ -66,10 +66,29 @@ class ReportManager {
   }
 
   _presentValue (value) {
+    console.log('=== present value')
+    console.log(value)
     let html = ''
     if (Array.isArray(value)) {
-      for (const a in value)
-        html += this._presentValue(value[a]) + ((a < value.length-1) ? '; ' : '')
+      if ((typeof value[0] === 'string' || value[0] instanceof String) &&
+          (value[0].endsWith(':false') || value[0].endsWith(':true'))) {
+        let result = ''
+        html += '<table>'
+        for (const a in value) {
+          const v = value[a].substring(value[a].lastIndexOf(':') + 1)
+          html += '<tr><td style="border: 1px solid darkgray">' +
+                  value[a].substring(0, value[a].lastIndexOf(':')) +
+                  '<td style="border: 1px solid darkgray; color:' +
+                  ((v == 'true') ? 'blue' : 'red') + '">' + v + '<td></tr>'
+        }
+        html += '</table>'
+      } else {
+        html += '<table>'
+        for (const a in value)
+          html += '<tr><td style="border: 1px solid darkgray">' +
+                  this._presentValue(value[a]) + '<td></tr>'
+        html += '</table>'
+      }
     } else if (typeof value === 'object') {
       html += '['
       const ov = Object.values(value)
@@ -78,9 +97,11 @@ class ReportManager {
       html += ']'
     } else if (value.endsWith(':false') || value.endsWith(':true')) {
       const v = value.substring(value.lastIndexOf(':') + 1)
-      html = value.substring(0, value.lastIndexOf(':')) +
-             '<td style="border: 1px solid darkgray; color:' +
-             ((v == 'true') ? 'blue' : 'red') + '">' + v + '</td>'
+      html = '<table><tr><td style="border: 1px solid darkgray">' +
+             value.substring(0, value.lastIndexOf(':')) +
+             '</td><td style="border: 1px solid darkgray; color:' +
+             ((v == 'true') ? 'blue' : 'red') + '">' + v + '</td>' +
+             '<tr></table>'
     } else
       html = value
     return html

From db5ca5298a4cec3578a00663c20019d3da1cb426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 11 Jan 2022 16:17:53 -0300
Subject: [PATCH 5/9] feat (bus): withhold provided interface

---
 src/adonisjs/public/dccs/base/primitive-dcc.js | 4 ++++
 src/adonisjs/public/infra/bus.js               | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/adonisjs/public/dccs/base/primitive-dcc.js b/src/adonisjs/public/dccs/base/primitive-dcc.js
index c8a8d806..c2d6cc81 100644
--- a/src/adonisjs/public/dccs/base/primitive-dcc.js
+++ b/src/adonisjs/public/dccs/base/primitive-dcc.js
@@ -53,6 +53,10 @@ class PrimitiveDCC extends HTMLElement {
     this._bus.provides(id, topic, service)
   }
 
+  _withhold (id, topic) {
+    this._bus.withhold(id, topic)
+  }
+
   _connect (id, topic, callback) {
     this._bus.connect(id, topic, callback)
   }
diff --git a/src/adonisjs/public/infra/bus.js b/src/adonisjs/public/infra/bus.js
index 35fc43ff..cc25f8cb 100644
--- a/src/adonisjs/public/infra/bus.js
+++ b/src/adonisjs/public/infra/bus.js
@@ -218,6 +218,15 @@ class MessageBus {
     }
   }
 
+  /*
+   * Removes a provided service (usually when the component is destroyed)
+   */
+  withhold (id, topic) {
+    const key = id + ':' + topic
+    if (this._providers[key])
+      delete this._providers[key]
+  }
+
   /*
    * Connects a component to another one based on the id and a topic (service).
    *   id: id of the component that offers the service

From b467fd957a66ce87658b3f76a853d19a4d1adb16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 11 Jan 2022 16:20:40 -0300
Subject: [PATCH 6/9] feat (dccs): dcc-dhtml connects with dcc-compute and
 conditional

---
 .../dccs/components/control/dcc-compute.js    | 33 +++++++++++----
 .../public/dccs/components/web/dcc-dhtml.js   | 40 +++++++++++++++----
 src/adonisjs/public/report/js/report.js       |  2 -
 3 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/adonisjs/public/dccs/components/control/dcc-compute.js b/src/adonisjs/public/dccs/components/control/dcc-compute.js
index 3586ed9e..8f5dc4e3 100644
--- a/src/adonisjs/public/dccs/components/control/dcc-compute.js
+++ b/src/adonisjs/public/dccs/components/control/dcc-compute.js
@@ -34,13 +34,20 @@ class DCCCompute extends DCCBase {
         await this._newExpressionUpdate()
     }
 
-    if (this.hasAttribute('id'))
+    if (this.hasAttribute('id')) {
       this._provides(this.id, 'compute/update', this.update)
+      this.calculate = this.calculate.bind(this)
+      this._provides(this.id, 'compute/calculate', this.calculate)
+    }
   }
 
   async disconnectedCallback() {
     await this._unsubscribeVariables()
     this._unsubscribe('compute/status/' + this.id, this.computeStatus)
+    if (this.hasAttribute('id')) {
+      this._withhold(this.id, 'compute/update')
+      this._withhold(this.id, 'compute/calculate')
+    }
   }
 
   async _subscribeVariables () {
@@ -147,6 +154,10 @@ class DCCCompute extends DCCBase {
       this.publish('compute/completed/' + this.id)
   }
 
+  async calculate () {
+    return await DCCCompute.computeExpression(this._compiled, this._bus, true)
+  }
+
   async connectionReady (id, topic) {
     super.connectionReady (id, topic)
     if (this._compiled != null)
@@ -287,19 +298,27 @@ class DCCCompute extends DCCBase {
 
   /*
    * Computes a set of expressions, updating variables.
-   * It returns the value of the last variable.
+   * It returns the value of the last variable as default.
+   * - allResults: indicates that all results will be returned
    */
-  static async computeExpression (compiledSet, bus) {
-    let result = null
+  static async computeExpression (compiledSet, bus, allResults) {
+    let result = (allResults) ? {} : null
     for (let s of compiledSet) {
       await DCCCompute.updateVariables(s[1], bus)
+      const r = DCCCompute.computeCompiled(s[1])
       if (s[0] != null) {
-        result = DCCCompute.computeCompiled(s[1])
+        if (allResults)
+          result[s[0]] = r
+        else
+          result = r
         let cBus = (bus != null) ? bus : MessageBus.i
         await cBus.request('var/set/' + s[0].replace(/\./g, '/'),
-                           result, null, true)
+                           r, null, true)
       } else if (compiledSet.length == 1) {
-        result = DCCCompute.computeCompiled(s[1])
+        if (allResults)
+          result['value'] = r
+        else
+          result = r
         // looks for a variable inside the expression
         /*
         if (autoAssign) {
diff --git a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
index d2c6e4b1..1b7048d5 100644
--- a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
+++ b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
@@ -80,9 +80,10 @@ class DCCDHTML extends DCCBase {
     let html = this._originalHTML
     if (html != null) {
       if (this._record != null) {
-        if (typeof this._record === 'object')
+        if (typeof this._record === 'object') {
+          html = this._replaceIf(html, this._record)
           html = this._replaceEach(html, this._record)
-        else
+        } else
           html = html.replace(/\{\{[ \t]*value[ \t]*\}\}/igm, this._record)
       }
       this._dhtmlRender.innerHTML = html.replace(/\{\{[^}]*\}\}/igm, '')
@@ -93,6 +94,29 @@ class DCCDHTML extends DCCBase {
     }
   }
 
+  _replaceIf (html, record) {
+    const ifBlocks = html.split(
+      /(?:<!--[ \t]*)?\{\{[ \t]*@if[ \t]+([^ \t]+)[ \t]*\}\}(?:[ \t]*-->)?/im)
+    let part = 0
+    html = ''
+    while (part < ifBlocks.length) {
+      html += ifBlocks[part]
+      part++
+      if (part < ifBlocks.length) {
+        const vhtml = ifBlocks[part+1]
+          .split(/(?:<!--[ \t]*)?\{\{[ \t]*@endif[ \t]*\}\}(?:[ \t]*-->)?/im)
+        console.log('=== if')
+        console.log(ifBlocks[part])
+        console.log(record)
+        if (record[ifBlocks[part]] && record[ifBlocks[part]] == true)
+          html += vhtml[0]
+        html += vhtml[1]
+        part += 2
+      }
+    }
+    return html
+  }
+
   _replaceEach (html, record) {
     const eachBlocks = html.split(
       /(?:<!--[ \t]*)?\{\{[ \t]*@foreach[ \t]+([^ \t]+)[ \t]+([^ \t}]+)[ \t]*\}\}(?:[ \t]*-->)?/im)
@@ -133,7 +157,8 @@ class DCCDHTML extends DCCBase {
         if (record[r] != null && typeof record[r] === 'object')
           html = this._replaceFields(html, pr, record[r])
         else {
-          if (typeof record[r] === 'number') record[r] = record[r].toString()
+          if (typeof record[r] === 'number' || typeof record[r] === 'boolean')
+            record[r] = record[r].toString()
           const content = (record[r] == null) ? '' :
                             record[r].replace(/&/gm, '&amp;')
                                      .replace(/"/gm, '&quot;')
@@ -198,11 +223,10 @@ class DCCDHTML extends DCCBase {
 
   async connectionReady (id, topic) {
     super.connectionReady (id, topic)
-    if (topic == 'data/record/retrieve' || topic == 'service/request/get') {
-      const response = await this.request('retrieve', null, id)
-      this.recordUpdate(topic, response)
-
-    }
+    // if (topic == 'data/record/retrieve' || topic == 'service/request/get') {
+    const response = await this.request('retrieve', null, id)
+    this.recordUpdate(topic, response)
+    //}
     this._ready = true
     this._publish('control/dhtml/ready',
       (this.hasAttribute('id')) ? {id: this.id} : null)
diff --git a/src/adonisjs/public/report/js/report.js b/src/adonisjs/public/report/js/report.js
index 9d527f6e..c5daa255 100644
--- a/src/adonisjs/public/report/js/report.js
+++ b/src/adonisjs/public/report/js/report.js
@@ -66,8 +66,6 @@ class ReportManager {
   }
 
   _presentValue (value) {
-    console.log('=== present value')
-    console.log(value)
     let html = ''
     if (Array.isArray(value)) {
       if ((typeof value[0] === 'string' || value[0] instanceof String) &&

From 794956a767bfe6dbf509220855c68a6b6b8b2619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 11 Jan 2022 23:21:40 -0300
Subject: [PATCH 7/9] feat (versum): conditional texts

---
 .../dccs/components/control/dcc-compute.js    | 55 ++++++++++---------
 .../public/dccs/components/web/dcc-dhtml.js   |  3 -
 .../public/translator/item-templates.js       |  7 +++
 src/adonisjs/public/translator/translator.js  | 51 +++++++++++++++--
 4 files changed, 80 insertions(+), 36 deletions(-)

diff --git a/src/adonisjs/public/dccs/components/control/dcc-compute.js b/src/adonisjs/public/dccs/components/control/dcc-compute.js
index 8f5dc4e3..7a24ff42 100644
--- a/src/adonisjs/public/dccs/components/control/dcc-compute.js
+++ b/src/adonisjs/public/dccs/components/control/dcc-compute.js
@@ -3,7 +3,7 @@
 class DCCCompute extends DCCBase {
   constructor () {
     super()
-    this._completed = false
+    this._updated = false
   }
 
   async connectedCallback () {
@@ -16,8 +16,6 @@ class DCCCompute extends DCCBase {
       this._subscribe('compute/status/' + this.id, this.computeStatus)
     }
 
-    this._notifyCompleted = this.hasAttribute('id')
-
     this._condition = (this.hasAttribute('condition'))
       ? DCCCompute.compileStatementSet(this.condition.toLowerCase()) : null
 
@@ -27,7 +25,7 @@ class DCCCompute extends DCCBase {
         DCCCompute.compileStatementSet(this.expression.toLowerCase())
       if (this.hasAttribute('dependency')) {
         this._dependencyCompleted = this._dependencyCompleted.bind(this)
-        this._subscribe('compute/completed/' + this.dependency,
+        this._subscribe('compute/updated/' + this.dependency,
                         this._dependencyCompleted)
         this._publish('compute/status/' + this.dependency)
       } else if (this._compiled != null && this.active)
@@ -66,7 +64,7 @@ class DCCCompute extends DCCBase {
   }
 
   _dependencyCompleted () {
-    this._unsubscribe('compute/completed/' + this.dependency,
+    this._unsubscribe('compute/updated/' + this.dependency,
                       this._dependencyCompleted)
     this._newExpressionUpdate()
   }
@@ -133,25 +131,23 @@ class DCCCompute extends DCCBase {
   }
 
   async update () {
+    let result = null
     if (this._condition == null ||
         await DCCCompute.computeExpression(this._condition, this._bus)) {
-      const result = await DCCCompute.computeExpression(
-        this._compiled, this._bus)
-      if (result)
+      result = await DCCCompute.computeExpression(
+        this._compiled, this._bus, true)
+      if (result._final)
         await this.multiRequest('true', null)
       else
         await this.multiRequest('false', null)
     }
-    this._completed = true
-    if (this._notifyCompleted) {
-      this._notifyCompleted = false
-      await this._publish('compute/completed/' + this.id)
-    }
+    this._updated = true
+    await this._publish('compute/updated/' + this.id, result)
   }
 
   computeStatus () {
-    if (this._completed)
-      this.publish('compute/completed/' + this.id)
+    if (this._updated)
+      this.publish('compute/updated/' + this.id)
   }
 
   async calculate () {
@@ -262,7 +258,8 @@ class DCCCompute extends DCCBase {
             stack.push([matchContent, DCCCompute.precedence[matchContent]])
             break
           case 'closeParentheses':
-            while (stack.length > 0 && stack[stack.length - 1][0] != '(') { compiled.push([DCCCompute.role.operator, stack.pop()[0]]) }
+            while (stack.length > 0 && stack[stack.length - 1][0] != '(')
+              compiled.push([DCCCompute.role.operator, stack.pop()[0]])
             if (stack.length > 0) {
               stack.pop()
               if (stack.length > 0 && stack[stack.length - 1][1] ==
@@ -302,23 +299,20 @@ class DCCCompute extends DCCBase {
    * - allResults: indicates that all results will be returned
    */
   static async computeExpression (compiledSet, bus, allResults) {
-    let result = (allResults) ? {} : null
+    let result = null
+    let all = {}
     for (let s of compiledSet) {
       await DCCCompute.updateVariables(s[1], bus)
       const r = DCCCompute.computeCompiled(s[1])
       if (s[0] != null) {
-        if (allResults)
-          result[s[0]] = r
-        else
-          result = r
+        all[s[0]] = r
+        result = r
         let cBus = (bus != null) ? bus : MessageBus.i
         await cBus.request('var/set/' + s[0].replace(/\./g, '/'),
                            r, null, true)
       } else if (compiledSet.length == 1) {
-        if (allResults)
-          result['value'] = r
-        else
-          result = r
+        all['value'] = r
+        result = r
         // looks for a variable inside the expression
         /*
         if (autoAssign) {
@@ -329,6 +323,10 @@ class DCCCompute extends DCCBase {
         */
       }
     }
+    if (allResults) {
+      all._final = result
+      result = all
+    }
     return result
   }
 
@@ -425,6 +423,9 @@ class DCCCompute extends DCCBase {
           case 'random':
             stack.push(Math.floor(Math.random() * (stack.pop()+1)))
             break
+          case 'abs':
+            stack.push(Math.abs(stack.pop()))
+            break
         }
       }
     }
@@ -444,6 +445,7 @@ class DCCCompute extends DCCBase {
   }
 
   DCCCompute.precedence = {
+    '(': 0,
     'or': 1,
     'and': 2,
     '=': 3,
@@ -458,8 +460,7 @@ class DCCCompute extends DCCBase {
     '*': 5,
     '^': 6,
     'not': 7,
-    function: 8,
-    '(': 9
+    function: 8
   }
 
   DCCCompute.element = {
diff --git a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
index 1b7048d5..d86ba1b7 100644
--- a/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
+++ b/src/adonisjs/public/dccs/components/web/dcc-dhtml.js
@@ -105,9 +105,6 @@ class DCCDHTML extends DCCBase {
       if (part < ifBlocks.length) {
         const vhtml = ifBlocks[part+1]
           .split(/(?:<!--[ \t]*)?\{\{[ \t]*@endif[ \t]*\}\}(?:[ \t]*-->)?/im)
-        console.log('=== if')
-        console.log(ifBlocks[part])
-        console.log(record)
         if (record[ifBlocks[part]] && record[ifBlocks[part]] == true)
           html += vhtml[0]
         html += vhtml[1]
diff --git a/src/adonisjs/public/translator/item-templates.js b/src/adonisjs/public/translator/item-templates.js
index dac1a8ce..c3502631 100644
--- a/src/adonisjs/public/translator/item-templates.js
+++ b/src/adonisjs/public/translator/item-templates.js
@@ -46,6 +46,13 @@
 '<dcc-input-option parent="dcc[seq]" [topic][value][compute]>[option]</dcc-input-option><br>',
     output:
 '<dcc-expression id=\'dcc[seq]\'[author] expression=\'[variable][index]\'[variant] active></dcc-expression>',
+    conditionOpen:
+`<dcc-compute id="dcc[seq]" expression="test:=[condition]"[dependency]></dcc-compute>
+<dcc-dhtml connect="retrieve:dcc[seq]:compute/calculate" subscribe="compute/updated/dcc[seq]:update" autoupdate>
+{{@if test}}`,
+    conditionClose:
+`{{@endif}}
+</dcc-dhtml>`,
     compute:
 '<dcc-compute id=\'dcc[seq]\' expression=\'[expression]\'[connect][condition][dependency] active></dcc-compute>',
     timer:
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index c006992e..a671eb90 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -875,13 +875,30 @@ class Translator {
     }
 
     // twelfth cycle - attach conditions to conditioned
+    let inCondition = false
     for (let c = 0; c < compiled.length; c++) {
-      if (compiled[c].type == 'condition' && c < compiled.length - 1 &&
-          compiled[c+1].type == 'compute') {
-        compiled[c+1].condition = compiled[c].expression
-        compiled[c+1]._source = compiled[c]._source + compiled[c+1]._source
-        compiled.splice(c, 1)
-        c--
+      const nx = (c+2 < compiled.length && compiled[c+1].type == 'linefeed')
+                 ? c + 2 : c + 1
+      if (((compiled[c].type != 'linefeed' && !compiled[c].subordinate) ||
+          c+1 == compiled.length) && inCondition) {
+        const pos = (compiled[c].subordinate) ? c+1 : c
+        compiled.splice(pos, 0,
+                        {type: 'condition-close',
+                         seq: pos+1,
+                         _source: ''})
+        c++
+        inCondition = false
+      }
+      if (compiled[c].type == 'condition') {
+        if (compiled[nx].type == 'compute') {
+          compiled[nx].condition = compiled[c].expression
+          compiled[nx]._source = compiled[c]._source + compiled[c+1]._source +
+            ((nx-c == 2) ? compiled[nx]._source : '')
+          compiled.splice(c, nx-c)
+        } else {
+          compiled[c].type = 'condition-open'
+          inCondition = true
+        }
       }
       if (c >= 0) { compiled[c].seq = c + 1 }
     }
@@ -1283,6 +1300,8 @@ class Translator {
         // case "talk-close": html = this._talkcloseObjToHTML(obj); break;
         case 'input' : html = this._inputObjToHTML(obj); break
         case 'output' : html = this._outputObjToHTML(obj); break
+        case 'condition-open': html = this._conditionOpenObjToHTML(obj); break
+        case 'condition-close': html = this._conditionCloseObjToHTML(obj); break
         case 'compute' :
           html = this._computeObjToHTML(obj, superseq); break
         case 'context-open' : // html = this._selctxopenObjToHTML(obj); break;
@@ -2482,6 +2501,26 @@ class Translator {
     return condition
   }
 
+  /*
+   * Condition Open Obj to HTML
+   */
+  _conditionOpenObjToHTML (obj) {
+    return (this.authoringRender) ? '' :
+      Translator.htmlTemplates.conditionOpen
+        .replace(/\[seq\]/gm, obj.seq)
+        .replace('[condition]', obj.expression)
+        .replace('[dependency]',
+          (this._lastCompute != null)
+            ? (' dependency="' + this._lastCompute + '"') : '')
+  }
+
+  /*
+   * Condition Close Obj to HTML
+   */
+  _conditionCloseObjToHTML (obj) {
+    return (this.authoringRender) ? '' : Translator.htmlTemplates.conditionClose
+  }
+
   /*
    * Compute Md to Obj
    */

From 3315b0cf89beda64491058d38f83cb9f068ec557 Mon Sep 17 00:00:00 2001
From: Heitor Mattosinho <heitormattosinho@gmail.com>
Date: Wed, 19 Jan 2022 16:58:31 -0300
Subject: [PATCH 8/9] fix (levelCreation): single value selectList with default
 option

---
 .../public/prognosis/creation/index.html      | 30 +++++++++----------
 .../public/prognosis/js/level-creation.js     |  7 +++--
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/adonisjs/public/prognosis/creation/index.html b/src/adonisjs/public/prognosis/creation/index.html
index 7898744d..d6f319c8 100644
--- a/src/adonisjs/public/prognosis/creation/index.html
+++ b/src/adonisjs/public/prognosis/creation/index.html
@@ -122,7 +122,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title">Construir nível</h5>
+          <h5 class="modal-title">Build Scenario</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
@@ -209,14 +209,14 @@ <h1 class=" txt-light my-5">Pacient Info</h1>
               <div class="row justify-content-center">
                 <h3>Idade: </h3>
               </div>
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Idade" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
 
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="idade" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -228,13 +228,13 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
               <div class="">
                 <h3>Origem: </h3>
               </div>
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Origem" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="Origem" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -245,13 +245,13 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
               <div class="">
                 <h3>Comorbidade: </h3>
               </div>
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Comorbidade" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="Comorbidade" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -264,13 +264,13 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
                 <h3>Contexto da admissão: </h3>
               </div>
 
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Contexto da admissão" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="Contexto da admissão" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -282,13 +282,13 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
                 <h3>Status clínico: </h3>
               </div>
 
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Status clínico" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="Status clínico" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -300,13 +300,13 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
                 <h3>Alterações laboratoriais: </h3>
               </div>
 
-              <h4 style="font-size: 1rem !important;">Opções abertas</h4>
+              <h4 style="font-size: 1rem !important;">Open options</h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="border-width: 3px !important;"
               data-option-name="Alterações laboratoriais" data-progn="open"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
               ondragenter="LevelCreationTool.i.dragEnterHandler(event)" ondragleave="LevelCreationTool.i.dragLeaveHandler(event)" ondragend="LevelCreationTool.i.dragEndHandler(event)">
               </div>
-              <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-lock"></i> </h4>
+              <h4 style="font-size: 1rem !important;">Predefined options <i class="fas fa-lock"></i> </h4>
               <div class="pacient-info-values border rounded drop-container mx-1 pb-3 pb-5" style="background-color:#9d9d88; border-width: 3px !important;"
               data-option-name="Alterações laboratoriais" data-progn="locked"
               ondrop="LevelCreationTool.i.dropHandler(event)" ondragover="LevelCreationTool.i.dragOverHandler(event)"
@@ -327,7 +327,7 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
                   <a class="nav-link" data-toggle="tab" href="#bundle" role="tab" aria-selected="false">Bundle
                     <i tabindex="0" href="#bundle" class="text-light bg-info rounded px-1 clickable"
                       title="Bundle" role="button" data-toggle="popover" data-trigger="focus"
-                      data-html="true" data-content="Bundle is used to build clusters of predefined options,
+                      data-html="true" data-content="Bundle is used to build clusters of Predefined options ,
                       it is possible to create multiple clusters. Example: <br>
                       <i class='border border-info'>Temperatura: >35 °C</i> <br>
                       <i class='border border-info'>Frequência cardíaca: <120 bpm</i>
@@ -347,7 +347,7 @@ <h4 style="font-size: 1rem !important;">Opções predefinidas <i class="fas fa-l
                 </li> -->
               </ul>
 
-              <input type="text" class="mb-1" id="input-title-option" placeholder="Insira o titulo da lista..." value="">
+              <input type="text" class="mb-1" id="input-title-option" placeholder="Insert the title of the option..." value="">
               <div class="invalid-feedback">Example invalid custom select feedback</div>
               <div class="tab-content" id="myTabContent">
                 <div class="tab-pane fade show active" id="selectList" role="tabpanel">
diff --git a/src/adonisjs/public/prognosis/js/level-creation.js b/src/adonisjs/public/prognosis/js/level-creation.js
index 62f821a9..af4105f5 100644
--- a/src/adonisjs/public/prognosis/js/level-creation.js
+++ b/src/adonisjs/public/prognosis/js/level-creation.js
@@ -923,6 +923,9 @@ class LevelCreationTool {
     let radioTemp = document.querySelector(`#${template.content.firstElementChild.id}`)
     radioTemp.dataset.deconstructible = 'true'
 
+    if(optionsList.length == 1){
+      radioTemp.querySelector('option').remove()
+    }
     obj.prependTxt = obj.parentElement.querySelector('.input-group-prepend')
     obj.prependTxt.copy = document.createElement('label')
     obj.prependTxt.copy.classList.add('input-group-text')
@@ -937,7 +940,7 @@ class LevelCreationTool {
       let value = optionsList[z].innerText
       //Check if select list must include id (because of complex values. e.g.(id'bilirrubina' value'3-4'), instead of just 'bilirrubina')
       if(includeParent && valueText){
-        const selectList = document.querySelector("#" + keyId)
+        let selectList = document.querySelector("#" + keyId)
         let option = document.createElement('option')
         option.value = value
 
@@ -959,7 +962,7 @@ class LevelCreationTool {
         }
 
       }else{
-        const selectList = document.querySelector("#" + keyId)
+        let selectList = document.querySelector("#" + keyId)
         let option = document.createElement('option')
 
         if(value == 'Sim' || value == 'Não'){

From 4d94987673f8a128233ea1f0f8e41fbde4ca0db6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Thu, 20 Jan 2022 15:38:48 -0300
Subject: [PATCH 9/9] feat (case): case resume

---
 .../public/infra/dcc-logger-manager.js        |  4 -
 src/adonisjs/public/player/js/htracker.js     | 96 ++++++++++++++++---
 src/adonisjs/public/player/js/player.js       | 18 ++--
 src/adonisjs/public/player/js/state.js        | 23 ++++-
 4 files changed, 114 insertions(+), 27 deletions(-)

diff --git a/src/adonisjs/public/infra/dcc-logger-manager.js b/src/adonisjs/public/infra/dcc-logger-manager.js
index e9679e02..bfd891d3 100644
--- a/src/adonisjs/public/infra/dcc-logger-manager.js
+++ b/src/adonisjs/public/infra/dcc-logger-manager.js
@@ -11,10 +11,6 @@ class DCCLoggerManager extends DCCLight {
 
   async _notifyLogger (topic, message, track) {
     if (track) {
-      console.log('=== logger DCC: ' + topic)
-      console.log(message)
-
-      console.log('========== creating logger ==========')
       let logger = await MessageBus.i.request('logger/create/post',
         {
           caseId: message.caseId,
diff --git a/src/adonisjs/public/player/js/htracker.js b/src/adonisjs/public/player/js/htracker.js
index ee0b8d66..b3ee9162 100644
--- a/src/adonisjs/public/player/js/htracker.js
+++ b/src/adonisjs/public/player/js/htracker.js
@@ -1,13 +1,6 @@
 class Tracker {
   constructor () {
-    this._variables = {}
-    this._varUpdated = {}
-    // this._varChanged = {} <FUTURE>
-    this._mandatoryFilled = {}
-    this._groupInput = null
-
-    this._knotTrack = []
-    this._caseCompleted = false
+    this.initializeTrack()
 
     this.inputReady = this.inputReady.bind(this)
     MessageBus.i.subscribe('input/ready/#', this.inputReady)
@@ -32,6 +25,17 @@ class Tracker {
     MessageBus.i.subscribe('input/submit/*', this.submitVariables)
   }
 
+  initializeTrack () {
+    this._variables = {}
+    this._varUpdated = {}
+    // this._varChanged = {} <FUTURE>
+    this._mandatoryFilled = {}
+    this._groupInput = null
+
+    this._knotTrack = []
+    this._caseCompleted = false
+  }
+
   _extractEntityId (topic, position) {
     return MessageBus.extractLevelsSegment(topic, position).replace(/\//g, '.')
   }
@@ -48,6 +52,7 @@ class Tracker {
       const v = this._extractEntityId(topic, 3)
       if (v != null)
         this._mandatoryFilled[v] = { message: message, filled: false }
+      this._trackStore()
     }
   }
 
@@ -57,12 +62,14 @@ class Tracker {
     const v = this._extractEntityId(topic, position)
     if (v != null && this._variables[v] == null)
       switch (type) {
-        case '<' : this._updateVariable(v, {})
-                   this._groupInput = v
+        case '<' : this._groupInput = v
+                   this._updateVariable(v, {})
                    break
-        case '>' : if (this._groupInput != null)
+        case '>' : if (this._groupInput != null) {
                      this._variables[this._groupInput][v] =
                        { content: message.content, state: ' ' }
+                     this._trackStore()
+                   }
               break
         default: this._updateVariable(v, '')
       }
@@ -79,9 +86,11 @@ class Tracker {
   }
 
   stateChanged (topic, message) {
-    if (this._groupInput != null)
+    if (this._groupInput != null) {
       this._variables[this._groupInput][this._extractEntityId(topic, 3)].state =
         message.state
+      this._trackStore()
+    }
   }
 
   submitVariables (topic, message) {
@@ -92,6 +101,7 @@ class Tracker {
         this._varUpdated[v] = false
       }
     }
+    this._trackStore()
   }
 
   /* <FUTURE>
@@ -114,6 +124,7 @@ class Tracker {
       this._varUpdated[variable] = true
       if (this._mandatoryFilled[variable] !== undefined) {
         this._mandatoryFilled[variable].filled = (value.length > 0) }
+      this._trackStore()
     }
   }
 
@@ -122,6 +133,7 @@ class Tracker {
     this._knotTrack.push(
       {knotid: this._extractEntityId(topic, 3),
        timeStart: currentDateTime.toJSON()})
+    this._trackStore()
   }
 
   inputSummary (topic, message) {
@@ -131,6 +143,7 @@ class Tracker {
 
   caseCompleted (topic, message) {
     if (!this._caseCompleted) {
+      this._caseCompleted = true
       const currentDateTime = new Date()
       let kt = {
         event: topic,
@@ -139,6 +152,7 @@ class Tracker {
       if (message && message.knotid)
         kt.knotid = message.knotid
       this._knotTrack.push(kt)
+      this._trackStore()
       MessageBus.i.publish('case/summary/' + MessageBus.extractLevel(topic, 3),
         {userId: message.userId,
          caseId: message.caseId,
@@ -146,4 +160,62 @@ class Tracker {
          variables: this._variables}, true)
     }
   }
+
+  caseHalt (userId, caseId, instanceId) {
+    const track = this._trackRetrieve()
+    if (track != null) {
+      const currentDateTime = new Date()
+      track.knotTrack.push(
+        {event: '*** case halted ***',
+         timeResume: currentDateTime.toJSON()}
+      )
+      track.variables['case halted'] = '*** case halted ***'
+      MessageBus.i.publish('case/summary/' + instanceId,
+        {userId: userId,
+         caseId: caseId,
+         knotTrack: track.knotTrack,
+         variables: track.variables}, true)
+    }
+  }
+
+  /*
+    * State Storage
+    */
+  _trackStore () {
+    localStorage.setItem(Tracker.storeId,
+      JSON.stringify(
+        {knotTrack: this._knotTrack,
+         variables: this._variables,
+         varUpdated: this._varUpdated,
+         mandatoryFilled: this._mandatoryFilled,
+         groupInput: this._groupInput,
+         caseCompleted: this._caseCompleted
+       }
+     ))
+  }
+
+  _trackRetrieve () {
+    let track = null
+    const trackS = localStorage.getItem(Tracker.storeId)
+    if (trackS != null)
+      track = JSON.parse(trackS)
+    return track
+  }
+
+  pendingTrackRestore () {
+    const track = this._trackRetrieve()
+    if (track != null) {
+      this._knotTrack = track.knotTrack
+      this._variables = track.variables
+      this._varUpdated = track.varUpdated
+      this._mandatoryFilled = track.mandatoryFilled
+      this._groupInput = track.groupInput
+      this._caseCompleted = track.caseCompleted
+    }
+    return (track != null)
+  }
 }
+
+(function () {
+  Tracker.storeId = 'harena-track'
+})()
diff --git a/src/adonisjs/public/player/js/player.js b/src/adonisjs/public/player/js/player.js
index 885e1084..58e4ad2d 100644
--- a/src/adonisjs/public/player/js/player.js
+++ b/src/adonisjs/public/player/js/player.js
@@ -145,7 +145,7 @@ class PlayerManager {
             }
             this._state.historyRecord(target)
             // this._updateFlowKnot(target)
-            if (message.value) {
+            if (message && message.value) {
               this._state.parameter = message.value
               this.knotLoad(target, message.value)
             } else {
@@ -206,7 +206,7 @@ class PlayerManager {
     window.onbeforeunload = function() {
       return "";
     }
-    const preCaseOff = true
+    const resumeActive = true  // activates and deactivates case resume
     this._mainPanel = document.querySelector('#player-panel')
 
     const parameters = window.location.search.substr(1)
@@ -227,14 +227,18 @@ class PlayerManager {
     } else { precase = null }
 
     let resume = false
-    if (!this._previewCase && this._state.pendingPlayCheck() && !preCaseOff) {
+    const pPlay = this._state.pendingPlayCheck()
+    if (!this._previewCase && pPlay != null && resumeActive) {
+      this._tracker.caseHalt(pPlay.userid, pPlay.caseid, pPlay.running.runningId)
+
       // <TODO> adjust for name: (precase == null || this._state.pendingPlayId() == precase)) {
       const decision = await DCCNoticeInput.displayNotice(
         'You have an unfinished case. Do you want to continue?',
         'message', 'Yes', 'No')
       if (decision == 'Yes') {
         resume = true
-        this._state.pendingPlayRestore()
+        const currKnot = this._state.pendingPlayRestore()
+        this._tracker.pendingTrackRestore()
         DCCCommonServer.instance.token = this._state.token
 
         // <TODO> provisory deactivation
@@ -252,9 +256,9 @@ class PlayerManager {
         this._state.currentCase = this._state.currentCase
         await this._caseLoad(this._state.currentCase)
 
-        this._caseFlow()
-        MessageBus.i.publish('knot/navigate/<<', null, true)
-      } else { this._state.sessionCompleted() }
+        // this._caseFlow()
+        MessageBus.i.publish('knot/navigate/' + currKnot, null, true)
+      } // else { this._state.sessionCompleted() }
     }
 
     if (!resume) {
diff --git a/src/adonisjs/public/player/js/state.js b/src/adonisjs/public/player/js/state.js
index 49a8848e..35210949 100644
--- a/src/adonisjs/public/player/js/state.js
+++ b/src/adonisjs/public/player/js/state.js
@@ -23,7 +23,8 @@ class PlayState {
       history: [],
       parameter: null,
       nextKnot: 1,
-      completed: false
+      completed: false,
+      flow: null
     }
 
     this._metastate = {}
@@ -37,6 +38,19 @@ class PlayState {
     MessageBus.i.subscribe('var/set/#', this.variableSet)
   }
 
+  /*
+   * Properties
+   */
+
+  // <TODO> Provisory - bring all flow dynamics to here
+  get flow() {
+    return this._state.flow
+  }
+
+  set flow(newFlow) {
+    this._state.flow = newFlow
+  }
+
   /*
     * State Storage
     */
@@ -53,7 +67,7 @@ class PlayState {
 
   sessionRecord (topic) {
     this._state.userid = MessageBus.extractLevel(topic, 3)
-    this._stateStore()
+    // this._stateStore()
   }
 
   sessionCompleted () {
@@ -63,7 +77,7 @@ class PlayState {
 
   pendingPlayCheck () {
     const state = this._stateRetrieve()
-    return (state != null)
+    return (state != null && !state.completed) ? state : null
   }
 
   pendingPlayId () {
@@ -74,7 +88,8 @@ class PlayState {
   pendingPlayRestore () {
     let currentKnot = null
     this._state = this._stateRetrieve()
-    if (this._state.history.length > 0) { currentKnot = this._state.history[this._state.history.length - 1] }
+    if (this._state.history.length > 0) {
+      currentKnot = this._state.history[this._state.history.length - 1] }
     return currentKnot
   }