mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 09:23:13 +01:00
jury invitation, revoke, resend
MIGRATE!
This commit is contained in:
parent
d343acaac5
commit
67f70357a5
@ -48,20 +48,23 @@ let ActionPanel = React.createClass({
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={'ascribe-panel-wrapper ' + this.getClassName()}
|
||||
onClick={this.handleFocus}
|
||||
onFocus={this.handleFocus}>
|
||||
<div className='ascribe-panel-title'>
|
||||
{this.props.title}
|
||||
</div>
|
||||
<div className='ascribe-panel-content-wrapper'>
|
||||
<span className="ascribe-panel-content pull-left">
|
||||
{this.props.content}
|
||||
</span>
|
||||
<span className='ascribe-panel-buttons pull-right'>
|
||||
{this.props.buttons}
|
||||
</span>
|
||||
<div className={'ascribe-panel-wrapper ' + this.getClassName()}>
|
||||
<div className='row'>
|
||||
<div className='col-xs-7 col-md-8'>
|
||||
<div className='ascribe-panel-content-wrapper'>
|
||||
<div className='ascribe-panel-title'>
|
||||
{this.props.title}
|
||||
</div>
|
||||
<div className="ascribe-panel-content">
|
||||
{this.props.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-xs-5 col-md-4'>
|
||||
<div className='ascribe-panel-buttons'>
|
||||
{this.props.buttons}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -8,7 +8,9 @@ import PrizeJuryFetcher from '../fetchers/prize_jury_fetcher';
|
||||
class PrizeJuryActions {
|
||||
constructor() {
|
||||
this.generateActions(
|
||||
'updatePrizeJury'
|
||||
'updatePrizeJury',
|
||||
'removePrizeJury',
|
||||
'activatePrizeJury'
|
||||
);
|
||||
}
|
||||
|
||||
@ -26,6 +28,49 @@ class PrizeJuryActions {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
activateJury(email) {
|
||||
return Q.Promise((resolve, reject) => {
|
||||
PrizeJuryFetcher
|
||||
.activate(email)
|
||||
.then((res) => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.logGlobal(err);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
revokeJury(email) {
|
||||
return Q.Promise((resolve, reject) => {
|
||||
PrizeJuryFetcher
|
||||
.delete(email)
|
||||
.then((res) => {
|
||||
this.actions.removePrizeJury(email);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.logGlobal(err);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
resendJuryInvitation(email) {
|
||||
return Q.Promise((resolve, reject) => {
|
||||
PrizeJuryFetcher
|
||||
.resend(email)
|
||||
.then((res) => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.logGlobal(err);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default alt.createActions(PrizeJuryActions);
|
@ -144,36 +144,138 @@ let PrizeJurySettings = React.createClass({
|
||||
this.refs.form.refs.email.refs.input.getDOMNode().value = null;
|
||||
},
|
||||
|
||||
render() {
|
||||
handleActivate(event) {
|
||||
let email = event.target.getAttribute('data-id');
|
||||
PrizeJuryActions.activateJury(email).then((response) => {
|
||||
PrizeJuryActions.fetchJury();
|
||||
let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
});
|
||||
},
|
||||
|
||||
handleRevoke(event) {
|
||||
let email = event.target.getAttribute('data-id');
|
||||
PrizeJuryActions.revokeJury(email).then((response) => {
|
||||
let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
});
|
||||
},
|
||||
|
||||
handleResend(event) {
|
||||
let email = event.target.getAttribute('data-id');
|
||||
PrizeJuryActions.resendJuryInvitation(email).then((response) => {
|
||||
let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
});
|
||||
},
|
||||
|
||||
getMembersPending() {
|
||||
return this.state.membersPending.map(function(member, i) {
|
||||
return (
|
||||
<ActionPanel
|
||||
name={member.email}
|
||||
key={i}
|
||||
title={member.email}
|
||||
content={member.status}
|
||||
buttons={
|
||||
<div className="pull-right">
|
||||
<button
|
||||
className="btn btn-default btn-sm margin-left-2px"
|
||||
onClick={this.handleResend}
|
||||
data-id={member.email}>
|
||||
{getLangText('RESEND')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-default btn-sm ascribe-btn-gray margin-left-2px"
|
||||
onClick={this.handleRevoke}
|
||||
data-id={member.email}>
|
||||
{getLangText('REVOKE')}
|
||||
</button>
|
||||
</div>
|
||||
}/>
|
||||
);
|
||||
}, this);
|
||||
},
|
||||
getMembersActive() {
|
||||
return this.state.membersActive.map(function(member, i) {
|
||||
return (
|
||||
<ActionPanel
|
||||
name={member.email}
|
||||
key={i}
|
||||
title={member.email}
|
||||
content={member.status}
|
||||
buttons={
|
||||
<div className="pull-right">
|
||||
<button
|
||||
className="btn btn-default btn-sm ascribe-btn-gray"
|
||||
onClick={this.handleRevoke}
|
||||
data-id={member.email}>
|
||||
{getLangText('REVOKE')}
|
||||
</button>
|
||||
</div>
|
||||
}/>
|
||||
);
|
||||
|
||||
}, this);
|
||||
},
|
||||
getMembersInactive() {
|
||||
return this.state.membersInactive.map(function(member, i) {
|
||||
return (
|
||||
<ActionPanel
|
||||
name={member.email}
|
||||
key={i}
|
||||
title={member.email}
|
||||
content={member.status}
|
||||
buttons={
|
||||
<div className="pull-right">
|
||||
<button
|
||||
className="btn btn-default btn-sm"
|
||||
onClick={this.handleActivate}
|
||||
data-id={member.email}>
|
||||
{getLangText('ACTIVATE')}
|
||||
</button>
|
||||
</div>
|
||||
}/>
|
||||
);
|
||||
|
||||
}, this);
|
||||
},
|
||||
getMembers() {
|
||||
let content = (
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
|
||||
</div>);
|
||||
|
||||
if (this.state.members.length > -1) {
|
||||
content = this.state.members.map(function(member, i) {
|
||||
return (
|
||||
<ActionPanel
|
||||
name={member.email}
|
||||
key={i}
|
||||
title={member.email}
|
||||
content={member.status}
|
||||
buttons={<button
|
||||
className="pull-right btn btn-default btn-sm"
|
||||
data-id={member.name}>
|
||||
{getLangText('RESEND INVITATION')}
|
||||
</button>}
|
||||
/>);
|
||||
}, this);
|
||||
content = (
|
||||
<div>
|
||||
{content}
|
||||
<div style={{padding: '1em'}}>
|
||||
<CollapsibleParagraph
|
||||
title={'Active Jury Members'}
|
||||
show={true}
|
||||
defaultExpanded={true}>
|
||||
{this.getMembersActive()}
|
||||
</CollapsibleParagraph>
|
||||
<CollapsibleParagraph
|
||||
title={'Pending Jury Invitations'}
|
||||
show={true}
|
||||
defaultExpanded={true}>
|
||||
{this.getMembersPending()}
|
||||
</CollapsibleParagraph>
|
||||
<CollapsibleParagraph
|
||||
title={'Deactivated Jury Members'}
|
||||
show={true}
|
||||
defaultExpanded={false}>
|
||||
{this.getMembersInactive()}
|
||||
</CollapsibleParagraph>
|
||||
</div>);
|
||||
}
|
||||
return content;
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
url={apiUrls.jury}
|
||||
url={apiUrls.jurys}
|
||||
handleSuccess={this.handleCreateSuccess}
|
||||
ref='form'
|
||||
buttonSubmitText='INVITE'>
|
||||
@ -190,7 +292,7 @@ let PrizeJurySettings = React.createClass({
|
||||
</Property>
|
||||
<hr />
|
||||
</Form>
|
||||
{content}
|
||||
{this.getMembers()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -11,7 +11,10 @@ function getApiUrls(subdomain) {
|
||||
'piece_submit_to_prize': AppPrizeConstants.prizeApiEndpoint + subdomain + '/pieces/${piece_id}/submit/',
|
||||
'piece': AppPrizeConstants.prizeApiEndpoint + subdomain + '/pieces/${piece_id}/',
|
||||
'prize': AppPrizeConstants.prizeApiEndpoint + subdomain + '/',
|
||||
'jury': AppPrizeConstants.prizeApiEndpoint + subdomain + '/jury/'
|
||||
'jurys': AppPrizeConstants.prizeApiEndpoint + subdomain + '/jury/',
|
||||
'jury': AppPrizeConstants.prizeApiEndpoint + subdomain + '/jury/${email}/',
|
||||
'jury_activate': AppPrizeConstants.prizeApiEndpoint + subdomain + '/jury/${email}/activate/',
|
||||
'jury_resend': AppPrizeConstants.prizeApiEndpoint + subdomain + '/jury/${email}/resend/'
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -5,7 +5,19 @@ import requests from '../../../../utils/requests';
|
||||
|
||||
let PrizeJuryFetcher = {
|
||||
fetch() {
|
||||
return requests.get('jury');
|
||||
return requests.get('jurys');
|
||||
},
|
||||
|
||||
activate(email) {
|
||||
return requests.post('jury_activate', {'email': email});
|
||||
},
|
||||
|
||||
delete(email) {
|
||||
return requests.delete('jury', {'email': email});
|
||||
},
|
||||
|
||||
resend(email) {
|
||||
return requests.post('jury_resend', {'email': email});
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -7,11 +7,28 @@ import PrizeJuryActions from '../actions/prize_jury_actions';
|
||||
class PrizeJuryStore {
|
||||
constructor() {
|
||||
this.members = [];
|
||||
this.membersActive = [];
|
||||
this.membersPending = [];
|
||||
this.membersInactive = [];
|
||||
this.bindActions(PrizeJuryActions);
|
||||
}
|
||||
|
||||
onUpdatePrizeJury( members ) {
|
||||
this.members = members;
|
||||
this.splitJuryMembers();
|
||||
}
|
||||
|
||||
onRemovePrizeJury( email ) {
|
||||
let memberInactive = this.members.filter((item)=> item.email === email );
|
||||
this.membersActive = this.membersActive.filter((item)=> item.email !== email );
|
||||
this.membersPending = this.membersPending.filter((item)=> item.email !== email );
|
||||
this.membersInactive = this.membersInactive.concat(memberInactive);
|
||||
}
|
||||
|
||||
splitJuryMembers(){
|
||||
this.membersActive = this.members.filter((item)=> item.status === 'Invitation accepted' );
|
||||
this.membersPending = this.members.filter((item)=> item.status === 'Invitation pending' );
|
||||
this.membersInactive = this.members.filter((item)=> item.status === 'Deactivated' );
|
||||
}
|
||||
}
|
||||
|
||||
|
9
sass/ascribe_button.scss
Normal file
9
sass/ascribe_button.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.ascribe-btn-gray {
|
||||
border-color: #CCCCCC;
|
||||
background-color: #CCCCCC;
|
||||
|
||||
&:hover{
|
||||
border-color: #AAAAAA;
|
||||
background-color: #AAAAAA;
|
||||
}
|
||||
}
|
@ -1,13 +1,18 @@
|
||||
.ascribe-panel-wrapper {
|
||||
border: 1px solid #F5F5F5;
|
||||
border: 1px solid #DDD;
|
||||
padding: 1.4em;
|
||||
margin: 1em 0 1em 0;
|
||||
}
|
||||
|
||||
.ascribe-panel-title {
|
||||
padding: 1em 0 1em 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ascribe-panel-content {
|
||||
padding: .75em 0 .75em 1em;
|
||||
font-size: 1em;
|
||||
color: #616161;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.ascribe-panel-buttons {
|
||||
margin-top: 0.5em;
|
||||
}
|
@ -28,6 +28,7 @@ $BASE_URL: '<%= BASE_URL %>';
|
||||
@import 'ascribe_slides_container';
|
||||
@import 'ascribe_form';
|
||||
@import 'ascribe_panel';
|
||||
@import 'ascribe_button';
|
||||
|
||||
@import 'whitelabel/index';
|
||||
|
||||
@ -325,6 +326,10 @@ hr {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.margin-left-2px{
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display:inline-block;
|
||||
-webkit-animation: spin 1s infinite linear;
|
||||
|
Loading…
Reference in New Issue
Block a user