Re-engineer settings in sparnatural-form

sparna-git · Dec 2, 2024 · 8245c79 · 8245c79
1 parent cdef6eb
commit 8245c79
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 103 deletions.
diff --git a/src/SparnaturalFormAttributes.ts b/src/SparnaturalFormAttributes.ts
@@ -1,4 +1,3 @@
-import { getSettings } from "./sparnatural-form/settings/defaultsSettings";
 import { SparnaturalFormElement } from "./SparnaturalFormElement";
 
 /**
@@ -60,13 +59,6 @@ export class SparnaturalFormAttributes {
 
     this.debug = this.#read(element, "debug", true);
   }
-  updateLanguage(newLang: string) {
-    const settings = getSettings();
-    settings.language = newLang; // Met à jour la langue courante
-
-    // Relancer l'affichage de l'interface (réinitialisation des labels)
-    this.sparnatural.display(); // Ou la méthode qui réinitialise l'affichage
-  }
 
   #read(element: HTMLElement, attribute: string, asJson: boolean = false) {
     return element.getAttribute(attribute)
@@ -77,15 +69,14 @@ export class SparnaturalFormAttributes {
   }
 
   #parsePrefixes(element: HTMLElement) {
-    if (!element.getAttribute("prefix")) {
-      console.error("No prefixes provided!");
+    if (!element.getAttribute("prefixes")) {
       return;
     }
 
     let sparqlPrefixes = {};
     // use the singular to match RDFa attribute name
     let prefixArray = element
-      .getAttribute("prefix")
+      .getAttribute("prefixes")
       .trim()
       .split(/:\s+|\s+/);
     for (let i = 0; i < prefixArray.length; i++) {
@@ -100,7 +91,7 @@ export class SparnaturalFormAttributes {
           enumerable: true,
         });
       } catch (e) {
-        console.error("Parsing of attribute prefix failed!");
+        console.error("Parsing of attribute prefixes failed!");
         console.error(`Can not parse ${prefixArray[i]}`);
       }
     }

diff --git a/src/SparnaturalFormElement.ts b/src/SparnaturalFormElement.ts
@@ -3,10 +3,11 @@ import "./assets/stylesheets/sparnatural-form.scss";
 import SparnaturalFormComponent from "./sparnatural-form/components/SparnaturalFormComponent";
 import { SparnaturalFormAttributes } from "./SparnaturalFormAttributes";
 import {
-  getSettings,
-  mergeSettings,
-} from "./sparnatural-form/settings/defaultsSettings";
+  defaultSettings,
+  extend
+} from "./sparnatural-form/settings/Settings";
 import { SparqlHandlerFactory, SparqlHandlerIfc } from "./sparnatural/components/widgets/data/SparqlHandler";
+import ISettings from "./sparnatural-form/settings/ISettings";
 
 /*
   This is the sparnatural-form HTMLElement. 
@@ -17,12 +18,16 @@ export class SparnaturalFormElement extends HTMLElement {
   static EVENT_INIT = "init";
   static EVENT_SUBMIT = "submit";
   static EVENT_QUERY_UPDATED = "queryUpdated";
+  static EVENT_RESET: "reset";
 
   sparnaturalForm: SparnaturalFormComponent;
 
   // just to avoid name clash with "attributes"
   _attributes: SparnaturalFormAttributes;
-  static EVENT_RESET: "reset";
+
+  settings: ISettings;
+
+
 
   constructor() {
     super();
@@ -36,25 +41,27 @@ export class SparnaturalFormElement extends HTMLElement {
   }
 
   set customization(customization: any) {
-    getSettings().customization = customization;
+    this.settings.customization = customization;
   }
 
   get customization() {
-    return getSettings().customization;
+    return this.settings.customization;
   }
 
   display() {
     // read the HTML attributes in sparnatural-form
     this._attributes = new SparnaturalFormAttributes(this);
 
+    this.settings = extend(true, this.settings, defaultSettings, this._attributes) as ISettings
+
     // create the sparnatural-form instance
-    this.sparnaturalForm = new SparnaturalFormComponent(this._attributes);
+    this.sparnaturalForm = new SparnaturalFormComponent(this.settings);
 
     // empty the HTML content in case we re-display after an attribute change
     $(this).empty();
     // attach the component to this WebComponent
     $(this).append(this.sparnaturalForm.html);
-    mergeSettings(this._attributes);
+
     // render the form
     this.sparnaturalForm.render();
   }
@@ -67,7 +74,7 @@ export class SparnaturalFormElement extends HTMLElement {
   expandSparql(query: string) {
     return this.sparnaturalForm.specProvider.expandSparql(
       query,
-      getSettings().sparqlPrefixes
+      this.settings.sparqlPrefixes
     );
   }
 
@@ -86,26 +93,26 @@ export class SparnaturalFormElement extends HTMLElement {
 
     // prevents callback to be called on initial creation
     if (oldValue != null) {
-      if (getSettings().debug) {
+      if (this.settings.debug) {
         console.log(
           `${name}'s value has been changed from ${oldValue} to ${newValue}`
         );
       }
       switch (name) {
         case "src": {
-          getSettings().src = newValue;
+          this.settings.src = newValue;
           break;
         }
         case "lang": {
-          getSettings().language = newValue;
+          this.settings.language = newValue;
           break;
         }
         case "defaultlang": {
-          getSettings().defaultLanguage = newValue;
+          this.settings.defaultLanguage = newValue;
           break;
         }
         case "endpoint": {
-          getSettings().endpoints = newValue.split(" ");
+          this.settings.endpoints = newValue.split(" ");
           break;
         }
         default: {
@@ -141,15 +148,15 @@ export class SparnaturalFormElement extends HTMLElement {
     errorCallback?: (error: any) => void
   ) {
     let sparqlFetcherFactory: SparqlHandlerFactory = new SparqlHandlerFactory(      
-      getSettings().language,
-      getSettings().localCacheDataTtl,
-      getSettings().customization.headers,
-      getSettings().customization.sparqlHandler,
+      this.settings.language,
+      this.settings.localCacheDataTtl,
+      this.settings.customization.headers,
+      this.settings.customization.sparqlHandler,
       this.sparnaturalForm.catalog
     );
 
     let sparqlFetcher: SparqlHandlerIfc =
-      sparqlFetcherFactory.buildSparqlHandler(getSettings().endpoints);
+      sparqlFetcherFactory.buildSparqlHandler(this.settings.endpoints);
     sparqlFetcher.executeSparql(query, callback, errorCallback);
   }
 }

diff --git a/src/assets/stylesheets/sparnatural-form.scss b/src/assets/stylesheets/sparnatural-form.scss
@@ -62,7 +62,7 @@ sparnatural-form {
     margin-top: 20px;
   }
 
-  #submit {
+  .submitSection {
     display: flex;
     justify-content: flex-end;
     gap: 10px;

diff --git a/src/sparnatural-form/components/SparnaturalFormComponent.ts b/src/sparnatural-form/components/SparnaturalFormComponent.ts
@@ -4,25 +4,26 @@ import { Branch, ISparJson } from "../../sparnatural/generators/json/ISparJson";
 import { I18n } from "../../sparnatural/settings/I18n";
 import ISparnaturalSpecification from "../../sparnatural/spec-providers/ISparnaturalSpecification";
 import SparnaturalSpecificationFactory from "../../sparnatural/spec-providers/SparnaturalSpecificationFactory";
-import { SparnaturalFormAttributes } from "../../SparnaturalFormAttributes";
 import ISettings from "../settings/ISettings";
 import { SparnaturalFormI18n } from "../settings/SparnaturalFormI18n";
-import UnselectBtn from "../../sparnatural/components/buttons/UnselectBtn";
 import ActionStoreForm from "../handling/ActionStore"; // Importer le store
 import { Catalog } from "../../sparnatural/settings/Catalog";
-import { getSettings } from "../settings/defaultsSettings";
 import SubmitSection from "./buttons/SubmitBtn";
 import { SparnaturalFormElement } from "../../SparnaturalFormElement";
 import FormField from "./FormFieldGenerator";
 import { Binding, Form } from "../FormStructure";
 
+/**
+ * the content of all HTML element attributes
+ */
 class SparnaturalFormComponent extends HTMLComponent {
-  // the content of all HTML element attributes
-  formSettings: ISettings;
   // Sparnatural configuration
+  settings: ISettings;
+
   SubmitSection: SubmitSection;
 
   specProvider: ISparnaturalSpecification;
+
   // The JSON query from the "query" attribute
   jsonQuery: ISparJson;
 
@@ -32,11 +33,10 @@ class SparnaturalFormComponent extends HTMLComponent {
 
   catalog: Catalog;
 
-  constructor(attributes: SparnaturalFormAttributes) {
+  constructor(settings: ISettings) {
     // this is a root component : Does not have a ParentComponent!
     super("SparnaturalForm", null, null);
-    this.formSettings = attributes;
-    this.formSettings.customization = {};
+    this.settings = settings;
     this.cleanQueryResult = null; // Initialise cleanQueryResult
   }
 
@@ -53,8 +53,8 @@ class SparnaturalFormComponent extends HTMLComponent {
     //copy the query to avoid modifying the original query
     const copiedQuery = JSON.parse(JSON.stringify(this.jsonQuery));
     //get the form configuration url
-    console.log("formSettings", this.formSettings);
-    let formUrl = this.formSettings.form;
+    console.log("formSettings", this.settings);
+    let formUrl = this.settings.form;
 
     //initialize the form configuration
     let formConfig: Form = null;
@@ -145,7 +145,7 @@ class SparnaturalFormComponent extends HTMLComponent {
         this.actionStoreForm = new ActionStoreForm(this, this.specProvider);
 
         //get the url of the form configuration file
-        let formUrl = this.formSettings.form;
+        let formUrl = this.settings.form;
 
         // Load the form configuration file asynchronously via $.getJSON
         $.getJSON(formUrl, (formConfig) => {
@@ -166,19 +166,23 @@ class SparnaturalFormComponent extends HTMLComponent {
               new WidgetFactory(
                 this,
                 this.specProvider,
-                this.formSettings,
+                this.settings,
                 null
               )
             );
             fieldGenerator.generateField();
           });
 
           // Add the submit button if it is set in the settings
-          if (getSettings().submitButton) {
+          if (this.settings.submitButton) {
+            let id:string = "submit-"+Math.random().toString(36).substring(2, 8);
             const submitBtn = document.createElement("div");
-            submitBtn.setAttribute("id", "submit");
+            submitBtn.setAttribute("id", id);
+            submitBtn.setAttribute("class", "submitSection");
             this.html[0].appendChild(submitBtn);
-            this.SubmitSection = new SubmitSection(this, "submit").render();
+            // we give a unique ID to the section to avoid ID clashes if there are more than one form used in the page
+            this.SubmitSection = new SubmitSection(this, id);
+            this.SubmitSection.render();
           }
         }).fail((error) => {
           console.error("Error loading form configuration:", error);
@@ -226,8 +230,8 @@ class SparnaturalFormComponent extends HTMLComponent {
   initSpecificationProvider(callback: (sp: ISparnaturalSpecification) => void) {
     let specProviderFactory = new SparnaturalSpecificationFactory();
     specProviderFactory.build(
-      this.formSettings.src,
-      this.formSettings.language,
+      this.settings.src,
+      this.settings.language,
       // here : catalog parameter that we could add to the form
       undefined,
       (sp: ISparnaturalSpecification) => {
@@ -239,7 +243,7 @@ class SparnaturalFormComponent extends HTMLComponent {
   }
 
   #initCatalog() {
-    let settings = getSettings();
+    let settings = this.settings;
     let me = this;
     if (settings.catalog) {
       $.getJSON(settings.catalog, function (data) {
@@ -257,7 +261,7 @@ class SparnaturalFormComponent extends HTMLComponent {
    * @param callback
    */
   initJsonQuery(callback: (query: ISparJson) => void) {
-    let queryUrl = this.formSettings.query;
+    let queryUrl = this.settings.query;
 
     $.when(
       $.getJSON(queryUrl, function (data) {
@@ -275,7 +279,7 @@ class SparnaturalFormComponent extends HTMLComponent {
    */
 
   #initSparnaturalFormStaticLabels(formConfig: Form) {
-    const lang = getSettings().language === "fr" ? "fr" : "en";
+    const lang = this.settings.language === "fr" ? "fr" : "en";
     SparnaturalFormI18n.init(lang, formConfig);
   }
 
@@ -292,7 +296,7 @@ class SparnaturalFormComponent extends HTMLComponent {
    * Initialize the static labels used to render the widgets from Sparnatural
    */
   #initSparnaturalStaticLabels() {
-    if (getSettings().language === "fr") {
+    if (this.settings.language === "fr") {
       I18n.init("fr");
     } else {
       I18n.init("en");

diff --git a/src/sparnatural-form/components/buttons/SubmitBtn.ts b/src/sparnatural-form/components/buttons/SubmitBtn.ts
@@ -1,4 +1,3 @@
-import { getSettings } from "../../../sparnatural-form/settings/defaultsSettings";
 import SearchBtn from "./SearchBtn";
 import SparnaturalFormComponent from "../../../sparnatural-form/components/SparnaturalFormComponent";
 import { SparnaturalFormElement } from "../../../SparnaturalFormElement";
@@ -19,10 +18,8 @@ class SubmitSection {
     this.resetBtn = new ResetBtn(this.resetForm.bind(this));
     // Create the Search button
     this.searchBtn = new SearchBtn(this.submitAction.bind(this));
-
-    // Render the button inside the container
-    this.render();
   }
+
   render(): this {
     // Vérifie si les boutons existent déjà dans le conteneur
     if (
@@ -42,16 +39,13 @@ class SubmitSection {
 
   // Define submit action
   submitAction = () => {
-    if (getSettings().submitButton) {
-      console.log("SubmitSection: Submit button clicked");
-      let e = new CustomEvent(SparnaturalFormElement.EVENT_SUBMIT, {
-        bubbles: true,
-        detail: this.ParentSparnatural,
-      });
-      this.container[0].dispatchEvent(e);
-      console.log(e);
-      console.log("Submit event dispatched.");
-    }
+    let e = new CustomEvent(SparnaturalFormElement.EVENT_SUBMIT, {
+      bubbles: true,
+      detail: this.ParentSparnatural,
+    });
+    this.container[0].dispatchEvent(e);
+    console.log(e);
+    console.log("Submit event dispatched.");
   };
 
   // Reset form action

diff --git a/src/sparnatural-form/handling/actions/GenerateQuery.ts b/src/sparnatural-form/handling/actions/GenerateQuery.ts
@@ -1,4 +1,3 @@
-import { getSettings } from "../../settings/defaultsSettings";
 import ActionStoreForm from "../ActionStore";
 import { Generator } from "sparqljs";
 import { ISparJson } from "../../../sparnatural/generators/json/ISparJson";
@@ -35,7 +34,7 @@ export class QueryGeneratorForm {
     console.log("Query utilisée pour la génération :", queryToUse);
 
     // Utiliser JsonSparqlTranslator pour convertir la requête en SPARQL
-    const settings = getSettings();
+    const settings = this.actionStoreForm.sparnaturalForm.settings;
     const sparqlTranslator = new JsonSparqlTranslator(
       this.actionStoreForm.specProvider,
       settings