request actions first cut

js/actions/piece_list_actions.js

@@ -55,7 +55,7 @@ class PieceListActions {
         PieceListFetcher
             .fetchRequestActions()
             .then((res) => {
-                this.actions.updatePieceListRequestActions(res.piece_ids);
+                this.actions.updatePieceListRequestActions(res);
             })
             .catch((err) => console.logGlobal(err));
     }

js/components/ascribe_accordion_list/accordion_list_item_wallet.js

@@ -61,12 +61,13 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getGlyphicon(){
-        if (this.props.content.requestAction && this.props.content.requestAction.length > 0) {
+        if ((this.props.content.request_action && this.props.content.request_action.length > 0) ||
+            (this.props.content.request_action_editions)){
             return (
                 <OverlayTrigger
                     delay={500}
                     placement="left"
-                    overlay={<Tooltip>{getLangText('You have actions pending in one of your editions')}</Tooltip>}>
+                    overlay={<Tooltip>{getLangText('You have actions pending')}</Tooltip>}>
                     <Glyphicon glyph='bell' color="green"/>
                 </OverlayTrigger>);
         }

js/components/piece_list.js

@@ -147,8 +147,34 @@ let PieceList = React.createClass({
     render() {
         let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
         let AccordionListItemType = this.props.accordionListItemType;
+
+        let pieceActions = null;
+        if (this.state.requestActions && this.state.requestActions.pieces){
+            pieceActions = this.state.requestActions.pieces.map((item) => {
+                return (
+                    <div className="ascribe-global-action">
+                        test
+                    </div>);
+            });
+        }
+        let editionActions = null;
+        if (this.state.requestActions && this.state.requestActions.editions){
+            for (let pieceId in this.state.requestActions.editions) {
+                editionActions = this.state.requestActions.editions[pieceId].map((item) => {
+                    return (
+                        <div className="ascribe-global-action">
+                            test
+                        </div>);
+                });
+            }
+        }
+
         return (
             <div>
+                <div className="ascribe-global-action-wrapper">
+                    {pieceActions}
+                    {editionActions}
+                </div>
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

@@ -86,7 +86,6 @@ let PieceContainer = React.createClass({
 
     loadPiece() {
         PieceActions.fetchOne(this.props.params.pieceId);
-        this.setState(this.state);
     },
 
     render() {

js/stores/piece_list_store.js

@@ -27,6 +27,7 @@ class PieceListStore {
         this.orderBy = 'artist_name';
         this.orderAsc = true;
         this.filterBy = {};
+        this.requestActions = {};
         this.bindActions(PieceListActions);
     }
     
@@ -69,11 +70,23 @@ class PieceListStore {
         this.pieceList = pieceList;
     }
 
-    onUpdatePieceListRequestActions(requestActions) {
+    onUpdatePieceListRequestActions(res) {
-        this.pieceList.forEach((piece) => {
+        this.requestActions.pieces = res.piece_actions;
-            piece.requestAction = requestActions.indexOf(piece.id) > -1;
+        this.requestActions.editions = res.edition_actions;
+        for (let pieceId in res.edition_actions){
+            try {
+                this.onUpdatePropertyForPiece({
+                    pieceId: parseInt(pieceId, 10),
+                    key: 'request_action_editions',
+                    value: res.edition_actions[pieceId]
                 });
             }
+            catch(err) {
+                console.warn('couldnt match request action with piecelist, maybe on other page');
+            }
+
+        }
+    }
 
     onUpdatePropertyForPiece({pieceId, key, value}) {
         let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);

sass/ascribe_accordion_list.scss

@@ -158,7 +158,7 @@ span.ascribe-accordion-list-table-toggle {
     right: 0px;
     color: $ascribe-color-green;
     font-size: 1.2em;
-    padding: 0.3em;
+    padding: 0.8em;
 }
 
 .ascribe-accordion-list-item-edition-widget {

sass/ascribe_global_action.scss

@@ -0,0 +1,73 @@
+.ascribe-global-action-wrapper {
+    position: fixed;
+    width: 100%;
+    height:3.5em;
+    left:0;
+    top:0;
+    z-index: 2000;
+    display:table;
+}
+
+.ascribe-global-action {
+    width: 40%;
+    margin: 1px auto;
+    text-align: center;
+    padding: 1em;
+    color: black;
+    border: 1px solid #cccccc;
+    background-color: white;
+}
+
+.ascribe-global-notification-off {
+    bottom: -3.5em;
+}
+
+.ascribe-global-notification-on {
+    bottom: 0;
+}
+
+.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
+    display:table-cell;
+    vertical-align: middle;
+    font-size: 1.25em;
+    font-family: 'Source Sans Pro';
+    text-align: right;
+    padding-right: 3em;
+}
+
+.ascribe-global-notification-bubble > div {
+    padding: .75em 1.5em .75em 1.5em;
+}
+
+.ascribe-global-notification-bubble {
+    position: fixed;
+    bottom: 3em;
+    right: -50em;
+
+    display:table;
+
+    height: 3.5em;
+
+    background-color: #212121;
+    border-radius: 2px;
+
+    color: white;
+
+    transition: 1s right ease;
+}
+
+.ascribe-global-notification-bubble-off {
+    right: -100em;
+}
+
+.ascribe-global-notification-bubble-on {
+    right: 3.5em;
+}
+
+.ascribe-global-notification-danger {
+    background-color: #d9534f;
+}
+
+.ascribe-global-notification-success {
+    background-color: rgba(2, 182, 163, 1);
+}

sass/main.scss

@@ -22,6 +22,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_media_player';
 @import 'ascribe_uploader';
 @import 'ascribe_footer';
+@import 'ascribe_global_action';
 @import 'ascribe_global_notification';
 @import 'ascribe_piece_register';
 @import 'offset_right';