-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from eea/115715_table_view
Used SearchBlock and TableBlock from volto-addons
- Loading branch information
Showing
26 changed files
with
1,667 additions
and
1,043 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
import RenderFields from 'volto-addons/Widgets/RenderFields'; | ||
import { connect } from 'react-redux'; | ||
import { compose } from 'redux'; | ||
|
||
import { settings } from '~/config'; | ||
|
||
import DB from '~/components/manage/DataBase/DB'; | ||
|
||
const DefaultEdit = props => { | ||
useEffect(() => { | ||
if ( | ||
props.data?.sql_select?.value.table && | ||
props.data?.sql_select?.value.columnKey && | ||
props.data?.sql_select?.value.columnValue | ||
) | ||
DB.table( | ||
props.data?.provider_url?.value || settings.providerUrl, | ||
props.data?.sql_select?.value.table, | ||
) | ||
.get() | ||
.where( | ||
props.data?.sql_select?.value.where, | ||
props.data?.sql_select?.value.columnKey, | ||
) | ||
.where( | ||
props.data?.data_query?.value?.i, | ||
props.data?.data_query?.value?.v, | ||
) | ||
.log(); | ||
/* eslint-disable-next-line */ | ||
}, [props.data?.data_query?.value, props.data?.sql_select?.value]) | ||
return ( | ||
<div> | ||
<RenderFields schema={props.schema} {...props} title={props.title} /> | ||
</div> | ||
); | ||
}; | ||
export default compose( | ||
connect((state, props) => ({ | ||
connected_data_parameters: state.connected_data_parameters, | ||
pathname: state.router.location.pathname, | ||
})), | ||
)(DefaultEdit); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import { useState, useEffect } from 'react'; | ||
import _uniqueId from 'lodash/uniqueId'; | ||
|
||
import { connect } from 'react-redux'; | ||
import { compose } from 'redux'; | ||
|
||
import { | ||
setConnectedDataParameters, | ||
deleteConnectedDataParameters, | ||
} from 'volto-datablocks/actions'; | ||
|
||
import { getSchemaWithDataQuery, objectHasData, getBasePath } from '~/helpers'; | ||
|
||
const DefaultView = props => { | ||
const [state, setState] = useState({ | ||
id: _uniqueId('block_'), | ||
schemaWithDataQuery: null, | ||
dataQueryKeys: [], | ||
ids: [], | ||
}); | ||
const id = props.id || state.id; | ||
const path = getBasePath(props.pathname); | ||
useEffect(() => { | ||
// Set schema adding data_query if needed | ||
const schemaWithDataQuery = getSchemaWithDataQuery({ ...props, path }); | ||
setState({ ...state, schemaWithDataQuery }); | ||
/* eslint-disable-next-line */ | ||
}, [props.connected_data_parameters?.byContextPath, props.connected_data_parameters?.byProviderPath]); | ||
|
||
useEffect(() => { | ||
// Set data_query keys and ids | ||
if (state.schemaWithDataQuery) { | ||
const dataQueryKeys = []; | ||
const ids = []; | ||
Object.keys(state.schemaWithDataQuery).forEach(element => { | ||
if (state.schemaWithDataQuery[element].type === 'data-query') { | ||
dataQueryKeys.push(element); | ||
ids.push(`${id}_${element}`); | ||
} | ||
}); | ||
setState({ ...state, dataQueryKeys, ids }); | ||
} | ||
/* eslint-disable-next-line */ | ||
}, [state.schemaWithDataQuery]); | ||
// Update connected_data_parameters if data_query available in data.columns | ||
__CLIENT__ && | ||
state.dataQueryKeys.forEach((key, index) => { | ||
if ( | ||
!objectHasData( | ||
props.connected_data_parameters?.byProviderPath?.[path], | ||
) && | ||
!objectHasData( | ||
props.connected_data_parameters?.byContextPath?.[path], | ||
) && | ||
!props.connected_data_parameters?.byPath?.[path]?.override?.[ | ||
state.ids[index] | ||
] && | ||
props.data?.columns?.[key]?.value?.i && | ||
props.data?.columns?.[key]?.value?.v | ||
) { | ||
props.dispatch( | ||
setConnectedDataParameters( | ||
path, | ||
props.data.columns[key].value, | ||
state.ids[index], | ||
), | ||
); | ||
} | ||
}); | ||
useEffect(() => { | ||
props.onChange && props.onChange(state); | ||
return () => { | ||
// Delete connected data parrameters on Unmount | ||
__CLIENT__ && | ||
state.dataQueryKeys && | ||
state.dataQueryKeys.forEach((key, index) => { | ||
props.dispatch(deleteConnectedDataParameters(path, state.ids[index])); | ||
}); | ||
}; | ||
/* eslint-disable-next-line */ | ||
}, [state]); | ||
return props.view; | ||
}; | ||
|
||
export default compose( | ||
connect((state, props) => ({ | ||
connected_data_parameters: state.connected_data_parameters, | ||
pathname: state.router.location.pathname, | ||
})), | ||
)(DefaultView); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
import _uniqueId from 'lodash/uniqueId'; | ||
import DefaultEdit from '../DefaultEdit'; | ||
import View from './View'; | ||
import { connect } from 'react-redux'; | ||
import { compose } from 'redux'; | ||
import { settings } from '~/config'; | ||
|
||
const schema = { | ||
provider_url: { | ||
title: 'Provider url', | ||
type: 'text', | ||
default: '', | ||
}, | ||
sql_select: { | ||
type: 'sql', | ||
}, | ||
data_query: { | ||
iTitle: 'Where column', | ||
vTitle: 'Is equal to', | ||
type: 'data-query', | ||
}, | ||
}; | ||
|
||
const Edit = props => { | ||
const [state] = useState({ | ||
id: _uniqueId('block_'), | ||
}); | ||
useEffect(() => { | ||
schema.provider_url.default = settings.providerUrl; | ||
}, []); | ||
return ( | ||
<div> | ||
<DefaultEdit schema={schema} {...props} title="Facility block" /> | ||
<View {...props} id={state.id} /> | ||
</div> | ||
); | ||
}; | ||
export default compose( | ||
connect((state, props) => ({ | ||
connected_data_parameters: state.connected_data_parameters, | ||
pathname: state.router.location.pathname, | ||
})), | ||
)(Edit); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
import React, { useState } from 'react'; | ||
import DB from '~/components/manage/DataBase/DB'; | ||
|
||
import DefaultView from '../DefaultView'; | ||
|
||
import moment from 'moment'; | ||
import './style.css'; | ||
|
||
// STATIC DATA | ||
// ================== | ||
const facility = { | ||
siteName: ' "ASM BRESCIA" - BOSCO SELLA', | ||
countryCode: 'IT', | ||
'Site Inspire ID': '2', | ||
mainActivity: | ||
'1(c) Thermal power stations and other combustion installations', | ||
Regulation: 'regulatoryType', | ||
shape_wm_as_text: 'POINT (1122835 5710975)', | ||
NUTS: 'Nord-Ovest, Lombardia, Brescia', | ||
riverBasin: 'RBD PADANO', | ||
'Facility Main Activity': | ||
'Thermal power stations and other combustion installations', | ||
nationalId: '250452007.SITE', | ||
OrganizationName: 'ISPRA', | ||
ContactMail: 'protocollo.ispra@ispra.legalmail.it', | ||
'Auth Address': 'ISPRA Via Vitaliano Brancati 48 Roma 00144', | ||
ContactPerson: 'ISPRA', | ||
authLastUpdated: '2018-05-15T06:37:00', | ||
eprtrReportingDate: '2020-05-15T06:37:00', | ||
eprtrReportingYear: 2020, | ||
'Facility inspire ID': '2007000854', | ||
}; | ||
const metadata = [ | ||
{ label: 'Name', id: 'siteName' }, | ||
{ label: 'Contact Person', id: 'ContactPerson' }, | ||
{ label: 'Phone', id: 'ContactPhone', default: '++421-2-59415291' }, | ||
{ label: 'Address', id: 'Auth Address' }, | ||
{ label: 'E-mail', id: 'ContactMail' }, | ||
]; | ||
// ================== | ||
|
||
const View = props => { | ||
const [state, setState] = useState({ | ||
onChange: newState => { | ||
setState({ ...state, ...newState }); | ||
}, | ||
}); | ||
const view = ( | ||
<div className="facility-block-wrapper"> | ||
<div className="flex flex-row align-center space-between responsive"> | ||
<div className="flex flex-column"> | ||
<h1 className="mb-0 bold light-blue">[facilityName1]</h1> | ||
<p>Industrial activity</p> | ||
<p>{facility.mainActivity}</p> | ||
</div> | ||
<div className="banner flex"> | ||
<div className="flex-item"> | ||
<p className="lighter">Last report was submitted on:</p> | ||
<p className="bold"> | ||
{moment(facility.eprtrReportingDate).format('DD MMM YYYY')} | ||
</p> | ||
</div> | ||
<div className="flex-item"> | ||
<p className="bold">Reporting year</p> | ||
<p className="lighter">{facility.eprtrReportingYear}</p> | ||
</div> | ||
<div className="flex-item"> | ||
<p className="bold">Publish date</p> | ||
<p className="lighter"> | ||
{moment(facility.eprtrReportingDate).format('DD MMM YYYY')} | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="mt-2"> | ||
<h1 className="mb-0 bold light-blue">Competent Authority</h1> | ||
<p className="info"> | ||
Last updated: {moment(facility.authLastUpdated).format('DD MMM YYYY')} | ||
</p> | ||
</div> | ||
<div className="mt-2 grid grid-cl-3 responsive metadata"> | ||
{metadata.map(meta => | ||
facility[meta.id] ? ( | ||
<div> | ||
<p className="bold mb-0">{meta.label}</p> | ||
<p className="info dark">{facility[meta.id]}</p> | ||
</div> | ||
) : meta.default ? ( | ||
<div> | ||
<p className="bold mb-0">{meta.label}</p> | ||
<p className="info dark">{meta.default}</p> | ||
</div> | ||
) : ( | ||
'' | ||
), | ||
)} | ||
</div> | ||
</div> | ||
); | ||
return view; | ||
// return ( | ||
// <DefaultView | ||
// {...props} | ||
// schema={schema} | ||
// view={view} | ||
// onChange={state.onChange} | ||
// /> | ||
// ); | ||
}; | ||
|
||
export default View; |
Oops, something went wrong.