@eeacms/volto-eea-map 0.1.9 → 0.1.10

package/CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.10](https://github.com/eea/volto-eea-map/compare/0.1.9...0.1.10)
+
+- EEA core metadata adaptation for map block to [`5fb5724`](https://github.com/eea/volto-eea-map/commit/5fb5724164e1e9b1ae5143f9bd565c28118be253)
+- EEA core metadata adaptation [`03b62a3`](https://github.com/eea/volto-eea-map/commit/03b62a35165670743d649282ae697dbf71c56a56)
+
 #### [0.1.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
 
+> 12 August 2022
+
+- Query builder for map layers queries [`#9`](https://github.com/eea/volto-eea-map/pull/9)
 - pinpoint query builder [`6184b0e`](https://github.com/eea/volto-eea-map/commit/6184b0e1dcee48e7d34bf56bc1c878438d07f987)
 - build query widget [`7a9d74a`](https://github.com/eea/volto-eea-map/commit/7a9d74a6fdac32a8b424c5ca97edd42df436cbe2)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EEAMap/Schema.js

@@ -7,26 +7,20 @@ export const Schema = (props) => {
         title: 'Default',
         fields: [
           'map_data',
-          //...(use_visualization ? ['vis_url'] : ['map_data']),
           'description',
           'height',
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
         ],
       },
     ],
     properties: {
-      // use_visualization: {
-      //   title: 'Use visualization',
-      //   description:
-      //     'This setting will enable importing the map data from a visualization. If is enabled, editing the map manually will not be possible',
-      //   type: 'boolean',
-      // },
-      // vis_url: {
-      //   widget: 'object_by_path',
-      //   title: 'Visualization',
-      // },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       height: {
         title: 'Height',
         type: 'number',

package/src/components/Blocks/EEAMap/View.jsx

@@ -1,21 +1,43 @@
 import React from 'react';
 
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import Webmap from './components/Webmap';
 import ExtraViews from './components/widgets/ExtraViews';
 import { PrivacyProtection } from '@eeacms/volto-embed';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, id } = props || {};
+  const { data, id, path, data_provenance } = props || {};
   const { map_data = {}, height = '' } = data;
 
+  React.useEffect(() => {
+    //   get content from document
+    if (path) {
+      props.getContent(path, null, id);
+    }
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [path]);
+
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
         <Webmap data={map_data} height={height} id={id} />
-        <ExtraViews data={data} />
+        <ExtraViews data={{ ...data, data_provenance }} />
       </PrivacyProtection>
     </div>
   );
 };
 
-export default View;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(View);

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 
 import LegendWidget from './LegendWidget';
 import { serializeNodes } from 'volto-slate/editor/render';
@@ -15,46 +15,69 @@ const ExtraViews = ({ data }) => {
     show_legend,
     show_download,
     show_viewer,
+    show_sources,
+    data_provenance = {},
   } = data;
-
   return (
     <div className="extra-eea-map-content">
-      {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
-        <div
-          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
-        >
-          {show_download && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={downloadSVG} title="Download" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
-          )}
-          {show_viewer && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={
-                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
-                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
-              }
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={worldSVG} title="View map" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
+      {map_data &&
+        map_data.layers?.map_layers[0] &&
+        (show_download || show_viewer) && (
+          <div
+            style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+          >
+            {show_download && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={downloadSVG} title="Download" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+            {show_viewer && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={
+                  `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+                  `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
+                }
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={worldSVG} title="View map" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+          </div>
+        )}
+      {show_legend && map_data && <LegendWidget data={map_data} />}
+      {show_sources && (
+        <>
+          {data_provenance &&
+          data_provenance.data &&
+          data_provenance.data.length > 0 ? (
+            <div>
+              <h3>Sources:</h3>
+              {data_provenance.data.map((data, i) => (
+                <div key={i}>
+                  <p className="map_source_title">{data.title}</p>
+                  <p className="map_source_description">{data.organisation}</p>
+                  <UniversalLink href={data.link}>{data.link} </UniversalLink>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p>Data provenance is not set for visualization used or page</p>
           )}
-        </div>
+        </>
       )}
-      {show_legend && <LegendWidget data={map_data} />}
       {description && serializeNodes(description)}
     </div>
   );

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -3,10 +3,6 @@ import { Icon } from '@plone/volto/components';
 import { Input, Select, Button, Grid } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
-// import {
-//   bootstrapControlClassnames,
-//   bootstrapControlElements,
-// } from 'react-querybuilder/bootstrap';
 
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
@@ -37,7 +33,6 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
-  //const [layerQuery, setLayerQuery] = React.useState(query);
 
   const [builtQuery, setBuiltQuery] = React.useState(query);
 
@@ -188,14 +183,6 @@ const LayerSelectWidget = (props) => {
             <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
               Query Layer
             </h5>
-            <Grid.Row stretched>
-              {/* <Input
-                type="text"
-                style={{ width: '100%' }}
-                onChange={(e, { value }) => setLayerQuery(value)}
-                value={layerQuery}
-              ></Input> */}
-            </Grid.Row>
             <Grid.Row>
               <QueryBuilder
                 fields={fields.map((fi, i) => {
@@ -204,8 +191,6 @@ const LayerSelectWidget = (props) => {
                 query={builtQuery}
                 onQueryChange={(q) => setBuiltQuery(q)}
                 enableDragAndDrop={false}
-                //controlElements={bootstrapControlElements}
-                //controlClassnames={bootstrapControlClassnames}
               />
             </Grid.Row>
             {builtQuery && (

package/src/components/Blocks/EEAMap/styles/map.css

@@ -103,6 +103,18 @@
   cursor: pointer;
 }
 
+.map_source_title {
+  margin-top: 15px !important;
+  margin-bottom: 5px !important;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.map_source_description {
+  margin: 5px 0 !important;
+  font-size: 14px;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -7,12 +7,12 @@ import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
+  const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
   return (
     <div>
-      <View data={data} />
+      <View data={data} id={id} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -12,6 +12,7 @@ export const Schema = (props) => {
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
         ],
       },
     ],
@@ -28,6 +29,10 @@ export const Schema = (props) => {
         title: 'Description',
         widget: 'slate',
       },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -6,15 +6,18 @@ import { compose } from 'redux';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import Webmap from '../EEAMap/components/Webmap';
 import ExtraViews from '../EEAMap/components/widgets/ExtraViews';
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, map_visualization } = props || {};
+  const { data, viz_content = {}, id } = props || {};
   const { height = '', vis_url = '' } = data;
 
+  const { map_visualization_data = '', data_provenance = {} } =
+    viz_content || {};
+
   React.useEffect(() => {
     if (vis_url) {
-      props.getVisualization(vis_url);
+      props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url]);
@@ -22,13 +25,19 @@ const View = (props) => {
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization && (
+        {map_visualization_data && (
           <div>
-            <Webmap data={map_visualization.data} height={height} />
-            <ExtraViews data={{ ...data, map_data: map_visualization.data }} />
+            <Webmap data={map_visualization_data} height={height} />
+            <ExtraViews
+              data={{
+                ...data,
+                data_provenance,
+                map_data: map_visualization_data,
+              }}
+            />
           </div>
         )}
-        {!map_visualization && (
+        {!map_visualization_data && (
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
@@ -39,10 +48,10 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      map_visualization: state.map_visualizations.data[props.data.vis_url],
+      viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(View);