fix form state for dropdown controls

minor cleanups

.agents/AGENTS.md

@@ -0,0 +1,4 @@
+# Regole e Convenzioni del Progetto elixForms Custom Pages
+
+## Gestione ID dei form element
+Gli ID dei campi del form (es. nel Dropdown, Checkbox, TextField) che vengono creati con i vari metodi `create...` in `ElixFormsComponentAbstract.tsx` non devono mai essere cambiati o manipolati (es. aggiungendo suffissi come `_dropdown`), poiché vengono ricevuti e inviati da una pagina iniziale che si basa strettamente sul loro nome e ID esatto. In caso di conflitti di ID (es. dovuti a input nascosti), il suffisso va applicato agli altri elementi (come l'input hidden) e MAI all'elemento principale visibile.

react/common/src/ElixFormsComponentAbstract.tsx

@@ -59,7 +59,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     "ELANG"
   ];
 
-  private createMandatoryFormFields(queryParams: URLSearchParams) : JSX.Element {
+  private createMandatoryFormFields(queryParams: URLSearchParams): JSX.Element {
     const hiddenInputs: JSX.Element[] = [];
 
     // Create a hidden input for each mandatory Elix parameter
@@ -72,7 +72,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return <>{hiddenInputs}</>;
   }
 
-  private createAdditionalFormFields() : React.ReactElement {
+  private createAdditionalFormFields(): React.ReactElement {
     const schema = JSON.parse(this.props.additionalFieldsJson || "[]");
 
     return (
@@ -113,7 +113,11 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return this.createCustomFormFields(formFieldFactory);
   }
 
-  protected renderExtraContent(): JSX.Element | null {
+  protected renderExtraContentPre(): JSX.Element | null {
+    return null;
+  }
+
+  protected renderExtraContentPost(): JSX.Element | null {
     return null;
   }
 
@@ -176,14 +180,16 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                     {environmentMessage && <div>{environmentMessage}</div>}
                     {description && <div>{description}</div>}
 
+                    {this.renderExtraContentPre()}
+
                     <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
                       {this.createMandatoryFormFields(queryParams)}
                       {this.createAdditionalFormFields()}
                       {this.renderCustomFormFields()}
-                      <input type="submit" value="Submit"/>
+                      <input type="submit" value="Submit" />
                     </form>
 
-                    {this.renderExtraContent()}
+                    {this.renderExtraContentPost()}
                   </div>
                 </div>
               </div>
@@ -212,7 +218,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     );
   }
 
-  private createCheckboxInput(paramName: string, label: string, values: Array<ElixFormsCheckboxOption>) : JSX.Element {
+  private createCheckboxInput(paramName: string, label: string, values: Array<ElixFormsCheckboxOption>): JSX.Element {
     const checkedValues = QueryParamHelper.getCheckedFromQuery(paramName);
 
     if (!this.checkboxValues.get(paramName)) {
@@ -234,26 +240,30 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
             } else if (!checked && checkboxIndex !== -1) {
               currentCheckboxValues.splice(checkboxIndex, 1);
             }
-            this.state.formData[paramName] = currentCheckboxValues.join(',').trim() ?? '';
+            const newValue = currentCheckboxValues.join(',').trim();
-            //this.setState({ formData: { ...this.state.formData, [paramName]: currentCheckboxValues.join(',').trim() ?? '' } }, () =>
+            this.setState({ formData: { ...this.state.formData, [paramName]: newValue } }, () => {
               console.log(`Checkbox ${id} changed to ${checked}. Current values for ${paramName}: ${this.state.formData[paramName]}`);
-            //);
+            });
           }}
         />
       );
     });
 
+    const currentValue = this.state.formData[paramName] !== undefined
+                           ? this.state.formData[paramName]
+                           : (this.checkboxValues.get(paramName)?.join(',').trim() ?? '');
+
     return new ElixFormsElement(
       <><FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label></>,
       <><FluentUI.Stack tokens={stackTokens}>
         {checkboxes}
       </FluentUI.Stack>
-      <input type='hidden' id={paramName} name={paramName} value={this.state.formData[paramName] ?? ''} />
+        <input type='hidden' id={paramName} name={paramName} value={currentValue} />
       </>
     ).render();
   }
 
-  private createRadioInput(paramName: string, label: string, values: Array<ElixFormsRadioOption>, required: boolean = false) : JSX.Element {
+  private createRadioInput(paramName: string, label: string, values: Array<ElixFormsRadioOption>, required: boolean = false): JSX.Element {
     const radioValue = QueryParamHelper.getOptionFromQuery(paramName);
     const radios: FluentUI.IChoiceGroupOption[] = [];
 
@@ -289,7 +299,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     ).render();
   }
 
-  private createBooleanInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
+  private createBooleanInput(paramName: string, label: string, required: boolean = false): JSX.Element {
     const boolValue = QueryParamHelper.getOptionFromQuery(paramName);
     const radios: FluentUI.IChoiceGroupOption[] = [];
 
@@ -325,7 +335,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     ).render();
   }
 
-  private createTextAreaInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
+  private createTextAreaInput(paramName: string, label: string, required: boolean = false): JSX.Element {
     const textareaValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
     return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
@@ -339,7 +349,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     ).render();
   }
 
-  private createTextInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
+  private createTextInput(paramName: string, label: string, required: boolean = false): JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
     return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
@@ -353,12 +363,12 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     ).render();
   }
 
-  private createHiddenInput(paramName: string) : JSX.Element {
+  private createHiddenInput(paramName: string): JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return <><input type='text' id={paramName} name={paramName} defaultValue={textValue} /><br/></>;
+    return <><input type='text' id={paramName} name={paramName} defaultValue={textValue} /><br /></>;
   }
 
-  private createNumberInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
+  private createNumberInput(paramName: string, label: string, required: boolean = false): JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
     return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
@@ -373,14 +383,17 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
   }
 
   private createDropdownInput(paramName: string, label: string, values: Array<ElixFormsDropdownOption>, required: boolean = false): JSX.Element {
-    const selectedValue = QueryParamHelper.getOptionFromQuery(paramName);
+    const queryValue = QueryParamHelper.getOptionFromQuery(paramName);
+    const currentValue = this.state.formData[paramName] !== undefined 
+                           ? this.state.formData[paramName] 
+                           : (queryValue?.toString() ?? '');
+
     const options: FluentUI.IDropdownOption[] = [];
 
     values.forEach(entry => {
-      const id = `${paramName}_${entry.value}`;
       options.push(
         {
-          key: id,
+          key: entry.value.toString(),
           text: entry.label
         }
       );
@@ -388,19 +401,25 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
 
     return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
+      <>
         <FluentUI.Dropdown
           id={paramName}
           options={options}
-        selectedKey={selectedValue?.toString()}
+          selectedKey={currentValue}
           placeholder='---'
           required={required}
           className='isiportalPartialAdminFormFieldSelect'
-        onChange={(event, value) => {
+          onChange={(event, option) => {
+            if (option) {
+              const value = option.key.toString();
               this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
                 console.log(`Dropdown ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
               );
+            }
           }}
         />
+        <input type="hidden" name={paramName} id={paramName + '_hidden'} value={currentValue} />
+      </>
     ).render();
   }
 

react/common/src/IElixFormsComponentProperties.ts

@@ -10,7 +10,7 @@ export interface IElixFormsComponentProperties {
   additionalFieldsJson?: string;
 
   // Layout Properties
-  moduleTitle?: string;
+  headerTitle?: string;
   pageTitle?: string;
   pageDescription?: string;
   heroImageSrc?: string;

react/scelta-carriera/src/SceltaCarrieraComponent.tsx

@@ -43,7 +43,7 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
     );
   }
 
-  protected override renderExtraContent(): JSX.Element {
+  protected override renderExtraContentPost(): JSX.Element {
     return <p>Altre cose</p>;
   }
 }