diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 0105ff06..1bb44c1f 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -7,7 +7,8 @@ class PieceListActions { constructor() { this.generateActions( 'updatePieceList', - 'showEditionList' + 'showEditionList', + 'closeAllEditionLists' ); } diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js index 82b9a23a..fb8f85b2 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/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, 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 f40587cb..9edc4e8a 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 @@ -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 ) ]; diff --git a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js index 280af762..4d4a5e2d 100644 --- a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js +++ b/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(); diff --git a/js/components/ascribe_table/models/table_models.js b/js/components/ascribe_table/models/table_models.js new file mode 100644 index 00000000..8bf57358 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index 9339a00a..08e4e642 100644 --- a/js/components/ascribe_table/table.js +++ b/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, diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js index 44594394..00521a40 100644 --- a/js/components/ascribe_table/table_header.js +++ b/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, diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js index dffb7fa9..0357b86b 100644 --- a/js/components/ascribe_table/table_item.js +++ b/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 diff --git a/js/components/ascribe_table/table_item_selectable.js b/js/components/ascribe_table/table_item_selectable.js index 711e42b6..f151373e 100644 --- a/js/components/ascribe_table/table_item_selectable.js +++ b/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 diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js index dcd3da0f..231bb74b 100644 --- a/js/components/ascribe_table/table_item_subtable.js +++ b/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 TableColumnContentModel('user_registered', 'User', TableItemText, 4, true), - new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true) + new ColumnModel('edition_number', 'Number', TableItemText, 2, false), + new ColumnModel('user_registered', 'User', TableItemText, 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) { diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index 62778174..33e72c67 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/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]; - this.transitionTo(column.link.to, params); + params[column.transition.queryKey] = this.props.columnContent[column.transition.valueKey]; + this.transitionTo(column.transition.to, params); + + if(column.transition.callback) { + column.transition.callback(); + } } }, diff --git a/js/models/table_column_content_model.js b/js/models/table_column_content_model.js deleted file mode 100644 index ecaa0748..00000000 --- a/js/models/table_column_content_model.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 3b3fd94e..bc1c0e5b 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -36,6 +36,13 @@ class PieceListStore { } }); } + + onCloseAllEditionLists() { + this.pieceList + .forEach((piece) => { + piece.show = false; + }); + } onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) { this.page = page; diff --git a/sass/main.scss b/sass/main.scss index 2fe60cac..cc7ae4e3 100644 --- a/sass/main.scss +++ b/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 > * {