request actions in frontend

js/actions/piece_list_actions.js

@@ -8,11 +8,13 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher';
 class PieceListActions {
     constructor() {
         this.generateActions(
-            'updatePieceList'
+            'updatePieceList',
+            'updatePieceListRequestActions'
         );
     }
 
     fetchPieceList(page, pageSize, search, orderBy, orderAsc) {
+        return new Promise((resolve, reject) => {
             PieceListFetcher
                 .fetch(page, pageSize, search, orderBy, orderAsc)
                 .then((res) => {
@@ -25,6 +27,15 @@ class PieceListActions {
                         'pieceList': res.pieces,
                         'pieceListCount': res.count
                     });
+                    resolve();
+                });
+        });
+    }
+    fetchPieceRequestActions() {
+        PieceListFetcher
+            .fetchRequestActions()
+            .then((res) => {
+                this.actions.updatePieceListRequestActions(res.piece_ids);
             });
     }
 

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -3,6 +3,10 @@
 import React from 'react';
 import Router from 'react-router';
 
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
 import requests from '../../utils/requests';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -21,6 +25,16 @@ let AccordionListItem = React.createClass({
 
         console.log(event.target);
     },
+    getGlyphicon(){
+        if (this.props.content.requestAction){
+            return (
+                <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>You have actions pending in one of your editions</Tooltip>}>
+                        <Glyphicon glyph='bell' />
+                </OverlayTrigger>);
+        }
+        return null;
+    },
     render() {
         return (
             <div className="row">
@@ -42,6 +56,9 @@ let AccordionListItem = React.createClass({
                             </div>
                         </div>
                         <span style={{'clear': 'both'}}></span>
+                        <div className="request-action-batch">
+                            {this.getGlyphicon()}
+                        </div>
                     </div>
                 </div>
                 {this.props.children}

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -139,8 +139,12 @@ let AccordionListItemTableEditions = React.createClass({
             ),
             new ColumnModel(
                 (item) => {
+                    let content = item.acl;
+                    if (item.request_action){
+                        content = [item.request_action + ' request'];
+                    }
                     return {
-                        'content': item.acl
+                        'content': content
                     }; },
                     'acl',
                     getLangText('Actions'),

js/components/ascribe_forms/form_request_action.js

@@ -54,10 +54,10 @@ let RequestActionForm = React.createClass({
         let buttons = (
                 <span>
                     <span>
-                        <div id="request_accept" onClick={this.handleRequest} className='btn btn-default btn-sm'>ACCEPT</div>
+                        <div id="request_accept" onClick={this.handleRequest} className='btn btn-default btn-sm ascribe-margin-1px'>ACCEPT</div>
                     </span>
                     <span>
-                        <div id="request_deny" onClick={this.handleRequest} className='btn btn-default btn-sm'>REJECT</div>
+                        <div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>REJECT</div>
                     </span>
                 </span>
         );

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -21,7 +21,7 @@ let PieceListToolbar = React.createClass({
     },
 
     render() {
-        let searchIcon = <Glyphicon glyph='search' />;
+        let searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>;
 
         return (
             <div className={this.props.className}>

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -8,7 +8,7 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 
 let PieceListToolbarFilterWidgetFilter = React.createClass({
     render() {
-        let filterIcon = <Glyphicon glyph='filter' />;
+        let filterIcon = <Glyphicon glyph='filter' className="filter-glyph"/>;
 
         return (
             <DropdownButton title={filterIcon}>

js/components/ascribe_table/table_item_acl_filtered.js

@@ -9,7 +9,7 @@ let TableItemAclFiltered = React.createClass({
     },
 
     render() {
-        var availableAcls = ['consign', 'loan', 'transfer', 'view'];
+        var availableAcls = ['consign', 'loan', 'transfer', 'view', 'consign request', 'unconsign request', 'loan request'];
 
         let filteredAcls = this.props.content.filter((v) => {
             return availableAcls.indexOf(v) > -1;

js/components/header.js

@@ -80,6 +80,7 @@ let Header = React.createClass({
     render() {
         let account = null;
         let signup = null;
+        let collection = null;
         if (this.state.currentUser.username){
             account = (
                 <DropdownButton eventKey="1" title={this.state.currentUser.username}>
@@ -91,6 +92,7 @@ let Header = React.createClass({
                     <MenuItem eventKey="4" onClick={this.handleLogout}>{getLangText('Log out')}</MenuItem>
                   </DropdownButton>
             );
+            collection = <NavItemLink to="pieces">COLLECTION</NavItemLink>;
         }
         else {
             account = <NavItemLink to="login">LOGIN</NavItemLink>;
@@ -101,11 +103,14 @@ let Header = React.createClass({
             <div>
                 <Navbar
                     brand={
-                        <Link className="navbar-brand" to="pieces" path="/?page=1">
+                        <Link className="navbar-brand" to="pieces">
                             {this.getLogo()}
                         </Link>}
                     toggleNavKey={0}>
                     <CollapsibleNav eventKey={0}>
+                        <Nav navbar left>
+                            {collection}
+                        </Nav>
                         <Nav navbar right>
                             {account}
                             {signup}

js/components/piece_list.js

@@ -33,7 +33,8 @@ let PieceList = React.createClass({
         let page = this.props.query.page || 1;
         PieceListStore.listen(this.onChange);
         if (this.state.pieceList.length === 0){
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
+            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc)
+            .then(PieceListActions.fetchPieceRequestActions());
         }
     },
 

js/components/settings_container.js

@@ -227,7 +227,7 @@ let APISettings = React.createClass({
                         name={app.name}
                         label={app.name}>
                         <div className="row-same-height">
-                            <div className="col-xs-6 col-xs-height col-middle">
+                            <div className="no-padding col-xs-6 col-xs-height col-middle">
                             {'Bearer ' + app.bearer_token.token}
                             </div>
                             <div className="col-xs-6 col-xs-height">

js/constants/api_urls.js

@@ -33,6 +33,7 @@ let apiUrls = {
     'piece_extradata': AppConstants.apiEndpoint + 'pieces/${piece_id}/extradata/',
     'piece_first_edition_id': AppConstants.apiEndpoint + 'pieces/${piece_id}/edition_index/',
     'pieces_list': AppConstants.apiEndpoint + 'pieces/',
+    'pieces_list_request_actions': AppConstants.apiEndpoint + 'pieces/request_actions/',
     'user': AppConstants.apiEndpoint + 'users/',
     'users_login': AppConstants.apiEndpoint + 'users/login/',
     'users_logout': AppConstants.apiEndpoint + 'users/logout/',

js/fetchers/piece_list_fetcher.js

@@ -12,6 +12,10 @@ let PieceListFetcher = {
     fetch(page, pageSize, search, orderBy, orderAsc) {
         let ordering = generateOrderingQueryParams(orderBy, orderAsc);
         return requests.get('pieces_list', { page, pageSize, search, ordering });
+    },
+
+    fetchRequestActions() {
+        return requests.get('pieces_list_request_actions');
     }
 };
 

js/stores/piece_list_store.js

@@ -85,6 +85,11 @@ class PieceListStore {
 
         this.pieceList = pieceList;
     }
+    onUpdatePieceListRequestActions(requestActions) {
+        this.pieceList.forEach((piece) => {
+            piece.requestAction = requestActions.indexOf(piece.id) > -1;
+        });
+    }
 }
 
 export default alt.createStore(PieceListStore, 'PieceListStore');

sass/ascribe_accordion_list.scss

@@ -45,6 +45,9 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             font-size: 1.1em;
             margin: .2em 0 0 0;
         }
+        a {
+            color: #666;
+        }
     }
 }
 
@@ -87,3 +90,12 @@ span.ascribe-accordion-list-table-toggle {
       text-align: center;
     }
 }
+
+.request-action-batch {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    color: #666;
+    font-size: 1.2em;
+    padding: 0.3em;
+}

sass/main.scss

@@ -29,6 +29,10 @@ body {
     border-radius: 0;
 }
 
+html {
+    overflow-y: scroll;
+}
+
 .hidden {
     display: none;
 }
@@ -92,7 +96,9 @@ body {
     vertical-align: middle;
     float: none;
 }
-
+.filter-glyph{
+    color: white;
+}
 .no-margin {
     margin-right: 0;
     margin-left: 0;
@@ -250,7 +256,7 @@ body {
     vertical-align: bottom;
 }
 
-.ascribe-button-list button {
+.ascribe-button-list button, .ascribe-margin-1px {
     margin-right: 1px;
     margin-top: 1px;
 }