From 4fe5766bc453d0ffc4f3ad969c2967dc3bdb9b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Jun 2015 10:11:18 +0200
Subject: [PATCH] add select all functionality for edition list table

---
 .../accordion_list_item_table_editions.js     | 30 ++++++++++++++++++-
 ...t_item_table_select_all_editions_toggle.js | 21 +++++++++++++
 .../ascribe_table/table_header_item.js        |  5 +++-
 js/stores/piece_list_store.js                 |  1 +
 js/utils/lang_utils.js                        |  2 +-
 5 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index afe9eb5d..97bc7659 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -7,6 +7,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';
 
@@ -46,6 +47,19 @@ 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, this.state.orderBy, this.state.orderAsc);
@@ -56,6 +70,17 @@ let AccordionListItemTableEditions = React.createClass({
     },
 
     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) => {
@@ -66,7 +91,10 @@ let AccordionListItemTableEditions = React.createClass({
                         'selected': item.selected
                     }},
                     '',
-                    '',
+                    <AccordionListItemTableSelectAllEditionsToggle
+                        onChange={this.selectAllItems}
+                        numOfSelectedEditions={selectedEditionsCount}
+                        numOfAllEditions={allEditionsCount}/>,
                     TableItemCheckbox,
                     1,
                     false
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js b/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js
new file mode 100644
index 00000000..37af9edb
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js
@@ -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;
\ No newline at end of file
diff --git a/js/components/ascribe_table/table_header_item.js b/js/components/ascribe_table/table_header_item.js
index dce2261e..598edada 100644
--- a/js/components/ascribe_table/table_header_item.js
+++ b/js/components/ascribe_table/table_header_item.js
@@ -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,
diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js
index 7ca96c87..b70f8fc3 100644
--- a/js/stores/piece_list_store.js
+++ b/js/stores/piece_list_store.js
@@ -35,6 +35,7 @@ class PieceListStore {
                     }
                 }
             });
+        console.log(this.pieceList, pieceId);
     }
 
     onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
diff --git a/js/utils/lang_utils.js b/js/utils/lang_utils.js
index 7eb4b6f3..d1ea5fd5 100644
--- a/js/utils/lang_utils.js
+++ b/js/utils/lang_utils.js
@@ -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);