- added bando preview page;
- added bando form preview;
This commit is contained in:
Vitalii Kiiko
@@ -1,56 +1,52 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Skeleton } from 'primereact/skeleton';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { bandoTest } from '../../tempData';
|
||||
|
||||
// tools
|
||||
import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
|
||||
import getDateFromISOstring from '../../helpers/getDateFromISOstring';
|
||||
|
||||
// components
|
||||
import { Skeleton } from 'primereact/skeleton';
|
||||
import { Accordion } from 'primereact/accordion';
|
||||
import { AccordionTab } from 'primereact/accordion';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BandoView = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [data, setData] = useState({});
|
||||
const [newQuestion, setNewQuestion] = useState({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const closePreview = () => {
|
||||
navigate(`/bandi/${id}`);
|
||||
}
|
||||
|
||||
const scaricaBando = () => {
|
||||
|
||||
}
|
||||
|
||||
const scaricaModulistica = () => {
|
||||
|
||||
}
|
||||
|
||||
const submitQuestion = () => {
|
||||
|
||||
}
|
||||
|
||||
const saveToFavourites = () => {
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
//const parsed = parseInt(id)
|
||||
//const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
const data = {
|
||||
name: 'Bando Innovazione 2024',
|
||||
descriptionShort: 'Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.',
|
||||
descriptionLong: 'Il bando "Innovazione Digitale 2024" mira a sostenere le PMI nell\'adozione di tecnologie digitali innovative. I progetti finanziabili includono l\'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.',
|
||||
dates: [ "2024-08-20T22:00:00.000Z", "2024-08-28T22:00:00.000Z" ],
|
||||
amount: 10000000,
|
||||
amountMax: 2000,
|
||||
aimedTo: [
|
||||
{ id: 11, value: 'PMI con sede in Umbria' },
|
||||
{ id: 12, value: 'Almeno 2 anni di attività' },
|
||||
{ id: 15, value: 'Fatturato annuo non superiore a € 50 milioni' }
|
||||
],
|
||||
documentationRequested: 'Some text',
|
||||
threshold: 12,
|
||||
criteria: [
|
||||
{ id: 15, value: 'Innovatività del progetto', score: 9 },
|
||||
{ id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
|
||||
{ id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
|
||||
],
|
||||
faq: [
|
||||
{id: 2, question: 'È possibile presentare più di un progetto?', answer: 'No, ogni azienda può presentare un solo progetto per questo bando.'}
|
||||
],
|
||||
checklist: [
|
||||
{ id: 9, value: 'Requisiti di ammissibilità soddisfatti' },
|
||||
{ id: 21, value: 'Documentazione completa' }
|
||||
],
|
||||
docs: [
|
||||
{id: 12, url: '#', name: 'file_name'}
|
||||
],
|
||||
images: [
|
||||
{id: 15, url: '#', name: 'file_name'}
|
||||
],
|
||||
status: 'draft',
|
||||
id: 11,
|
||||
created: '2024-08-07T00:00:00+00:00'
|
||||
}
|
||||
const data = bandoTest;
|
||||
setData(data);
|
||||
setIsLoading(false)
|
||||
}, 3000);
|
||||
@@ -63,7 +59,7 @@ const BandoView = () => {
|
||||
<h1>{data.name}</h1>
|
||||
<p>
|
||||
{__('Data:', 'gepafin')}
|
||||
<span>{data.created}</span>
|
||||
<span>{getDateFromISOstring(data.createdDate)}</span>
|
||||
</p>
|
||||
</div>
|
||||
: <>
|
||||
@@ -74,11 +70,176 @@ const BandoView = () => {
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
{!isLoading
|
||||
? <>
|
||||
<div className="appPageSection">
|
||||
Preview beneficiario
|
||||
? <div className="appPage__content">
|
||||
<div className="appPageSection__preview">
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
onClick={closePreview}
|
||||
label={__('Chiudi Anteprima', 'gepafin')}
|
||||
icon="pi pi-arrow-left" iconPos="left"/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<picture className="appPageSection__hero">
|
||||
<source srcSet={data.images[0] ? data.images[0].filePath : ''}/>
|
||||
<img src={data.images[0] ? data.images[0].filePath : ''} alt={data.name}/>
|
||||
</picture>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Descrizione breve', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<p>{data.descriptionShort}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__row">
|
||||
<div className="appPageSection__withBorder">
|
||||
<p className="appPageSection__pMeta">
|
||||
<span>{__('Importo totale', 'gepafin')}</span>
|
||||
<span>{getNumberWithCurrency(data.amount)}</span>
|
||||
</p>
|
||||
<p className="appPageSection__pMeta">
|
||||
<span>{__('Importo massimo per progetto', 'gepafin')}</span>
|
||||
<span>{getNumberWithCurrency(data.amountMax)}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<p className="appPageSection__pMeta">
|
||||
<span>{__('Data apertura', 'gepafin')}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p className="appPageSection__pMeta">
|
||||
<span>{__('Data chiusura', 'gepafin')}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<p>{data.descriptionLong}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Requisiti di Partecipazione', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<ul>
|
||||
{data.aimedTo.map((o, i) => <li key={i}>
|
||||
{o.value}
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<p>{data.documentationRequested}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Criteri di Valutazione', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<ul>
|
||||
{data.criteria.map((o, i) => <li key={i}>
|
||||
{`${o.value} ${sprintf(__('(%d punti)'), o.score)}`}
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Allegati', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<ul>
|
||||
{data.documentation.map((o, i) => <li key={i}>
|
||||
<a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<h2>{__('FAQ', 'gepafin')}</h2>
|
||||
<Accordion>
|
||||
{data.faq.map((o, i) => <AccordionTab key={i} header={o.question}>
|
||||
<p>
|
||||
{o.answer}
|
||||
</p>
|
||||
</AccordionTab>)}
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<h2>{__('Non hai trovato la risposta che cercavi?', 'gepafin')}</h2>
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="newQuestion">{__('Fai una domanda', 'gepafin')}</label>
|
||||
<InputTextarea
|
||||
id="newQuestion"
|
||||
rows={7}
|
||||
value={newQuestion}
|
||||
placeholder={__('Digita qui la tua domanda', 'gepafin')}
|
||||
onChange={(e) => setNewQuestion(e.target.value)}
|
||||
aria-describedby="newQuestion-help"/>
|
||||
<small id="newQuestion-help">
|
||||
{__('Riceverai una notifica quando ti risponderemo', 'gepafin')}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<h2>{__('Download Documenti', 'gepafin')}</h2>
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
onClick={scaricaBando}
|
||||
label={__('Scarica Bando Completo', 'gepafin')}
|
||||
icon="pi pi-download" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
onClick={scaricaModulistica}
|
||||
label={__('Scarica Modulistica', 'gepafin')}
|
||||
icon="pi pi-download" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={true}
|
||||
onClick={submitQuestion}
|
||||
label={__('Presenta Domanda', 'gepafin')}
|
||||
icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
rounded
|
||||
disabled={true}
|
||||
onClick={saveToFavourites}
|
||||
label={__('Aggiungi a Preferiti', 'gepafin')}
|
||||
icon="pi pi-heart" iconPos="left"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__withBorder">
|
||||
<h2>{__('Contatti per Assistenza', 'gepafin')}</h2>
|
||||
<div className="row rowContent">
|
||||
<p>Email: bandi@gepafin.it</p>
|
||||
<p>Telefono: +39 075 123 4567</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__preview">
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
onClick={closePreview}
|
||||
label={__('Chiudi Anteprima', 'gepafin')}
|
||||
icon="pi pi-arrow-left" iconPos="left"/>
|
||||
</div>
|
||||
</div>
|
||||
: <>
|
||||
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
|
||||
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
|
||||
|
||||
Reference in New Issue
Block a user