From e9c52765a89d881ac05f28f89d0f28b9669cd761 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 22 Dec 2015 10:05:03 +0100 Subject: [PATCH] Add UI button to allow admins to advance rounds --- .../prize_advance_round_modal.js | 53 ++++++++ .../components/prize_settings_container.js | 128 +++++++++++------- sass/ascribe_modal.scss | 3 + sass/main.scss | 1 + .../portfolioreview_custom_style.scss | 20 +++ 5 files changed, 159 insertions(+), 46 deletions(-) create mode 100644 js/components/whitelabel/prize/simple_prize/components/ascribe_modal/prize_advance_round_modal.js create mode 100644 sass/ascribe_modal.scss diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_modal/prize_advance_round_modal.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_modal/prize_advance_round_modal.js new file mode 100644 index 00000000..ea9e3ec5 --- /dev/null +++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_modal/prize_advance_round_modal.js @@ -0,0 +1,53 @@ +'use strict' + +import React from 'react'; + +import { getLangText } from '../../../../../../utils/lang_utils'; + +const PrizeAdvanceRoundModal = React.createClass({ + propTypes: { + handleSuccess: React.PropTypes.func, + handleCancel: React.PropTypes.func + }, + + render() { + const { handleCancel, handleSuccess } = this.props; + + return ( +
+
+

+ {getLangText('Are you sure you want to advance to the next round of judging?')} +

+

+ {getLangText('Advancing will keep only the currently selected pieces for review in the next round. ' + + 'Ratings associated with each piece will be reset and all currently active jury members will be deactivated as well.')} +

+ {/* Remove once api is up */} +

+ {getLangText('Note: Advancing to the next round will only be available after submissions end on Dec. 27th.')} +

+
+
+ {/* Remove disabled from here too */} + +
+
+ +
+
+ ); + } +}); + +export default PrizeAdvanceRoundModal; diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js index 145a9d24..35bba5b2 100644 --- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js +++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js @@ -2,6 +2,8 @@ import React from 'react'; +import PrizeAdvanceRoundModal from './ascribe_modal/prize_advance_round_modal'; + import UserStore from '../../../../../stores/user_store'; import UserActions from '../../../../../actions/user_actions'; import PrizeActions from '../actions/prize_actions'; @@ -15,6 +17,8 @@ import CollapsibleParagraph from '../../../../ascribe_collapsible/collapsible_pa import Form from '../../../../ascribe_forms/form'; import Property from '../../../../ascribe_forms/property'; +import ModalWrapper from '../../../../ascribe_modal/modal_wrapper'; + import ActionPanel from '../../../../ascribe_panel/action_panel'; import GlobalNotificationModel from '../../../../../models/global_notification_model'; @@ -27,7 +31,7 @@ import { getLangText } from '../../../../../utils/lang_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; -let Settings = React.createClass({ +const Settings = React.createClass({ getInitialState() { return UserStore.getState(); }, @@ -48,20 +52,15 @@ let Settings = React.createClass({ render() { setDocumentTitle(getLangText('Account settings')); - let prizeSettings = null; - if (this.state.currentUser.is_admin){ - prizeSettings = ; - } return ( - {prizeSettings} + {this.state.currentUser.is_admin ? : null} ); } }); -let PrizeSettings = React.createClass({ - +const PrizeSettings = React.createClass({ getInitialState() { return PrizeStore.getState(); }, @@ -78,40 +77,74 @@ let PrizeSettings = React.createClass({ onChange(state) { this.setState(state); }, + + advanceRound() { + // TODO: add action to prizes to advance round once api is available + }, + render() { return ( - -
- - 
{this.state.prize.name}
- - - 
{this.state.prize.active_round}/{this.state.prize.rounds}
- - - 
{this.state.prize.num_submissions}
- +
+ + + + 
{this.state.prize.name}
+ + + 
{this.state.prize.num_submissions}
+ +
- - - +
+ + {getLangText('ADVANCE ROUND')} + + )}> + + +
+ )}> +

{getLangText('Judging Rounds')}

+ + 
{this.state.prize.rounds}
+ + + 
{this.state.prize.active_round}
+ + +
+ + + ); } }); -let PrizeJurySettings = React.createClass({ +const PrizeJurySettings = React.createClass({ propTypes: { prize: React.PropTypes.object }, @@ -141,29 +174,31 @@ let PrizeJurySettings = React.createClass({ }, handleActivate(event) { - let email = event.target.getAttribute('data-id'); - PrizeJuryActions.activateJury(email).then((response) => { + const email = event.target.getAttribute('data-id'); + PrizeJuryActions + .activateJury(email) + .then((response) => { PrizeJuryActions.fetchJury(); this.displayNotification(response); }); }, handleRevoke(event) { - let email = event.target.getAttribute('data-id'); + const email = event.target.getAttribute('data-id'); PrizeJuryActions .revokeJury(email) .then(this.displayNotification); }, handleResend(event) { - let email = event.target.getAttribute('data-id'); + const email = event.target.getAttribute('data-id'); PrizeJuryActions .resendJuryInvitation(email) .then(this.displayNotification); }, displayNotification(response) { - let notification = new GlobalNotificationModel(response.notification, 'success', 5000); + const notification = new GlobalNotificationModel(response.notification, 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); }, @@ -172,7 +207,7 @@ let PrizeJurySettings = React.createClass({ return (
@@ -207,7 +242,7 @@ let PrizeJurySettings = React.createClass({ return (
@@ -235,7 +270,7 @@ let PrizeJurySettings = React.createClass({ return (
@@ -260,9 +295,8 @@ let PrizeJurySettings = React.createClass({ }, getMembers() { - let content = ; if (this.state.members.length > -1) { - content = ( + return (
); + } else { + return ; } - return content; }, + render() { return (
diff --git a/sass/ascribe_modal.scss b/sass/ascribe_modal.scss new file mode 100644 index 00000000..64c5486c --- /dev/null +++ b/sass/ascribe_modal.scss @@ -0,0 +1,3 @@ +.ascribe-modal-content { + margin: 20px 0; +} diff --git a/sass/main.scss b/sass/main.scss index a7049c17..0f9a1dbf 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -42,6 +42,7 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'ascribe_custom_style'; @import 'ascribe_button'; @import 'ascribe_spinner'; +@import 'ascribe_modal'; @import 'whitelabel/index'; diff --git a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss index 0759cf49..6d03520e 100644 --- a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss +++ b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss @@ -22,6 +22,26 @@ $pr--button-color: $pr--nav-fg-prim-color; } } + .btn-secondary { + background-color: white; + border-color: $pr--button-color; + color: $pr--button-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: lighten($pr--button-color, 20%); + border-color: lighten($pr--button-color, 20%); + color: white; + } + } + .navbar-default { .navbar-nav > .ascribe-powered-by, li > a { color: $pr--button-color !important;