From 5fcee39ed3195243b18b411f71680669976d526a Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Tue, 25 Aug 2015 15:19:10 +0200
Subject: [PATCH] shortlisting enabled up till loan request

---
 js/components/ascribe_detail/edition.js       |   8 +-
 .../prize/actions/prize_rating_actions.js     |  14 +++
 .../accordion_list_item_prize.js              |  54 ++++++---
 .../ascribe_detail/prize_piece_container.js   | 109 ++++++++++++------
 .../prize/constants/prize_api_urls.js         |   1 +
 .../prize/fetchers/prize_rating_fetcher.js    |   4 +
 .../ascribe_detail/cyland_piece_container.js  |   7 +-
 sass/ascribe_settings.scss                    |  15 ++-
 8 files changed, 147 insertions(+), 65 deletions(-)

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 9d2af633..4f4d424c 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -101,10 +101,6 @@ let Edition = React.createClass({
         this.transitionTo('pieces');
     },
 
-    getId() {
-        return {'bitcoin_id': this.props.edition.bitcoin_id};
-    },
-
     render() {
         return (
             <Row>
@@ -159,7 +155,7 @@ let Edition = React.createClass({
                         show={(this.state.currentUser.username && true || false) ||
                                 (this.props.edition.acl.acl_edit || this.props.edition.public_note)}>
                         <Note
-                            id={this.getId}
+                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
                             label={getLangText('Personal note (private)')}
                             defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null}
                             placeholder={getLangText('Enter your comments ...')}
@@ -168,7 +164,7 @@ let Edition = React.createClass({
                             url={ApiUrls.note_private_edition}
                             currentUser={this.state.currentUser}/>
                         <Note
-                            id={this.getId}
+                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
                             label={getLangText('Edition note (public)')}
                             defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
                             placeholder={getLangText('Enter your comments ...')}
diff --git a/js/components/whitelabel/prize/actions/prize_rating_actions.js b/js/components/whitelabel/prize/actions/prize_rating_actions.js
index 73569875..40e24858 100644
--- a/js/components/whitelabel/prize/actions/prize_rating_actions.js
+++ b/js/components/whitelabel/prize/actions/prize_rating_actions.js
@@ -57,6 +57,20 @@ class PrizeRatingActions {
         });
     }
 
+    toggleShortlist(pieceId) {
+        return Q.Promise((resolve, reject) => {
+            PrizeRatingFetcher
+                .select(pieceId)
+                .then((res) => {
+                    this.actions.updatePrizeRating(res.rating.rating);
+                    resolve(res);
+                })
+                .catch((err) => {
+                    reject(err);
+                });
+        });
+    }
+
     updateRating(rating) {
         this.actions.updatePrizeRating(rating);
     }
diff --git a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
index 9270efe1..0ca54d93 100644
--- a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -4,13 +4,17 @@ import React from 'react';
 import Router from 'react-router';
 import StarRating from 'react-star-rating';
 
-import AccordionListItemPiece from '../../../../ascribe_accordion_list/accordion_list_item_piece';
-
 import PieceListActions from '../../../../../actions/piece_list_actions';
 import PieceListStore from '../../../../../stores/piece_list_store';
 
+import PrizeRatingActions from '../../actions/prize_rating_actions';
+
 import UserStore from '../../../../../stores/user_store';
 
+import InputCheckbox from '../../../../ascribe_forms/input_checkbox';
+
+import AccordionListItemPiece from '../../../../ascribe_accordion_list/accordion_list_item_piece';
+
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
@@ -76,7 +80,7 @@ let AccordionListItemPrize = React.createClass({
                 }
                 else if (this.props.content.ratings.average){
                     rating = this.props.content.ratings.average;
-                    caption = 'Average (' + this.props.content.ratings.ratings.length + ' ratings)';
+                    caption = 'Average of ' + this.props.content.ratings.ratings.length + ' rating(s)';
                 }
 
                 return (
@@ -97,7 +101,7 @@ let AccordionListItemPrize = React.createClass({
                 if (this.state.currentUser.is_judge){
                     return (
                         <div className="react-rating-caption pull-right">
-                            No votes yet
+                            Not rated
                         </div>
                     );
                 }
@@ -126,22 +130,42 @@ let AccordionListItemPrize = React.createClass({
         );
     },
 
+    getPrizeBadge(){
+        if (this.state.currentUser && this.state.currentUser.is_judge) {
+            return (
+                <span className="pull-right ascribe-checkbox-wrapper ascribe-checkbox-badge">
+                    <InputCheckbox
+                        defaultChecked={this.props.content.selected}
+                        onChange={() => {
+                            PrizeRatingActions.toggleShortlist(this.props.content.id).then(
+                                PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+                                                                this.state.orderBy, this.state.orderAsc, this.state.filterBy)
+                        ); }}/>
+                </span>
+            );
+        }
+        return null;
+    },
+
     render() {
         let artistName = this.state.currentUser.is_jury ?
             <span className="glyphicon glyphicon-eye-close" style={{fontSize: '0.75em'}} aria-hidden="true"/> :
             this.props.content.artist_name;
         return (
-            <AccordionListItemPiece
-                className={this.props.className}
-                piece={this.props.content}
-                artistName={artistName}
-                subsubheading={
-                    <div className="pull-left">
-                        <span>{this.props.content.date_created.split('-')[0]}</span>
-                    </div>}
-                buttons={this.getPrizeButtons()}>
-                {this.props.children}
-            </AccordionListItemPiece>
+            <div>
+                <AccordionListItemPiece
+                    className={this.props.className}
+                    piece={this.props.content}
+                    artistName={artistName}
+                    subsubheading={
+                        <div className="pull-left">
+                            <span>{this.props.content.date_created.split('-')[0]}</span>
+                        </div>}
+                    buttons={this.getPrizeButtons()}
+                    badge={this.getPrizeBadge()}>
+                    {this.props.children}
+                </AccordionListItemPiece>
+            </div>
         );
     }
 });
diff --git a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
index 33cd411a..5d990392 100644
--- a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
@@ -26,6 +26,8 @@ import Property from '../../../../../components/ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../components/ascribe_forms/input_textarea_toggable';
 import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
+import InputCheckbox from '../../../../ascribe_forms/input_checkbox';
+
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
@@ -81,11 +83,13 @@ let PieceContainer = React.createClass({
 
     loadPiece() {
         PieceActions.fetchOne(this.props.params.pieceId);
+        this.setState(this.state);
     },
 
     render() {
         if('title' in this.state.piece) {
-            let artistName = this.state.currentUser.is_jury ?
+            let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
+                (this.state.currentUser.is_judge && !this.state.piece.selected )) ?
                 <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.state.piece.artist_name;
             return (
                 <Piece
@@ -105,6 +109,7 @@ let PieceContainer = React.createClass({
                         }
                     subheader={
                         <PrizePieceRatings
+                            loadPiece={this.loadPiece}
                             piece={this.state.piece}
                             currentUser={this.state.currentUser}/>
                     }>
@@ -156,6 +161,7 @@ let NavigationHeader = React.createClass({
 
 let PrizePieceRatings = React.createClass({
     propTypes: {
+        loadPiece: React.PropTypes.func,
         piece: React.PropTypes.object,
         currentUser: React.PropTypes.object
     },
@@ -203,22 +209,50 @@ let PrizePieceRatings = React.createClass({
     onRatingClick(event, args) {
         event.preventDefault();
         PrizeRatingActions.createRating(this.props.piece.id, args.rating).then(
-            PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                            this.state.orderBy, this.state.orderAsc, this.state.filterBy)
+            this.refreshPieceData()
         );
     },
 
-    getId() {
-        return {'piece_id': this.props.piece.id};
+    refreshPieceData() {
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+            this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        this.props.loadPiece();
     },
 
     render(){
-        if (this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
+        if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
             return (
-                <CollapsibleParagraph
-                    title="Average Rating"
-                    show={true}
-                    defaultExpanded={true}>
+                <div>
+                    <CollapsibleParagraph
+                        title="Shortlisting"
+                        show={true}
+                        defaultExpanded={true}>
+                        <div className="row no-margin">
+                            <span className="ascribe-checkbox-wrapper" style={{marginLeft: '1.5em'}}>
+                                <InputCheckbox
+                                    defaultChecked={this.props.piece.selected}
+                                    onChange={() => {
+                                        PrizeRatingActions.toggleShortlist(this.props.piece.id).then(
+                                            this.refreshPieceData()
+                                    ); }}>
+                                    <span>
+                                        Select for the prize
+                                    </span>
+                                </InputCheckbox>
+                            </span>
+                            <span className="pull-right">
+                                {this.props.piece.selected ?
+                                    <button className={'btn btn-default btn-sm '}>
+                                        SEND LOAN REQUEST
+                                    </button> : null}
+                            </span>
+                        </div>
+                        <hr />
+                    </CollapsibleParagraph>
+                    <CollapsibleParagraph
+                        title="Average Rating"
+                        show={true}
+                        defaultExpanded={true}>
                         <div id="list-rating" style={{marginLeft: '1.5em', marginBottom: '1em'}}>
                             <StarRating
                                 ref='average-rating'
@@ -229,33 +263,34 @@ let PrizePieceRatings = React.createClass({
                                 rating={this.state.average}
                                 ratingAmount={5}/>
                         </div>
-                    <hr />
-                    {this.state.ratings.map((item, i) => {
-                        let note = item.note ?
-                            <div className="rating-note">
-                                note: {item.note}
-                            </div> : null;
-                        return (
-                            <div className="rating-list">
-                                <div id="list-rating" className="row no-margin">
-                                <span className="pull-right">
-                                    <StarRating
-                                        ref={'rating' + i}
-                                        name={'rating' + i}
-                                        caption=""
-                                        size='sm'
-                                        step={0.5}
-                                        rating={item.rating}
-                                        ratingAmount={5}/>
-                                </span>
-                                <span> {item.user}</span>
-                                    {note}
+                        <hr />
+                        {this.state.ratings.map((item, i) => {
+                            let note = item.note ?
+                                <div className="rating-note">
+                                    note: {item.note}
+                                </div> : null;
+                            return (
+                                <div className="rating-list">
+                                    <div id="list-rating" className="row no-margin">
+                                    <span className="pull-right">
+                                        <StarRating
+                                            ref={'rating' + i}
+                                            name={'rating' + i}
+                                            caption=""
+                                            size='sm'
+                                            step={0.5}
+                                            rating={item.rating}
+                                            ratingAmount={5}/>
+                                    </span>
+                                    <span> {item.user}</span>
+                                        {note}
+                                    </div>
                                 </div>
-                            </div>
-                        );
-                    })}
-                    <hr />
-                </CollapsibleParagraph>);
+                            );
+                        })}
+                        <hr />
+                    </CollapsibleParagraph>
+                </div>);
         }
         else if (this.props.currentUser && this.props.currentUser.is_jury) {
             return (
@@ -275,7 +310,7 @@ let PrizePieceRatings = React.createClass({
                             ratingAmount={5} />
                         </div>
                     <Note
-                        id={this.getId}
+                        id={() => {return {'piece_id': this.props.piece.id}; }}
                         label={getLangText('Jury note')}
                         defaultValue={this.props.piece && this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null}
                         placeholder={getLangText('Enter your comments ...')}
diff --git a/js/components/whitelabel/prize/constants/prize_api_urls.js b/js/components/whitelabel/prize/constants/prize_api_urls.js
index 880a707b..2d35cf19 100644
--- a/js/components/whitelabel/prize/constants/prize_api_urls.js
+++ b/js/components/whitelabel/prize/constants/prize_api_urls.js
@@ -18,6 +18,7 @@ function getPrizeApiUrls(subdomain) {
         'ratings': AppPrizeConstants.prizeApiEndpoint + subdomain + '/ratings/',
         'rating': AppPrizeConstants.prizeApiEndpoint + subdomain + '/ratings/${piece_id}/',
         'rating_average': AppPrizeConstants.prizeApiEndpoint + subdomain + '/ratings/${piece_id}/average/',
+        'select_piece' : AppPrizeConstants.prizeApiEndpoint + subdomain + '/ratings/${piece_id}/select/',
         'notes': AppPrizeConstants.prizeApiEndpoint + subdomain + '/notes/',
         'note': AppPrizeConstants.prizeApiEndpoint + subdomain + '/notes/${piece_id}/'
 
diff --git a/js/components/whitelabel/prize/fetchers/prize_rating_fetcher.js b/js/components/whitelabel/prize/fetchers/prize_rating_fetcher.js
index eae4f53a..33450dd6 100644
--- a/js/components/whitelabel/prize/fetchers/prize_rating_fetcher.js
+++ b/js/components/whitelabel/prize/fetchers/prize_rating_fetcher.js
@@ -14,6 +14,10 @@ let PrizeRatingFetcher = {
 
     rate(pieceId, rating) {
         return requests.post('ratings', {body: {'piece_id': pieceId, 'note': rating}});
+    },
+
+    select(pieceId) {
+        return requests.post('select_piece', {'piece_id': pieceId});
     }
 };
 
diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
index da686ec1..75ccab10 100644
--- a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
@@ -67,11 +67,6 @@ let CylandPieceContainer = React.createClass({
         PieceActions.fetchOne(this.props.params.pieceId);
     },
 
-    getId() {
-        return {'id': this.state.piece.id};
-    },
-
-
     render() {
         if('title' in this.state.piece) {
             return (
@@ -106,7 +101,7 @@ let CylandPieceContainer = React.createClass({
                         show={(this.state.currentUser.username && true || false) ||
                                 (this.state.piece.public_note)}>
                         <Note
-                            id={this.getId}
+                            id={() => {return {'id': this.state.piece.id}; }}
                             label={getLangText('Personal note (private)')}
                             defaultValue={this.state.piece.private_note ? this.state.piece.private_note : null}
                             placeholder={getLangText('Enter your comments ...')}
diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss
index ad498646..624b8a3b 100644
--- a/sass/ascribe_settings.scss
+++ b/sass/ascribe_settings.scss
@@ -145,8 +145,15 @@
     display: inline-block;
     width: 100%;
     border-top: 1px solid rgba(0,0,0,.05);
-    
+
     padding: .5em 1.5em .5em 1.5em;
+}
+
+.ascribe-checkbox-wrapper{
+    .checkbox > span {color: black;}
+}
+
+.ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper {
 
     cursor:pointer;
 
@@ -196,4 +203,10 @@
         font-size: 20px;
         color: rgba(2, 182, 163, 1);
     }
+}
+
+.ascribe-checkbox-badge{
+    > span > span {
+        margin-top: 0;
+    }
 }
\ No newline at end of file