Explorer: group schema entries by category to make them more readable

CHANGELOG.md

@@ -8,6 +8,7 @@
 - now also expose `financement.heures` so we know how many hours are financed
   according to the context and rules
 - consider None values as missing keys also for non required fields
+- explorer: group schema entries by category
 
 ## 0.3.1
 

trefle/bin.py

@@ -11,7 +11,7 @@ from .config import ELIGIBILITE, MODALITES, SCHEMA
 from .core import simulate
 from .debugging import (data_from_lbf_url, green, make_scenario, red,
                         trace_condition)
-from .routine import flatten
+from .helpers import flatten
 
 RULES = ELIGIBILITE + MODALITES
 

trefle/explorer/app.css

@@ -113,6 +113,10 @@ pre {
 p {
   margin: 1rem 0;
 }
+.on {
+  font-weight: bold;
+}
+
 
 /*** FORMS ***/
 input[type=text],
@@ -199,7 +203,7 @@ input[type=submit]:hover,
 
 /* Glossary like list */
 dt {
-  font-variant: small-caps;
+  font-weight: bolder;
 }
 dt em {
   font-variant: normal;
@@ -207,5 +211,9 @@ dt em {
 dl {
   margin-top: 10px;
   font-size: 1.1em;
+  padding: 5px;
+}
+dl:nth-child(even) {
+  background: #f3f3f3;
 }
 

trefle/explorer/components/rules.tag.html

@@ -44,9 +44,6 @@
     h3 {
       font-variant: small-caps;
     }
-    .on {
-      font-weight: bold;
-    }
   </style>
 
 </rules>

trefle/explorer/components/schema.tag.html

 <schema>
-  <dl each={ props, name in items }>
-    <dt>{props.label || props.description} <em>({props.type})</em></dt>
-    <dd if={props.value}><strong>Valeur</strong> {props.value}</dd>
+  <ul>
+    <li each={ label, id in this.categories }><a href="#schema/{ id }" class={ on: this.opts.id == id } title={ id }>{ label }</a></li>
+  </ul>
+  <schema-entries if={ this.opts.id } items={this.items} name={ this.categories[this.opts.id] }></schema-entries>
+
+  <style scoped>
+    :scope.tools {
+      min-width: 1200px;
+      grid-template-columns: 1fr 4fr;
+    }
+  </style>
+
+  <script>
+    this.items = {}
+    this.categories = {
+      constante: 'Propriétés constantes',
+      beneficiaire: 'Propriétés du bénéficiaire',
+      formation: 'Propriétés de la formation',
+      financement: 'Propriétés du financement',
+      'financement.organisme': "Propriétés de l'organisme",
+    }
+    this.on('mount', () => this.load())
+
+    this.load = () => {
+      if (this.opts.id) {
+        for (let key in SCHEMA) {
+          if (key.startsWith(this.opts.id)) this.items[key] = SCHEMA[key]
+        }
+      }
+      this.update();
+    }
+
+    this.mixin(View)
+  </script>
+
+</schema>
+
+<schema-entries>
+  <h2>{ this.opts.name }</h2>
+  <dl each={ props, key in this.opts.items }>
+    <dt>{props.label || props.description}</dt>
+    <dd><strong>Clé interne</strong> { key }</dd>
+    <dd><strong>Type</strong> { props.type }</dd>
+    <dd if={ props.value }><strong>Valeur constante</strong> { this.formatValue(props.value) }</dd>
     <dd if={props.description}><strong>Description</strong> {props.description}</dd>
     <dd if={props.source}><strong>Source</strong> {props.source}</dd>
     <dd if={props.xpath}><strong>LHEO</strong> {props.xpath}</dd>
     <dd if={props.url}><strong>Ressource externe</strong> <a href="{ props.url }">{ props.url }</a></dd>
   </dl>
+  <hr>
+
+  <style scoped>
+    hr {
+      border: none;
+      border-top: 1px solid #eee;
+    }
+  </style>
 
   <script>
-    this.items = SCHEMA
 
-    this.mixin(View)
+  this.formatValue = (value) => {
+    if (Array.isArray(value)) return value.join(', ')
+    return value
+  }
+
   </script>
 
-</schema>
+</schema-entries>

trefle/explorer/components/simulate.tag.html

@@ -112,7 +112,7 @@
       width: 50%;