ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Merge branch 'AD-51-refactor-table-to-mockup'

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-02 15:37:26 +02:00
commit ed2adb324b
17 changed files with 424 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
</head>
<body>
<div id="main" class="container clear-margins-and-paddings"></div>
<div id="main" class="container clear-paddings"></div>
<div id="modal" class="container"></div>
<script src="build/app.js"></script>
</body>

3
js/actions/piece_list_actions.js
View File

@ -6,7 +6,8 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher';
class PieceListActions {
constructor() {
this.generateActions(
'updatePieceList'
'updatePieceList',
'showEditionList'
);
}

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

@ -6,30 +6,17 @@ import TableItem from '../ascribe_table/table_item';
import TableColumnContentModel from '../../models/table_column_content_model';
let AccordionListItemTable = React.createClass({
getInitialState() {
return {
'show': false
};
},
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number,
fetchData: React.PropTypes.func,
itemList: React.PropTypes.array,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
numOfTableItems: React.PropTypes.number
},
toggleTable() {
this.props.fetchData();
this.setState({
'show': !this.state.show
});
numOfTableItems: React.PropTypes.number,
show: React.PropTypes.bool
},
render() {
if(this.props.itemList && this.state.show) {
if(this.props.show && this.props.itemList) {
return (
<div className={this.props.className}>
<Table
@ -44,44 +31,17 @@ let AccordionListItemTable = React.createClass({
);
})}
</Table>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
{this.props.children}
</div>
);
} else {
return (
<div className={this.props.className}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
{this.props.children}
</div>
);
}
}
});
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func,
show: React.PropTypes.bool,
numOfTableItems: React.PropTypes.number
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>
{this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
</span>
);
}
});
export default AccordionListItemTable;

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

@ -2,8 +2,11 @@ import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions';
import AccordionListItemTable from './accordion_list_item_table';
import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
import TableColumnContentModel from '../../models/table_column_content_model';
@ -17,7 +20,8 @@ let AccordionListItemTableEditions = React.createClass({
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number,
numOfEditions: React.PropTypes.number
numOfEditions: React.PropTypes.number,
show: React.PropTypes.bool
},
getInitialState() {
@ -36,14 +40,15 @@ let AccordionListItemTableEditions = React.createClass({
EditionListStore.unlisten(this.onChange);
},
getEditionList() {
EditionListActions.fetchEditionList(this.props.parentId);
},
selectItem(pieceId, editionId) {
EditionListActions.selectEdition({pieceId, editionId});
},
toggleTable() {
PieceListActions.showEditionList(this.props.parentId);
EditionListActions.fetchEditionList(this.props.parentId);
},
render() {
let columnList = [
new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
@ -53,13 +58,22 @@ let AccordionListItemTableEditions = React.createClass({
];
return (
<div>
<AccordionListItemTable
className={this.props.className}
parentId={this.props.parentId}
fetchData={this.getEditionList}
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}
numOfTableItems={this.props.numOfEditions}
show={this.props.show}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.props.show}
numOfTableItems={this.props.numOfEditions} />
</AccordionListItemTable>
</div>
);
}
});

22
js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func,
show: React.PropTypes.bool,
numOfTableItems: React.PropTypes.number
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>
{this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
</span>
);
}
});
export default AccordionListItemTableToggle;

117
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js Normal file
View File

@ -0,0 +1,117 @@
import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import AclButton from '../acl_button';
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
let PieceListBulkModal = React.createClass({
propTypes: {
className: React.PropTypes.string
},
getInitialState() {
return EditionListStore.getState();
},
onChange(state) {
this.setState(state);
},
componentDidMount() {
EditionListStore.listen(this.onChange)
},
componentDidUnmount() {
EditionListStore.unlisten(this.onChange)
},
filterForSelected(edition) {
return edition.selected;
},
fetchSelectedEditionList() {
let selectedEditionList = [];
Object
.keys(this.state.editionList)
.forEach((key) => {
let filteredEditionsForPiece = this.state.editionList[key].filter(this.filterForSelected);
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
});
return selectedEditionList;
},
intersectAcls(a, b) {
return a.filter((val) => b.indexOf(val) > -1);
},
bulk(action) {
console.log(action);
},
getAvailableAcls() {
let availableAcls = [];
let selectedEditionList = this.fetchSelectedEditionList();
// If no edition has been selected, availableActions is empty
// If only one edition has been selected, their actions are available
// If more than one editions have been selected, their acl properties are intersected
if(selectedEditionList.length >= 1) {
availableAcls = selectedEditionList[0].acl;
}
if(selectedEditionList.length >= 2) {
for(let i = 1; i < selectedEditionList.length; i++) {
availableAcls = this.intersectAcls(availableAcls, selectedEditionList[i].acl);
}
}
return availableAcls;
},
clearAllSelections() {
EditionListActions.clearAllEditionSelections();
},
render() {
let availableAcls = this.getAvailableAcls();
if(availableAcls.length > 0) {
return (
<div className={this.props.className}>
<div className="row no-margin">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-bulk-modal">
<p></p>
<div className="row">
<div className="text-center">
<PieceListBulkModalSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span
className="piece-list-bulk-modal-clear-all"
onClick={this.clearAllSelections}>clear all</span>
</div>
</div>
<p></p>
<div className="row">
<div className="text-center">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
}
}
});
export default PieceListBulkModal;

4
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js → js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js
View File

@ -1,6 +1,6 @@
import React from 'react';
let PieceListToolbarSelectedEditionsWidget = React.createClass({
let PieceListBulkModalSelectedEditionsWidget = React.createClass({
propTypes: {
numberOfSelectedEditions: React.PropTypes.number.isRequired
},
@ -14,4 +14,4 @@ let PieceListToolbarSelectedEditionsWidget = React.createClass({
}
});
export default PieceListToolbarSelectedEditionsWidget;
export default PieceListBulkModalSelectedEditionsWidget;

100
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -1,18 +1,17 @@
import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions';
import AclButton from '../acl_button';
import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
import Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import PieceListToolbarFilterWidgetFilter from './piece_list_toolbar_filter_widget';
let PieceListToolbar = React.createClass({
propTypes: {
className: React.PropTypes.string
},
getInitialState() {
return EditionListStore.getState();
return PieceListStore.getState();
},
onChange(state) {
@ -20,97 +19,38 @@ let PieceListToolbar = React.createClass({
},
componentDidMount() {
EditionListStore.listen(this.onChange)
PieceListStore.listen(this.onChange);
},
componentDidUnmount() {
EditionListStore.unlisten(this.onChange)
PieceListStore.unlisten(this.onChange);
},
filterForSelected(edition) {
return edition.selected;
},
fetchSelectedEditionList() {
let selectedEditionList = [];
Object
.keys(this.state.editionList)
.forEach((key) => {
let filteredEditionsForPiece = this.state.editionList[key].filter(this.filterForSelected);
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
});
return selectedEditionList;
},
intersectAcls(a, b) {
return a.filter((val) => b.indexOf(val) > -1);
},
bulk(action) {
console.log(action);
},
getAvailableAcls() {
let availableAcls = [];
let selectedEditionList = this.fetchSelectedEditionList();
// If no edition has been selected, availableActions is empty
// If only one edition has been selected, their actions are available
// If more than one editions have been selected, their acl properties are intersected
if(selectedEditionList.length >= 1) {
availableAcls = selectedEditionList[0].acl;
}
if(selectedEditionList.length >= 2) {
for(let i = 1; i < selectedEditionList.length; i++) {
availableAcls = this.intersectAcls(availableAcls, selectedEditionList[i].acl);
}
}
return availableAcls;
},
clearAllSelections() {
EditionListActions.clearAllEditionSelections();
searchFor() {
let searchTerm = this.refs.search.getInputDOMNode().value;
PieceListActions.fetchPieceList(this.state.page, this.pageSize, searchTerm, this.state.orderBy, this.state.orderAsc);
},
render() {
let availableAcls = this.getAvailableAcls();
let searchIcon = <Glyphicon glyph='search' />;
if(availableAcls.length > 0) {
return (
<div className={this.props.className}>
<div className="row no-margin">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
<p></p>
<div className="row">
<div className="text-center">
<PieceListToolbarSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span
className="piece-list-toolbar-clear-all"
onClick={this.clearAllSelections}>clear all</span>
</div>
</div>
<p></p>
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="row">
<div className="text-center">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
<div className="col-xs-12 col-md-12 col-md-5 col-lg-4 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 clear-paddings">
<div className="form-inline">
<Input type='text' ref="search" placeholder="Search..." onChange={this.searchFor} addonAfter={searchIcon} />
&nbsp;&nbsp;
{/*<PieceListToolbarFilterWidgetFilter />*/}
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
}
}
});

31
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';
let PieceListToolbarFilterWidgetFilter = React.createClass({
render() {
let filterIcon = <Glyphicon glyph='filter' />;
return (
<DropdownButton title={filterIcon}>
<li style={{'textAlign': 'center'}}>
<em>Show Pieces that:</em>
</li>
<MenuItem eventKey='1'>
<div className="checkbox">
I can transfer <input type="checkbox" />
</div>
</MenuItem>
<MenuItem eventKey='2'>
<div className="checkbox">
I can consign <input type="checkbox" />
</div>
</MenuItem>
</DropdownButton>
);
}
});
export default PieceListToolbarFilterWidgetFilter;

3
js/components/piece_list.js
View File

@ -10,6 +10,7 @@ import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_l
import Pagination from './ascribe_pagination/pagination';
import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
@ -51,6 +52,7 @@ let PieceList = React.createClass({
return (
<div>
<PieceListToolbar className="ascribe-piece-list-toolbar" />
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
<AccordionList
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}
@ -69,6 +71,7 @@ let PieceList = React.createClass({
<AccordionListItemTableEditions
className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
parentId={item.id}
show={item.show}
numOfEditions={item.num_editions}/>
</AccordionListItem>
);

13
js/stores/piece_list_store.js
View File

@ -24,6 +24,19 @@ class PieceListStore {
this.bindActions(PieceListActions);
}
onShowEditionList(pieceId) {
this.pieceList
.forEach((piece) => {
if(piece.id === pieceId) {
if(piece.show) {
piece.show = false;
} else {
piece.show = true;
}
}
});
}
onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
this.page = page;
this.pageSize = pageSize;

0
sass/ascribe-accordion_list.scss → sass/ascribe_accordion_list.scss
View File

4
sass/ascribe-piece-list-toolbar.scss → sass/ascribe_piece_list_bulk_modal.scss
View File

@ -1,4 +1,4 @@
.ascribe-piece-list-toolbar {
.ascribe-piece-list-bulk-modal {
position: fixed;
top:0;
width:1170px;
@ -14,7 +14,7 @@
z-index:9999;
}
.piece-list-toolbar-clear-all {
.piece-list-bulk-modal-clear-all {
text-decoration: underline;
cursor:pointer;
}

3
sass/ascribe_piece_list_toolbar.scss Normal file
View File

@ -0,0 +1,3 @@
.ascribe-piece-list-toolbar {
margin-bottom: 1.5em;
}

0
sass/ascribe-variables.scss → sass/ascribe_variables.scss
View File

12
sass/main.scss
View File

@ -1,12 +1,14 @@
// If you import a new .scss file, make sure to restart gulp
// otherwise it will not be included
@import 'variables';
@import 'ascribe-variables';
@import 'ascribe_variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts';
@import 'ascribe-accordion_list';
@import 'ascribe-piece-list-toolbar';
@import 'ascribe_accordion_list';
@import 'ascribe_piece_list_bulk_modal';
@import 'ascribe_piece_list_toolbar';
@import 'offset_right';
.hidden {
display: none;
@ -15,10 +17,10 @@
.navbar-default {
border-left:0;
border-right:0;
margin-bottom: 3em;
margin-bottom: 1.5em;
}
.clear-margins-and-paddings {
.clear-paddings {
padding-left:0;
padding-right:0;
}

164
sass/offset_right.scss Normal file
View File

@ -0,0 +1,164 @@
/* Taken from: http://stackoverflow.com/a/27501063/1263876 */
.col-xs-offset-right-12 {
margin-right: 100%;
}
.col-xs-offset-right-11 {
margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
margin-right: 75%;
}
.col-xs-offset-right-8 {
margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
margin-right: 50%;
}
.col-xs-offset-right-5 {
margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
margin-right: 25%;
}
.col-xs-offset-right-2 {
margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
margin-right: 0;
}
@media (min-width: 768px) {
.col-sm-offset-right-12 {
margin-right: 100%;
}
.col-sm-offset-right-11 {
margin-right: 91.66666667%;
}
.col-sm-offset-right-10 {
margin-right: 83.33333333%;
}
.col-sm-offset-right-9 {
margin-right: 75%;
}
.col-sm-offset-right-8 {
margin-right: 66.66666667%;
}
.col-sm-offset-right-7 {
margin-right: 58.33333333%;
}
.col-sm-offset-right-6 {
margin-right: 50%;
}
.col-sm-offset-right-5 {
margin-right: 41.66666667%;
}
.col-sm-offset-right-4 {
margin-right: 33.33333333%;
}
.col-sm-offset-right-3 {
margin-right: 25%;
}
.col-sm-offset-right-2 {
margin-right: 16.66666667%;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
.col-sm-offset-right-0 {
margin-right: 0;
}
}
@media (min-width: 992px) {
.col-md-offset-right-12 {
margin-right: 100%;
}
.col-md-offset-right-11 {
margin-right: 91.66666667%;
}
.col-md-offset-right-10 {
margin-right: 83.33333333%;
}
.col-md-offset-right-9 {
margin-right: 75%;
}
.col-md-offset-right-8 {
margin-right: 66.66666667%;
}
.col-md-offset-right-7 {
margin-right: 58.33333333%;
}
.col-md-offset-right-6 {
margin-right: 50%;
}
.col-md-offset-right-5 {
margin-right: 41.66666667%;
}
.col-md-offset-right-4 {
margin-right: 33.33333333%;
}
.col-md-offset-right-3 {
margin-right: 25%;
}
.col-md-offset-right-2 {
margin-right: 16.66666667%;
}
.col-md-offset-right-1 {
margin-right: 8.33333333%;
}
.col-md-offset-right-0 {
margin-right: 0;
}
}
@media (min-width: 1200px) {
.col-lg-offset-right-12 {
margin-right: 100%;
}
.col-lg-offset-right-11 {
margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
margin-right: 75%;
}
.col-lg-offset-right-8 {
margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
margin-right: 50%;
}
.col-lg-offset-right-5 {
margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
margin-right: 25%;
}
.col-lg-offset-right-2 {
margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
margin-right: 0;
}
}