mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
add select all functionality for edition list table
This commit is contained in:
parent
ef6662e859
commit
4fe5766bc4
@ -7,6 +7,7 @@ import PieceListActions from '../../actions/piece_list_actions';
|
|||||||
|
|
||||||
import AccordionListItemTable from './accordion_list_item_table';
|
import AccordionListItemTable from './accordion_list_item_table';
|
||||||
import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
|
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';
|
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||||
|
|
||||||
@ -46,6 +47,19 @@ let AccordionListItemTableEditions = React.createClass({
|
|||||||
EditionListActions.selectEdition({pieceId, editionId});
|
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() {
|
toggleTable() {
|
||||||
PieceListActions.showEditionList(this.props.parentId);
|
PieceListActions.showEditionList(this.props.parentId);
|
||||||
EditionListActions.fetchEditionList(this.props.parentId, this.state.orderBy, this.state.orderAsc);
|
EditionListActions.fetchEditionList(this.props.parentId, this.state.orderBy, this.state.orderAsc);
|
||||||
@ -56,6 +70,17 @@ let AccordionListItemTableEditions = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
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 = [
|
let columnList = [
|
||||||
new TableColumnContentModel(
|
new TableColumnContentModel(
|
||||||
(item) => {
|
(item) => {
|
||||||
@ -66,7 +91,10 @@ let AccordionListItemTableEditions = React.createClass({
|
|||||||
'selected': item.selected
|
'selected': item.selected
|
||||||
}},
|
}},
|
||||||
'',
|
'',
|
||||||
'',
|
<AccordionListItemTableSelectAllEditionsToggle
|
||||||
|
onChange={this.selectAllItems}
|
||||||
|
numOfSelectedEditions={selectedEditionsCount}
|
||||||
|
numOfAllEditions={allEditionsCount}/>,
|
||||||
TableItemCheckbox,
|
TableItemCheckbox,
|
||||||
1,
|
1,
|
||||||
false
|
false
|
||||||
|
@ -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;
|
@ -6,7 +6,10 @@ let TableHeaderItem = React.createClass({
|
|||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
columnClasses: React.PropTypes.string.isRequired,
|
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,
|
columnName: React.PropTypes.string.isRequired,
|
||||||
canBeOrdered: React.PropTypes.bool,
|
canBeOrdered: React.PropTypes.bool,
|
||||||
changeOrder: React.PropTypes.func,
|
changeOrder: React.PropTypes.func,
|
||||||
|
@ -35,6 +35,7 @@ class PieceListStore {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
console.log(this.pieceList, pieceId);
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
|
onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
|
||||||
|
@ -11,7 +11,7 @@ import { formatText } from './general_utils';
|
|||||||
export function getLangText(s, ...args) {
|
export function getLangText(s, ...args) {
|
||||||
let lang = navigator.language || navigator.userLanguage;
|
let lang = navigator.language || navigator.userLanguage;
|
||||||
// this is just for testing, as changing the navigator.language wasn't possible
|
// this is just for testing, as changing the navigator.language wasn't possible
|
||||||
lang = 'de';
|
//lang = 'de';
|
||||||
try {
|
try {
|
||||||
if(lang in languages) {
|
if(lang in languages) {
|
||||||
return formatText(languages[lang][s], args);
|
return formatText(languages[lang][s], args);
|
||||||
|
Loading…
Reference in New Issue
Block a user