move magic values to configuration file

react/common/src/IElixFormsComponentProperties.ts

@@ -1,5 +1,5 @@
 export interface IElixFormsComponentProperties {
-  isDarkTheme: boolean;
+  isDarkTheme?: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
   

react/recupero-proposta-cct-da-contratti/src/App.jsx

@@ -1,22 +1,22 @@
 import './App.css'
 import RecuperoPropostaCctDaContrattiComponent from './RecuperoPropostaCctDaContrattiComponent';
+import config from './config.json';
 
 function App() {
   return (
     <RecuperoPropostaCctDaContrattiComponent
-      isDarkTheme={false}
+      userDisplayName="XYZ"
-      userDisplayName='useruseruser'
 
-      moduleName='Module name'
+      moduleName={config.component.moduleName}
-      headerTitle='Header title'
+      headerTitle={config.component.headerTitle}
-      headerHeroImageSrc='https://procedure.unipr.it/UploadImgs/8_marchio_UNIPR_pos_b1_small_SVG.png'
+      headerHeroImageSrc={config.component.headerHeroImageSrc}
-      cardTitle='Recupero Proposta CCT da Contratti (card title)'
+      cardTitle={config.component.cardTitle}
-      cardDescription='Card description'
+      cardDescription={config.component.cardDescription}
-      alertInfoTitle='Alert Info'
+      alertInfoTitle={config.component.alertInfoTitle}
-      alertInfoMessage='environment message'
+      alertInfoMessage={config.component.alertInfoMessage}
-      instructionsTitle='Istruzioni di compilazione'
+      instructionsTitle={config.component.instructionsTitle}
-      instructionsMessage='Completa i campi richiesti per procedere con la richiesta.'
+      instructionsMessage={config.component.instructionsMessage}
-      submitText='CONFERMA E PROSEGUI'
+      submitText={config.component.submitText}
     />
   );
 }

react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx

@@ -38,17 +38,17 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
   private autocompleteRef: React.RefObject<HTMLDivElement | null> = React.createRef();
 
   private static readonly formFieldKeys = {
-    idContratto: 'COL0010',
+    codiceContratto: config.elixForms.outputs.codiceContratto,
-    titoloContratto: 'COL0020',
+    titoloContratto: config.elixForms.outputs.titoloContratto,
-    idDomanda: 'COL0030',
+    idDomanda: config.elixForms.outputs.idDomanda,
-    idRicevuta: 'COL0040',
+    idRicevuta: config.elixForms.outputs.idRicevuta,
   } as const;
 
   private codiceFiscale: string;
 
   constructor(props: any) {
     super(props);
-    this.codiceFiscale = QueryParamHelper.getDecodedTextFromQuery('COL0009') ?? '';
+    this.codiceFiscale = QueryParamHelper.getDecodedTextFromQuery(config.elixForms.inputs.codiceFiscale) ?? '';
   }
 
   override componentDidMount(): void {
@@ -75,17 +75,17 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
     this.forceUpdate();
 
     try {
-      const url = new URL(config.apiUrl);
+      const url = new URL(config.contrattiWS.apiUrl);
       url.searchParams.set('cod_fis', this.codiceFiscale);
       url.searchParams.set('term', searchTerm);
 
-      const credentials = btoa(`${config.apiUsername}:${config.apiPassword}`);
+      const credentials = btoa(`${config.contrattiWS.apiUsername}:${config.contrattiWS.apiPassword}`);
 
       const response = await fetch(url.toString(), {
         method: 'GET',
         headers: {
           Authorization: `Basic ${credentials}`,
-          'X-Api-Key': config.apiKey,
+          'X-Api-Key': config.contrattiWS.apiKey,
           Accept: 'application/json',
         },
       });
@@ -129,7 +129,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
       clearTimeout(this.debounceTimer);
     }
 
-    if (text.length >= config.minCharsForSearch) {
+    if (text.length >= config.component.minCharsForSearch) {
       this.debounceTimer = setTimeout(() => {
         this.fetchContratti(text);
       }, 300);
@@ -184,7 +184,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
     this.setState({
       formData: {
         ...this.state.formData,
-        [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idContratto]: contract.idContratto,
+        [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.codiceContratto]: contract.idContratto,
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.titoloContratto]: contract.titoloContratto,
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idDomanda]: contract.idDomanda,
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idRicevuta]: contract.idRicevuta,
@@ -198,7 +198,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
     this.setState({
       formData: {
         ...this.state.formData,
-        [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idContratto]: '',
+        [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.codiceContratto]: '',
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.titoloContratto]: '',
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idDomanda]: '',
         [RecuperoPropostaCctDaContrattiComponent.formFieldKeys.idRicevuta]: '',
@@ -287,7 +287,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
 
   protected override createCustomFormFields(formFieldFactory: IElixFormsComponentCustomFormFieldFactory): JSX.Element {
     const fieldKeys = RecuperoPropostaCctDaContrattiComponent.formFieldKeys;
-    const idContratto = this.state.formData[fieldKeys.idContratto] ?? '';
+    const idContratto = this.state.formData[fieldKeys.codiceContratto] ?? '';
     const titoloContratto = this.state.formData[fieldKeys.titoloContratto] ?? '';
     const idDomanda = this.state.formData[fieldKeys.idDomanda] ?? '';
     const idRicevuta = this.state.formData[fieldKeys.idRicevuta] ?? '';
@@ -295,7 +295,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
     return (
       <>
         {this.renderAutocomplete()}
-        <input type="hidden" id="idContratto_hidden" name={fieldKeys.idContratto} value={idContratto} />
+        <input type="hidden" id="idContratto_hidden" name={fieldKeys.codiceContratto} value={idContratto} />
         <input type="hidden" id="titoloContratto_hidden" name={fieldKeys.titoloContratto} value={titoloContratto} />
         <input type="hidden" id="idDomanda_hidden" name={fieldKeys.idDomanda} value={idDomanda} />
         <input type="hidden" id="idRicevuta_hidden" name={fieldKeys.idRicevuta} value={idRicevuta} />

react/recupero-proposta-cct-da-contratti/src/config.json

@@ -1,7 +1,33 @@
 {
+  "component": {
+    "minCharsForSearch": 3,
+    "userDisplayName": "useruseruser",
+    "moduleName": "Module name",
+    "headerTitle": "Header title",
+    "headerHeroImageSrc": "https://procedure.unipr.it/UploadImgs/8_marchio_UNIPR_pos_b1_small_SVG.png",
+    "cardTitle": "Recupero Proposta CCT da Contratti (card title)",
+    "cardDescription": "Card description",
+    "alertInfoTitle": "Alert Info",
+    "alertInfoMessage": "environment message",
+    "instructionsTitle": "Istruzioni di compilazione",
+    "instructionsMessage": "Completa i campi richiesti per procedere con la richiesta.",
+    "submitText": "CONFERMA E PROSEGUI"
+  },
+  "elixForms": {
+    "inputs": {
+      "codiceFiscale": "COL0009"
+    },
+    "outputs": {
+      "idDomanda": "COL0001",
+      "idRicevuta": "COL0002",
+      "codiceContratto": "COL0003",
+      "titoloContratto": "COL0004"
+    }
+  },
+  "contrattiWS": {
     "apiUrl": "http://localhost:8000/contratti/cerca",
     "apiUsername": "your-username",
     "apiPassword": "your-password",
-  "apiKey": "your-api-key",
+    "apiKey": "your-api-key"
-  "minCharsForSearch": 3
+  }
 }

react/scelta-carriera/src/App.jsx

@@ -6,7 +6,6 @@ function App() {
   return (
     <SceltaCarrieraComponent
       moduleName=""
-      isDarkTheme={false}
       alertInfoMessage=""
       userDisplayName="John Doe"
       headerTitle="Modulo A/13 - Richiesta di Certificato"