const renderEntityType = (
{ entityType, ...entities }, // eslint-disable-line
) => (
<FlexContainer
key={entityType}
direction="column"
align="flexStart"
className="CondensedPrintable-Entity"
>
<Header
dark
type={HeaderType.header3}
className="CondensedPrintable-EntityTitle"
>
<FormattedMessage id={Entities[entityType].name} />
</Header>
<Table
light
condensed
className="CondensedPrintable-Table"
dataIdAccessor="key"
columns={getColumnsFromType(entityType)}
data={values(entities).sort(sortByKey('name'))}
/>
</FlexContainer>
);
export default function OverviewTable({
entities,
routeParams,
currentSector,
intl,
}) {
const pluralName = intl.formatMessage({
id: Pluralize(Entities[routeParams.entityType].name),
});
const getColumnsFromType = entityType => {
const common = [
{
accessor: 'name',
Header: 'misc.name',
Cell: (name, { link }) => (
<Link className="OverviewTable-Link" to={link}>
{name}
</Link>
),
},
];
if (Entities[entityType].topLevel) {
return [
...common,
{ accessor: 'location', Header: 'misc.location', centered: true },
{ accessor: 'children', Header: 'misc.children', centered: true },
{ accessor: 'neighbors', Header: 'misc.neighbors' },
];
}
const columns = [
...common,
{
accessor: 'parent',
Header: 'misc.parent',
Cell: (parent, { parentLink, parentType }) => (
<Link className="OverviewTable-Link" to={parentLink}>
{parent} ({intl.formatMessage({ id: parentType })})
</Link>
),
},
];
if (Entities[entityType].children.length) {
columns.splice(2, 0, {
accessor: 'children',
Header: 'misc.children',
centered: true,
});
}
if ((Entities[entityType].attributes || []).length) {
Entities[entityType].attributes.forEach(({ key, name }) => {
columns.push({ accessor: key, Header: name, translateItem: true });
});
}
if (Entities[entityType].tags) {
columns.push({ accessor: 'tags', Header: 'misc.tags' });
}
return columns;
};
if (!size(entities[routeParams.entityType])) {
return (
<EmptyOverview>
<FormattedMessage
id="misc.noEntities"
values={{
entities: pluralName,
}}
/>
</EmptyOverview>
);
}
const columns = getColumnsFromType(routeParams.entityType);
const tableData = values(entities[routeParams.entityType]).sort(
sortByKey('name'),
);
const exportTable = () => {
const table = [
columns.map(col => intl.formatMessage({ id: col.Header })),
].concat(
tableData.map(data =>
columns.map(
({ accessor, translateItem }) =>
translateItem
? intl.formatMessage({ id: data[accessor] })
: data[accessor],
),
),
);
return createCSVDownload(
generateCSV(table),
`${currentSector.name} - ${pluralName}`,
);
};
return (
<FlexContainer
flex="3"
direction="column"
align="flexStart"
className="OverviewTable"
>
<div className="OverviewTable-FlexWrap">
<FlexContainer justify="spaceBetween" align="baseline">
<Header type={HeaderType.header3}>
{intl.formatMessage({ id: Entities[routeParams.entityType].name })}
</Header>
<Button minimal onClick={exportTable}>
<FormattedMessage
id="misc.exportEntity"
values={{
entity: pluralName,
}}
/>
</Button>
</FlexContainer>
</div>
<Table
sortable
className="OverviewTable-Table"
dataIdAccessor="key"
columns={columns}
data={tableData}
/>
</FlexContainer>
);
}
const renderEntities = entities =>
map(entities, (entity, entityType) => ({ ...entity, entityType }))
.sort(sortByKey('entityType'))
.map(renderEntityType);