Tony CHEMIT pushed to branch develop at ultreiaio / ird-observe Commits: 38138697 by Tony Chemit at 2023-07-31T13:09:08+02:00 Améliorer le rapport de validation - Closes #2215 - - - - - 3 changed files: - client/datasource/actions/src/main/i18n/templates/validationReport_en_GB.ftl - client/datasource/actions/src/main/i18n/templates/validationReport_es_ES.ftl - client/datasource/actions/src/main/i18n/templates/validationReport_fr_FR.ftl Changes: ===================================== client/datasource/actions/src/main/i18n/templates/validationReport_en_GB.ftl ===================================== @@ -1,4 +1,5 @@ -<#-- @ftlvariable name=".data_model" type="fr.ird.observe.client.datasource.actions.validate.ValidateModel" --><#-- +<#-- @ftlvariable name=".data_model" type="fr.ird.observe.client.datasource.actions.validate.ValidateModel" --> +<#-- #%L ObServe Client :: DataSource :: Actions %% @@ -17,44 +18,232 @@ <http://www.gnu.org/licenses/gpl-3.0.html>. #L% --> -<html> +<!doctype html> +<html lang="en"> +<#macro displayNode node> +<#-- @ftlvariable name="node" type="fr.ird.observe.client.datasource.actions.validate.tree.ValidationNode" --> + <#assign withChildren = node.childCount != 0 /> + <#assign withMessages = node.messagesCount != 0 /> + <li> + <span id="${node.id}" class="<#if withChildren>caret<#else>leaf</#if>"></span> + <span class="datum">${node.label}</span> <#if node.id?starts_with("fr.ird.referential") || node.id?starts_with("fr.ird.data") > - <span + class="topiaId">${node.id}</span></#if> + <#if withChildren || withMessages> + <ul class="nested"> + <#if withMessages> + <#assign messages = node.messagesByLabel /> + <table> + <#list messages as fieldName, fieldMessages> + <tr> + <td style="width:25%">${fieldName}</td> + <td> + <ul class="messages"> + <#list fieldMessages as message> + <li class="<#if message.scope.name() == "ERROR">error<#else>warning</#if>">${message.message}</li> + </#list> + </ul> + </td> + </tr> + </#list> + </table> + </#if> + <#if withChildren> + <#list node.getChildren() as childNode> + <@displayNode childNode/> + </#list> + </#if> + </ul> + </#if> + </li> +</#macro> +<head> + <meta charset="UTF-8"> + <meta lang="en"> + <meta content="text/html"> + <title>Rapport de validation</title> + <style> + #result { + list-style-type: none; + margin: 0; + padding: 0; + } + + #result ul { + list-style-type: none; + } + + .caret { + cursor: pointer; + user-select: none; + } + + .caret::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caretSymbol::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + .leaf { + margin-top: 6px; + } + + .leaf::before { + content: "\25CB"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caret-down::before { + content: "\1f5c1"; + color: #027BFF; + /*transform: rotate(90deg);*/ + } + + #result .nested { + display: none; + } + + #result .active { + display: block; + } + + .datum { + + } + + table { + /*font-family: arial, sans-serif;*/ + border-collapse: collapse; + width: 90%; + /*margin-left: 20px;*/ + margin-top: 10px; + margin-bottom: 10px; + } + + td, th { + border: 1px solid #027BFF; + text-align: left; + padding: 4px; + } + + tr:nth-child(even) { + background-color: #dddddd; + } + + .error:before { + padding-right: 8px; + content: "\26D4"; + } + + .warning:before { + padding-right: 8px; + content: "\26A0"; + font-style: normal; + } + + .information::before { + content: "\1F6C8"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .topiaId { + -moz-user-select: all; + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; + } + + ul.messages { + list-style-type: none; + } + </style> +</head> <body> -<b>#TODO</b> +<b>TODO</b> <h1>Rapport de validation</h1> <h2>Configuration</h2> <ul> <li>Rapport de validation généré le ${.data_model.now}</li> - <li>Scopes : ${.data_model.scopes?join(", ")}</li> + <li>Niveau(x) de validation : + <#list .data_model.scopes as scope> + <span class="<#if scope.name() == "ERROR">error<#else>warning</#if>">${scope.label}</span> + </#list> + </li> <li>Context : ${.data_model.contextName}</li> </ul> -<#assign nodes = .data_model.validationResult.nodes /> -<#list nodes as node> -<#--<h2>${decorateType(type)} : ${count}</h2>--> -<#--<table>--> -<#-- <thead>--> -<#-- <tr>--> -<#-- <th>Identifiant</th>--> -<#-- <th>Libellé</th>--> -<#-- <th>Scope</th>--> -<#-- <th>Champs</th>--> -<#-- <th>Message</th>--> -<#-- </tr>--> -<#-- </thead>--> -<#-- <#list validationResult.getResultsForType(type) as dto>--> -<#-- <#list validationResult.getMessagesForId(dto.id) as message>--> -<#-- <tr>--> -<#-- <td>${dto.id}</td>--> -<#-- <td>${dto.reference}</td>--> -<#-- <td>${message.scope}</td>--> -<#-- <td>${decorateProperty(type, message.fieldName)}</td>--> -<#-- <td>${message.message}</td>--> -<#-- </tr>--> -<#-- </#list>--> -<#-- </#list>--> -<#--</table>--> -</#list> +<h2>Résultat</h2> +<h3>Notes</h3> +<div class="information">Pour déplier un nœud, cliquez sur l'icone <span class="caretSymbol"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Pour replier un nœud, cliquez sur l'icone <span class="caret-down"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Un clic sur un identifiant le sélectionne automatiquement.</div> +<br/> +<#assign rootNode = .data_model.rootNode /> +<ul id="result"> + <#list rootNode.getChildren() as node> + <@displayNode node/> + <br/> + </#list> +</ul> + +<script> + function expand(node) { + // console.info("will expand child " + node.id); + node.classList.add("caret-down"); + node.parentElement.querySelector(".nested").classList.add("active"); + } + + function collapse(node) { + // console.info("will collapse child " + node.id); + node.classList.remove("caret-down"); + node.parentElement.querySelector(".nested").classList.remove("active"); + } + + function toggle(expanded, node) { + if (expanded) { + collapse(node); + } else { + expand(node); + } + } + + for (const caret of document.getElementsByClassName("caret")) { + caret.addEventListener("click", function (event) { + let expanded = this.classList.contains("caret-down"); + // console.info("do click on " + this.id+", was expanded? "+expanded); + toggle(expanded, this); + + if (event.shiftKey) { + // console.info("SHIFT on " + this.id+" was expanded? "+expanded); + for (const child of this.parentElement.querySelector(".nested").getElementsByClassName("caret")) { + toggle(expanded, child); + } + } + }); + <#if .data_model.modelMode.name() == "REFERENTIEL"> + caret.click(); + </#if> + } + for (const caret of document.getElementsByClassName("leaf")) { + let element = caret.parentElement.querySelector(".nested"); + if (element != null) { + element.classList.toggle("active"); + } + } +</script> </body> </html> ===================================== client/datasource/actions/src/main/i18n/templates/validationReport_es_ES.ftl ===================================== @@ -18,44 +18,231 @@ <http://www.gnu.org/licenses/gpl-3.0.html>. #L% --> -<html> -<body> +<!doctype html> +<html lang="es"> +<#macro displayNode node> +<#-- @ftlvariable name="node" type="fr.ird.observe.client.datasource.actions.validate.tree.ValidationNode" --> + <#assign withChildren = node.childCount != 0 /> + <#assign withMessages = node.messagesCount != 0 /> + <li> + <span id="${node.id}" class="<#if withChildren>caret<#else>leaf</#if>"></span> + <span class="datum">${node.label}</span> <#if node.id?starts_with("fr.ird.referential") || node.id?starts_with("fr.ird.data") > - <span + class="topiaId">${node.id}</span></#if> + <#if withChildren || withMessages> + <ul class="nested"> + <#if withMessages> + <#assign messages = node.messagesByLabel /> + <table> + <#list messages as fieldName, fieldMessages> + <tr> + <td style="width:25%">${fieldName}</td> + <td> + <ul class="messages"> + <#list fieldMessages as message> + <li class="<#if message.scope.name() == "ERROR">error<#else>warning</#if>">${message.message}</li> + </#list> + </ul> + </td> + </tr> + </#list> + </table> + </#if> + <#if withChildren> + <#list node.getChildren() as childNode> + <@displayNode childNode/> + </#list> + </#if> + </ul> + </#if> + </li> +</#macro> +<head> + <meta charset="UTF-8"> + <meta lang="es"> + <meta content="text/html"> + <title>Rapport de validation</title> + <style> + #result { + list-style-type: none; + margin: 0; + padding: 0; + } + + #result ul { + list-style-type: none; + } + + .caret { + cursor: pointer; + user-select: none; + } + + .caret::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caretSymbol::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + .leaf { + margin-top: 6px; + } + + .leaf::before { + content: "\25CB"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caret-down::before { + content: "\1f5c1"; + color: #027BFF; + /*transform: rotate(90deg);*/ + } + + #result .nested { + display: none; + } + + #result .active { + display: block; + } + + .datum { + + } + + table { + /*font-family: arial, sans-serif;*/ + border-collapse: collapse; + width: 90%; + /*margin-left: 20px;*/ + margin-top: 10px; + margin-bottom: 10px; + } + + td, th { + border: 1px solid #027BFF; + text-align: left; + padding: 4px; + } -<h1>Informe de validación</h1> + tr:nth-child(even) { + background-color: #dddddd; + } -<h2>Configuración</h2> + .error:before { + padding-right: 8px; + content: "\26D4"; + } + + .warning:before { + padding-right: 8px; + content: "\26A0"; + font-style: normal; + } + + .information::before { + content: "\1F6C8"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .topiaId { + -moz-user-select: all; + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; + } + + ul.messages { + list-style-type: none; + } + </style> +</head> +<body> +<h1>Rapport de validation</h1> + +<h2>Configuration</h2> <ul> - <li>Informe de validación generado el ${.data_model.now}</li> - <li>Scopes : ${.data_model.scopes?join(", ")}</li> + <li>Rapport de validation généré le ${.data_model.now}</li> + <li>Niveau(x) de validation : + <#list .data_model.scopes as scope> + <span class="<#if scope.name() == "ERROR">error<#else>warning</#if>">${scope.label}</span> + </#list> + </li> <li>Context : ${.data_model.contextName}</li> </ul> -<#assign nodes = .data_model.validationResult.nodes /> -<#list nodes as node> -<#--<h2>${decorateType(type)} : ${count}</h2>--> -<#--<table>--> -<#-- <thead>--> -<#-- <tr>--> -<#-- <th>Identifiant</th>--> -<#-- <th>Libellé</th>--> -<#-- <th>Scope</th>--> -<#-- <th>Champs</th>--> -<#-- <th>Message</th>--> -<#-- </tr>--> -<#-- </thead>--> -<#-- <#list validationResult.getResultsForType(type) as dto>--> -<#-- <#list validationResult.getMessagesForId(dto.id) as message>--> -<#-- <tr>--> -<#-- <td>${dto.id}</td>--> -<#-- <td>${dto.reference}</td>--> -<#-- <td>${message.scope}</td>--> -<#-- <td>${decorateProperty(type, message.fieldName)}</td>--> -<#-- <td>${message.message}</td>--> -<#-- </tr>--> -<#-- </#list>--> -<#-- </#list>--> -<#--</table>--> -</#list> +<h2>Résultat</h2> +<h3>Notes</h3> +<div class="information">Pour déplier un nœud, cliquez sur l'icone <span class="caretSymbol"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Pour replier un nœud, cliquez sur l'icone <span class="caret-down"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Un clic sur un identifiant le sélectionne automatiquement.</div> +<br/> +<#assign rootNode = .data_model.rootNode /> +<ul id="result"> + <#list rootNode.getChildren() as node> + <@displayNode node/> + <br/> + </#list> +</ul> + +<script> + function expand(node) { + // console.info("will expand child " + node.id); + node.classList.add("caret-down"); + node.parentElement.querySelector(".nested").classList.add("active"); + } + + function collapse(node) { + // console.info("will collapse child " + node.id); + node.classList.remove("caret-down"); + node.parentElement.querySelector(".nested").classList.remove("active"); + } + + function toggle(expanded, node) { + if (expanded) { + collapse(node); + } else { + expand(node); + } + } + + for (const caret of document.getElementsByClassName("caret")) { + caret.addEventListener("click", function (event) { + let expanded = this.classList.contains("caret-down"); + // console.info("do click on " + this.id+", was expanded? "+expanded); + toggle(expanded, this); + + if (event.shiftKey) { + // console.info("SHIFT on " + this.id+" was expanded? "+expanded); + for (const child of this.parentElement.querySelector(".nested").getElementsByClassName("caret")) { + toggle(expanded, child); + } + } + }); + <#if .data_model.modelMode.name() == "REFERENTIEL"> + caret.click(); + </#if> + } + for (const caret of document.getElementsByClassName("leaf")) { + let element = caret.parentElement.querySelector(".nested"); + if (element != null) { + element.classList.toggle("active"); + } + } +</script> </body> </html> ===================================== client/datasource/actions/src/main/i18n/templates/validationReport_fr_FR.ftl ===================================== @@ -18,43 +18,231 @@ <http://www.gnu.org/licenses/gpl-3.0.html>. #L% --> -<html> -<body> +<!doctype html> +<html lang="fr"> +<#macro displayNode node> +<#-- @ftlvariable name="node" type="fr.ird.observe.client.datasource.actions.validate.tree.ValidationNode" --> + <#assign withChildren = node.childCount != 0 /> + <#assign withMessages = node.messagesCount != 0 /> + <li> + <span id="${node.id}" class="<#if withChildren>caret<#else>leaf</#if>"></span> + <span class="datum">${node.label}</span> <#if node.id?starts_with("fr.ird.referential") || node.id?starts_with("fr.ird.data") > - <span + class="topiaId">${node.id}</span></#if> + <#if withChildren || withMessages> + <ul class="nested"> + <#if withMessages> + <#assign messages = node.messagesByLabel /> + <table> + <#list messages as fieldName, fieldMessages> + <tr> + <td style="width:25%">${fieldName}</td> + <td> + <ul class="messages"> + <#list fieldMessages as message> + <li class="<#if message.scope.name() == "ERROR">error<#else>warning</#if>">${message.message}</li> + </#list> + </ul> + </td> + </tr> + </#list> + </table> + </#if> + <#if withChildren> + <#list node.getChildren() as childNode> + <@displayNode childNode/> + </#list> + </#if> + </ul> + </#if> + </li> +</#macro> +<head> + <meta charset="UTF-8"> + <meta lang="fr"> + <meta content="text/html"> + <title>Rapport de validation</title> + <style> + #result { + list-style-type: none; + margin: 0; + padding: 0; + } + + #result ul { + list-style-type: none; + } + + .caret { + cursor: pointer; + user-select: none; + } + + .caret::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caretSymbol::before { + content: "\1f5c0"; + /*content: "\25B6";*/ + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + .leaf { + margin-top: 6px; + } + + .leaf::before { + content: "\25CB"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .caret-down::before { + content: "\1f5c1"; + color: #027BFF; + /*transform: rotate(90deg);*/ + } + + #result .nested { + display: none; + } + + #result .active { + display: block; + } + + .datum { + + } + + table { + /*font-family: arial, sans-serif;*/ + border-collapse: collapse; + width: 90%; + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; + } + + td, th { + border: 1px solid #027BFF; + text-align: left; + padding: 4px; + } + tr:nth-child(even) { + background-color: #dddddd; + } + + .error:before { + padding-right: 8px; + content: "\26D4"; + } + + .warning:before { + padding-right: 8px; + content: "\26A0"; + font-style: normal; + } + + .information::before { + content: "\1F6C8"; + color: #027BFF; + display: inline-block; + margin-right: 6px; + } + + .topiaId { + -moz-user-select: all; + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; + } + + ul.messages { + list-style-type: none; + } + </style> +</head> +<body> <h1>Rapport de validation</h1> <h2>Configuration</h2> <ul> - <li>Rapport de validation généré le ${now}</li> - <li>Scopes : ${.data_model.scopes?join(", ")}</li> + <li>Rapport de validation généré le ${.data_model.now}</li> + <li>Niveau(x) de validation : + <#list .data_model.scopes as scope> + <span class="<#if scope.name() == "ERROR">error<#else>warning</#if>">${scope.label}</span> + </#list> + </li> <li>Context : ${.data_model.contextName}</li> </ul> -<#assign nodes = .data_model.validationResult.nodes /> -<#list nodes as node> -<#--<h2>${decorateType(type)} : ${count}</h2>--> -<#--<table>--> -<#-- <thead>--> -<#-- <tr>--> -<#-- <th>Identifiant</th>--> -<#-- <th>Libellé</th>--> -<#-- <th>Scope</th>--> -<#-- <th>Champs</th>--> -<#-- <th>Message</th>--> -<#-- </tr>--> -<#-- </thead>--> -<#-- <#list validationResult.getResultsForType(type) as dto>--> -<#-- <#list validationResult.getMessagesForId(dto.id) as message>--> -<#-- <tr>--> -<#-- <td>${dto.id}</td>--> -<#-- <td>${dto.reference}</td>--> -<#-- <td>${message.scope}</td>--> -<#-- <td>${decorateProperty(type, message.fieldName)}</td>--> -<#-- <td>${message.message}</td>--> -<#-- </tr>--> -<#-- </#list>--> -<#-- </#list>--> -<#--</table>--> -</#list> + +<h2>Résultat</h2> +<h3>Notes</h3> +<div class="information">Pour déplier un nœud, cliquez sur l'icone <span class="caretSymbol"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Pour replier un nœud, cliquez sur l'icone <span class="caret-down"></span> (la combinaison avec la touche <b>Maj</b> effectue l'action sur le sous-arbre constitué de ses fils).</div> +<div class="information">Un clic sur un identifiant le sélectionne automatiquement.</div> +<br/> +<#assign rootNode = .data_model.rootNode /> +<ul id="result"> + <#list rootNode.getChildren() as node> + <@displayNode node/> + <br/> + </#list> +</ul> + +<script> + function expand(node) { + // console.info("will expand child " + node.id); + node.classList.add("caret-down"); + node.parentElement.querySelector(".nested").classList.add("active"); + } + + function collapse(node) { + // console.info("will collapse child " + node.id); + node.classList.remove("caret-down"); + node.parentElement.querySelector(".nested").classList.remove("active"); + } + + function toggle(expanded, node) { + if (expanded) { + collapse(node); + } else { + expand(node); + } + } + + for (const caret of document.getElementsByClassName("caret")) { + caret.addEventListener("click", function (event) { + let expanded = this.classList.contains("caret-down"); + // console.info("do click on " + this.id+", was expanded? "+expanded); + toggle(expanded, this); + + if (event.shiftKey) { + // console.info("SHIFT on " + this.id+" was expanded? "+expanded); + for (const child of this.parentElement.querySelector(".nested").getElementsByClassName("caret")) { + toggle(expanded, child); + } + } + }); + <#if .data_model.modelMode.name() == "REFERENTIEL"> + caret.click(); + </#if> + } + for (const caret of document.getElementsByClassName("leaf")) { + let element = caret.parentElement.querySelector(".nested"); + if (element != null) { + element.classList.toggle("active"); + } + } +</script> </body> </html> View it on GitLab: https://gitlab.com/ultreiaio/ird-observe/-/commit/38138697cd596f3c7016983d53... -- View it on GitLab: https://gitlab.com/ultreiaio/ird-observe/-/commit/38138697cd596f3c7016983d53... You're receiving this email because of your account on gitlab.com.