Skip to content

Commit

Permalink
Merge pull request #10 from eea/115135_data_connected_blocks
Browse files Browse the repository at this point in the history
Implemented dynamic sql request for data connected blocks
  • Loading branch information
mihai-macaneata authored Jul 16, 2020
2 parents 21868c4 + 5096d56 commit 5e32624
Show file tree
Hide file tree
Showing 9 changed files with 192 additions and 381 deletions.
29 changes: 1 addition & 28 deletions src/components/manage/Blocks/DefaultEdit.jsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
import React, { useState, useEffect } from 'react';
import React 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} />
Expand All @@ -38,7 +12,6 @@ const DefaultEdit = props => {
};
export default compose(
connect((state, props) => ({
connected_data_parameters: state.connected_data_parameters,
pathname: state.router.location.pathname,
})),
)(DefaultEdit);
112 changes: 45 additions & 67 deletions src/components/manage/Blocks/DefaultView.jsx
Original file line number Diff line number Diff line change
@@ -1,90 +1,68 @@
import { useState, useEffect } from 'react';
import _uniqueId from 'lodash/uniqueId';

import { connect } from 'react-redux';
import { compose } from 'redux';
import _uniqueId from 'lodash/uniqueId';

import {
setConnectedDataParameters,
deleteConnectedDataParameters,
} from 'volto-datablocks/actions';

import { getSchemaWithDataQuery, objectHasData, getBasePath } from '~/helpers';
import { settings } from '~/config';
import DB from '~/components/manage/DataBase/DB';

const DefaultView = props => {
const [state, setState] = useState({
id: _uniqueId('block_'),
schemaWithDataQuery: null,
dataQueryKeys: [],
ids: [],
loaded: false,
loading: false,
errors: [],
items: [],
});
const id = props.id || state.id;
const path = getBasePath(props.pathname);
const { view, data } = props;
const selectQuery = data?.sql?.selectQuery;
const additionalQuery = data?.sql?.additionalQuery;
const providerUrl = data?.providerUrl || settings.providerUrl || null;
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 });
if (
selectQuery.table &&
selectQuery.columnKey &&
selectQuery.columnValue &&
providerUrl &&
!state.loading
) {
setState({ ...state, loading: true });
DB.table(providerUrl, selectQuery.table)
.get()
.where(selectQuery.columnKey, selectQuery.columnValue)
.where(additionalQuery.columnKey, additionalQuery.columnValue)
.makeRequest()
.then(response => {
setState({
...state,
loaded: true,
loading: false,
errors: [],
items: response.results,
});
})
.catch(errors => {
setState({
loaded: false,
loading: false,
errors: errors,
items: [],
});
});
}
/* 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],
),
);
}
});
}, [data?.sql, data?.provider_url])

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;

return view;
};

export default compose(
connect((state, props) => ({
connected_data_parameters: state.connected_data_parameters,
pathname: state.router.location.pathname,
})),
)(DefaultView);
52 changes: 26 additions & 26 deletions src/components/manage/Blocks/FacilityBlock/Edit.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,43 @@ 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({
const [state, setState] = useState({
schema: {
provider_url: {
title: 'Provider url',
type: 'text',
default: '',
},
sql: {
title: 'SQL Select',
type: 'sql',
selectQueryFields: [
{ title: 'Table', id: 'table' },
{ title: 'Where column', id: 'columnKey' },
{ title: 'Is equal to', id: 'columnValue' },
],
additionalQueryFields: [
{ title: 'Where column', id: 'columnKey' },
{ title: 'Is equal to', id: 'columnValue' },
],
},
},
id: _uniqueId('block_'),
});
useEffect(() => {
const schema = { ...state.schema };
schema.provider_url.default = settings.providerUrl;
setState({ ...state, schema });
/* eslint-disable-next-line */
}, []);
return (
<div>
<DefaultEdit schema={schema} {...props} title="Facility block" />
<DefaultEdit schema={state.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);
export default Edit;
58 changes: 14 additions & 44 deletions src/components/manage/Blocks/FacilityBlock/View.jsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,11 @@
import React, { useState } from 'react';
import DB from '~/components/manage/DataBase/DB';
import moment from 'moment';

import DefaultView from '../DefaultView';

import moment from 'moment';
import './style.css';
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' },
Expand All @@ -41,49 +17,51 @@ const metadata = [

const View = props => {
const [state, setState] = useState({
items: [],
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">
<div className="flex flex-column mr-3 w-40">
<h1 className="mb-0 bold light-blue">[facilityName1]</h1>
<p>Industrial activity</p>
<p>{facility.mainActivity}</p>
<p className="mb-0 bold light-blue">Industrial activity</p>
<p>{state.items[0]?.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')}
{moment(state.items[0]?.eprtrReportingDate).format('DD MMM YYYY')}
</p>
</div>
<div className="flex-item">
<p className="bold">Reporting year</p>
<p className="lighter">{facility.eprtrReportingYear}</p>
<p className="lighter">{state.items[0]?.eprtrReportingYear}</p>
</div>
<div className="flex-item">
<p className="bold">Publish date</p>
<p className="lighter">
{moment(facility.eprtrReportingDate).format('DD MMM YYYY')}
{moment(state.items[0]?.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')}
Last updated:{' '}
{moment(state.items[0]?.authLastUpdated).format('DD MMM YYYY')}
</p>
</div>
<div className="mt-2 grid grid-cl-3 responsive metadata">
{metadata.map(meta =>
facility[meta.id] ? (
state.items[0]?.[meta.id] ? (
<div>
<p className="bold mb-0">{meta.label}</p>
<p className="info dark">{facility[meta.id]}</p>
<p className="info dark">{state.items[0]?.[meta.id]}</p>
</div>
) : meta.default ? (
<div>
Expand All @@ -97,15 +75,7 @@ const View = props => {
</div>
</div>
);
return view;
// return (
// <DefaultView
// {...props}
// schema={schema}
// view={view}
// onChange={state.onChange}
// />
// );
return <DefaultView {...props} view={view} onChange={state.onChange} />;
};

export default View;
Loading

0 comments on commit 5e32624

Please sign in to comment.