refactor: move template rendering to own properties and functions
This commit is contained in:
@@ -113,6 +113,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
|||||||
return this.createCustomFormFields(formFieldFactory);
|
return this.createCustomFormFields(formFieldFactory);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected renderExtraContent(): JSX.Element | null {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
||||||
const {
|
const {
|
||||||
description,
|
description,
|
||||||
@@ -120,23 +124,91 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
|||||||
environmentMessage,
|
environmentMessage,
|
||||||
hasTeamsContext,
|
hasTeamsContext,
|
||||||
userDisplayName,
|
userDisplayName,
|
||||||
additionalFieldsJson
|
additionalFieldsJson,
|
||||||
|
moduleTitle,
|
||||||
|
pageTitle,
|
||||||
|
pageDescription,
|
||||||
|
heroImageSrc
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const queryParams = new URLSearchParams(window.location.search);
|
const queryParams = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section>
|
<div className="container_12" id="pageBody">
|
||||||
{/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
|
<div className="grid_12">
|
||||||
<div>{environmentMessage}</div>
|
<div id="userConsole" className="fe-behaviour">
|
||||||
<div>{description}</div>
|
<header>
|
||||||
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
|
<div className="neutral">
|
||||||
{this.createMandatoryFormFields(queryParams)}
|
<div className="grid_12">
|
||||||
{this.createAdditionalFormFields()}
|
<div className="console_header">
|
||||||
{this.renderCustomFormFields()}
|
<div className="leftDiv">
|
||||||
<input type="submit" value="Submit"/>
|
<h1>elixForms</h1>
|
||||||
</form>
|
<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>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rightDiv">
|
||||||
|
<div className="rightDivInside info padding_r">
|
||||||
|
<div className="clear"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="clear"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="clear"></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="grid_12 console_main">
|
||||||
|
<div className="inside">
|
||||||
|
{moduleTitle && (
|
||||||
|
<div>
|
||||||
|
<div className="fe-module-header-container">
|
||||||
|
<h2>{moduleTitle}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="receipt">
|
||||||
|
<div className="container">
|
||||||
|
{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>}
|
||||||
|
|
||||||
|
<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"/>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{this.renderExtraContent()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="clear"></div>
|
||||||
|
|
||||||
|
<footer className="it-footer">
|
||||||
|
<div className="it-footer-main">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row clearfix">
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<div className="footer-content">
|
||||||
|
<div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
|
||||||
|
<div className="subfooter-bottom"><div>versione 1.24.0</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<div className="clear"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,12 @@ export interface IElixFormsComponentProperties {
|
|||||||
hasTeamsContext: boolean;
|
hasTeamsContext: boolean;
|
||||||
userDisplayName: string;
|
userDisplayName: string;
|
||||||
additionalFieldsJson?: string;
|
additionalFieldsJson?: string;
|
||||||
|
|
||||||
|
// Layout Properties
|
||||||
|
moduleTitle?: string;
|
||||||
|
pageTitle?: string;
|
||||||
|
pageDescription?: string;
|
||||||
|
heroImageSrc?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Additional Fields JSON Schema
|
// Additional Fields JSON Schema
|
||||||
|
|||||||
@@ -8,83 +8,19 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
|
|||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0)
|
const [count, setCount] = useState(0)
|
||||||
|
|
||||||
/** @type {SceltaCarrieraComponent} */
|
return (
|
||||||
var myElixFormsReact = new SceltaCarrieraComponent({
|
<SceltaCarrieraComponent
|
||||||
description: "This is a custom form created with ElixFormsReact component.",
|
description=""
|
||||||
isDarkTheme: false,
|
isDarkTheme={false}
|
||||||
environmentMessage: "TESTING!",
|
environmentMessage=""
|
||||||
hasTeamsContext: false,
|
hasTeamsContext={false}
|
||||||
userDisplayName: "John Doe",
|
userDisplayName="John Doe"
|
||||||
});
|
moduleTitle="Modulo A/13 - Richiesta di Certificato"
|
||||||
|
pageTitle="Scelta Carriera"
|
||||||
var elixFormsReactRender = myElixFormsReact.render();
|
pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
|
||||||
|
heroImageSrc={heroImg}
|
||||||
return <>
|
/>
|
||||||
<div className="container_12" id="pageBody">
|
);
|
||||||
<div className="grid_12">
|
|
||||||
<div id="userConsole" className="fe-behaviour">
|
|
||||||
<header>
|
|
||||||
<div className="neutral">
|
|
||||||
<div className="grid_12">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="rightDiv">
|
|
||||||
<div className="rightDivInside info padding_r">
|
|
||||||
<div className="clear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="clear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="clear"></div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="grid_12 console_main">
|
|
||||||
<div className="inside">
|
|
||||||
<div>
|
|
||||||
<div className="fe-module-header-container">
|
|
||||||
<h2>Modulo A/13 - Richiesta di Certificato</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="receipt">
|
|
||||||
<div className="container">
|
|
||||||
<h1>Scelta Carriera</h1>
|
|
||||||
<img src={heroImg} alt="Hero Image" className="hero-image" />
|
|
||||||
<p>Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te.</p>
|
|
||||||
{elixFormsReactRender}
|
|
||||||
<p>Altre cose</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="clear"></div>
|
|
||||||
|
|
||||||
<footer className="it-footer">
|
|
||||||
<div className="it-footer-main">
|
|
||||||
<div className="container">
|
|
||||||
<div className="row clearfix">
|
|
||||||
<div className="col-sm-12">
|
|
||||||
<div className="footer-content">
|
|
||||||
<div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
|
|
||||||
<div className="subfooter-bottom"><div>versione 1.24.0</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<div className="clear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App
|
||||||
|
|||||||
@@ -42,4 +42,8 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected override renderExtraContent(): JSX.Element {
|
||||||
|
return <p>Altre cose</p>;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user