major refactor

rename classes
added props configuration for custom fields

Co-authored-by: Copilot <copilot@github.com>

scelta-carriera/src/App.jsx

@@ -3,25 +3,109 @@ import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
 import heroImg from './assets/hero.png'
 import './App.css'
-import * as ElixForms from './components/ElixFormsReact';
+import * as ElixForms from './components/ElixFormsComponent';
 
 function App() {
   const [count, setCount] = useState(0)
 
+  /** @type {import('./components/ElixFormsComponent').ElixFormsReact} */
   var myElixFormsReact = new ElixForms.ElixFormsReact();
-  myElixFormsReact.addTextInput("name", "Name", true);
+
-  myElixFormsReact.addTextAreaInput("description", "Description");
+  myElixFormsReact.props = {
-  myElixFormsReact.addNumberInput("age", "Age");
+    description: "This is a custom form created with ElixFormsReact component.",
-  myElixFormsReact.addDropdownInput("country", "Country", new Map<number, string>([
+    isDarkTheme: false,
-    [1, "Italy"],
+    environmentMessage: "TESTING!",
-    [2, "USA"],
+    additionalFieldsJson: JSON.stringify([
-    [3, "UK"]
+      {
-  ]));
+        "key": "COL0002",
-  myElixFormsReact.addCheckboxInput("hobbies", "Hobbies", new Map<number, string>([
+        "type": "text",
-    [1, "Sports"],
+        "label": "Campo STRING",
-    [2, "Music"],
+        "required": false
-    [3, "Traveling"]
+      },
-  ]));
+      {
+        "key": "COL0003",
+        "type": "textarea",
+        "label": "Campo TEXTAREA",
+        "required": false
+      },
+      {
+        "key": "COL0004",
+        "type": "boolean",
+        "label": "Campo Boolean",
+        "required": false
+      },
+      {
+        "key": "COL0005",
+        "type": "radio",
+        "label": "Campo _RADIO_",
+        "required": false,
+        "options": [
+          { "value": 1, "label": "Opzione 1" },
+          { "value": 2, "label": "Opzione 2" },
+          { "value": 3, "label": "Altra opzione" }
+        ]
+      },
+      {
+        "key": "COL0006",
+        "type": "checkbox",
+        "label": "Campo CHECKBOX",
+        "options": [
+          { "value": 4, "label": "Check 1" },
+          { "value": 5, "label": "Check due" },
+          { "value": 6, "label": "Altro check" }
+        ]
+      },
+      {
+        "key": "COL0015",
+        "type": "dropdown",
+        "label": "Validazione lista",
+        "required": true,
+        "options": [
+          { "value": 0, "label": "Not applicable" },
+          { "value": 1, "label": "Goal 1: No poverty" },
+          { "value": 2, "label": "Goal 2: Zero hunger" },
+          { "value": 3, "label": "Goal 3: Good health and well-being" },
+          { "value": 4, "label": "Goal 4: Quality education" },
+          { "value": 5, "label": "Goal 5: Gender equality" },
+          { "value": 6, "label": "Goal 6: Clean water and sanitation" },
+          { "value": 7, "label": "Goal 7: Affordable and clean energy" },
+          { "value": 8, "label": "Goal 8: Decent work and economic growth" },
+          { "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
+          { "value": 10, "label": "Goal 10: Reduced inequalities" },
+          { "value": 11, "label": "Goal 11: Sustainable cities and communities" },
+          { "value": 12, "label": "Goal 12: Responsible consumption and production" },
+          { "value": 13, "label": "Goal 13: Climate action" },
+          { "value": 14, "label": "Goal 14: Life below water" },
+          { "value": 15, "label": "Goal 15: Life on land" },
+          { "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
+          { "value": 17, "label": "Goal 17: Partnerships for the goals" }
+        ]
+      }
+    ]),
+    customFormFieldsConfiguration: (
+      /** @type {import('./components/IElixFormsComponentProperties').ICustomFormFieldFactory} */
+      formFieldFactory
+    ) => (
+      <>
+        {formFieldFactory.createTextInput("name", "Name", true)}
+        {formFieldFactory.createTextAreaInput("description", "Description")}
+      </>
+    )
+  };
+
+  // myElixFormsReact.addTextInput("name", "Name", true);
+  // myElixFormsReact.addTextAreaInput("description", "Description");
+  // myElixFormsReact.addNumberInput("age", "Age");
+  // myElixFormsReact.addDropdownInput("country", "Country", new Map<number, string>([
+  //   [1, "Italy"],
+  //   [2, "USA"],
+  //   [3, "UK"]
+  // ]));
+  // myElixFormsReact.addCheckboxInput("hobbies", "Hobbies", new Map<number, string>([
+  //   [1, "Sports"],
+  //   [2, "Music"],
+  //   [3, "Traveling"]
+  // ]));
 
   return myElixFormsReact.render();
 }

scelta-carriera/src/components/ElixFormsComponent.module.scss

@@ -1,6 +1,6 @@
 @import '~@fluentui/react/dist/sass/References.scss';
 
-.elixFormsReact {
+.elixFormsComponent {
   overflow: hidden;
   padding: 1em;
   color: "[theme:bodyText, default: #323130]";

scelta-carriera/src/components/ElixFormsComponent.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import ElixFormsComponentAbstract from './ElixFormsComponentAbstract';
+
+export default class ElixFormsComponent extends ElixFormsComponentAbstract {
+  // public override createCustomFormFields(): React.ReactElement {
+  //   // const textTest = this.CreateTextInput("COL0018", "TEXT INPUT");
+  //   // const checkTest = this.CreateCheckboxInput("COL0090", "CHECKBOX INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
+  //   // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
+  //   // const boolTest = this.CreateBooleanInput("COL0092", "BOOLEAN INPUT");
+  //   // const textareaTest = this.CreateTextAreaInput("COL0093", "TEXTAREA INPUT");
+
+  //   return (<></>);
+  // }
+}
+
+export { ElixFormsComponent as ElixFormsReact };

scelta-carriera/src/components/ElixFormsComponentAbstract.tsx

@@ -1,13 +1,14 @@
 import * as FluentUI from '@fluentui/react';
-import { IElixFormsReactFormState } from './IElixFormsReactFormState';
+import { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
-import { IElixFormsReactProps } from './IElixFormsReactProps';
+import { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
-import { ElixFormElement } from './ElixFormElement';
+import { ElixFormsElement } from './ElixFormsElement';
 import { QueryParamHelper } from './QueryParamHelper';
 import { Component, FormEvent, JSX } from 'react';
 import React from 'react';
+import { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
 
-export default abstract class ElixFormsReactAbstract extends Component<IElixFormsReactProps, IElixFormsReactFormState> {
+export default abstract class ElixFormsComponentAbstract extends Component<IElixFormsComponentProperties, IElixFormsComponentFormState> {
-  constructor(props: IElixFormsReactProps) {
+  constructor(props: IElixFormsComponentProperties) {
     super(props);
 
     this.state = {
@@ -56,24 +57,38 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
     );
   }
 
-  public createCustomFormFields() : React.ReactElement {
+  public createCustomFormFields(callback: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element = () => <></>): JSX.Element {
-    // const textTest = this.CreateTextInput("COL0018", "TEXT INPUT");
+    const formFieldFactory = {
-    // const checkTest = this.CreateCheckboxInput("COL0090", "CHECKBOX INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
+      createBooleanInput: (name: string, label: string, required: boolean = false) =>
-    // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
+        this.createBooleanInput(name, label, required),
-    // const boolTest = this.CreateBooleanInput("COL0092", "BOOLEAN INPUT");
+      createCheckboxInput: (name: string, label: string, options: Map<number, string>, required: boolean = false) =>
-    // const textareaTest = this.CreateTextAreaInput("COL0093", "TEXTAREA INPUT");
+        this.createCheckboxInput(name, label, options, required),
+      createDropdownInput: (name: string, label: string, options: Map<number, string>, required: boolean = false) =>
+        this.createDropdownInput(name, label, options, required),
+      createHiddenInput: (name: string) =>
+        this.createHiddenInput(name),
+      createNumberInput: (name: string, label: string, required: boolean = false) =>
+        this.createNumberInput(name, label, required),
+      createRadioInput: (name: string, label: string, options: Map<number, string>, required: boolean = false) =>
+        this.createRadioInput(name, label, options, required),
+      createTextInput: (name: string, label: string, required: boolean = false) =>
+        this.createTextInput(name, label, required),
+      createTextAreaInput: (name: string, label: string, required: boolean = false) =>
+        this.createTextAreaInput(name, label, required),
+    };
 
-    return (<></>);
+    return callback(formFieldFactory);
   }
 
-  public override render(): React.ReactElement<IElixFormsReactProps> {
+  public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
       description,
       isDarkTheme,
       environmentMessage,
       hasTeamsContext,
       userDisplayName,
-      additionalFieldsJson
+      additionalFieldsJson,
+      customFormFieldsConfiguration
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
@@ -82,17 +97,18 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
       <section>
         {/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
         <div>{environmentMessage}</div>
+        <div>{description}</div>
         <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post">
           {this.createMandatoryFormFields(queryParams)}
           {this.createAdditionalFormFields()}
-          {this.createCustomFormFields()}
+          {this.createCustomFormFields(customFormFieldsConfiguration)}
           <input type="submit" value="Submit"/>
         </form>
       </section>
     );
   }
 
-  private createCheckboxInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false) : ElixFormElement {
+  private createCheckboxInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false) : JSX.Element {
     const checkedValues =  QueryParamHelper.getCheckedFromQuery(paramName);
 
     if (!this.checkboxValues.get(paramName)) {
@@ -120,17 +136,17 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
       );
     });
 
-    return new ElixFormElement(
+    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] ?? ''} />
       </>
-    );
+    ).render();
   }
 
-  private createRadioInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false) : ElixFormElement {
+  private createRadioInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false) : JSX.Element {
     const radioValue = QueryParamHelper.getOptionFromQuery(paramName);
     const radios: FluentUI.IChoiceGroupOption[] = [];
 
@@ -147,7 +163,7 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
       );
     });
 
-    return new ElixFormElement(
+    return new ElixFormsElement(
       <></>,
       <FluentUI.ChoiceGroup
         name={paramName}
@@ -156,10 +172,10 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
         required={required}
         defaultSelectedKey={`${paramName}_${radioValue}`}
       />
-    );
+    ).render();
   }
 
-  private createBooleanInput(paramName: string, label: string, required: boolean = false) : ElixFormElement {
+  private createBooleanInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
     const boolValue = QueryParamHelper.getOptionFromQuery(paramName);
     const radios: FluentUI.IChoiceGroupOption[] = [];
 
@@ -176,7 +192,7 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
       );
     });
 
-    return new ElixFormElement(
+    return new ElixFormsElement(
       <></>,
       <FluentUI.ChoiceGroup
         name={paramName}
@@ -185,49 +201,49 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
         required={required}
         defaultSelectedKey={`${paramName}_${boolValue}`}
       />
-    );
+    ).render();
   }
 
-  private createTextAreaInput(paramName: string, label: string, required: boolean = false) : ElixFormElement {
+  private createTextAreaInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
     const textareaValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return new  ElixFormElement(
+    return new  ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
       <FluentUI.TextField id={paramName} name={paramName} defaultValue={textareaValue} multiline rows={4} required={required} />
-    );
+    ).render();
   }
 
-  private createTextInput(paramName: string, label: string, required: boolean = false) : ElixFormElement {
+  private createTextInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return new ElixFormElement(
+    return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
       <FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} required={required} />
-    );
+    ).render();
   }
 
   private createHiddenInput(paramName: string) : JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return <input type='hidden' id={paramName} name={paramName} defaultValue={textValue} />;
+    return <><input type='text' id={paramName} name={paramName} defaultValue={textValue} /><br/></>;
   }
 
-  private createNumberInput(paramName: string, label: string, required: boolean = false) : ElixFormElement {
+  private createNumberInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return new ElixFormElement(
+    return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
       <FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} type="number" required={required} />
-    );
+    ).render();
   }
 
-  private createDropdownInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false): ElixFormElement {
+  private createDropdownInput(paramName: string, label: string, values: Map<number, string>, required: boolean = false): JSX.Element {
     const selectedValue = QueryParamHelper.getOptionFromQuery(paramName);
     const options = Array.from(values).map(([num, val]) => ({
       key: num.toString(),
       text: val
     }));
 
-    return new ElixFormElement(
+    return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
       <FluentUI.Dropdown id={paramName} options={options} selectedKey={selectedValue?.toString()} placeholder='---' required={required} />
-    );
+    ).render();
   }
 
   private renderField(field: any): JSX.Element {
@@ -235,25 +251,25 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
 
     switch (field.type) {
       case "text":
-        return this.createTextInput(field.key, field.label, field.required ?? false).render();
+        return this.createTextInput(field.key, field.label, field.required ?? false);
 
       case "textarea":
-        return this.createTextAreaInput(field.key, field.label, field.required ?? false).render();
+        return this.createTextAreaInput(field.key, field.label, field.required ?? false);
 
       case "radio":
-        return this.createRadioInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false).render();
+        return this.createRadioInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false);
 
       case "boolean":
-        return this.createBooleanInput(field.key, field.label, field.required ?? false).render();
+        return this.createBooleanInput(field.key, field.label, field.required ?? false);
 
       case "checkbox":
-        return this.createCheckboxInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false).render();
+        return this.createCheckboxInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false);
 
       case "number":
-        return this.createNumberInput(field.key, field.label, field.required ?? false).render();
+        return this.createNumberInput(field.key, field.label, field.required ?? false);
 
       case "dropdown":
-        return this.createDropdownInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false).render();
+        return this.createDropdownInput(field.key, field.label, new Map<number, string>(field.options.map((o: any) => [o.value, o.label])), field.required ?? false);
 
       default:
         return <></>;

scelta-carriera/src/components/ElixFormsElement.tsx

@@ -1,7 +1,7 @@
 import React, { JSX } from "react";
 
 // Class to encapsulate the label and input elements
-export class ElixFormElement {
+export class ElixFormsElement {
     label: JSX.Element;
     input: JSX.Element;
     separator: string;

scelta-carriera/src/components/ElixFormsReact.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import ElixFormsReactAbstract from './ElixFormsReactAbstract';
-
-export default class ElixFormsReact extends ElixFormsReactAbstract {
-  public override createCustomFormFields(): React.ReactElement {
-    // const textTest = this.CreateTextInput("COL0018", "TEXT INPUT");
-    // const checkTest = this.CreateCheckboxInput("COL0090", "CHECKBOX INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
-    // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
-    // const boolTest = this.CreateBooleanInput("COL0092", "BOOLEAN INPUT");
-    // const textareaTest = this.CreateTextAreaInput("COL0093", "TEXTAREA INPUT");
-
-    return (<></>);
-  }
-}
-
-export { ElixFormsReact };

scelta-carriera/src/components/IElixFormsComponentCustomFormFieldFactory.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+
+
+export type IElixFormsComponentCustomFormFieldFactory = {
+  createTextInput: (name: string, label: string, required?: boolean) => JSX.Element;
+  createTextAreaInput: (name: string, label: string, required?: boolean) => JSX.Element;
+  createNumberInput: (name: string, label: string, required?: boolean) => JSX.Element;
+  createDropdownInput: (name: string, label: string, options: Map<number, string>, required?: boolean) => JSX.Element;
+  createCheckboxInput: (name: string, label: string, options: Map<number, string>, required?: boolean) => JSX.Element;
+};

scelta-carriera/src/components/IElixFormsComponentFormState.tsx

@@ -0,0 +1,4 @@
+
+export interface IElixFormsComponentFormState {
+  formData: { [key: string]: any; };
+}

scelta-carriera/src/components/IElixFormsComponentProperties.ts

@@ -1,10 +1,16 @@
-export interface IElixFormsReactProps {
+import { JSX } from "react";
+import { IElixFormsComponentCustomFormFieldFactory } from "./IElixFormsComponentCustomFormFieldFactory";
+
+export type ICustomFormFieldsConfiguration = (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element;
+
+export interface IElixFormsComponentProperties {
   description: string;
   isDarkTheme: boolean;
   environmentMessage: string;
   hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
+  customFormFieldsConfiguration?: ICustomFormFieldsConfiguration;
 }
 
 // Additional Fields JSON Schema

scelta-carriera/src/components/IElixFormsReactFormState.tsx

@@ -1,4 +0,0 @@
-
-export interface IElixFormsReactFormState {
-  formData: { [key: string]: any; };
-}