switch to bootstrap italia through AI
This commit is contained in:
Generated
+21
-1
@@ -7,7 +7,27 @@
|
||||
"": {
|
||||
"name": "@elixforms/common",
|
||||
"version": "0.0.1",
|
||||
"license": "ISC"
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.17"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.17",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
|
||||
"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,5 +5,8 @@
|
||||
"license": "ISC",
|
||||
"author": "",
|
||||
"type": "commonjs",
|
||||
"main": "index.js"
|
||||
"main": "index.js",
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.17"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,28 @@
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.elixFormsComponent {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
font-family: $ms-font-family-fallbacks;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
.autocompleteDropdown {
|
||||
margin-top: 0.5rem;
|
||||
border: 1px solid #c9d1d9;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.welcomeImage {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
.autocompleteItem {
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.links {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: "[theme:link, default:#03787c]";
|
||||
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
.autocompleteItem:hover,
|
||||
.autocompleteItem.isHighlighted {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: "[theme:linkHovered, default: #014446]";
|
||||
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
}
|
||||
}
|
||||
.autocompleteStatus {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: #5c6f82;
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import './App.css'
|
||||
import * as FluentUI from '@fluentui/react';
|
||||
import './App.css';
|
||||
import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
|
||||
import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
|
||||
import { ElixFormsElement } from './ElixFormsElement';
|
||||
import { QueryParamHelper } from './QueryParamHelper';
|
||||
import { Component, type FormEvent, type JSX, useState } from 'react';
|
||||
import { Component, type JSX } from 'react';
|
||||
import React from 'react';
|
||||
import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
|
||||
import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
|
||||
@@ -16,57 +15,26 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
this.state = {
|
||||
formData: {}
|
||||
};
|
||||
|
||||
// const [formData, setFormData] = useState({});
|
||||
// const handleAnyInputChange = (name: string) => (event: any, valueOrOption: any) => { //ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | SyntheticEvent<HTMLElement, Event>
|
||||
// let value: any = null;
|
||||
// // Fluent UI Dropdown passes (event, option)
|
||||
// if (valueOrOption && valueOrOption.key !== undefined) {
|
||||
// value = valueOrOption.key;
|
||||
// }
|
||||
// // Fluent UI TextField passes (event, newValue)
|
||||
// else if (typeof valueOrOption === "string") {
|
||||
// value = valueOrOption;
|
||||
// }
|
||||
// // Fluent UI Checkbox passes (event, checked)
|
||||
// else if (typeof valueOrOption === "boolean") {
|
||||
// value = valueOrOption;
|
||||
// }
|
||||
// // Native HTML inputs
|
||||
// else if (event?.target) {
|
||||
// value = event.target.type === "checkbox"
|
||||
// ? event.target.checked
|
||||
// : event.target.value;
|
||||
// }
|
||||
// setFormData(prev => ({
|
||||
// ...prev,
|
||||
// [name]: value
|
||||
// }));
|
||||
// console.log(`Input ${name} changed to ${value}. Current form data:`, JSON.stringify(formData));
|
||||
// };
|
||||
}
|
||||
|
||||
private checkboxValues = new Map<string, number[]>();
|
||||
|
||||
private mandatoryFormFieldNames: string[] = [
|
||||
"RWE2_MODULE_ID",
|
||||
"RWE2_REQUEST_ID",
|
||||
"custom-workflow-back-url",
|
||||
"custom-workflow-generic-id",
|
||||
"custom-workflow-current-tabrel-genid",
|
||||
"custom-workflow-source-field",
|
||||
"crc",
|
||||
"MODULE_TESTMODE_KEY",
|
||||
"ELANG"
|
||||
'RWE2_MODULE_ID',
|
||||
'RWE2_REQUEST_ID',
|
||||
'custom-workflow-back-url',
|
||||
'custom-workflow-generic-id',
|
||||
'custom-workflow-current-tabrel-genid',
|
||||
'custom-workflow-source-field',
|
||||
'crc',
|
||||
'MODULE_TESTMODE_KEY',
|
||||
'ELANG'
|
||||
];
|
||||
|
||||
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));
|
||||
});
|
||||
|
||||
@@ -74,7 +42,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
}
|
||||
|
||||
private createAdditionalFormFields(): React.ReactElement {
|
||||
const schema = JSON.parse(this.props.additionalFieldsJson || "[]");
|
||||
const schema = JSON.parse(this.props.additionalFieldsJson || '[]');
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -125,10 +93,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
||||
const {
|
||||
description,
|
||||
isDarkTheme,
|
||||
environmentMessage,
|
||||
hasTeamsContext,
|
||||
userDisplayName,
|
||||
additionalFieldsJson,
|
||||
headerTitle,
|
||||
pageTitle,
|
||||
@@ -151,7 +116,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
<div className="console_header">
|
||||
<div className="leftDiv">
|
||||
<h1>elixForms</h1>
|
||||
<div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
|
||||
<div className="logo">
|
||||
<a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
|
||||
<img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università di Parma" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rightDiv">
|
||||
@@ -176,29 +144,28 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
</div>
|
||||
)}
|
||||
<div className="mainview">
|
||||
<div className="container">
|
||||
{pageTitle && <h1>{pageTitle}</h1>}
|
||||
{heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
|
||||
{pageDescription && <p>{pageDescription}</p>}
|
||||
<div className="container py-4">
|
||||
{pageTitle && <h1 className="mb-3">{pageTitle}</h1>}
|
||||
{heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
|
||||
{pageDescription && <p className="lead">{pageDescription}</p>}
|
||||
|
||||
{environmentMessage && <div>{environmentMessage}</div>}
|
||||
{description && <div>{description}</div>}
|
||||
{environmentMessage && <div className="alert alert-info">{environmentMessage}</div>}
|
||||
{description && <div className="mb-3">{description}</div>}
|
||||
|
||||
{hasAuthenticationError ? (
|
||||
<FluentUI.MessageBar messageBarType={FluentUI.MessageBarType.error} isMultiline={false}>
|
||||
<div className="alert alert-danger" role="alert">
|
||||
Accesso non autorizzato. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
|
||||
</FluentUI.MessageBar>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{this.renderExtraContentPre()}
|
||||
|
||||
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
|
||||
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
|
||||
{this.createMandatoryFormFields(queryParams)}
|
||||
{this.createAdditionalFormFields()}
|
||||
{this.renderCustomFormFields()}
|
||||
<br />
|
||||
<div className='submit'>
|
||||
<input type="submit" value={submitDescription ?? 'Submit'} />
|
||||
<div className="mt-4 d-flex justify-content-start">
|
||||
<button type="submit" className="btn btn-primary">{submitDescription ?? 'Invia'}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -240,158 +207,180 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
this.checkboxValues.set(paramName, checkedValues);
|
||||
}
|
||||
|
||||
const checkboxes: React.ReactElement[] = [];
|
||||
const stackTokens = { childrenGap: 10 };
|
||||
|
||||
values.forEach((entry, entryIndex) => {
|
||||
const id = `${paramName}_${entryIndex}`;
|
||||
checkboxes.push(
|
||||
<FluentUI.Checkbox title={label} key={id} id={id} label={entry.label} required={entry.required ?? false} defaultChecked={checkedValues.indexOf(entryIndex) !== -1} className='isiportalPartialAdminCheckboxFieldItem'
|
||||
onChange={(event, checked) => {
|
||||
const currentCheckboxValues = this.checkboxValues.get(paramName)!;
|
||||
const checkboxIndex = currentCheckboxValues.indexOf(entryIndex);
|
||||
if (checked && checkboxIndex === -1) {
|
||||
currentCheckboxValues.push(entryIndex);
|
||||
} else if (!checked && checkboxIndex !== -1) {
|
||||
currentCheckboxValues.splice(checkboxIndex, 1);
|
||||
}
|
||||
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() ?? '');
|
||||
|
||||
const selectedValues = (currentValue || '').split(',').filter(Boolean).map((value: string) => Number(value));
|
||||
|
||||
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={currentValue} />
|
||||
<label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
|
||||
<>
|
||||
<div className="d-flex flex-column gap-2" role="group" aria-label={label}>
|
||||
{values.map((entry, entryIndex) => {
|
||||
const id = `${paramName}_${entryIndex}`;
|
||||
const isChecked = selectedValues.includes(entryIndex);
|
||||
|
||||
return (
|
||||
<div className="form-check" key={id}>
|
||||
<input
|
||||
id={id}
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={(event) => {
|
||||
const currentCheckboxValues = this.checkboxValues.get(paramName) ?? [];
|
||||
const checkboxIndex = currentCheckboxValues.indexOf(entryIndex);
|
||||
const nextValues = [...currentCheckboxValues];
|
||||
|
||||
if (event.target.checked && checkboxIndex === -1) {
|
||||
nextValues.push(entryIndex);
|
||||
} else if (!event.target.checked && checkboxIndex !== -1) {
|
||||
nextValues.splice(checkboxIndex, 1);
|
||||
}
|
||||
|
||||
this.checkboxValues.set(paramName, nextValues);
|
||||
const newValue = nextValues.join(',').trim();
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: newValue } });
|
||||
}}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={id}>{entry.label}</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<input type="hidden" id={paramName} name={paramName} value={currentValue} />
|
||||
</>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createRadioInput(paramName: string, label: string, values: Array<ElixFormsRadioOption>, required: boolean = false): JSX.Element {
|
||||
const radioValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const radios: FluentUI.IChoiceGroupOption[] = [];
|
||||
|
||||
values.forEach((entry, _) => {
|
||||
const id = `${paramName}_${entry.value}`;
|
||||
radios.push(
|
||||
{
|
||||
key: id,
|
||||
text: entry.label,
|
||||
id: id,
|
||||
name: paramName,
|
||||
value: entry.value,
|
||||
className: 'isiportalPartialAdminFormFieldRadio'
|
||||
}
|
||||
);
|
||||
});
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? String(this.state.formData[paramName])
|
||||
: String(QueryParamHelper.getOptionFromQuery(paramName) ?? '');
|
||||
|
||||
return new ElixFormsElement(
|
||||
<></>,
|
||||
<FluentUI.ChoiceGroup
|
||||
name={paramName}
|
||||
label={label}
|
||||
options={radios}
|
||||
required={required}
|
||||
defaultSelectedKey={`${paramName}_${radioValue}`}
|
||||
onChange={(event, option) => {
|
||||
const value = option?.value ?? '';
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
|
||||
console.log(`Radio ${option?.id} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
|
||||
<span className="form-label fw-semibold">{label}</span>,
|
||||
<div className="d-flex flex-column gap-2" role="radiogroup" aria-label={label}>
|
||||
{values.map((entry) => {
|
||||
const id = `${paramName}_${entry.value}`;
|
||||
return (
|
||||
<div className="form-check" key={id}>
|
||||
<input
|
||||
id={id}
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
name={paramName}
|
||||
value={entry.value}
|
||||
checked={currentValue === String(entry.value)}
|
||||
onChange={() => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: String(entry.value) } });
|
||||
}}
|
||||
required={required}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={id}>{entry.label}</label>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createBooleanInput(paramName: string, label: string, required: boolean = false): JSX.Element {
|
||||
const boolValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const radios: FluentUI.IChoiceGroupOption[] = [];
|
||||
|
||||
[{ "value": "true", "label": "Sì" }, { "value": "false", "label": "No" }].forEach((val) => {
|
||||
const id = `${paramName}_${val.value}`;
|
||||
radios.push(
|
||||
{
|
||||
key: id,
|
||||
text: val.label,
|
||||
id: id,
|
||||
name: paramName,
|
||||
value: val.value,
|
||||
className: 'isiportalPartialAdminFormFieldRadio'
|
||||
}
|
||||
);
|
||||
});
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? String(this.state.formData[paramName])
|
||||
: String(QueryParamHelper.getOptionFromQuery(paramName) ?? '');
|
||||
|
||||
return new ElixFormsElement(
|
||||
<></>,
|
||||
<FluentUI.ChoiceGroup
|
||||
name={paramName}
|
||||
label={label}
|
||||
options={radios}
|
||||
required={required}
|
||||
defaultSelectedKey={`${paramName}_${boolValue}`}
|
||||
onChange={(event, option) => {
|
||||
const value = option?.value ?? '';
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
|
||||
console.log(`Boolean ${option?.id} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
|
||||
<span className="form-label fw-semibold">{label}</span>,
|
||||
<div className="d-flex flex-column gap-2" role="radiogroup" aria-label={label}>
|
||||
{[{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }].map((val) => {
|
||||
const id = `${paramName}_${val.value}`;
|
||||
return (
|
||||
<div className="form-check" key={id}>
|
||||
<input
|
||||
id={id}
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
name={paramName}
|
||||
value={val.value}
|
||||
checked={currentValue === val.value}
|
||||
onChange={() => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: val.value } });
|
||||
}}
|
||||
required={required}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={id}>{val.label}</label>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createTextAreaInput(paramName: string, label: string, required: boolean = false): JSX.Element {
|
||||
const textareaValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? String(this.state.formData[paramName])
|
||||
: (QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '');
|
||||
|
||||
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) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
|
||||
console.log(`TextArea ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
|
||||
);
|
||||
<label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
|
||||
<textarea
|
||||
id={paramName}
|
||||
name={paramName}
|
||||
className="form-control"
|
||||
rows={4}
|
||||
required={required}
|
||||
value={currentValue}
|
||||
onChange={(event) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
|
||||
}}
|
||||
/>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createTextInput(paramName: string, label: string, required: boolean = false): JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? String(this.state.formData[paramName])
|
||||
: (QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '');
|
||||
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} required={required} className='isiportalPartialAdminFormFieldSingleLineText'
|
||||
onChange={(event, value) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
|
||||
console.log(`TextInput ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
|
||||
);
|
||||
<label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
|
||||
<input
|
||||
id={paramName}
|
||||
name={paramName}
|
||||
className="form-control"
|
||||
type="text"
|
||||
required={required}
|
||||
value={currentValue}
|
||||
onChange={(event) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
|
||||
}}
|
||||
/>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createHiddenInput(paramName: string): JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
return <input type="hidden" id={`${paramName}_hidden`} name={paramName} defaultValue={textValue} />;
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '';
|
||||
return <input type="hidden" id={`${paramName}_hidden`} name={paramName} value={textValue} />;
|
||||
}
|
||||
|
||||
private createNumberInput(paramName: string, label: string, required: boolean = false): JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? String(this.state.formData[paramName])
|
||||
: (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'
|
||||
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]}`)
|
||||
);
|
||||
<label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
|
||||
<input
|
||||
id={paramName}
|
||||
name={paramName}
|
||||
className="form-control"
|
||||
type="number"
|
||||
required={required}
|
||||
value={currentValue}
|
||||
onChange={(event) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
|
||||
}}
|
||||
/>
|
||||
).render();
|
||||
@@ -400,72 +389,55 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
private createDropdownInput(paramName: string, label: string, values: Array<ElixFormsDropdownOption>, required: boolean = false): JSX.Element {
|
||||
const queryValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const currentValue = this.state.formData[paramName] !== undefined
|
||||
? this.state.formData[paramName]
|
||||
? String(this.state.formData[paramName])
|
||||
: (queryValue?.toString() ?? '');
|
||||
|
||||
const options: FluentUI.IDropdownOption[] = [];
|
||||
|
||||
values.forEach(entry => {
|
||||
options.push(
|
||||
{
|
||||
key: entry.value.toString(),
|
||||
text: entry.label
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<>
|
||||
<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} />
|
||||
</>
|
||||
<label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
|
||||
<select
|
||||
id={paramName}
|
||||
name={paramName}
|
||||
className="form-select"
|
||||
required={required}
|
||||
value={currentValue}
|
||||
onChange={(event) => {
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
|
||||
}}
|
||||
>
|
||||
<option value="">Seleziona...</option>
|
||||
{values.map(entry => (
|
||||
<option key={entry.value} value={entry.value}>{entry.label}</option>
|
||||
))}
|
||||
</select>
|
||||
).render();
|
||||
}
|
||||
|
||||
private renderField(field: any): JSX.Element {
|
||||
//const value = this.state.formData[field.key] || "";
|
||||
|
||||
switch (field.type) {
|
||||
case "text":
|
||||
case 'text':
|
||||
return this.createTextInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "textarea":
|
||||
case 'textarea':
|
||||
return this.createTextAreaInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "radio":
|
||||
case 'radio':
|
||||
return this.createRadioInput(field.key, field.label,
|
||||
new Array<ElixFormsRadioOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
|
||||
field.options.map((o: any) => ({ value: o.value, label: o.label })),
|
||||
field.required ?? false);
|
||||
|
||||
case "boolean":
|
||||
case 'boolean':
|
||||
return this.createBooleanInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "checkbox":
|
||||
case 'checkbox':
|
||||
return this.createCheckboxInput(field.key, field.label,
|
||||
new Array<ElixFormsCheckboxOption>().concat(...field.options.map((o: any) => [[o.value, o.label, o.required ?? false]])));
|
||||
field.options.map((o: any) => ({ value: o.value, label: o.label, required: o.required ?? false })));
|
||||
|
||||
case "number":
|
||||
case 'number':
|
||||
return this.createNumberInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "dropdown":
|
||||
case 'dropdown':
|
||||
return this.createDropdownInput(field.key, field.label,
|
||||
new Array<ElixFormsDropdownOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
|
||||
field.options.map((o: any) => ({ value: o.value, label: o.label })),
|
||||
field.required ?? false);
|
||||
|
||||
default:
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import React, { type JSX } from "react";
|
||||
import React, { type JSX } from 'react';
|
||||
|
||||
// Class to encapsulate the label and input elements
|
||||
export class ElixFormsElement {
|
||||
label: JSX.Element;
|
||||
input: JSX.Element;
|
||||
separator: string;
|
||||
constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = "")
|
||||
{
|
||||
|
||||
constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = '') {
|
||||
if (!labelElement || !inputElement) {
|
||||
throw new Error("labelElement and inputElement are required.");
|
||||
throw new Error('labelElement and inputElement are required.');
|
||||
}
|
||||
|
||||
this.label = labelElement;
|
||||
@@ -16,15 +15,30 @@ export class ElixFormsElement {
|
||||
this.separator = separator;
|
||||
}
|
||||
|
||||
// Optional: render both elements together
|
||||
render() : JSX.Element {
|
||||
return (<><div className="iuFieldContainer">
|
||||
<div className="attrDisplay_left attrDisplay_label"><div className="iuLabelContainer"><div className="attrDisplay_center"><div className="attrDisplay_middle">
|
||||
{this.label}{this.separator}
|
||||
</div></div><div className="iuClearContainer"> </div></div></div>
|
||||
<div className="attrDisplay_right attrDisplay_input"><div className="iuInputContainer iuTypeString"><div className="attrDisplay_center"><div className="attrDisplay_middle">
|
||||
{this.input}
|
||||
</div></div><div className="iuClearContainer"> </div></div></div>
|
||||
</div></>);
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<div className="iuFieldContainer form-group row mb-3 align-items-start">
|
||||
<div className="attrDisplay_left attrDisplay_label col-sm-4">
|
||||
<div className="iuLabelContainer">
|
||||
<div className="attrDisplay_center">
|
||||
<div className="attrDisplay_middle">
|
||||
{this.label}{this.separator}
|
||||
</div>
|
||||
</div>
|
||||
<div className="iuClearContainer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="attrDisplay_right attrDisplay_input col-sm-8">
|
||||
<div className="iuInputContainer iuTypeString">
|
||||
<div className="attrDisplay_center">
|
||||
<div className="attrDisplay_middle">
|
||||
{this.input}
|
||||
</div>
|
||||
</div>
|
||||
<div className="iuClearContainer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user