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

Add support for changed items

Browse Source
This commit is contained in:
Tom Raithel
2017-11-24 16:09:22 +01:00
parent a75092ccfc
commit 784a5d1be6
8 changed files with 268 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
js/components/PageOverview.js
View File

@@ -7,7 +7,7 @@ import Link from './Link';
import Search from './Search';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import IsNew from './IsNew';
import Tag from './Tag';
import { groupByFirstLetter } from '../../common/model';
import { translate } from '../../common/config';
@@ -15,11 +15,15 @@ const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
const containsSearchTerm = (text = '', term = '') => {
// TODO search refinement
return text.trim().toLocaleLowerCase().indexOf(term.trim().toLocaleLowerCase()) !== -1;
}
return (
text
.trim()
.toLocaleLowerCase()
.indexOf(term.trim().toLocaleLowerCase()) !== -1
);
};
class PageOverview extends React.Component {
constructor(props, ...args) {
super(props, ...args);
this.state = {
@@ -37,30 +41,32 @@ class PageOverview extends React.Component {
}
}
handleRingClick = (ring) => (e) => {
handleRingClick = ring => e => {
e.preventDefault();
this.setState({
ring,
});
}
};
isRingActive(ringName) {
return this.state.ring === ringName;
}
itemMatchesRing = (item) => {
itemMatchesRing = item => {
return this.state.ring === 'all' || item.ring === this.state.ring;
};
itemMatchesSearch = (item) => {
return this.state.search.trim() === '' ||
itemMatchesSearch = item => {
return (
this.state.search.trim() === '' ||
containsSearchTerm(item.title, this.state.search) ||
containsSearchTerm(item.body, this.state.search) ||
containsSearchTerm(item.info, this.state.search);
containsSearchTerm(item.info, this.state.search)
);
};
isItemVisible = (item) => {
isItemVisible = item => {
return this.itemMatchesRing(item) && this.itemMatchesSearch(item);
};
@@ -70,11 +76,13 @@ class PageOverview extends React.Component {
...group,
items: group.items.filter(this.isItemVisible),
}));
const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
const nonEmptyGroups = groupsFiltered.filter(
group => group.items.length > 0,
);
return nonEmptyGroups;
}
handleSearchTermChange = (value) => {
handleSearchTermChange = value => {
this.setState({
search: value,
});
@@ -92,69 +100,67 @@ class PageOverview extends React.Component {
<div className="filter">
<div className="split split--filter">
<div className="split__left">
<Search onChange={this.handleSearchTermChange} value={this.state.search} />
<Search
onChange={this.handleSearchTermChange}
value={this.state.search}
/>
</div>
<div className="split__right">
<div className="nav">
{
rings.map(ringName => (
<div className="nav__item" key={ringName}>
<Badge
big
onClick={this.handleRingClick(ringName)}
type={this.isRingActive(ringName) ? ringName : 'empty' }
>
{ringName}
</Badge>
</div>
))
}
{rings.map(ringName => (
<div className="nav__item" key={ringName}>
<Badge
big
onClick={this.handleRingClick(ringName)}
type={this.isRingActive(ringName) ? ringName : 'empty'}
>
{ringName}
</Badge>
</div>
))}
</div>
</div>
</div>
</div>
<div className="letter-index">
{
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) => (
<Link
key={item.name}
className="item item--big item--no-leading-border item--no-trailing-border"
pageName={`${item.quadrant}/${item.name}`}
>
<div className="split split--overview">
<div className="split__left">
<div className="item__title">
{item.title}
<IsNew item={item} />
</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 => (
<Link
key={item.name}
className="item item--big item--no-leading-border item--no-trailing-border"
pageName={`${item.quadrant}/${item.name}`}
>
<div className="split split--overview">
<div className="split__left">
<div className="item__title">
{item.title}
<Tag item={item} />
</div>
</div>
<div className="split__right">
<div className="nav nav--relations">
<div className="nav__item">
{translate(item.quadrant)}
</div>
<div className="split__right">
<div className="nav nav--relations">
<div className="nav__item">{translate(item.quadrant)}</div>
<div className="nav__item">
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
<div className="nav__item">
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
</Link>
))
}
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
))
}
</div>
))}
</div>
</Fadeable>
);