elixForms/elixforms-web-pages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major refactor

Browse Source 
rename classes
added props configuration for custom fields

Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
administrator
2026-04-27 12:42:18 +02:00
co-authored by Copilot
parent 798c5d69f9
commit 58a7ce20a7
10 changed files with 197 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scelta-carriera/src/App.jsx
+98 -14
View File
@@ -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.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"]
]));
myElixFormsReact.props = {
description: "This is a custom form created with ElixFormsReact component.",
isDarkTheme: false,
environmentMessage: "TESTING!",
additionalFieldsJson: JSON.stringify([
{
"key": "COL0002",
"type": "text",
"label": "Campo STRING",
"required": false
},
{
"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/ElixFormsReact.module.scss → scelta-carriera/src/components/ElixFormsComponent.module.scss
+1 -1
View File
@@ -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
+16
View File
@@ -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/ElixFormsReactAbstract.tsx → scelta-carriera/src/components/ElixFormsComponentAbstract.tsx
+60 -44
View File
@@ -1,13 +1,14 @@
import * as FluentUI from '@fluentui/react';
import { IElixFormsReactFormState } from './IElixFormsReactFormState';
import { IElixFormsReactProps } from './IElixFormsReactProps';
import { ElixFormElement } from './ElixFormElement';
import { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
import { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
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> {
constructor(props: IElixFormsReactProps) {
export default abstract class ElixFormsComponentAbstract extends Component<IElixFormsComponentProperties, IElixFormsComponentFormState> {
constructor(props: IElixFormsComponentProperties) {
super(props);
this.state = {
@@ -56,24 +57,38 @@ export default abstract class ElixFormsReactAbstract extends Component<IElixForm
);
}
public 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");
public createCustomFormFields(callback: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element = () => <></>): JSX.Element {
const formFieldFactory = {
createBooleanInput: (name: string, label: string, required: boolean = false) =>
this.createBooleanInput(name, label, required),
createCheckboxInput: (name: string, label: string, options: Map<number, string>, required: boolean = false) =>
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/ElixFormElement.tsx → scelta-carriera/src/components/ElixFormsElement.tsx
+1 -1
View File
@@ -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
-16
View File
@@ -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
+10
View File
@@ -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
+4
View File
@@ -0,0 +1,4 @@
export interface IElixFormsComponentFormState {
formData: { [key: string]: any; };
}
scelta-carriera/src/components/IElixFormsReactProps.ts → scelta-carriera/src/components/IElixFormsComponentProperties.ts
+7 -1
View File
@@ -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
-4
View File
@@ -1,4 +0,0 @@
export interface IElixFormsReactFormState {
formData: { [key: string]: any; };
}