ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

start implementing sort

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-20 19:19:57 +02:00
parent 52c980bfea
commit a4a4482d18
6 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/main.css
View File

@ -13,16 +13,20 @@
.ascribe-table-header-column { .ascribe-table-header-column {
display: table; display: table;
font-weight: bold;
height:4em; height:4em;
} }
.ascribe-table-header-column > span { .ascribe-table-header-column > span {
display:table-cell; display:table-cell;
vertical-align: middle; vertical-align: middle;
font-family: 'mercury_light'; font-family: 'Source Sans Pro';
font-weight: 600;
color: rgba(2, 182, 163, 1); color: rgba(2, 182, 163, 1);
font-size: 1.25em; font-size: 1.4em;
}
.ascribe-table-header-column > span > .glyphicon {
font-size: .6em;
} }
.ascribe-table-item:nth-child(even) { .ascribe-table-item:nth-child(even) {
@ -35,6 +39,8 @@
.ascribe-table-item-column { .ascribe-table-item-column {
display: table; display: table;
font-family: 'Source Sans Pro';
font-size: 1.2em;
height:4em; height:4em;
} }

2
index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/main.css"></link> <link rel="stylesheet" href="css/main.css"></link>
<link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.css"></link> <link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.css"></link>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,700,900"> <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
</head> </head>
<body> <body>
<div id="main" class="container"></div> <div id="main" class="container"></div>

4
js/actions/piece_list_actions.js
View File

@ -9,8 +9,8 @@ class PieceListActions {
); );
} }
fetchPieceList() { fetchList(page, pageSize, search, ordering) {
PieceListFetcher.fetch(1, 10) PieceListFetcher.fetch(page, pageSize, search, ordering)
.then((res) => { .then((res) => {
this.actions.updatePieceList(res.pieces); this.actions.updatePieceList(res.pieces);
}) })

16
js/components/piece_list.js
View File

@ -15,7 +15,7 @@ let Link = Router.Link;
let PieceList = React.createClass({ let PieceList = React.createClass({
componentDidMount() { componentDidMount() {
PieceListActions.fetchPieceList(); PieceListActions.fetchList(1, 10);
}, },
render() { render() {
@ -26,22 +26,26 @@ let PieceList = React.createClass({
'thumbnail': { 'thumbnail': {
'displayName': '', 'displayName': '',
'displayType': TableItemImg, 'displayType': TableItemImg,
'rowWidth': 2 'rowWidth': 2,
'canBeOrdered': false
}, },
'artist_name': { 'artist_name': {
'displayName': 'Artist', 'displayName': 'Artist',
'displayType': TableItemText, 'displayType': TableItemText,
'rowWidth': 5 'rowWidth': 4,
'canBeOrdered': true
}, },
'title': { 'title': {
'displayName': 'Title', 'displayName': 'Title',
'displayType': TableItemText, 'displayType': TableItemText,
'rowWidth': 5 'rowWidth': 4,
'canBeOrdered': true
} }
}; };
return ( return (
<AltContainer store={PieceListStore}> <AltContainer store={PieceListStore} actions={PieceListActions}>
<Table class="piecesTable" columnMap={columnMap} /> <Table columnMap={columnMap} />
</AltContainer> </AltContainer>
); );
} }

2
js/components/table.js
View File

@ -14,7 +14,7 @@ let Table = React.createClass({
return ( return (
<div className="ascribe-table"> <div className="ascribe-table">
<TableHeader columnMap={this.props.columnMap}/> <TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} />
{this.props.itemList.map((item, i) => { {this.props.itemList.map((item, i) => {
return ( return (
<TableItem columnMap={this.props.columnMap} columnContent={item} key={i} /> <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />

39
js/components/table_header.js
View File

@ -7,13 +7,44 @@ import GeneralUtils from '../utils/general_utils';
let TableHeader = React.createClass({ let TableHeader = React.createClass({
mixins: [TableColumnMixin], mixins: [TableColumnMixin],
propTypes: { propTypes: {
columnMap: React.PropTypes.object.isRequired columnMap: React.PropTypes.object.isRequired,
itemList: React.PropTypes.array.isRequired,
fetchList: React.PropTypes.func.isRequired
},
sortIndex(i) {
this.props.fetchList(1, 10, null, '-' + Object.keys(this.props.columnMap)[i]);
}, },
render() { render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap); let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
let calcHeaderText = (val, i, columnClass) => {
let s = "";
if(columnMapValuesList[i].canBeOrdered) {
let boundClick = this.sortIndex.bind(this, i)
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
<span>
<span className="glyphicon glyphicon-chevron-down"></span>
{val.displayName}
</span>
</div>
);
} else {
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
<span>
{val.displayName}
</span>
</div>
);
}
};
return ( return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row"> <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
<div className="row"> <div className="row">
@ -22,10 +53,8 @@ let TableHeader = React.createClass({
let columnClass = this.calcColumnClasses(this.props.columnMap, i); let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return ( return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}> <div key={i}>
<span> {calcHeaderText(val, i, columnClass)}
{val.displayName}
</span>
</div> </div>
); );
})} })}