1
0
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:
diminator 2015-07-01 19:05:47 +02:00
parent 323a2472b4
commit 4ca2144c0c
15 changed files with 89 additions and 23 deletions

View File

@ -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);
});
}

View File

@ -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}

View File

@ -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'),

View File

@ -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>
);

View File

@ -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}>

View File

@ -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}>

View File

@ -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;

View File

@ -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}

View File

@ -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());
}
},

View File

@ -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">

View File

@ -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/',

View File

@ -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');
}
};

View File

@ -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');

View File

@ -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;
}

View File

@ -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;
}