@eeacms/volto-eea-map 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -4,8 +4,18 @@ 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.7](https://github.com/eea/volto-eea-map/compare/0.1.6...0.1.7)
+
+- fix height coming through in view [`39d4d28`](https://github.com/eea/volto-eea-map/commit/39d4d287a4fe86890f5fad8d9050130b496dfe70)
+- Connected visualization view-edit [`52a8e21`](https://github.com/eea/volto-eea-map/commit/52a8e2187cb2e3a7db660ae4b6b5610c88be5083)
+- map_view is map_editor_widget, add view component for content-type [`dc227f9`](https://github.com/eea/volto-eea-map/commit/dc227f9bbb259b59739a3694dc69f0fcca661137)
+- Add map visualization widget [`affd84c`](https://github.com/eea/volto-eea-map/commit/affd84ca8753214c07f2f0756a13f08f5cf0a048)
+
 #### [0.1.6](https://github.com/eea/volto-eea-map/compare/0.1.5...0.1.6)
 
+> 5 August 2022
+
+- Develop [`#6`](https://github.com/eea/volto-eea-map/pull/6)
 - Lint fix [`f5561d1`](https://github.com/eea/volto-eea-map/commit/f5561d1581201bd635b4e53e8a46decaf684438f)
 - Map improvements [`c75d16c`](https://github.com/eea/volto-eea-map/commit/c75d16c265136d9f676e194540e613bb742fb51b)
 

package/package.json

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

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

@@ -6,14 +6,13 @@ import { PrivacyProtection } from '@eeacms/volto-embed';
 const View = (props) => {
   const { data } = props || {};
 
-  const { map_data = {} } = data;
+  const { map_data = {}, height = '' } = data;
 
   if (__SERVER__) return '';
-
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} />
+        <Webmap data={map_data} height={height} />
         <ExtraViews data={data} />
       </PrivacyProtection>
     </div>

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import Webmap from '../Webmap';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+
+import PanelsSchema from './panelsSchema';
+
+const VisualizationEditorWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+
+  const dataForm = { map_data: intValue };
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (id, fieldVal) => {
+    setIntValue(fieldVal);
+  };
+
+  let schema = PanelsSchema({ data: dataForm });
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Button
+        floated="right"
+        size="tiny"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }}
+      >
+        Open Map Editor
+      </Button>
+      {open && (
+        <Modal
+          id="map-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column width={4}>
+                  <InlineForm
+                    block={block}
+                    title={schema.title}
+                    schema={schema}
+                    onChangeField={(id, value) => {
+                      handleChangeField(id, value);
+                    }}
+                    formData={dataForm}
+                  />
+                </Grid.Column>
+                <Grid.Column width={8}>
+                  <VisibilitySensor>
+                    <Webmap data={intValue} editMode={true} />
+                  </VisibilitySensor>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column width={8}></Grid.Column>
+                <Grid.Column width={4}>
+                  <Button onClick={() => handleClose()}>Close</Button>
+                  <Button color="green" onClick={() => handleApplyChanges()}>
+                    Apply changes
+                  </Button>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationEditorWidget;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Webmap from '../Webmap';
+
+const VisualizationView = (props) => {
+  const { content = {} } = props;
+
+  const { map_editor_widget = {} } = content;
+
+  return (
+    <div>
+      <Webmap data={map_editor_widget} />
+    </div>
+  );
+};
+
+export default VisualizationView;

package/src/index.js

@@ -3,6 +3,8 @@ import world from '@plone/volto/icons/world.svg';
 import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
 import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
+import VisualizationEditorWidget from './components/Blocks/EEAMap/components/widgets/VisualizationEditorWidget';
+import VisualizationView from './components/Blocks/EEAMap/components/widgets/VisualizationView';
 
 export default (config) => {
   config.settings.allowed_cors_destinations = [
@@ -52,5 +54,10 @@ export default (config) => {
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.object_types_widget = ObjectTypesWidget;
 
+  //map editor for the visualization(content-type)
+  config.widgets.id.map_editor_widget = VisualizationEditorWidget;
+  //map viewer for the visualization(content-type)
+  config.views.contentTypesViews.map_visualization = VisualizationView;
+
   return config;
 };