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);
|
||||
}
|
||||
|
||||
protected renderExtraContent(): JSX.Element | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
||||
const {
|
||||
description,
|
||||
@@ -120,23 +124,91 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
environmentMessage,
|
||||
hasTeamsContext,
|
||||
userDisplayName,
|
||||
additionalFieldsJson
|
||||
additionalFieldsJson,
|
||||
moduleTitle,
|
||||
pageTitle,
|
||||
pageDescription,
|
||||
heroImageSrc
|
||||
} = this.props;
|
||||
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
|
||||
return (
|
||||
<section>
|
||||
{/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
|
||||
<div>{environmentMessage}</div>
|
||||
<div>{description}</div>
|
||||
<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">
|
||||
{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>
|
||||
</section>
|
||||
|
||||
{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;
|
||||
userDisplayName: string;
|
||||
additionalFieldsJson?: string;
|
||||
|
||||
// Layout Properties
|
||||
moduleTitle?: string;
|
||||
pageTitle?: string;
|
||||
pageDescription?: string;
|
||||
heroImageSrc?: string;
|
||||
}
|
||||
|
||||
// Additional Fields JSON Schema
|
||||
|
||||
@@ -8,83 +8,19 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
/** @type {SceltaCarrieraComponent} */
|
||||
var myElixFormsReact = new SceltaCarrieraComponent({
|
||||
description: "This is a custom form created with ElixFormsReact component.",
|
||||
isDarkTheme: false,
|
||||
environmentMessage: "TESTING!",
|
||||
hasTeamsContext: false,
|
||||
userDisplayName: "John Doe",
|
||||
});
|
||||
|
||||
var elixFormsReactRender = myElixFormsReact.render();
|
||||
|
||||
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>
|
||||
</>;
|
||||
|
||||
return (
|
||||
<SceltaCarrieraComponent
|
||||
description=""
|
||||
isDarkTheme={false}
|
||||
environmentMessage=""
|
||||
hasTeamsContext={false}
|
||||
userDisplayName="John Doe"
|
||||
moduleTitle="Modulo A/13 - Richiesta di Certificato"
|
||||
pageTitle="Scelta Carriera"
|
||||
pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
|
||||
heroImageSrc={heroImg}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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