-
Bjarke Madsen authoredBjarke Madsen authored
SubOrganisation.tsx 3.08 KiB
import React, { useEffect, useMemo, useState } from 'react';
import { Table } from "react-bootstrap";
import { Organisation, FilterSelection } from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';
function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
return Array.from(data.entries()).map(([nren, nrenMap]) => {
return Array.from(nrenMap.entries()).map(([year, organizations], yearIndex) => (
<tr key={nren + year} className='dotted-border'>
<td className='pt-3 nren-column text-nowrap'>{yearIndex == 0 && nren}</td>
<td className='pt-3 year-column'>{year}</td>
<td className='pt-3 blue-column'>
<ul>
{organizations.map(organization => (
<li key={organization.name}>{organization.name} ({organization.role})</li>
))}
</ul>
</td>
</tr>
))
})
}
interface inputProps {
filterSelection: FilterSelection
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}
function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
const [organisationData, setOrganisationData] = useState<Organisation[]>([]);
const { years, nrens } = useMemo(
() => getYearsAndNrens(organisationData),
[organisationData]
);
const selectedData = (organisationData).filter(data =>
filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
);
const organisationDataset = createOrganisationDataLookup(selectedData);
useEffect(() => {
loadDataWithFilterSelectionFallback('/api/organization/sub', setOrganisationData, setFilterSelection);
}, [setFilterSelection]);
const filterNode = <Filter
filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
filterSelection={filterSelection}
setFilterSelection={setFilterSelection}
/>
return (
<DataPage title="NREN Suborganisations"
description='The table shows the NRENs suborganisations. You can select multiple years and NRENs to get a
tabular view of NRENs suborganisations over the years.'
category={Sections.Organisation} filter={filterNode}>
<Table borderless className='compendium-table'>
<thead>
<tr>
<th className='nren-column'>NREN</th>
<th className='year-column'>Year</th>
<th className='blue-column'>Suborganisation and Role</th>
</tr>
</thead>
<tbody>
{getJSXFromMap(organisationDataset)}
</tbody>
</Table>
</DataPage>
);
}
export default SubOrganisation;