Merge pull request #333 from jdev-org/issue-218

#218 - Template - Composant libre

Author: Gaetanbrl

docs/doc_user/param_data.rst

@@ -276,6 +276,7 @@ Il est maintenant nécessaire de peupler le bloc de gauche avec des composants e
 * ``Chiffre clé`` : composant permettant d’afficher un chiffre clé à mettre en avant et nécessitant une valeur de type « nombre » en entrée.
 * ``Liste`` : composant permettant d’afficher une liste et nécessitant un champ composé d’une liste comme indiqué dans la `documentation mviewer <https://mviewerdoc.readthedocs.io/fr/latest/doc_tech/config_tpl.html#iterer-sur-un-champ-de-type-json>`_.
 * ``Texte`` : composant permettant d’afficher un texte et nécessitant une valeur de type texte en entrée.
+* ``Libre`` : composant permettant de saisir librement le contenu du template comme dans un fichier Mustache (.mst).
 
 Sélectionnez un composant et cliquez sur "Enregistrer" pour l’ajouter. Il n’est possible d’ajouter qu’un composant à la fois, veuillez réitérer l’opération pour ajouter des composants supplémentaires. 
 

js/mviewerstudio.js

@@ -412,7 +412,7 @@ var editLayer = function (item, themeid, layerid) {
   mv.setCurrentLayerId(layerid);
   var element = $(item).parent().parent();
   var layerid = element.attr("data-layerid");
-
+  element.addClass("active");
   if (layerid != "undefined") {
     $("#mod-layerOptions").modal("show");
     mv.showLayerOptions(element, themeid, layerid);

lib/mv.js

@@ -49,6 +49,15 @@ var mv = (function () {
         layerid = el.attr("data-layerid");
       }
       var themeid = mv.getCurrentThemeId();
+      if (!themeid) {
+        // search theme id from config object
+        themeid = Object.keys(config.themes)
+          .filter((f) => {
+            const them = config.themes[f];
+            return them.layers.filter((l) => l.id === layerid)?.length;
+          })
+          .filter((x) => x)[0];
+      }
       return config.themes[themeid].layers.find((l) => l.id === layerid);
     },
 
@@ -627,7 +636,7 @@ var mv = (function () {
       $("#frm-layerid").val(layer.id);
       $("#frm-url").val(layer.url);
       $("#frm-queryable").prop("checked", layer.queryable);
-      $("#frm-featurecount").val(layer.featurecount);
+      $("#frm-featurecount").val(layer.featurecount || 5);
       $("#frm-infopanel option[value='" + layer.infopanel + "']").prop("selected", true);
       $("#frm-secure").val(layer.secure);
       $("#frm-useproxy").prop("checked", layer.useproxy);
@@ -803,7 +812,9 @@ var mv = (function () {
       layer.fusesearchkeys = $("#frm-fusesearchkeys").val();
       layer.fusesearchresult = $("#frm-fusesearchresult").val();
       layer.infoformat = $("#frm-infoformat").val();
-      layer.featurecount = $("#frm-featurecount").val();
+      layer.featurecount = document
+        .querySelector("#frm-featurecount")
+        .getAttribute("value");
       layer.infopanel = $("#frm-infopanel").val();
       layer.metadata = $("#frm-metadata").val();
       layer["metadata-csw"] = $("#frm-metadata-csw").val();

lib/template-generator/ComponentsSelector.js

@@ -6,6 +6,7 @@ import { header as imageHeader } from "./components/library/ImageComponent.js";
 import { header as buttonHeader } from "./components/library/ButtonComponent.js";
 import { header as numberHeader } from "./components/library/NumbersComponent.js";
 import { header as listHeader } from "./components/library/ListComponent.js";
+import { header as freeHeader } from "./components/library/FreeComponent.js";
 
 const headers = [
   h1Header(),
@@ -16,6 +17,7 @@ const headers = [
   numberHeader(),
   listHeader(),
   textHeader(),
+  freeHeader(),
 ];
 
 /**

lib/template-generator/TemplateGenerator.js

@@ -12,6 +12,7 @@ import ButtonComponent from "./components/library/ButtonComponent.js";
 import ListComponent from "./components/library/ListComponent.js";
 import NumbersComponent from "./components/library/NumbersComponent.js";
 import IframeComponent from "./components/library/IframeComponent.js";
+import FreeComponent from "./components/library/FreeComponent.js";
 import { RightPanelLocation } from "./components/content/RightPanelLocation.js";
 import { BottomPanelLocation } from "./components/content/BottomPanelLocation.js";
 import { BottomPanelHtmlPreview } from "./components/content/BottomPanelLocation.js";
@@ -24,6 +25,7 @@ const components = [
   new NumbersComponent(),
   new IframeComponent(),
   new ImageComponent(),
+  new FreeComponent(),
 ];
 
 const maxItemsByCol = 3;

lib/template-generator/components/forms/TextArea.js

@@ -0,0 +1,32 @@
+class TextArea {
+  uuid = mv.uuidv4();
+  value = "";
+  label = "Saisir un contenu";
+  constructor(value = "", label) {
+    this.value = value.value;
+    this.label = label;
+  }
+  render = () => {
+    return `
+          <div class="row g-3 align-items-center">
+              <label class="col-auto" for="head">${mviewer.tr(this.label)}</label>
+              <div class="col-12">
+                  <textarea
+                    class="form-control form-control-sm component-form"
+                    style="height:100px"
+                    id="${this.uuid}"
+                    name="">${this.value ? decodeURI(this.value).trim() : ""}</textarea>
+              </div>
+          </div>
+          `;
+  };
+  set = ({ label, value }) => {
+    this.value = value || this.value;
+    this.label = label || this.label;
+  };
+  getValue = () => {
+    return document.getElementById(this.uuid).value;
+  };
+}
+
+export default TextArea;

lib/template-generator/components/library/FreeComponent.js

@@ -0,0 +1,49 @@
+import TemplateComponent from "./TemplateComponent.js";
+import TextArea from "../forms/TextArea.js";
+
+export const header = () => ({
+  icon: "bi bi-body-text",
+  id: mv.uuidv4(),
+  title: "template.free.title",
+  click: () => FreeComponent,
+  class: "FreeComponent",
+});
+
+const defaultTypeFields = [];
+
+const attributes = ["data-value"];
+
+export default class FreeComponent extends TemplateComponent {
+  constructor(customHeader, defaultAttrValues) {
+    let defaultValues = new Map();
+    if (defaultAttrValues) {
+      attributes.forEach((a) => {
+        defaultValues.set(a, defaultAttrValues[a]);
+      });
+    }
+    const textArea = new TextArea(defaultValues.get("data-value"), "template.free.label");
+    super(customHeader || header(), defaultTypeFields, [textArea], defaultValues);
+    this.textArea = textArea;
+  }
+
+  getAttributes = () => attributes;
+
+  render = () => {
+    let values = {
+      value: this.textArea.getValue(),
+    };
+    return this.template(values);
+  };
+
+  template = ({ value }) => {
+    return `
+      <div class="${header().class} template-component mb-2"
+        data-type-selector=""
+        data-value="${encodeURI(value)}"
+        data-component="${header().class}"
+      >
+      ${value}
+      </div>
+      `;
+  };
+}

lib/template-generator/components/library/TemplateComponent.js

@@ -11,6 +11,7 @@ export default class TemplateComponent {
   customFields = [];
   defaultType = "";
   defaultValues = null;
+  typeFieldSelector = "";
   constructor(
     header = { icon: "", title: "" },
     defaultTypeFields = ["field", "multi", "static"],
@@ -23,10 +24,12 @@ export default class TemplateComponent {
       this.defaultValues = defaultValues;
       this.defaultType = defaultValues.get("data-type-selector");
     }
-    this.typeFieldSelector = new TypeFieldSelector({
-      fields: defaultTypeFields,
-      defaultType: this.defaultType,
-    });
+    if (defaultTypeFields && defaultTypeFields.length) {
+      this.typeFieldSelector = new TypeFieldSelector({
+        fields: defaultTypeFields,
+        defaultType: this.defaultType,
+      });
+    }
     this.customFields = customFields;
   }
 
@@ -138,7 +141,7 @@ export default class TemplateComponent {
     return `
     <div class="card cardComponent titleComponent" id=${this.uuid}>
         ${this.cardHeader()}
-        ${this.typeFieldSelector.render()}
+        ${this.typeFieldSelector ? this.typeFieldSelector.render() : ""}
         <div class="subcomponents" id="${mv.uuidv4()}"></div>
         ${this.tooltipContent()}
     </div>`;
@@ -149,14 +152,20 @@ export default class TemplateComponent {
     this.componentsArea = document
       .getElementById(this.uuid)
       .querySelector(".subcomponents");
-    const typeFieldSelectorFromDOM = document.getElementById(this.typeFieldSelector.uuid);
-    typeFieldSelectorFromDOM.addEventListener("change", (el) => {
-      this.getForms(el.target.value);
+    if (this.typeFieldSelector) {
+      const typeFieldSelectorFromDOM = document.getElementById(
+        this.typeFieldSelector.uuid
+      );
+      typeFieldSelectorFromDOM.addEventListener("change", (el) => {
+        this.getForms(el.target.value);
+        this.getCustomFields();
+        _elementTranslate("body");
+      });
+      if (this.defaultType) {
+        typeFieldSelectorFromDOM.dispatchEvent(new Event("change"));
+      }
+    } else {
       this.getCustomFields();
-      _elementTranslate("body");
-    });
-    if (this.defaultType) {
-      typeFieldSelectorFromDOM.dispatchEvent(new Event("change"));
     }
     _elementTranslate("body");
   };

mviewerstudio.i18n.json

@@ -377,6 +377,8 @@
     "template.typefield.static": "Saisie libre",
     "template.typefield.liField": "A partir d'un champ JSON",
     "template.typefield.select": "Choisir un type...",
+    "template.free.title": "Saisie libre",
+    "template.free.label": "Contenu du template :",
     "version.comment": "Ajouter une description à cette version",
     "version.comment.ph": "Exemple : Version de test sans données",
     "publish.message": "Version publiée",