Skip to content
This repository has been archived by the owner on Apr 25, 2024. It is now read-only.

Commit

Permalink
Merge pull request #63 from eea/expandable-table-mapwork
Browse files Browse the repository at this point in the history 
Expandable table improvements
  • Loading branch information
@andreiggr
andreiggr committed Apr 14, 2022
2 parents 3c73d31 + 31181d8 commit e288e1d
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 69 deletions.
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,20 @@
"addons": [
"@eeacms/volto-plotlycharts",
"@eeacms/volto-datablocks",
"@eeacms/volto-openlayers-map",
"@eeacms/volto-addons-forest",
"@eeacms/volto-matomo"
],
"dependencies": {
"@eeacms/volto-plotlycharts": "*",
"@eeacms/volto-addons-forest": "*",
"@eeacms/volto-datablocks": "*",
"@eeacms/volto-matomo": "*",
"@eeacms/volto-openlayers-map": "0.1.4",
"@eeacms/volto-plotlycharts": "*",
"react-highlight-words": "^0.16.0",
"react-image-gallery": "1.2.7",
"react-lazy-load-image-component": "^1.5.0",
"react-stickynode": "^2.1.1",
"pigeon-maps": "0.21.0"
"react-stickynode": "^2.1.1"
},
"devDependencies": {
"@cypress/code-coverage": "^3.9.5",
Expand Down
102 changes: 90 additions & 12 deletions src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from 'react';
import { compose } from 'redux';
import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
import { Map } from '@eeacms/volto-openlayers-map/Map';
import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
import { openlayers } from '@eeacms/volto-openlayers-map';

import { Map, Marker } from 'pigeon-maps';
const getLayerBaseURL = () =>
'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';

const getProviderDataLength = (provider_data) => {
return provider_data
Expand All @@ -11,9 +15,14 @@ const getProviderDataLength = (provider_data) => {
};

const PopupMap = ({ rowData, provider_data, mapData }) => {
const [mapCenter, setMapCenter] = React.useState([45, 9]);
const [mapRendered, setMapRendered] = React.useState(false);
const [mapCenter, setMapCenter] = React.useState([9, 45]);
const mapRef = React.useRef();

const [selectedData, setSelectedData] = React.useState([]);
const [featuresData, setFeaturesData] = React.useState([]);

const { proj, source, style } = openlayers;

React.useEffect(() => {
const { long, lat } = mapData;
Expand All @@ -30,13 +39,16 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
const centerLong = minLong && maxLong ? (minLong + maxLong) / 2 : '';

if (centerLat && centerLong) {
setMapCenter([centerLat, centerLong]);
setMapCenter([centerLong, centerLat]);
centerToPosition({ longitude: centerLong, latitude: centerLat }, 5);
}
}, [selectedData, mapData]);

React.useEffect(() => {
const { long, lat } = mapData;
const provider_data_length = getProviderDataLength(provider_data);
const newMapData = [];
const newFeaturesData = [];
if (provider_data_length) {
const keys = Object.keys(provider_data);
Array(provider_data_length)
Expand All @@ -47,11 +59,21 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
obj[key] = provider_data[key][i];
});
newMapData.push(obj);

newFeaturesData.push(
new openlayers.ol.Feature(
new openlayers.geom.Point(
openlayers.proj.fromLonLat([obj[long], obj[lat]]),
),
),
);
});
}
setSelectedData(newMapData);

setFeaturesData(newFeaturesData);
/* eslint-disable-next-line */
}, [provider_data]);
}, [provider_data, mapData]);

// const countries =
// provider_data && provider_data[mapData.country]
Expand All @@ -60,19 +82,75 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {

//const uniqueCountries = [...new Set(countries)];

const centerToPosition = (position, zoom) => {
const { proj } = openlayers;
return mapRef.current.getView().animate({
center: proj.fromLonLat([position.longitude, position.latitude]),
duration: 1000,
zoom,
});
};

if (!provider_data) {
return 'Loading..';
}
return (
<div>
<div className="map-container">
{selectedData.length > 0 ? (
<Map height={400} center={mapCenter} defaultZoom={5}>
{selectedData.map((item, i) => {
const long = item[mapData.long] ? item[mapData.long] : '';
const lat = item[mapData.lat] ? item[mapData.lat] : '';
/* const label = item[mapData.label] ? item[mapData.label] : ''; */
return <Marker width={30} color={'#00519d'} anchor={[lat, long]} />;
})}
<Map
ref={(data) => {
mapRef.current = data?.map;
if (data?.mapRendered && !mapRendered) {
setMapRendered(true);
}
}}
view={{
center: proj.fromLonLat(mapCenter),
showFullExtent: true,
minZoom: 1,
zoom: 2,
}}
renderer="webgl"
// onPointermove={this.onPointermove}
// onClick={this.onClick}
// onMoveend={this.onMoveend}
>
<Layers>
<Layer.Tile
source={
new source.XYZ({
url: getLayerBaseURL(),
})
}
/>
<Layer.Vector
source={
new source.Vector({
features: featuresData,
})
}
style={
new style.Style({
image: new style.Circle({
radius: 6,
fill: new style.Fill({ color: '#058373' }),
stroke: new style.Stroke({ color: 'black', width: 1 }),
zIndex: 0,
}),
text: new style.Text({
font: '12px Calibri,sans-serif',
fill: new style.Fill({ color: '#000' }),
stroke: new style.Stroke({
color: '#fff',
width: 2,
}),
}),
})
}
title="1.Sites"
zIndex={1}
/>
</Layers>
</Map>
) : (
<p>No data available for map.</p>
Expand Down
124 changes: 70 additions & 54 deletions src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ const View = (props) => {
};
/* eslint-disable-next-line */
}, []);

return (
<div className="smart-table">
<Search
Expand Down Expand Up @@ -172,67 +173,80 @@ const View = (props) => {
<Table.Header>
<Table.Row>
<Table.HeaderCell></Table.HeaderCell>
{selectedColumns.map((colDef, j) => (
<Table.HeaderCell
key={getNameOfColumn(colDef)}
className={getAlignmentOfColumn(colDef, j)}
>
<button
className="sortable-th"
title="Sort by"
onClick={() => {
if (sortBy[0] === colDef.column) {
setSortBy([colDef.column, !sortBy[1]]);
} else {
setSortBy([colDef.column, true]);
}
}}
style={{ display: 'flex' }}
{selectedColumns &&
selectedColumns.length > 0 &&
selectedColumns.map((colDef, j) => (
<Table.HeaderCell
key={getNameOfColumn(colDef)}
className={getAlignmentOfColumn(colDef, j)}
>
<span>{getTitleOfColumn(colDef)}</span>
{sortBy[0] === colDef.column ? (
<Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
) : (
<Icon name={upDownSVG} size="1rem" color="grey" />
)}
</button>
</Table.HeaderCell>
))}
<button
className="sortable-th"
title="Sort by"
onClick={() => {
if (sortBy[0] === colDef.column) {
setSortBy([colDef.column, !sortBy[1]]);
} else {
setSortBy([colDef.column, true]);
}
}}
style={{ display: 'flex' }}
>
<span>{getTitleOfColumn(colDef)}</span>
{sortBy[0] === colDef.column ? (
<Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
) : (
<Icon name={upDownSVG} size="1rem" color="grey" />
)}
</button>
</Table.HeaderCell>
))}
</Table.Row>
</Table.Header>
) : null}
<Table.Body>
{Array(
Math.max(
0,
Math.min(row_size, items.length - (activePage - 1) * row_size),
),
)
.fill()
.map((_, i) => {
const row_index = i + (activePage - 1) * row_size;
const row_data = items[row_index];
return (
<Table.Row key={row_index}>
<Table.Cell key={`${row_index}-popuprow`} textAlign="center">
<PopupRow rowData={row_data} tableData={data} />
</Table.Cell>
{selectedColumns.map((colDef, j) => (
{selectedColumns && selectedColumns.length > 0 ? (
Array(
Math.max(
0,
Math.min(row_size, items.length - (activePage - 1) * row_size),
),
)
.fill()
.map((_, i) => {
const row_index = i + (activePage - 1) * row_size;
const row_data = items[row_index];
return (
<Table.Row key={row_index}>
<Table.Cell
key={`${row_index}-${getNameOfColumn(colDef)}`}
textAlign={getAlignmentOfColumn(colDef, j)}
key={`${row_index}-popuprow`}
textAlign="center"
>
<RenderComponent
{...props}
tableData={items}
colDef={colDef}
row={row_index}
/>
<PopupRow rowData={row_data} tableData={data} />
</Table.Cell>
))}
</Table.Row>
);
})}
{selectedColumns &&
selectedColumns.length > 0 &&
selectedColumns.map((colDef, j) => (
<Table.Cell
key={`${row_index}-${getNameOfColumn(colDef)}`}
textAlign={getAlignmentOfColumn(colDef, j)}
>
<RenderComponent
{...props}
tableData={items}
colDef={colDef}
row={row_index}
/>
</Table.Cell>
))}
</Table.Row>
);
})
) : (
<p style={{ textAlign: 'center', padding: '10px 0' }}>
Select columns data from <strong>DATA SOURCE</strong> tab.
</p>
)}
{!items.length ? (
<Table.Row>
<Table.Cell textAlign="center" colSpan="100%">
Expand All @@ -243,7 +257,9 @@ const View = (props) => {
''
)}
</Table.Body>
{Math.ceil(items.length / row_size) > 1 ? (
{selectedColumns &&
selectedColumns.length > 0 &&
Math.ceil(items.length / row_size) > 1 ? (
<Table.Footer>
<Table.Row>
<Table.HeaderCell
Expand Down
5 changes: 5 additions & 0 deletions src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,3 +157,8 @@
background-color: #eaf2d3;
}
}

.map-container .ol-map {
height: 400px;
min-height: 400px;
}

0 comments on commit e288e1d

Please sign in to comment.