multiple sources

eea · Jan 27, 2020 · 1182681 · 1182681
1 parent cc33181
commit 1182681
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 17 deletions.
diff --git a/src/ChartBlock/Edit.jsx b/src/ChartBlock/Edit.jsx
@@ -5,6 +5,8 @@ import { Field } from '@plone/volto/components'; // EditBlock
 
 import { Segment } from 'semantic-ui-react'; // , Dropdown
 import 'react-chart-editor/lib/react-chart-editor.css';
+import { TextWidget } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
 
 import { SidebarPortal } from '@plone/volto/components';
 
@@ -150,6 +152,69 @@ class Edit extends Component {
                         })
                       }
                     />
+                    {this.props.data.chartSources &&
+                    this.props.data.chartSources.length
+                      ? this.props.data.chartSources.map((item, index) => (
+                          <React.Fragment>
+                            <TextWidget
+                              title="Source"
+                              id={`chart-source_${index}`}
+                              type="text"
+                              value={item.chart_source}
+                              required={false}
+                              onChange={(e, d) => {
+                                const dataClone = JSON.parse(
+                                  JSON.stringify(this.props.data.chartSources),
+                                );
+                                dataClone[index].chart_source = d;
+                                this.props.onChangeBlock(this.props.block, {
+                                  ...this.props.data,
+                                  chartSources: dataClone,
+                                });
+                              }}
+                            />
+                            <TextWidget
+                              title="Source Link"
+                              id={`chart-source_link_${index}`}
+                              type="text"
+                              value={item.chart_source_link}
+                              required={false}
+                              onChange={(e, d) => {
+                                const dataClone = JSON.parse(
+                                  JSON.stringify(this.props.data.chartSources),
+                                );
+                                dataClone[index].chart_source_link = d;
+                                this.props.onChangeBlock(this.props.block, {
+                                  ...this.props.data,
+                                  chartSources: dataClone,
+                                });
+                              }}
+                            />
+                          </React.Fragment>
+                        ))
+                      : ''}
+                    <Button
+                      primary
+                      onClick={() => {
+                        const chartSources =
+                          this.props.data.chartSources &&
+                          this.props.data.chartSources.length
+                            ? JSON.parse(
+                                JSON.stringify(this.props.data.chartSources),
+                              )
+                            : [];
+                        chartSources.push({
+                          chart_source_link: '',
+                          chart_source: '',
+                        });
+                        this.props.onChangeBlock(this.props.block, {
+                          ...this.props.data,
+                          chartSources: chartSources,
+                        });
+                      }}
+                    >
+                      Add source
+                    </Button>
                   </Segment>
                 </Segment.Group>
               </SidebarPortal>

diff --git a/src/ChartBlock/View.jsx b/src/ChartBlock/View.jsx
@@ -1,20 +1,17 @@
 import React from 'react';
 import ConnectedChart from '../ConnectedChart';
-
+import SourceView from '~/components/theme/Blocks/SourceView';
 const ChartView = props => {
   return (
     <div className="chartWrapperView">
       <div className="block-inner-wrapper">
         <ConnectedChart {...props} className="chart-block-chart" />
         <div>
-          <a
-            className="discreet block_source"
-            href={props.data.chart_source_link}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {props.data.chart_source}
-          </a>
+          <SourceView
+            initialSource={props.data.chart_source}
+            initialSourceLink={props.data.chart_source_link}
+            multipleSources={props.data.chartSources}
+          />
         </div>
       </div>
     </div>

diff --git a/src/EmbedChartBlock/Edit.jsx b/src/EmbedChartBlock/Edit.jsx
@@ -17,6 +17,8 @@ import MultiValuesEdit from 'volto-datablocks/DataConnectedBlock/MultiValuesEdit
 import PickVisualization from '../PickVisualization';
 import ConnectedChart from '../ConnectedChart';
 import { v4 as uuid } from 'uuid';
+import { Button } from 'semantic-ui-react';
+import { TextWidget } from '@plone/volto/components';
 
 const toolbarId = uuid();
 
@@ -114,6 +116,67 @@ class EmbedChartBlockEdit extends Component {
                   })
                 }
               />
+              {this.props.data.chartSources &&
+              this.props.data.chartSources.length
+                ? this.props.data.chartSources.map((item, index) => (
+                    <React.Fragment>
+                      <TextWidget
+                        title="Source"
+                        id={`chart-source_${index}`}
+                        type="text"
+                        value={item.chart_source}
+                        required={false}
+                        onChange={(e, d) => {
+                          const dataClone = JSON.parse(
+                            JSON.stringify(this.props.data.chartSources),
+                          );
+                          dataClone[index].chart_source = d;
+                          this.props.onChangeBlock(this.props.block, {
+                            ...this.props.data,
+                            chartSources: dataClone,
+                          });
+                        }}
+                      />
+                      <TextWidget
+                        title="Source Link"
+                        id={`chart-source_link_${index}`}
+                        type="text"
+                        value={item.chart_source_link}
+                        required={false}
+                        onChange={(e, d) => {
+                          const dataClone = JSON.parse(
+                            JSON.stringify(this.props.data.chartSources),
+                          );
+                          dataClone[index].chart_source_link = d;
+                          this.props.onChangeBlock(this.props.block, {
+                            ...this.props.data,
+                            chartSources: dataClone,
+                          });
+                        }}
+                      />
+                    </React.Fragment>
+                  ))
+                : ''}
+              <Button
+                primary
+                onClick={() => {
+                  const chartSources =
+                    this.props.data.chartSources &&
+                    this.props.data.chartSources.length
+                      ? JSON.parse(JSON.stringify(this.props.data.chartSources))
+                      : [];
+                  chartSources.push({
+                    chart_source_link: '',
+                    chart_source: '',
+                  });
+                  this.props.onChangeBlock(this.props.block, {
+                    ...this.props.data,
+                    chartSources: chartSources,
+                  });
+                }}
+              >
+                Add source
+              </Button>
               <MultiValuesEdit
                 schema={this.props.schema || {}}
                 onChange={data =>

diff --git a/src/EmbedChartBlock/View.jsx b/src/EmbedChartBlock/View.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
 import ConnectedChart from '../ConnectedChart';
 import ViewText from '@plone/volto/components/manage/Blocks/Text/View';
+import SourceView from '~/components/theme/Blocks/SourceView';
 
 const EmbedChartView = props => {
   const hasText =
@@ -45,14 +46,11 @@ const EmbedChartView = props => {
             </Grid.Column>
             <Grid.Column width={12}>
               <div>
-                <a
-                  className="discreet block_source"
-                  href={props.data.chart_source_link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {props.data.chart_source}
-                </a>
+                <SourceView
+                  initialSource={props.data.chart_source}
+                  initialSourceLink={props.data.chart_source_link}
+                  multipleSources={props.data.chartSources}
+                />
               </div>
             </Grid.Column>
           </Grid.Row>