add transition model and callback for closing the edition list of a piece after changing route

js/actions/piece_list_actions.js

@@ -7,7 +7,8 @@ class PieceListActions {
     constructor() {
         this.generateActions(
             'updatePieceList',
-            'showEditionList'
+            'showEditionList',
+            'closeAllEditionLists'
         );
     }
 

js/components/ascribe_accordion_list/accordion_list_item_table.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Table from '../ascribe_table/table';
 import TableItem from '../ascribe_table/table_item';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from '../ascribe_table/models/table_models';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -12,7 +12,7 @@ let AccordionListItemTable = React.createClass({
         className: React.PropTypes.string,
         parentId: React.PropTypes.number,
         itemList: React.PropTypes.array,
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         numOfTableItems: React.PropTypes.number,
         show: React.PropTypes.bool,
         changeOrder: React.PropTypes.func,

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -10,7 +10,7 @@ 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';
+import { ColumnModel, TransitionModel } from '../ascribe_table/models/table_models';
 
 import TableItemImg from '../ascribe_table/table_item_img';
 import TableItemText from '../ascribe_table/table_item_text';
@@ -84,8 +84,10 @@ let AccordionListItemTableEditions = React.createClass({
             allEditionsCount = this.state.editionList[this.props.parentId].length;
         }
 
+        let transition = new TransitionModel('edition', 'editionId', 'bitcoin_id', PieceListActions.closeAllEditionLists);
+
         let columnList = [
-            new TableColumnContentModel(
+            new ColumnModel(
                 (item) => {
                     return {
                         'editionId': item.id,
@@ -102,7 +104,7 @@ let AccordionListItemTableEditions = React.createClass({
                     1,
                     false
             ),
-            new TableColumnContentModel(
+            new ColumnModel(
                 (item) => { 
                     return {
                         'content': item.edition_number
@@ -112,9 +114,9 @@ let AccordionListItemTableEditions = React.createClass({
                     TableItemText,
                     1,
                     true,
-                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
+                    transition
             ),
-            new TableColumnContentModel(
+            new ColumnModel(
                 (item) => {
                     return {
                         'content': item.bitcoin_id
@@ -124,9 +126,9 @@ let AccordionListItemTableEditions = React.createClass({
                     TableItemText,
                     5,
                     true,
-                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
+                    transition
             ),
-            new TableColumnContentModel(
+            new ColumnModel(
                 (item) => { 
                     return {
                         'content': item.acl
@@ -136,7 +138,7 @@ let AccordionListItemTableEditions = React.createClass({
                     TableItemAclFiltered,
                     4,
                     false,
-                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
+                    transition
             )
         ];
 

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -76,6 +76,10 @@ let PieceListBulkModal = React.createClass({
         EditionListActions.clearAllEditionSelections();
     },
 
+    handleSuccess() {
+
+    },
+
     render() {
         let availableAcls = this.getAvailableAcls();
         let selectedEditions = this.fetchSelectedEditionList();

js/components/ascribe_table/models/table_models.js

@@ -0,0 +1,34 @@
+export class ColumnModel {
+    // ToDo: Add validation for all passed-in parameters
+    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition) {
+        this.transformFn = transformFn;
+        this.columnName = columnName;
+        this.displayName = displayName;
+        this.displayType = displayType;
+        this.rowWidth = rowWidth;
+        this.canBeOrdered = canBeOrdered;
+        this.transition = transition;
+    }
+}
+
+/**
+ * If a user opens an editionList of a piece and clicks on a specific edition to go to the 
+ * piece detail page, all previously opened editionLists are still saved as show = true in the
+ * pieceList store.
+ *
+ * So if the user now comes back to this view the old data will still be in this store,
+ * since the browser wasn't able to load the new data (only containing show = undefined = false).
+ *
+ * This means that without closing all pieces after a transition, we'll get this flickering of editionLists.
+ *
+ * Since react-router does not implement a callback function for its transitionTo method, we have to do it
+ * our selfes, using this TransitionModel.
+ */
+export class TransitionModel {
+    constructor(to, queryKey, valueKey, callback) {
+        this.to = to;
+        this.queryKey = queryKey;
+        this.valueKey = valueKey;
+        this.callback = callback;
+    }
+}

js/components/ascribe_table/table.js

@@ -2,13 +2,13 @@ import React from 'react';
 import ReactAddons from 'react/addons';
 
 import TableHeader from './table_header';
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 
 
 let Table = React.createClass({
     
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         changeOrder: React.PropTypes.func,
         orderBy: React.PropTypes.string,
         orderAsc: React.PropTypes.bool,

js/components/ascribe_table/table_header.js

@@ -3,13 +3,13 @@ import React from 'react';
 import TableColumnMixin from '../../mixins/table_column_mixin';
 import TableHeaderItem from './table_header_item';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 
 
 let TableHeader = React.createClass({
     mixins: [TableColumnMixin],
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         itemList: React.PropTypes.array.isRequired,
         changeOrder: React.PropTypes.func,
         orderAsc: React.PropTypes.bool,

js/components/ascribe_table/table_item.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 
 import TableItemWrapper from './table_item_wrapper';
 
@@ -8,7 +8,7 @@ import TableItemWrapper from './table_item_wrapper';
 let TableItem = React.createClass({
 
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         columnContent: React.PropTypes.object,
         onClick: React.PropTypes.func, // See: https://facebook.github.io/react/tips/expose-component-functions.html
         className: React.PropTypes.string

js/components/ascribe_table/table_item_selectable.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 
 import TableItem from './table_item';
 
@@ -9,7 +9,7 @@ import TableItem from './table_item';
 let TableItemSelectable = React.createClass({
 
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         columnContent: React.PropTypes.object,
         parentId: React.PropTypes.number,
         className: React.PropTypes.string

js/components/ascribe_table/table_item_subtable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
@@ -16,7 +16,7 @@ import TableItemSubtableButton from './table_item_subtable_button';
 
 let TableItemSubtable = React.createClass({
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         columnContent: React.PropTypes.object
     },
 
@@ -61,9 +61,9 @@ let TableItemSubtable = React.createClass({
         let renderEditionListTable = () => {
 
             let columnList = [
-                new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
+                new ColumnModel('edition_number', 'Number', TableItemText, 2, false),
-                new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
+                new ColumnModel('user_registered', 'User', TableItemText, 4, true),
-                new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
+                new ColumnModel('acl', 'Actions', TableItemAcl, 4, true)
             ];
 
             if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {

js/components/ascribe_table/table_item_wrapper.js

@@ -1,27 +1,31 @@
 import React from 'react';
 import Router from 'react-router';
 
-import TableColumnContentModel from '../../models/table_column_content_model';
+import { ColumnModel } from './models/table_models';
 import TableColumnMixin from '../../mixins/table_column_mixin';
 
 let TableItemWrapper = React.createClass({
     mixins: [TableColumnMixin, Router.Navigation],
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
         columnContent: React.PropTypes.object,
         columnWidth: React.PropTypes.number.isRequired
     },
 
     /**
-     * If a link is defined in columnContent, then we can use
+     * If a transition is defined in columnContent, then we can use
      * Router.Navigation.transitionTo to redirect the user
      * programmatically
      */
     transition(column) {
-        if(column.link) {
+        if(column.transition) {
             let params = {};
-            params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey];
+            params[column.transition.queryKey] = this.props.columnContent[column.transition.valueKey];
-            this.transitionTo(column.link.to, params);
+            this.transitionTo(column.transition.to, params);
+
+            if(column.transition.callback) {
+                column.transition.callback();
+            }
         }
     },
 

js/models/table_column_content_model.js

@@ -1,14 +0,0 @@
-class TableColumnContentModel {
-    // ToDo: Add validation for all passed-in parameters
-    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;
-    }
-}
-
-export default TableColumnContentModel;

js/stores/piece_list_store.js

@@ -37,6 +37,13 @@ class PieceListStore {
             });
     }
 
+    onCloseAllEditionLists() {
+        this.pieceList
+            .forEach((piece) => {
+                piece.show = false;
+            });
+    }
+    
     onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
         this.page = page;
         this.pageSize = pageSize;

sass/main.scss

@@ -73,6 +73,10 @@
     font-family: 'Source Sans Pro';
     font-size: .8em;
     height:3em;
+
+    &:not(:first-child) {
+        cursor: pointer;
+    }
 }
 
 .ascribe-table-item-column > * {