mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
request actions in frontend
This commit is contained in:
parent
323a2472b4
commit
4ca2144c0c
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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}
|
||||
|
@ -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'),
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}>
|
||||
|
@ -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}>
|
||||
|
@ -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;
|
||||
|
@ -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}
|
||||
|
@ -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());
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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/',
|
||||
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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');
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user