@eeacms/volto-eea-map 0.1.8 → 0.1.9

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.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.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)
+
 #### [0.1.8](https://github.com/eea/volto-eea-map/compare/0.1.7...0.1.8)
 
+> 11 August 2022
+
+- Integration & new block for Map Visualization content-type [`#8`](https://github.com/eea/volto-eea-map/pull/8)
 - remove title on map edit widget [`1d00707`](https://github.com/eea/volto-eea-map/commit/1d0070716a743ea7f26c5f877b723492319fcecd)
 - update query by stored value [`c0f6ddd`](https://github.com/eea/volto-eea-map/commit/c0f6dddadaaf28de5b9914214acf735a166fae88)
 - stylelint [`511845a`](https://github.com/eea/volto-eea-map/commit/511845a319137dfe4e1c0c9846ee5ccb7656b32b)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,6 +24,7 @@
     "@eeacms/volto-embed": "^2.0.1",
     "@plone/scripts": "*",
     "esri-loader": "3.5.0",
+    "react-querybuilder": "4.2.3",
     "volto-slate": "*"
   },
   "devDependencies": {

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 import { loadModules } from 'esri-loader';
+import { formatQuery } from 'react-querybuilder';
 
 const MODULES = [
   'esri/Map',
@@ -91,7 +92,6 @@ const Webmap = (props) => {
         .filter(({ map_service_url, layer }) => map_service_url && layer)
         .map(({ map_service_url, layer, query = '' }) => {
           const url = `${map_service_url}/${layer}`;
-
           let mapLayer;
           switch (layer.type) {
             case 'Raster Layer':
@@ -102,7 +102,7 @@ const Webmap = (props) => {
             case 'Feature Layer':
               mapLayer = new FeatureLayer({
                 url,
-                definitionExpression: query,
+                definitionExpression: query ? formatQuery(query, 'sql') : '',
               });
               break;
             case 'Group Layer':

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

@@ -1,6 +1,12 @@
 import React from 'react';
 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';
@@ -31,7 +37,9 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
-  const [layerQuery, setLayerQuery] = React.useState(query);
+  //const [layerQuery, setLayerQuery] = React.useState(query);
+
+  const [builtQuery, setBuiltQuery] = React.useState(query);
 
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
@@ -79,14 +87,16 @@ const LayerSelectWidget = (props) => {
       map_data: mapData,
       query: '',
     });
-    setLayerQuery('');
+    setBuiltQuery('');
   };
 
   const handleQueryLayer = () => {
-    onChange(id, {
-      ...value,
-      query: layerQuery,
-    });
+    if (builtQuery) {
+      onChange(id, {
+        ...value,
+        query: builtQuery,
+      });
+    }
   };
 
   const handleChangeServiceUrl = (value) => {
@@ -94,7 +104,7 @@ const LayerSelectWidget = (props) => {
     setCheckColor('');
     setServiceUrl(value);
     setAvailableLayers('');
-    setLayerQuery('');
+    setBuiltQuery('');
     setSelectedLayer('');
   };
 
@@ -103,7 +113,7 @@ const LayerSelectWidget = (props) => {
     setServiceUrl(map_service_url);
     setCheckColor('');
     setAvailableLayers(available_layers);
-    setLayerQuery(query);
+    setBuiltQuery('');
     setSelectedLayer(layer);
   };
 
@@ -179,14 +189,26 @@ const LayerSelectWidget = (props) => {
               Query Layer
             </h5>
             <Grid.Row stretched>
-              <Input
+              {/* <Input
                 type="text"
                 style={{ width: '100%' }}
                 onChange={(e, { value }) => setLayerQuery(value)}
                 value={layerQuery}
-              ></Input>
+              ></Input> */}
+            </Grid.Row>
+            <Grid.Row>
+              <QueryBuilder
+                fields={fields.map((fi, i) => {
+                  return { name: fi.name, label: fi.name };
+                })}
+                query={builtQuery}
+                onQueryChange={(q) => setBuiltQuery(q)}
+                enableDragAndDrop={false}
+                //controlElements={bootstrapControlElements}
+                //controlClassnames={bootstrapControlClassnames}
+              />
             </Grid.Row>
-            {layerQuery && (
+            {builtQuery && (
               <Grid.Row>
                 <Button
                   type="submit"
@@ -213,7 +235,7 @@ const LayerSelectWidget = (props) => {
             </Grid.Row>
             {fields.map((field, id) => (
               <p style={{ fontSize: '12px', padding: '0 5px' }}>
-                {field.alias}
+                <strong>{field.alias}</strong> ({field.type})
               </p>
             ))}
           </>

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

@@ -62,7 +62,6 @@ const MapEditorWidget = (props) => {
             >
               <InlineForm
                 block={block}
-                //title={schema.title}
                 schema={schema}
                 onChangeField={(id, value) => {
                   handleChangeField(id, value);

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

@@ -53,6 +53,56 @@
   animation: fadeDown 0.2s ease-in;
 }
 
+.ruleGroup {
+  border: 1px solid lightgray !important;
+  margin: 10px 0;
+  background-color: transparent !important;
+}
+
+.ruleGroup-addRule {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-addGroup {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-combinators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-operators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-value {
+  padding: 0.3em 0 !important;
+}
+
+.rule-fields {
+  padding: 0.3em 0 !important;
+}
+
+.rule-remove {
+  padding: 1px 6px !important;
+  border: 2px solid #d02144 !important;
+  border-radius: 50px;
+  color: #d02144;
+  cursor: pointer;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;