AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add filter logic for overview page

Browse Source
This commit is contained in:
Tom Raithel
2017-02-20 20:12:34 +01:00
parent 9f33c7a8ca
commit c8ee3da561
7 changed files with 89 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
js/components/PageOverview.js
View File

@@ -2,6 +2,8 @@ import React from 'react';
import classNames from 'classnames';
import HeadlineGroup from './HeadlineGroup';
import HeroHeadline from './HeroHeadline';
import { groupByFirstLetter } from '../../common/model';
import { translate } from '../../common/config';
const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
@@ -27,7 +29,19 @@ class PageOverview extends React.Component {
return this.state.ring === ringName;
}
getFilteredAndGroupedItems() {
const groups = groupByFirstLetter(this.props.items);
const groupsFiltered = groups.map(group => ({
...group,
items: group.items.filter(item => this.state.ring === 'all' || item.ring === this.state.ring),
}));
const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
return nonEmptyGroups;
}
render() {
const groups = this.getFilteredAndGroupedItems();
return (
<div>
<HeadlineGroup>
@@ -55,28 +69,37 @@ class PageOverview extends React.Component {
</div>
<div className="letter-index">
<div className="letter-index__group">
<div className="letter-index__letter">B</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
<a className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
<div className="split split--overview">
<div className="split__left">
<div className="item__title">Bar</div>
</div>
<div className="split__right">
<div className="nav">
<div className="nav__item">Platforms and AOE Services</div>
<div className="nav__item"><span className="badge badge--assess">assess</span></div>
</div>
</div>
{
groups.map(({ letter, items }) => (
<div key={letter} className="letter-index__group">
<div className="letter-index__letter">{letter}</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
{
items.map((item) => (
<a key={item.name} className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
<div className="split split--overview">
<div className="split__left">
<div className="item__title">{item.title}</div>
</div>
<div className="split__right">
<div className="nav">
<div className="nav__item">{translate(item.quadrant)}</div>
<div className="nav__item"><span className={`badge badge--${item.ring}`}>{item.ring}</span></div>
</div>
</div>
</div>
</a>
))
}
</div>
</a>
</div>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
);