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

Expandable table improvements #63

Merged
merged 4 commits into from
Apr 14, 2022
Merged

Expandable table improvements #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08e447e
openlayers markers wip
andreiggr Apr 13, 2022
6bff44c
Use volto-openlayers & fixes
andreiggr Apr 14, 2022
30f2c17
Fix crash on no selected columns
andreiggr Apr 14, 2022
31181d8
Table markers based on selected lat long from edit
andreiggr Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}