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

fix form state for dropdown controls

Browse Source 
minor cleanups
This commit is contained in:
administrator
2026-07-06 13:32:37 +02:00
parent 158892bd3e
commit 1daa5c7409
4 changed files with 76 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/common/src/ElixFormsComponentAbstract.tsx
+69 -50
View File
@@ -59,30 +59,30 @@ 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
this.mandatoryFormFieldNames.forEach(paramName => {
const value = queryParams.get(paramName) ?? "";
// Create the input element
hiddenInputs.push(this.createHiddenInput(paramName));
// Create the input element
hiddenInputs.push(this.createHiddenInput(paramName));
});
return <>{hiddenInputs}</>;
}
private createAdditionalFormFields() : React.ReactElement {
private createAdditionalFormFields(): React.ReactElement {
const schema = JSON.parse(this.props.additionalFieldsJson || "[]");
return (
<>
{schema.map((field: { key: React.Key | null | undefined; }) => (
<div key={field.key}>
{this.renderField(field)}
</div>
))}
</>
<>
{schema.map((field: { key: React.Key | null | undefined; }) => (
<div key={field.key}>
{this.renderField(field)}
</div>
))}
</>
);
}
@@ -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;
}
@@ -172,18 +176,20 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
{pageTitle && <h1>{pageTitle}</h1>}
{heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
{pageDescription && <p>{pageDescription}</p>}
{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,8 +218,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
);
}
private createCheckboxInput(paramName: string, label: string, values: Array<ElixFormsCheckboxOption>) : JSX.Element {
const checkedValues = QueryParamHelper.getCheckedFromQuery(paramName);
private createCheckboxInput(paramName: string, label: string, values: Array<ElixFormsCheckboxOption>): JSX.Element {
const checkedValues = QueryParamHelper.getCheckedFromQuery(paramName);
if (!this.checkboxValues.get(paramName)) {
this.checkboxValues.set(paramName, checkedValues);
@@ -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() ?? '';
//this.setState({ formData: { ...this.state.formData, [paramName]: currentCheckboxValues.join(',').trim() ?? '' } }, () =>
const newValue = 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,9 +335,9 @@ 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(
return new ElixFormsElement(
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textareaValue} multiline rows={4} required={required} className='isiportalPartialAdminFormFieldMultiLineText'
onChange={(event, value) => {
@@ -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,16 +363,16 @@ 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>,
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} type="number" required={required} className='isiportalPartialAdminFormFieldSingleLineText'
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} type="number" required={required} className='isiportalPartialAdminFormFieldSingleLineText'
onChange={(event, value) => {
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
console.log(`NumberInput ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
@@ -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()}
placeholder='---'
required={required}
className='isiportalPartialAdminFormFieldSelect'
onChange={(event, value) => {
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
console.log(`Dropdown ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
);
}}
/>
<>
<FluentUI.Dropdown
id={paramName}
options={options}
selectedKey={currentValue}
placeholder='---'
required={required}
className='isiportalPartialAdminFormFieldSelect'
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();
}
@@ -415,7 +434,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
return this.createTextAreaInput(field.key, field.label, field.required ?? false);
case "radio":
return this.createRadioInput(field.key, field.label,
return this.createRadioInput(field.key, field.label,
new Array<ElixFormsRadioOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
field.required ?? false);
@@ -423,14 +442,14 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
return this.createBooleanInput(field.key, field.label, field.required ?? false);
case "checkbox":
return this.createCheckboxInput(field.key, field.label,
return this.createCheckboxInput(field.key, field.label,
new Array<ElixFormsCheckboxOption>().concat(...field.options.map((o: any) => [[o.value, o.label, o.required ?? false]])));
case "number":
return this.createNumberInput(field.key, field.label, field.required ?? false);
case "dropdown":
return this.createDropdownInput(field.key, field.label,
return this.createDropdownInput(field.key, field.label,
new Array<ElixFormsDropdownOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
field.required ?? false);