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

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

This commit is contained in:
Tim Daubenschütz 2015-06-04 13:48:07 +02:00
parent aaf393d48a
commit a93634f010
14 changed files with 86 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/actions/piece_list_actions.js
View File

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

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

@ -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,

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

@ -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
)
];

4
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
View File

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

34
js/components/ascribe_table/models/table_models.js Normal file
View File

@ -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;
}
}

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

@ -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,

4
js/components/ascribe_table/table_header.js
View File

@ -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,

4
js/components/ascribe_table/table_item.js
View File

@ -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

4
js/components/ascribe_table/table_item_selectable.js
View File

@ -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

10
js/components/ascribe_table/table_item_subtable.js
View File

@ -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) {

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

@ -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();
}
}
},

14
js/models/table_column_content_model.js
View File

@ -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;

7
js/stores/piece_list_store.js
View File

@ -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;

4
sass/main.scss
View File

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