Skip to content

Commit

Permalink
WIP on embed blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiberiuichim
tiberiuichim committed Jan 11, 2020
1 parent 21bb7fc commit bbf291b
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 124 deletions.
187 changes: 81 additions & 106 deletions src/EmbedChartBlock/Edit.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,111 @@
import { getChartDataFromVisualization } from '../actions';
import { searchContent } from '@plone/volto/actions';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { Grid, Form as UiForm } from 'semantic-ui-react';
import { Field } from '@plone/volto/components'; // EditBlock
import ConnectedChart from '../ConnectedChart';

/*
* Pick up a chart from an existing visualization, add text
*
* TODO: this should use the PickVisualization component
*/
class ChartPick extends Component {
constructor(props) {
super(props);

const localChartData = props.data.chartData || {};

let text = props.data['chart-text'];
if (typeof text !== 'string') text = '';

this.state = {
localChartData,
text,
...props.data,
};

this.onSubmit = this.onSubmit.bind(this);
this.updateData = this.updateData.bind(this);
// this.getChartData = this.getChartData.bind(this);
this.handleChangeVisualization = this.handleChangeVisualization.bind(this);
}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Segment, Grid, Form as UiForm } from 'semantic-ui-react';

updateData(obj) {
this.setState(obj, this.onSubmit);
}
import { Field } from '@plone/volto/components'; // EditBlock
import { SidebarPortal } from '@plone/volto/components';

onSubmit() {
this.props.onChangeBlock(this.props.block, {
...this.props.data,
'chart-text': this.state.text,
chartData: this.state.localChartData,
...this.state,
});
}
import { changeSidebarState } from 'volto-sidebar/actions';

handleChangeVisualization(id, path) {
// TODO: use getContent with subrequest, no need for specially dedicated
// action and reducer. Complication not needed.
this.props.getChartDataFromVisualization(path);
}
import PickVisualization from '../PickVisualization';
import ConnectedChart from '../ConnectedChart';

class ChartPick extends Component {
componentDidMount() {
// get the existing visualizations
this.props.searchContent('', {
// object_provides: 'forests.content.interfaces.IDataVisualization',
portal_type: 'Visualization',
});
}

componentDidUpdate(prevProps) {
// console.log('new props', this.props);
if (this.props.remoteChartData !== prevProps.remoteChartData) {
this.setState({
localChartData: this.props.remoteChartData,
});
}
this.props.changeSidebarState(true);
}

render() {
// console.log('state in render', this.state);
console.log('props in render', this.props);
return (
<div className="block selected">
{this.props.selected && (
<SidebarPortal selected={true}>
<Segment.Group raised>
<header className="header pulled">
<h2>Edit chart options</h2>
</header>
<Segment className="form sidebar-image-data">
<PickVisualization
onLoadChartData={chartData =>
this.props.onChangeBlock(this.props.block, {
...this.props.data,
chartData,
})
}
currentChartData={this.props.data?.chartData}
onChange={url =>
this.props.onChangeBlock(this.props.block, {
...this.props.data,
vis_url: url,
})
}
value={this.props.data?.vis_url || ''}
/>
<Field
title="Source"
id="chart-source"
type="text"
value={this.props.data.chart_source || ''}
required={false}
onChange={(e, d) =>
this.props.onChangeBlock(this.props.block, {
...this.props.data,
chart_source: d,
})
}
/>
<Field
title="Source Link"
id="chart-source-link"
type="text"
value={this.props.data.chart_source_link || ''}
required={false}
onChange={(e, d) =>
this.props.onChangeBlock(this.props.block, {
...this.props.data,
chart_source_link: d,
})
}
/>
</Segment>
</Segment.Group>
</SidebarPortal>
)}

<div className="block-inner-wrapper">
<Grid columns={2} divided>
<Grid.Row>
<Grid.Column>
{this.state.localChartData && (
<ConnectedChart
data={{ chartData: this.state.localChartData }}
className="embedded-block-chart"
config={{ displayModeBar: false }}
/>
)}
</Grid.Column>
<Grid.Column>
<UiForm>
<Field
title="Pick chart from existing visualization"
id="chart-data"
choices={this.props.visualizations}
required={true}
onChange={this.handleChangeVisualization}
/>
<Field
title="Text"
id="chart-text"
widget="cktext"
value={this.state.text}
required={false}
onChange={(e, d) => this.updateData({ text: d })}
/>
<Field
title="Source"
id="chart-source"
type="text"
value={this.state.chart_source}
required={false}
onChange={(e, d) => this.updateData({ chart_source: d })}
/>
<Field
title="Source Link"
id="chart-source-link"
type="text"
value={this.state.chart_source_link}
value={this.props.data.text}
required={false}
onChange={(e, d) =>
this.updateData({ chart_source_link: d })
this.props.onChangeBlock(this.props.block, {
...this.props.data,
text: d,
})
}
/>
</UiForm>
</Grid.Column>
<Grid.Column>
{this.props.data?.chartData && (
<ConnectedChart
data={{ chartData: this.props.data.chartData }}
className="embedded-block-chart"
config={{ displayModeBar: false }}
/>
)}
</Grid.Column>
</Grid.Row>
</Grid>
</div>
Expand All @@ -130,16 +115,6 @@ class ChartPick extends Component {
}

export default connect(
(state, props) => {
// const chartData = state.data_providers ? state.data_providers.item : {};
// console.log('connect props', state, props);
let visualizations = state.search ? state.search.items : [];
visualizations = visualizations.map(el => [el['@id'], el.title]);
return {
visualizations,
remoteChartData:
state.chart_data_visualization && state.chart_data_visualization.data,
};
},
{ searchContent, getChartDataFromVisualization },
null,
{ changeSidebarState },
)(ChartPick);
37 changes: 21 additions & 16 deletions src/PickVisualization/PickVisualization.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
import { searchContent } from '@plone/volto/actions';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { Grid, Form as UiForm } from 'semantic-ui-react';
import { Field } from '@plone/volto/components'; // EditBlock

import { getChartDataFromVisualization } from '../actions';

class PickVisualization extends Component {
searchVisualizations = () => {
this.props.searchContent(
Expand All @@ -21,30 +22,34 @@ class PickVisualization extends Component {

componentDidMount() {
this.searchVisualizations();

if (this.props.value) {
// TODO: use getContent with subrequest, no need for specially dedicated
// action and reducer. Complication not needed.
this.props.getChartDataFromVisualization(this.props.value);
}
}

componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
this.searchVisualizations();
this.props.getChartDataFromVisualization(this.props.value);
}
// if (this.props.remoteChartData !== prevProps.remoteChartData) {
// console.log('we are here');
// this.setState({
// localChartData: this.props.remoteChartData,
// });
// }
if (
JSON.stringify(this.props.currentChartData || {}) !==
JSON.stringify(this.props.remoteChartData || {})
)
this.props.onLoadChartData(this.props.remoteChartData);
}

render() {
//<UiForm>
//</UiForm>
console.log('vis props', this.props);
return (
<Field
title="Pick chart from existing visualization"
title="Visualization"
id="chart-data"
choices={this.props.visualizations}
required={true}
onChange={this.onChange}
onChange={(id, value) => this.props.onChange(value)}
value={this.props.value}
/>
);
Expand All @@ -55,14 +60,14 @@ export default connect(
(state, props) => {
// const chartData = state.data_providers ? state.data_providers.item : {};
let visualizations = state.search
? state.search.subrequests?.getVisualizations?.items
? state.search.subrequests?.getVisualizations?.items || []
: [];
visualizations = visualizations.map(el => [el['@id'], el.title]);
return {
visualizations,
// remoteChartData:
// state.chart_data_visualization && state.chart_data_visualization.data,
remoteChartData:
state.chart_data_visualization && state.chart_data_visualization.data,
};
},
{ searchContent },
{ searchContent, getChartDataFromVisualization },
)(PickVisualization);
4 changes: 2 additions & 2 deletions src/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import VisualizationView from './Visualization/View';
import PlotlyBlockEdit from './ChartBlock/Edit';
import PlotlyBlockView from './ChartBlock/View';

import EmbedChartBlockEdit from './ChartBlock/Edit';
import EmbedChartBlockView from './ChartBlock/View';
import EmbedChartBlockEdit from './EmbedChartBlock/Edit';
import EmbedChartBlockView from './EmbedChartBlock/View';

import chartIcon from '@plone/volto/icons/world.svg';
import * as addonReducers from './reducers';
Expand Down

0 comments on commit bbf291b

Please sign in to comment.