ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into piece-detail-mediaplayer 

Conflicts:
	js/components/ascribe_media/resource_viewer.js
This commit is contained in:
vrde 2015-06-04 14:12:29 +02:00
parent 641e8ac82d 302f05b68e
commit d44cf295f0
13 changed files with 148 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/actions/edition_list_actions.js
View File

@ -11,13 +11,15 @@ class EditionListActions {
);
}
fetchEditionList(pieceId) {
fetchEditionList(pieceId, orderBy, orderAsc) {
EditionListFetcher
.fetch(pieceId)
.fetch(pieceId, orderBy, orderAsc)
.then((res) => {
this.actions.updateEditionList({
'editionListOfPiece': res.editions,
pieceId
pieceId,
orderBy,
orderAsc
});
})
.catch((err) => {

3
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -1,9 +1,12 @@
import React from 'react';
import Router from 'react-router';
import AccordionListItemTable from './accordion_list_item_table';
import { getLangText } from '../../utils/lang_utils';
let Link = Router.Link;
let AccordionListItem = React.createClass({
propTypes: {
className: React.PropTypes.string,

10
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -14,7 +14,10 @@ let AccordionListItemTable = React.createClass({
itemList: React.PropTypes.array,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
numOfTableItems: React.PropTypes.number,
show: React.PropTypes.bool
show: React.PropTypes.bool,
changeOrder: React.PropTypes.func,
orderBy: React.PropTypes.string,
orderAsc: React.PropTypes.bool
},
render() {
@ -23,7 +26,10 @@ let AccordionListItemTable = React.createClass({
<div className={this.props.className}>
<Table
columnList={this.props.columnList}
itemList={this.props.itemList}>
itemList={this.props.itemList}
changeOrder={this.props.changeOrder}
orderBy={this.props.orderBy}
orderAsc={this.props.orderAsc}>
{this.props.itemList.map((item, i) => {
return (
<TableItem

55
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import Router from 'react-router';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
@ -7,6 +8,7 @@ import PieceListActions from '../../actions/piece_list_actions';
import AccordionListItemTable from './accordion_list_item_table';
import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
import AccordionListItemTableSelectAllEditionsToggle from './accordion_list_item_table_select_all_editions_toggle';
import TableColumnContentModel from '../../models/table_column_content_model';
@ -17,6 +19,8 @@ import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
import { getLangText } from '../../utils/lang_utils';
let Link = Router.Link;
let AccordionListItemTableEditions = React.createClass({
propTypes: {
@ -46,12 +50,40 @@ let AccordionListItemTableEditions = React.createClass({
EditionListActions.selectEdition({pieceId, editionId});
},
selectAllItems() {
this.state.editionList[this.props.parentId]
.forEach((edition) => {
this.selectItem(this.props.parentId, edition.id);
});
},
filterSelectedEditions() {
let selectedEditions = this.state.editionList[this.props.parentId]
.filter((edition) => edition.selected);
return selectedEditions;
},
toggleTable() {
PieceListActions.showEditionList(this.props.parentId);
EditionListActions.fetchEditionList(this.props.parentId);
EditionListActions.fetchEditionList(this.props.parentId, this.state.orderBy, this.state.orderAsc);
},
changeEditionListOrder(orderBy, orderAsc) {
EditionListActions.fetchEditionList(this.props.parentId, orderBy, orderAsc);
},
render() {
let selectedEditionsCount = 0;
let allEditionsCount = 0;
// here we need to check if all editions of a specific
// piece are already defined. Otherwise .length will throw an error and we'll not
// be notified about it.
if(this.state.editionList[this.props.parentId]) {
selectedEditionsCount = this.filterSelectedEditions().length;
allEditionsCount = this.state.editionList[this.props.parentId].length;
}
let columnList = [
new TableColumnContentModel(
(item) => {
@ -62,7 +94,10 @@ let AccordionListItemTableEditions = React.createClass({
'selected': item.selected
}},
'',
'',
<AccordionListItemTableSelectAllEditionsToggle
onChange={this.selectAllItems}
numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>,
TableItemCheckbox,
1,
false
@ -72,11 +107,12 @@ let AccordionListItemTableEditions = React.createClass({
return {
'content': item.edition_number
}},
'num_editions',
'edition_number',
'#',
TableItemText,
1,
false
true,
{to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
),
new TableColumnContentModel(
(item) => {
@ -87,7 +123,8 @@ let AccordionListItemTableEditions = React.createClass({
getLangText('Bitcoin Address'),
TableItemText,
5,
false
true,
{to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
),
new TableColumnContentModel(
(item) => {
@ -98,7 +135,8 @@ let AccordionListItemTableEditions = React.createClass({
getLangText('Actions'),
TableItemAclFiltered,
4,
false
false,
{to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
)
];
@ -110,7 +148,10 @@ let AccordionListItemTableEditions = React.createClass({
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}
numOfTableItems={this.props.numOfEditions}
show={this.props.show}>
show={this.props.show}
orderBy={this.state.orderBy}
orderAsc={this.state.orderAsc}
changeOrder={this.changeEditionListOrder}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}

21
js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
let AccordionListItemTableSelectAllEditionsToggle = React.createClass({
propTypes: {
onChange: React.PropTypes.func.isRequired,
numOfSelectedEditions: React.PropTypes.number.isRequired,
numOfAllEditions: React.PropTypes.number.isRequired
},
render() {
return (
<input type="checkbox"
onChange={this.props.onChange}
checked={this.props.numOfAllEditions === this.props.numOfSelectedEditions} />
);
}
});
export default AccordionListItemTableSelectAllEditionsToggle;

13
js/components/ascribe_table/table.js
View File

@ -9,7 +9,9 @@ let Table = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
changeOrder: React.PropTypes.func
changeOrder: React.PropTypes.func,
orderBy: React.PropTypes.string,
orderAsc: React.PropTypes.bool,
},
renderChildren() {
@ -27,11 +29,10 @@ let Table = React.createClass({
return (
<div className="ascribe-table">
<TableHeader
columnList={this.props.columnList}
itemList={this.props.itemList}
fetchList={this.props.fetchList}
changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc}
columnList={this.props.columnList}
itemList={this.props.itemList}
changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy} />
<div className="row">
{this.renderChildren()}

5
js/components/ascribe_table/table_header_item.js
View File

@ -6,7 +6,10 @@ let TableHeaderItem = React.createClass({
propTypes: {
columnClasses: React.PropTypes.string.isRequired,
displayName: React.PropTypes.string.isRequired,
displayName: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]).isRequired,
columnName: React.PropTypes.string.isRequired,
canBeOrdered: React.PropTypes.bool,
changeOrder: React.PropTypes.func,

24
js/components/ascribe_table/table_item_wrapper.js
View File

@ -1,16 +1,31 @@
import React from 'react';
import Router from 'react-router';
import TableColumnContentModel from '../../models/table_column_content_model';
import TableColumnMixin from '../../mixins/table_column_mixin';
let TableItemWrapper = React.createClass({
mixins: [TableColumnMixin],
mixins: [TableColumnMixin, Router.Navigation],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object,
columnWidth: React.PropTypes.number.isRequired
},
/**
* If a link is defined in columnContent, then we can use
* Router.Navigation.transitionTo to redirect the user
* programmatically
*/
transition(column) {
if(column.link) {
let params = {};
params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey];
this.transitionTo(column.link.to, params);
}
},
render() {
return (
<div>
@ -21,8 +36,13 @@ let TableItemWrapper = React.createClass({
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
let transition = this.transition.bind(this, column);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<div
className={columnClass + ' ascribe-table-item-column'}
key={i}
onClick={transition}>
<TypeElement {...typeElementProps} />
</div>
);

7
js/fetchers/edition_list_fetcher.js
View File

@ -1,5 +1,7 @@
import fetch from '../utils/fetch';
import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
import AppConstants from '../constants/application_constants';
@ -7,8 +9,9 @@ let EditionListFetcher = {
/**
* Fetches a list of editions from the API.
*/
fetch(pieceId) {
return fetch.get('editions_list', { 'piece_id': pieceId });
fetch(pieceId, orderBy, orderAsc) {
let ordering = generateOrderingQueryParams(orderBy, orderAsc);
return fetch.get('editions_list', { 'piece_id': pieceId, ordering });
}
};

3
js/models/table_column_content_model.js
View File

@ -1,12 +1,13 @@
class TableColumnContentModel {
// ToDo: Add validation for all passed-in parameters
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, link) {
this.transformFn = transformFn;
this.columnName = columnName;
this.displayName = displayName;
this.displayType = displayType;
this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered;
this.link = link;
}
}

6
js/stores/edition_list_store.js
View File

@ -6,10 +6,12 @@ import EditionsListActions from '../actions/edition_list_actions';
class EditionListStore {
constructor() {
this.editionList = {};
this.orderBy = 'edition_number';
this.orderAsc = true;
this.bindActions(EditionsListActions);
}
onUpdateEditionList({pieceId, editionListOfPiece}) {
onUpdateEditionList({pieceId, editionListOfPiece, orderBy, orderAsc}) {
if(this.editionList[pieceId]) {
this.editionList[pieceId].forEach((edition, i) => {
// This uses the index of the new editionList for determining the edition.
@ -18,6 +20,8 @@ class EditionListStore {
})
}
this.editionList[pieceId] = editionListOfPiece;
this.orderBy = orderBy;
this.orderAsc = orderAsc;
}
onSelectEdition({pieceId, editionId}) {

19
js/stores/piece_list_store.js
View File

@ -36,15 +36,30 @@ class PieceListStore {
}
});
}
onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
this.page = page;
this.pageSize = pageSize;
this.search = search;
this.orderAsc = orderAsc;
this.orderBy = orderBy;
this.pieceList = pieceList;
this.pieceListCount = pieceListCount;
/**
* The piece list store currently stores the open/close state of a piece list item.
*
* Once a new page is requested, this.pieceList will be overwritten, which means that the
* open/close state of a specific list item will be thrown away.
*
* This means that when opening an editionListTable on a piece, and continuing
* clicking next or back in the pagination, the editionListTable will return to its
* default value, which is "close".
*
* We did not implement this, as we're going to add pagination to pieceList at some
* point anyway. Then, this problem is automatically resolved.
*
*/
this.pieceList = pieceList;
}
};

2
js/utils/lang_utils.js
View File

@ -11,7 +11,7 @@ import { formatText } from './general_utils';
export function getLangText(s, ...args) {
let lang = navigator.language || navigator.userLanguage;
// this is just for testing, as changing the navigator.language wasn't possible
lang = 'de';
//lang = 'de';
try {
if(lang in languages) {
return formatText(languages[lang][s], args);