wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-10 12:43:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding initial stream list.

Browse Source
This commit is contained in:
David Jay
2016-12-14 16:01:43 -05:00
parent 7c6299243f
commit 65b308a061
2 changed files with 60 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-admin/src/containers/Streams/Streams.css
+1 -1
View File
@@ -8,7 +8,7 @@
}
.mainContent {
width: calc(70% - 300px)
width: calc(90% - 200px);
}
.searchIcon {
client/coral-admin/src/containers/Streams/Streams.js
+59 -30
View File
@@ -5,7 +5,9 @@ import translations from '../../translations.json';
import {
RadioGroup,
Radio,
Icon
Icon,
DataTable,
TableHeader
} from 'react-mdl';
class Streams extends Component {
@@ -20,42 +22,69 @@ class Streams extends Component {
this.setState({[setting]: e.target.value});
}
renderDate = (date) => {
const d = new Date(date);
return `${d.getMonth()}/${d.getDate()}/${d.getYear()}`;
}
renderStatus = (status) => {
return <div>{status}</div>;
}
render () {
const {searchTerm, sortBy, statusFilter} = this.state;
return <div className={styles.container}>
<div className={styles.leftColumn}>
<div className={styles.searchBox}>
<Icon name='search' className={styles.searchIcon}/>
<input
type='text'
value={searchTerm}
className={styles.searchBoxInput}
onChange={this.onSettingChange('searchTerm')}
placeholder={lang.t('streams.search')}/>
</div>
<div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
<div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
<RadioGroup
name='status filter'
value={statusFilter}
childContainer='div'
onChange={this.onSettingChange('statusFilter')}>
<Radio value='all'>{lang.t('streams.all')}</Radio>
<Radio value='open'>{lang.t('streams.open')}</Radio>
<Radio value='closed'>{lang.t('streams.closed')}</Radio>
</RadioGroup>
<div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
<RadioGroup
name='sort by'
value={sortBy}
childContainer='div'
onChange={this.onSettingChange('sortBy')}>
<Radio value='newest'>{lang.t('streams.newest')}</Radio>
<Radio value='oldest'>{lang.t('streams.oldest')}</Radio>
</RadioGroup>
<div className={styles.searchBox}>
<Icon name='search' className={styles.searchIcon}/>
<input
type='text'
value={searchTerm}
className={styles.searchBoxInput}
onChange={this.onSettingChange('searchTerm')}
placeholder={lang.t('streams.search')}/>
</div>
<div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
<div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
<RadioGroup
name='status filter'
value={statusFilter}
childContainer='div'
onChange={this.onSettingChange('statusFilter')}>
<Radio value='all'>{lang.t('streams.all')}</Radio>
<Radio value='open'>{lang.t('streams.open')}</Radio>
<Radio value='closed'>{lang.t('streams.closed')}</Radio>
</RadioGroup>
<div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
<RadioGroup
name='sort by'
value={sortBy}
childContainer='div'
onChange={this.onSettingChange('sortBy')}>
<Radio value='newest'>{lang.t('streams.newest')}</Radio>
<Radio value='oldest'>{lang.t('streams.oldest')}</Radio>
</RadioGroup>
</div>
<div className={styles.mainContent}>
<DataTable
rows={[
{article: 'Acrylic (Transparent)', pubdate: 25, status: 2.90},
{article: 'Plywood (Birch)', pubdate: 50, status: 1.25},
{article: 'Laminate (Gold on Blue)', pubdate: 10, status: 2.35}
]}
>
<TableHeader name="article">{lang.t('streams.article')}</TableHeader>
<TableHeader name="pubdate" cellFormatter={this.renderDate}>
{lang.t('streams.pubdate')}
</TableHeader>
<TableHeader name="status" cellFormatter={this.renderStatus}>
{lang.t('streams.status')}
</TableHeader>
</DataTable>
</div>
</div>;
}