From c2c204922923914340d23f406f6b6a7e11b732e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 2 Jun 2015 09:10:26 +0200 Subject: [PATCH 1/5] rename piece_list_toolbar to a more fitting name: piece_list_bulk_modal --- .../piece_list_bulk_modal.js} | 12 ++++++------ ...iece_list_bulk_modal_selected_editions_widget.js} | 4 ++-- js/components/piece_list.js | 4 ++-- ...cordion_list.scss => ascribe_accordion_list.scss} | 0 ...olbar.scss => ascribe_piece_list_bulk_modal.scss} | 4 ++-- ...ascribe-variables.scss => ascribe_variables.scss} | 0 sass/main.scss | 6 +++--- 7 files changed, 15 insertions(+), 15 deletions(-) rename js/components/{ascribe_piece_list_toolbar/piece_list_toolbar.js => ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js} (90%) rename js/components/{ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js => ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js} (74%) rename sass/{ascribe-accordion_list.scss => ascribe_accordion_list.scss} (100%) rename sass/{ascribe-piece-list-toolbar.scss => ascribe_piece_list_bulk_modal.scss} (85%) rename sass/{ascribe-variables.scss => ascribe_variables.scss} (100%) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js similarity index 90% rename from js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js rename to js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js index f7b04cc6..43330538 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js @@ -4,9 +4,9 @@ import EditionListStore from '../../stores/edition_list_store'; import EditionListActions from '../../actions/edition_list_actions'; import AclButton from '../acl_button'; -import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget'; +import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget'; -let PieceListToolbar = React.createClass({ +let PieceListBulkModal = React.createClass({ propTypes: { className: React.PropTypes.string }, @@ -82,15 +82,15 @@ let PieceListToolbar = React.createClass({ return (
-
+

-           clear all
@@ -114,4 +114,4 @@ let PieceListToolbar = React.createClass({ } }); -export default PieceListToolbar; \ No newline at end of file +export default PieceListBulkModal; \ No newline at end of file diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js similarity index 74% rename from js/components/ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js rename to js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js index 5c020d45..22b35a4a 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js +++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js @@ -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; \ No newline at end of file +export default PieceListBulkModalSelectedEditionsWidget; \ No newline at end of file diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 9580ffb1..2a75b7da 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -10,7 +10,7 @@ import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_l import Pagination from './ascribe_pagination/pagination'; -import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar'; +import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal'; let PieceList = React.createClass({ @@ -50,7 +50,7 @@ let PieceList = React.createClass({ return (
- + Date: Tue, 2 Jun 2015 10:10:09 +0200 Subject: [PATCH 2/5] implement search functionality --- .../piece_list_toolbar.js | 56 ++++++ js/components/piece_list.js | 2 + sass/ascribe_piece_list_toolbar.scss | 7 + sass/main.scss | 4 +- sass/offset_right.scss | 164 ++++++++++++++++++ 5 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js create mode 100644 sass/ascribe_piece_list_toolbar.scss create mode 100644 sass/offset_right.scss diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js new file mode 100644 index 00000000..d2597ed1 --- /dev/null +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -0,0 +1,56 @@ +import React from 'react'; + +import PieceListStore from '../../stores/piece_list_store'; +import PieceListActions from '../../actions/piece_list_actions'; + +import Input from 'react-bootstrap/lib/Input'; +import Glyphicon from 'react-bootstrap/lib/Glyphicon'; +import Button from 'react-bootstrap/lib/Button'; + +let PieceListToolbar = React.createClass({ + + getInitialState() { + return PieceListStore.getState(); + }, + + onChange(state) { + this.setState(state); + }, + + componentDidMount() { + PieceListStore.listen(this.onChange); + }, + + componentDidUnmount() { + PieceListStore.unlisten(this.onChange); + }, + + searchFor() { + let searchTerm = this.refs.search.getInputDOMNode().value; + PieceListActions.fetchPieceList(this.state.page, this.pageSize, searchTerm, this.state.orderBy, this.state.orderAsc); + }, + + render() { + let searchIcon = ; + + return ( +
+
+
+
+
+ +    + +
+
+
+
+
+ ); + } +}); + +export default PieceListToolbar; \ No newline at end of file diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 2a75b7da..ea1ef790 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -11,6 +11,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'; let PieceList = React.createClass({ @@ -50,6 +51,7 @@ let PieceList = React.createClass({ return (
+ Date: Tue, 2 Jun 2015 11:40:55 +0200 Subject: [PATCH 3/5] add unfinished filtering widget --- index.html | 2 +- .../piece_list_toolbar.js | 15 ++++----- .../piece_list_toolbar_filter_widget.js | 31 +++++++++++++++++++ sass/ascribe_piece_list_toolbar.scss | 4 --- sass/main.scss | 2 +- 5 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js diff --git a/index.html b/index.html index 8b61e4b0..b61794b4 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ -
+
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index d2597ed1..ff2bd68f 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -5,7 +5,8 @@ import PieceListActions from '../../actions/piece_list_actions'; import Input from 'react-bootstrap/lib/Input'; import Glyphicon from 'react-bootstrap/lib/Glyphicon'; -import Button from 'react-bootstrap/lib/Button'; + +import PieceListToolbarFilterWidgetFilter from './piece_list_toolbar_filter_widget'; let PieceListToolbar = React.createClass({ @@ -38,12 +39,12 @@ let PieceListToolbar = React.createClass({
-
- -    - +
+
+ +    + +
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js new file mode 100644 index 00000000..7aaf9dd8 --- /dev/null +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js @@ -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 = ; + + return ( + +
  • + Show Pieces that: +
    • + +
    + I can transfer +
    +     + +
    + I can consign +
    +     +     + ); + } +}); + +export default PieceListToolbarFilterWidgetFilter; \ No newline at end of file diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss index 834ed14b..73c0bc94 100644 --- a/sass/ascribe_piece_list_toolbar.scss +++ b/sass/ascribe_piece_list_toolbar.scss @@ -1,7 +1,3 @@ .ascribe-piece-list-toolbar { margin-bottom: 1.5em; -} - -.ascribe-piece-list-toolbar-search { - padding-right:0; } \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss index be07e18a..5327032e 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -20,7 +20,7 @@ margin-bottom: 1.5em; } -.clear-margins-and-paddings { +.clear-paddings { padding-left:0; padding-right:0; } From 53a01115f2957fcfc85d65cd0dd4da00e5c9a564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 2 Jun 2015 15:33:48 +0200 Subject: [PATCH 4/5] put show state of item list in store to fix bug --- js/actions/piece_list_actions.js | 3 +- .../accordion_list_item_table.js | 50 ++----------------- .../accordion_list_item_table_editions.js | 38 +++++++++----- .../accordion_list_item_table_toggle.js | 22 ++++++++ js/components/piece_list.js | 3 +- js/stores/piece_list_store.js | 13 +++++ 6 files changed, 70 insertions(+), 59 deletions(-) create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 8830b2b6..4ba91870 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -6,7 +6,8 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher'; class PieceListActions { constructor() { this.generateActions( - 'updatePieceList' + 'updatePieceList', + 'showEditionList' ); } 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 9ddb3308..2cbb54d7 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js @@ -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 (
    - + {this.props.children} ); } else { return (
    - + {this.props.children}
    ); } } }); -let AccordionListItemTableToggle = React.createClass({ - propTypes: { - className: React.PropTypes.string, - onClick: React.PropTypes.func, - show: React.PropTypes.bool, - numOfTableItems: React.PropTypes.number - }, - - render() { - return ( - - {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} - - ); - } -}); - export default AccordionListItemTable; \ No newline at end of file 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 2b3bd5c0..e5789528 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 @@ -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 ( - +
    + + + + +
    ); } }); diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js b/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js new file mode 100644 index 00000000..a3431b04 --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js @@ -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 ( + + {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} + + ); + } +}); + +export default AccordionListItemTableToggle; \ No newline at end of file diff --git a/js/components/piece_list.js b/js/components/piece_list.js index ea1ef790..e6735a27 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -70,7 +70,8 @@ let PieceList = React.createClass({ key={i}> ); diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 97e3f4a4..7ca96c87 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -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; From 4b64f52d716cb721d3e3039dfe972048945e08bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 2 Jun 2015 15:36:06 +0200 Subject: [PATCH 5/5] comment out filter widget --- js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index ff2bd68f..ce9150b1 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -43,7 +43,7 @@ let PieceListToolbar = React.createClass({
       - + {/**/}