jury invitation, revoke, resend

MIGRATE!

js/components/ascribe_panel/action_panel.js

@@ -48,20 +48,23 @@ let ActionPanel = React.createClass({
     render() {
 
         return (
-            <div
+            <div className={'ascribe-panel-wrapper ' + this.getClassName()}>
-                className={'ascribe-panel-wrapper ' + this.getClassName()}
+                <div className='row'>
-                onClick={this.handleFocus}
+                    <div className='col-xs-7 col-md-8'>
-                onFocus={this.handleFocus}>
+                        <div className='ascribe-panel-content-wrapper'>
                             <div className='ascribe-panel-title'>
                                 {this.props.title}
                             </div>
-                <div className='ascribe-panel-content-wrapper'>
+                            <div className="ascribe-panel-content">
-                    <span className="ascribe-panel-content pull-left">
                                 {this.props.content}
-                    </span>
+                            </div>
-                    <span className='ascribe-panel-buttons pull-right'>
+                        </div>
+                    </div>
+                    <div className='col-xs-5 col-md-4'>
+                        <div className='ascribe-panel-buttons'>
                             {this.props.buttons}
-                    </span>
+                        </div>
+                    </div>
                 </div>
             </div>
         );

js/components/whitelabel/prize/actions/prize_jury_actions.js

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

js/components/whitelabel/prize/components/settings_container.js

@@ -144,36 +144,138 @@ let PrizeJurySettings = React.createClass({
         this.refs.form.refs.email.refs.input.getDOMNode().value = null;
     },
 
-    render() {
+    handleActivate(event) {
-        let content = (
+        let email = event.target.getAttribute('data-id');
-            <div style={{textAlign: 'center'}}>
+        PrizeJuryActions.activateJury(email).then((response) => {
-                <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                PrizeJuryActions.fetchJury();
-            </div>);
+                let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
+                GlobalNotificationActions.appendGlobalNotification(notification);
+            });
+    },
 
-        if (this.state.members.length > -1) {
+    handleRevoke(event) {
-            content = this.state.members.map(function(member, i) {
+        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={<button
+                    buttons={
-                                    className="pull-right btn btn-default btn-sm"
+                        <div className="pull-right">
-                                    data-id={member.name}>
+                            <button
-                                    {getLangText('RESEND INVITATION')}
+                                className="btn btn-default btn-sm margin-left-2px"
-                                </button>}
+                                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 = (
-                <div>
+                <div style={{padding: '1em'}}>
-                    {content}
+                    <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>
         );
     }

js/components/whitelabel/prize/constants/api_urls.js

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

js/components/whitelabel/prize/fetchers/prize_jury_fetcher.js

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

js/components/whitelabel/prize/stores/prize_jury_store.js

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

sass/ascribe_button.scss

@@ -0,0 +1,9 @@
+.ascribe-btn-gray {
+    border-color: #CCCCCC;
+    background-color: #CCCCCC;
+
+    &:hover{
+        border-color: #AAAAAA;
+        background-color: #AAAAAA;
+    }
+}

sass/ascribe_panel.scss

@@ -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: 0.9em;
-    font-size: 1em;
+    color: rgba(0,0,0,0.5);
-    color: #616161;
+}
+
+.ascribe-panel-buttons {
+    margin-top: 0.5em;
 }

sass/main.scss

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