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

Merge pull request #83 from ascribe/fix-toolbar-widget-warnings 

Small fixes for Toolbars and Tables
This commit is contained in:
Brett Sun 2016-01-11 17:49:24 +01:00
parent 8dfa257317 0e67784e93
commit e8ef33571f
7 changed files with 123 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,10 @@ let AccordionListItemTableEditions = React.createClass({
editionList.orderBy, editionList.orderAsc, editionList.filterBy);
},
render() {
const { className, parentId } = this.props;
const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
const editionsForPiece = editionList[parentId];
let selectedEditionsCount = 0;
let allEditionsCount = 0;
let orderBy;
@ -89,95 +93,97 @@ let AccordionListItemTableEditions = React.createClass({
let show = false;
let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
// 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(editionsForPiece) {
if (editionsForPiece) {
selectedEditionsCount = this.filterSelectedEditions().length;
allEditionsCount = editionsForPiece.length;
orderBy = editionsForPiece.orderBy;
orderAsc = editionsForPiece.orderAsc;
}
if(this.props.parentId in this.state.isEditionListOpenForPieceId) {
show = this.state.isEditionListOpenForPieceId[this.props.parentId].show;
if (parentId in isEditionListOpenForPieceId) {
show = isEditionListOpenForPieceId[parentId].show;
}
// if the number of editions in the array is equal to the maximum number of editions,
// then the "Show me more" dialog should be hidden from the user's view
if(editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
if (editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
showExpandOption = true;
}
let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() );
const transition = new TransitionModel({
to: 'editions',
queryKey: 'editionId',
valueKey: 'bitcoin_id',
callback: (e) => e.stopPropagation()
});
let columnList = [
new ColumnModel(
(item) => {
const columnList = [
new ColumnModel({
transformFn: (item) => {
return {
'editionId': item.id,
'pieceId': this.props.parentId,
'pieceId': parentId,
'selectItem': this.selectItem,
'selected': item.selected
}; },
'',
};
},
displayElement: (
<AccordionListItemTableSelectAllEditionsCheckbox
onChange={this.toggleAllItems}
numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>,
TableItemCheckbox,
1,
false
),
new ColumnModel(
(item) => {
numOfAllEditions={allEditionsCount}/>
),
displayType: TableItemCheckbox,
rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
}; },
'edition_number',
getLangText('Edition'),
TableItemText,
1,
false,
transition
),
new ColumnModel(
(item) => {
};
},
columnName: 'edition_number',
displayElement: getLangText('Edition'),
displayType: TableItemText,
rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': item.bitcoin_id
}; },
'bitcoin_id',
getLangText('ID'),
TableItemText,
5,
false,
transition,
'hidden-xs visible-sm visible-md visible-lg'
),
new ColumnModel(
(item) => {
let content = item.acl;
};
},
columnName: 'bitcoin_id',
displayElement: getLangText('ID'),
displayType: TableItemText,
rowWidth: 5,
className: 'hidden-xs visible-sm visible-md visible-lg'
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': content,
'content': item.acl,
'notifications': item.notifications
}; },
'acl',
getLangText('Actions'),
TableItemAclFiltered,
4,
false,
transition
)
};
},
columnName: 'acl',
displayElement: getLangText('Actions'),
displayType: TableItemAclFiltered,
rowWidth: 4
})
];
if(show && editionsForPiece && editionsForPiece.length > 0) {
if (show && editionsForPiece && editionsForPiece.length) {
return (
<div className={this.props.className}>
<div className={className}>
<AccordionListItemTable
parentId={this.props.parentId}
parentId={parentId}
itemList={editionsForPiece}
columnList={columnList}
show={show}
@ -188,7 +194,14 @@ let AccordionListItemTableEditions = React.createClass({
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions}
message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} />
message={show && showExpandOption ? (
<span>
{showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
: <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
{getLangText('Show me more')}
</span>
) : null
} />
</div>
);
} else {

24
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -91,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({
label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => {
return (
<div>
<li
style={{'textAlign': 'center'}}
key={i}>
<div key={label}>
<li style={{'textAlign': 'center'}}>
<em>{label}:</em>
</li>
{items.map((param, j) => {
{items.map((paramItem) => {
let itemLabel;
let param;
// As can be seen in the PropTypes, a param can either
// be a string or an object of the shape:
@ -108,22 +108,22 @@ let PieceListToolbarFilterWidget = React.createClass({
// }
//
// This is why we need to distinguish between both here.
if (typeof param !== 'string') {
label = param.label;
param = param.key;
if (typeof paramItem !== 'string') {
param = paramItem.key;
itemLabel = paramItem.label;
} else {
param = param;
label = param.split('acl_')[1].replace(/_/g, ' ');
param = paramItem;
itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
}
return (
<li
key={j}
key={itemLabel}
onClick={this.filterBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(label)}
{getLangText(itemLabel)}
</span>
<input
readOnly

32
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -63,22 +63,20 @@ let PieceListToolbarOrderWidget = React.createClass({
</li>
{this.props.orderParams.map((param) => {
return (
<div>
<li
key={param}
onClick={this.orderBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(param.replace('_', ' '))}
</span>
<input
readOnly
type="radio"
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>
</div>
<li
key={param}
onClick={this.orderBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(param.replace('_', ' '))}
</span>
<input
readOnly
type="radio"
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>
);
})}
</DropdownButton>
@ -89,4 +87,4 @@ let PieceListToolbarOrderWidget = React.createClass({
}
});
export default PieceListToolbarOrderWidget;
export default PieceListToolbarOrderWidget;

10
js/components/ascribe_table/models/table_models.js
View File

@ -2,15 +2,15 @@
export class ColumnModel {
// ToDo: Add validation for all passed-in parameters
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) {
constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) {
this.transformFn = transformFn;
this.columnName = columnName;
this.displayName = displayName;
this.displayElement = displayElement;
this.displayType = displayType;
this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered;
this.transition = transition;
this.className = className ? className : '';
this.className = className;
}
}
@ -28,7 +28,7 @@ export class ColumnModel {
* our selfes, using this TransitionModel.
*/
export class TransitionModel {
constructor(to, queryKey, valueKey, callback) {
constructor({ to, queryKey, valueKey, callback }) {
this.to = to;
this.queryKey = queryKey;
this.valueKey = valueKey;
@ -38,4 +38,4 @@ export class TransitionModel {
toReactRouterLink(queryValue) {
return '/' + this.to + '/' + queryValue;
}
}
}

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

@ -1,5 +1,5 @@
'use strict';
'use strict';
import React from 'react';
import TableHeaderItem from './table_header_item';
@ -29,7 +29,7 @@ let TableHeader = React.createClass({
<TableHeaderItem
className={column.className}
key={i}
displayName={column.displayName}
displayElement={column.displayElement}
columnName={columnName}
canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc}

20
js/components/ascribe_table/table_header_item.js
View File

@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
let TableHeaderItem = React.createClass({
propTypes: {
displayName: React.PropTypes.oneOfType([
displayElement: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]).isRequired,
@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
},
render() {
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
if(this.props.columnName === this.props.orderBy) {
const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
if (columnName === orderBy) {
return (
<th
className={'ascribe-table-header-column ' + this.props.className}
className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
<span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
</th>
);
} else {
return (
<th
className={'ascribe-table-header-column ' + this.props.className}
className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}>
<span>{this.props.displayName}</span>
<span>{displayElement}</span>
</th>
);
}
} else {
return (
<th className={'ascribe-table-header-column ' + this.props.className}>
<th className={'ascribe-table-header-column ' + className}>
<span>
{this.props.displayName}
{displayElement}
</span>
</th>
);

19
js/components/ascribe_table/table_item_acl_filtered.js
View File

@ -3,15 +3,15 @@
import React from 'react';
let TableItemAclFiltered = React.createClass({
const TableItemAclFiltered = React.createClass({
propTypes: {
content: React.PropTypes.object,
notifications: React.PropTypes.string
notifications: React.PropTypes.array
},
render() {
var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
if (this.props.notifications && this.props.notifications.length > 0){
const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
if (this.props.notifications && this.props.notifications.length) {
return (
<span>
{this.props.notifications[0].action_str}
@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
);
}
let filteredAcls = Object.keys(this.props.content).filter((key) => {
return availableAcls.indexOf(key) > -1 && this.props.content[key];
});
filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
const filteredAcls = Object.keys(this.props.content)
.filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
.map((acl) => acl.split('acl_')[1])
.join('/');
return (
<span>
{filteredAcls.join('/')}
{filteredAcls}
</span>
);
}