Skip to content

Commit

Permalink
Convertir llista de certificats a un format de recuadres en forma de …
Browse files Browse the repository at this point in the history 
…"grid" #819
  • Loading branch information
@fbosch-fundaciobit
fbosch-fundaciobit committed Nov 2, 2023
1 parent 4e06b11 commit 040e25f
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 98 deletions.
2 changes: 1 addition & 1 deletion carpeta-pluginsib/pluginsib-carpetafront/certificats/react/dist/reactjs_main.js
View file

Large diffs are not rendered by default.

140 changes: 48 additions & 92 deletions carpeta-pluginsib/pluginsib-carpetafront/certificats/react/src/CertificatBoto.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ class CertificatBoto extends React.Component<
urlDescarrega: null,
isVisible: true,
error: null,
valorDisplay: 'block'
};
this.teCertificat = this.teCertificat.bind(this);
this.pitjarBoto = this.pitjarBoto.bind(this);
this.canviatIdioma = this.canviatIdioma.bind(this);
this.mostrar = this.mostrar.bind(this);
this.props.i18n.on("languageChanged", this.canviatIdioma);
}

Expand All @@ -37,7 +39,6 @@ class CertificatBoto extends React.Component<
axios
.get(url2)
.then((res) => {
console.log("XYZ Entra a TeCertificat() Res.Data= " + res.data);
this.setState({
...this.state,
isLoaded: true,
Expand All @@ -48,9 +49,6 @@ class CertificatBoto extends React.Component<
.catch((error) => {
console.log(JSON.stringify(error));
if (error.response) {
console.log("error.response.data: " + error.response.data);
console.log("error.response.status: " + error.response.status);
console.log("error.response.headers: " + error.response.headers);
this.setState({
...this.state,
isLoaded: true,
Expand All @@ -66,6 +64,10 @@ class CertificatBoto extends React.Component<
});
}
});

if(this.state.urlDescarrega != null){
return true;
}
}

pitjarBoto() {
Expand All @@ -74,6 +76,16 @@ class CertificatBoto extends React.Component<
}
}

mostrar(mostrar: boolean){

if(!this.state.urlDescarrega){
this.setState({
valorDisplay: mostrar? 'block' : 'none'
});
}

}

render() {

const t = this.props.i18n.t;
Expand All @@ -83,7 +95,8 @@ class CertificatBoto extends React.Component<
const isLoaded = this.state.isLoaded;

let icon;
let errorMessage;
let downloadButton;
let buttonMessage;
let warnMessage
let botoDescarrega;
let certificateButton;
Expand All @@ -98,7 +111,6 @@ class CertificatBoto extends React.Component<
console.log("Render 2");
icon = (<div id="carregant" className="loader centrat" style={{ scale: 0.5, height: "20px", width: "20px" }}></div>);
certificateButton =

<p data-toggle="modal"
style={{ color: "grey", marginTop: "20px" }}
aria-labelledby="botoCert"
Expand All @@ -107,51 +119,30 @@ class CertificatBoto extends React.Component<

} else {
//Carregat
console.log("Render 3");


if (this.state.error) {
if (this.props.noDisponiblesVisible) {
//Carregat i amb error
errorMessage = (

downloadButton =(
<>
<br />
<div className="alert alert-warning" role="alert">
S'ha produit un error obtenint el certificat.
{t("errorCertificat")}
</div>
</>
);
icon = <i className="far fa-time"></i>;
certificateButton =
icon = null;

<div
className="col-lg-4 col-md-4 col-sm-4 col-xs-12 pl-0"
id="botoCert"
>
<div key={"cert"+i} className="col-md-12 border-0 pl-0 pr-0">
<div className={`card cardAppVerd col-md-12 align-items-lg-center capsaPlugin pt-3 alert`}
tabIndex={502+i} aria-labelledby={"nomPseudo"+i}>
<h3 className="apartat2 titolPlugin titol h3 alignCenter visioMobil titolPluginApp" id={"nomPseudo"+i}>{this.props.title}</h3>
<hr className="visioMobil" color="red" style={{width: '40%', height: '4px', marginLeft: 'auto', marginRight: 'auto'}}/>
<span className="card-title titol pl-1 h3 alignCenter">{icon}</span>
<h3 className="apartat2 titolPlugin titol h3 alignCenter ocultarMobil" id={"nomPseudo"+i}>{this.props.title}</h3>
<span className="card-text alignCenter padPluginApp"
style={styleDesc}>{this.props.subtitle}

{errorMessage}</span>
</div>
</div>
</div>

} else {
certificateButton = null;
}
} else {
//Carregat sense error
console.log("Render 4");
if (this.state.urlDescarrega) {

botoDescarrega = (
console.log();
downloadButton = (
<>
<br />
<button className="alert alert-success" role="alert" onClick={this.pitjarBoto}>
Expand All @@ -160,86 +151,51 @@ class CertificatBoto extends React.Component<
</>
);
//Te certificat
icon = <i className="fas fa-file-download"></i>;

certificateButton =
/*<div className="alert alert-success">
<a
data-toggle="modal"
onClick={this.pitjarBoto}
href="javascript:void(0);"
style={{ color: "green", marginTop: "20px" }}
aria-labelledby="botoCert">{this.props.title + " "} {icon}</a>
</div>
*/

<div
className="col-lg-4 col-md-4 col-sm-4 col-xs-12 pl-0"
id="botoCert"
>
<div key={"cert"+i} className="col-md-12 border-0 pl-0 pr-0">
<div className={`card cardAppVerd col-md-12 align-items-lg-center capsaPlugin pt-3 alert`}
tabIndex={502+i} aria-labelledby={"nomPseudo"+i}>
<h3 className="apartat2 titolPlugin titol h3 alignCenter visioMobil titolPluginApp" id={"nomPseudo"+i}>{this.props.title}</h3>
<hr className="visioMobil" color="#c30045" style={{width: '40%', height: '4px', marginLeft: 'auto', marginRight: 'auto'}}/>
<span className="card-title titol pl-1 h3 alignCenter">{icon}</span>
<h3 className="apartat2 titolPlugin titol h3 alignCenter ocultarMobil" id={"nomPseudo"+i}>{this.props.title}</h3>
<span className="card-text alignCenter padPluginApp"
style={styleDesc}>{this.props.subtitle}

{botoDescarrega}</span>

</div>
</div>
</div>
icon = <i className="fas fa-certificate" style={{ color: "#328141"}}></i>;

} else {
if (this.props.noDisponiblesVisible) {
//No te certificat
icon = <i className="far fa-time"></i>;
icon = null;

warnMessage = (
downloadButton = (
<>
<br />
<div className="alert alert-warning" role="alert">
No s'ha pogut obtenir el certificat
{t("noCertificat")}
</div>
</>
);


certificateButton =
<div
className="col-lg-4 col-md-4 col-sm-4 col-xs-12 pl-0"
id="botoCert"
>
<div key={"cert"+i} className="col-md-12 border-0 pl-0 pr-0">
<button className={`card cardAppVerd col-md-12 align-items-lg-center capsaPlugin pt-3 alert`}
tabIndex={502+i} aria-labelledby={"nomPseudo"+i}>
<h3 className="apartat2 titolPlugin titol h3 alignCenter visioMobil titolPluginApp" id={"nomPseudo"+i}>{this.props.title}</h3>
<hr className="visioMobil" color="grey" style={{width: '40%', height: '4px', marginLeft: 'auto', marginRight: 'auto'}}/>
<span className="card-title titol pl-1 h3 alignCenter">{icon}</span>
<h3 className="apartat2 titolPlugin titol h3 alignCenter ocultarMobil" id={"nomPseudo"+i}>{this.props.title}</h3>
<span className="card-text alignCenter padPluginApp"
style={styleDesc}>{this.props.subtitle}:

{warnMessage}</span>
</button>
</div>
</div>

} else {
certificateButton = null;
}
}
}



certificateButton =
<div key={"cert"+i} className="col-md-12 border-0 pl-0 pr-0">
<p className={`card cardAppVerd col-md-12 align-items-lg-center capsaPlugin pt-3 alert`}
tabIndex={502+i} aria-labelledby={"nomPseudo"+i}>
<h3 className="apartat2 titolPlugin titol h3 alignCenter visioMobil titolPluginApp" id={"nomPseudo"+i}>{this.props.title}</h3>
<hr className="visioMobil" color="grey" style={{width: '40%', height: '4px', marginLeft: 'auto', marginRight: 'auto'}}/>
<span className="pl-1 alignCenter" style={{position: 'absolute', top: '4px', marginBottom: '4px'}}>{icon}</span>
<h3 className="apartat2 titolPlugin h3 alignCenter ocultarMobil" style={{verticalAlign: 'middle', fontWeight: 'bold',lineHeight: 1.1, marginTop: '8px'}} id={"nomPseudo"+i}>{this.props.title}</h3>
<span className="card-text alignCenter padPluginApp" style={styleDesc}>{this.props.subtitle}</span>
<span style={{position: 'absolute', bottom: '4px'}}>{downloadButton}</span>
</p>
</div>
}

if(isVisible){
return <>{certificateButton}</>
return <>
<div
className="col-lg-4 col-md-4 col-sm-4 col-xs-12 pl-0"
id="botoCert"
style={{display: this.state.valorDisplay}}
>
{certificateButton}
</div></>
}else{
return null;
}
Expand Down
1 change: 1 addition & 0 deletions carpeta-pluginsib/pluginsib-carpetafront/certificats/react/src/CertificatBotoState.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
type CertificatBotoState = {
valorDisplay: string
isLoaded: boolean;
urlDescarrega: string | null;
isVisible: boolean;
Expand Down
34 changes: 30 additions & 4 deletions carpeta-pluginsib/pluginsib-carpetafront/certificats/react/src/Certificats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@ interface CertificatsState {


class Certificats extends React.Component<CertificatsProps, CertificatsState> {

refButtons: React.RefObject<CertificatBoto>[];

constructor(props: CertificatsProps) {
super(props);

this.refButtons = [];
this.state = {
noDisponiblesVisible: true
}
Expand All @@ -48,7 +51,21 @@ class Certificats extends React.Component<CertificatsProps, CertificatsState> {
}

onChangeNoDisponiblesVisibles() {
if (this.state.noDisponiblesVisible) {
let nouValor : boolean;

nouValor = !this.state.noDisponiblesVisible;

for (let i = 0; i < this.refButtons.length; i++) {
//@ts-ignore
this.refButtons[i].current.mostrar(nouValor);
}

this.setState({
noDisponiblesVisible: nouValor
});


/* if (this.state.noDisponiblesVisible) {
this.setState({
noDisponiblesVisible: false
});
Expand All @@ -57,7 +74,7 @@ class Certificats extends React.Component<CertificatsProps, CertificatsState> {
noDisponiblesVisible: true
});
}
this.forceUpdate();
this.forceUpdate();*/
}


Expand All @@ -82,13 +99,22 @@ class Certificats extends React.Component<CertificatsProps, CertificatsState> {
textBotoAmagarNoDisponibles = t("mostrarNoDisponibles")
}

let referenceButtonList = [];

for (let i = 0; i < this.props.pluginsToLoad.length; i++) {

let myRef : React.RefObject<CertificatBoto> = React.createRef();

let p: PluginInfo = this.props.pluginsToLoad[i];
let certificatButton = <CertificatBoto i18n={this.props.i18n} noDisponiblesVisible={this.state.noDisponiblesVisible} subtitle={p.subtitle} title={p.title} pluginNumber={p.pluginNumber} pathToServeiTe={this.props.pathtoserveiTe + "/" + p.pluginNumber} key={i} />;
let certificatButton = <CertificatBoto ref={myRef} i18n={this.props.i18n} noDisponiblesVisible={this.state.noDisponiblesVisible} subtitle={p.subtitle} title={p.title} pluginNumber={p.pluginNumber} pathToServeiTe={this.props.pathtoserveiTe + "/" + p.pluginNumber} key={i} />;

buttons.push(certificatButton);

referenceButtonList.push(myRef);
}

this.refButtons = referenceButtonList;

let formulari = (
<>
<div className="col-md-3 pl-3 row botoFormApp" style={{ zIndex: "4", marginTop: "40px" }}>
Expand Down
2 changes: 1 addition & 1 deletion ...arpetafront/certificats/src/main/resources/webpage_certificat/certificats_reactjs_main.js
View file

Large diffs are not rendered by default.

0 comments on commit 040e25f

Please sign in to comment.