This repository has been archived by the owner on Apr 25, 2024. It is now read-only.
generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #61 from eea/expandable-table-template
Expandable table template
- Loading branch information
Showing
12 changed files
with
1,251 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { | ||
ExpandableEdit, | ||
expandableSchema, | ||
ExpandableView, | ||
} from './templates/expandable'; | ||
|
||
export default (config) => { | ||
config.blocks.blocksConfig.simpleDataConnectedTable = { | ||
...config.blocks.blocksConfig.simpleDataConnectedTable, | ||
templates: { | ||
...config.blocks.blocksConfig.simpleDataConnectedTable.templates, | ||
expandable: { | ||
title: 'Expandable', | ||
view: ExpandableView, | ||
edit: ExpandableEdit, | ||
schema: expandableSchema, | ||
}, | ||
}, | ||
}; | ||
return config; | ||
}; |
125 changes: 125 additions & 0 deletions
125
src/components/manage/Blocks/SimpleDataTable/templates/expandable/Edit.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
import React, { Component } from 'react'; | ||
import { compose } from 'redux'; | ||
import { SidebarPortal } from '@plone/volto/components'; // EditBlock | ||
import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; | ||
|
||
import config from '@plone/volto/registry'; | ||
|
||
import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs'; | ||
|
||
import { SimpleDataTableSchema } from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/schema'; | ||
import { SimpleDataTableView } from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/View'; | ||
|
||
class Edit extends Component { | ||
getSchema = () => { | ||
const template = this.props.data.template || 'default'; | ||
const templateSchema = | ||
config.blocks.blocksConfig.simpleDataConnectedTable?.templates?.[template] | ||
?.schema || {}; | ||
|
||
const schema = SimpleDataTableSchema(config, templateSchema(config)); | ||
|
||
// TODO: create picker for columns to include | ||
|
||
const provider_url = this.props.data?.provider_url; | ||
const provider_data = provider_url | ||
? this.props.providers_data[provider_url] | ||
: ''; | ||
|
||
// const { provider_data } = this.props; | ||
|
||
if (!provider_data) return schema; | ||
|
||
const choices = Array.from(Object.keys(provider_data).sort()).map((n) => [ | ||
n, | ||
n, | ||
]); | ||
|
||
schema.properties.columns.schema.properties.column.choices = choices; | ||
schema.properties.columns.schema.properties.column_link.choices = choices; | ||
|
||
const map_provider_url = this.props.data.popup_map_provider_url | ||
? this.props.data.popup_map_provider_url | ||
: ''; | ||
const table_provider_url = this.props.data.popup_table_provider_url | ||
? this.props.data.popup_table_provider_url | ||
: ''; | ||
|
||
const map_provider_data = | ||
this.props.providers_data && this.props.providers_data[map_provider_url] | ||
? this.props.providers_data[map_provider_url] | ||
: ''; | ||
|
||
const table_provider_data = | ||
this.props.providers_data && this.props.providers_data[table_provider_url] | ||
? this.props.providers_data[table_provider_url] | ||
: ''; | ||
|
||
const mapChoices = map_provider_data | ||
? Array.from(Object.keys(map_provider_data).sort()).map((n) => [n, n]) | ||
: []; | ||
|
||
const tableChoices = table_provider_data | ||
? Array.from(Object.keys(table_provider_data).sort()).map((n) => [n, n]) | ||
: []; | ||
schema.properties.popup_data_query.choices = choices; | ||
|
||
schema.properties.image_url.choices = choices; | ||
schema.properties.popupTitle.choices = choices; | ||
schema.properties.popupDescription.choices = choices; | ||
schema.properties.popupUrl.choices = choices; | ||
|
||
//set choices for the popup table columns | ||
schema.properties.popupTableColumns.schema.properties.column.choices = tableChoices; | ||
schema.properties.popupTableColumns.schema.properties.column_link.choices = tableChoices; | ||
|
||
//set choices for the popup map | ||
schema.properties.popupLong.choices = mapChoices; | ||
schema.properties.popupLat.choices = mapChoices; | ||
// schema.properties.popupCountryCode.choices = mapChoices; | ||
// schema.properties.popupMapLabel.choices = mapChoices; | ||
|
||
return schema; | ||
}; | ||
|
||
render() { | ||
const schema = this.getSchema(); | ||
return ( | ||
<> | ||
<SimpleDataTableView {...this.props} /> | ||
|
||
<SidebarPortal selected={this.props.selected}> | ||
<InlineForm | ||
schema={this.getSchema()} | ||
title={schema.title} | ||
onChangeField={(id, value) => { | ||
this.props.onChangeBlock(this.props.block, { | ||
...this.props.data, | ||
[id]: value, | ||
}); | ||
}} | ||
formData={this.props.data} | ||
/> | ||
</SidebarPortal> | ||
</> | ||
); | ||
} | ||
} | ||
|
||
export default compose( | ||
connectToMultipleProviders((props) => { | ||
const { | ||
provider_url, | ||
popup_map_provider_url, | ||
popup_table_provider_url, | ||
} = props.data; | ||
const providers = [ | ||
{ | ||
provider_url: provider_url, | ||
}, | ||
{ provider_url: popup_map_provider_url }, | ||
{ provider_url: popup_table_provider_url }, | ||
]; | ||
return { providers }; | ||
}), | ||
)(Edit); |
90 changes: 90 additions & 0 deletions
90
src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import React from 'react'; | ||
import { compose } from 'redux'; | ||
import { connectToProviderData } from '@eeacms/volto-datablocks/hocs'; | ||
|
||
import { Map, Marker } from 'pigeon-maps'; | ||
|
||
const getProviderDataLength = (provider_data) => { | ||
return provider_data | ||
? provider_data[Object.keys(provider_data)[0]]?.length || 0 | ||
: 0; | ||
}; | ||
|
||
const PopupMap = ({ rowData, provider_data, mapData }) => { | ||
const [mapCenter, setMapCenter] = React.useState([45, 9]); | ||
|
||
const [selectedData, setSelectedData] = React.useState([]); | ||
|
||
React.useEffect(() => { | ||
const { long, lat } = mapData; | ||
const allLong = | ||
selectedData.length > 0 ? selectedData.map((i) => i[long]) : ''; | ||
const allLat = | ||
selectedData.length > 0 ? selectedData.map((i) => i[lat]) : ''; | ||
const minLong = allLong && allLong.length > 0 ? Math.min(...allLong) : ''; | ||
const maxLong = allLong && allLong.length > 0 ? Math.max(...allLong) : ''; | ||
const minLat = allLong && allLong.length > 0 ? Math.min(...allLat) : ''; | ||
const maxLat = allLong && allLong.length > 0 ? Math.max(...allLat) : ''; | ||
|
||
const centerLat = minLat && maxLat ? (minLat + maxLat) / 2 : ''; | ||
const centerLong = minLong && maxLong ? (minLong + maxLong) / 2 : ''; | ||
|
||
if (centerLat && centerLong) { | ||
setMapCenter([centerLat, centerLong]); | ||
} | ||
}, [selectedData, mapData]); | ||
|
||
React.useEffect(() => { | ||
const provider_data_length = getProviderDataLength(provider_data); | ||
const newMapData = []; | ||
if (provider_data_length) { | ||
const keys = Object.keys(provider_data); | ||
Array(provider_data_length) | ||
.fill() | ||
.forEach((_, i) => { | ||
const obj = {}; | ||
keys.forEach((key) => { | ||
obj[key] = provider_data[key][i]; | ||
}); | ||
newMapData.push(obj); | ||
}); | ||
} | ||
setSelectedData(newMapData); | ||
/* eslint-disable-next-line */ | ||
}, [provider_data]); | ||
|
||
// const countries = | ||
// provider_data && provider_data[mapData.country] | ||
// ? provider_data[mapData.country] | ||
// : ''; | ||
|
||
//const uniqueCountries = [...new Set(countries)]; | ||
|
||
if (!provider_data) { | ||
return 'Loading..'; | ||
} | ||
return ( | ||
<div> | ||
{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> | ||
) : ( | ||
<p>No data available for map.</p> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default compose( | ||
connectToProviderData((props) => { | ||
return { | ||
provider_url: props.providerUrl, | ||
}; | ||
}), | ||
)(PopupMap); |
Oops, something went wrong.