Merge remote-tracking branch 'remotes/origin/AD-551-work-on-burn-down-list' into AD-419-decouple-piece-registration-from-

js/actions/edition_list_actions.js

@@ -44,7 +44,7 @@ class EditionListActions {
                 })
                 .catch((err) => {
                     reject(err);
-                    console.log(err);
+                    //console.log(err);
                 });
         });
         

js/actions/piece_list_actions.js

@@ -9,7 +9,8 @@ class PieceListActions {
         this.generateActions(
             'updatePieceList',
             'updatePieceListRequestActions',
-            'addFirstEditionToPiece'
+            'addFirstEditionToPiece',
+            'updatePropertyForPiece'
         );
     }
 

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -3,13 +3,18 @@
 import React from 'react';
 import Router from 'react-router';
 
-import PieceListActions from '../../actions/piece_list_actions';
-
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
+import AccordionListItemCreateEditions from './accordion_list_item_create_editions';
+
+import PieceListActions from '../../actions/piece_list_actions';
+import EditionListActions from '../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -24,6 +29,13 @@ let AccordionListItem = React.createClass({
 
     mixins: [Router.Navigation],
 
+    getInitialState() {
+        return {
+            showCreateEditionsDialog: false,
+            creatingEditions: false
+        };
+    },
+
     componentDidMount() {
         if(this.props.content.num_editions !== 0) {
             PieceListActions.fetchFirstEditionForPiece(this.props.content.id);
@@ -45,6 +57,52 @@ let AccordionListItem = React.createClass({
         return null;
     },
 
+    toggleCreateEditionsDialog() {
+        this.setState({
+            showCreateEditionsDialog: !this.state.showCreateEditionsDialog
+        });
+    },
+
+    handleEditionCreationSuccess(response) {
+        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        this.setState({
+            creatingEditions: true
+        });
+
+        this.toggleCreateEditionsDialog();
+
+        // start polling until editions are defined
+        let pollingIntervalIndex = setInterval(() => {
+            EditionListActions.fetchEditionList(this.props.content.id)
+            .then((res) => {
+
+                clearInterval(this.state.pollingIntervalIndex);
+                
+                this.setState({
+                    creatingEditions: false
+                });
+
+                PieceListActions.updatePropertyForPiece({
+                    pieceId: this.props.content.id,
+                    key: 'num_editions',
+                    value: res.editions[0].num_editions
+                });
+
+                EditionListActions.toggleEditionList(this.props.content.id);
+
+            })
+            .catch(() => {
+                /* Ignore and keep going */
+            });
+        }, 5000);
+
+        this.setState({
+            pollingIntervalIndex
+        });
+    },
+
     render() {
         let linkData;
 
@@ -85,7 +143,9 @@ let AccordionListItem = React.createClass({
                             </div>
                             <div>
                                 <AccordionListItemEditionWidget
-                                    piece={this.props.content}/>
+                                    piece={this.props.content}
+                                    toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
+                                    creatingEditions={this.state.creatingEditions}/>
                                 {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
                                     {getLangText('%s license', this.props.content.license_type.code)}
                                 </a> */}
@@ -97,6 +157,8 @@ let AccordionListItem = React.createClass({
                         </div>
                     </div>
                 </div>
+                {this.props.content.num_editions === 0 && this.state.showCreateEditionsDialog ? <AccordionListItemCreateEditions pieceId={this.props.content.id} handleSuccess={this.handleEditionCreationSuccess}/> : null}
+                
                 {/* this.props.children is AccordionListItemTableEditions */}
                 {this.props.children}
             </div>

js/components/ascribe_accordion_list/accordion_list_item_create_editions.js

@@ -0,0 +1,54 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import apiUrls from '../../constants/api_urls';
+import { getLangText } from '../../utils/lang_utils';
+
+let AccordionListItemCreateEditions = React.createClass({
+
+    propTypes: {
+        pieceId: React.PropTypes.number,
+        handleSuccess: React.PropTypes.func
+    },
+
+    getFormData(){
+        let data = {};
+        for (let ref in this.refs.form.refs){
+            data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
+        }
+        data.piece_id = parseInt(this.props.pieceId, 10);
+        return data;
+    },
+
+    render() {
+        return (
+            <div className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
+                <Form
+                    ref='form'
+                    url={apiUrls.editions}
+                    getFormData={this.getFormData}
+                    handleSuccess={this.props.handleSuccess}
+                    spinner={
+                        <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                            <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        </button>
+                        }>
+                    <Property
+                        name='num_editions'
+                        label={getLangText('Number of editions')}>
+                        <input
+                            type="number"
+                            placeholder="(e.g. 32)"
+                            min={0}/>
+                    </Property>
+                </Form>
+            </div>
+        );
+    }
+});
+
+export default AccordionListItemCreateEditions;

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -9,7 +9,9 @@ import { getLangText } from '../../utils/lang_utils';
 
 let AccordionListItemEditionWidget = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object.isRequired
+        piece: React.PropTypes.object.isRequired,
+        toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
+        creatingEditions: React.PropTypes.bool.isRequired
     },
 
     getInitialState() {
@@ -74,13 +76,21 @@ let AccordionListItemEditionWidget = React.createClass({
         let numEditions = piece.num_editions;
 
         if(numEditions === 0) {
+            if(this.props.creatingEditions) {
+                return (
+                    <span>
+                        Creating Editions <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>
+                    </span>
+                );
+            } else {
                 return (
                     <span
-                    onClick={this.toggleTable}
+                        onClick={this.props.toggleCreateEditionsDialog}
                         className="ascribe-accordion-list-item-edition-widget">
                         + Editions
                     </span>
                 );
+            }
         } else if(numEditions === 1) {
             let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : '';
 

js/components/ascribe_detail/edition.js

@@ -279,7 +279,7 @@ let EditionPersonalNote = React.createClass({
                             editable={true}
                             defaultValue={this.props.edition.note_from_user}
                             placeholder={getLangText('Enter a personal note%s', '...')}
-                            required/>
+                            required="required"/>
                     </Property>
                     <Property hidden={true} name='bitcoin_id'>
                         <input defaultValue={this.props.edition.bitcoin_id}/>
@@ -317,8 +317,8 @@ let EditionPublicEditionNote = React.createClass({
                             rows={1}
                             editable={isEditable}
                             defaultValue={this.props.edition.public_note}
-                            placeholder={getLangText('Enter a public note for this edition%', '...')}
+                            placeholder={getLangText('Enter a public note for this edition%s', '...')}
-                            required/>
+                            required="required"/>
                     </Property>
                     <Property hidden={true} name='bitcoin_id'>
                         <input defaultValue={this.props.edition.bitcoin_id}/>
@@ -346,7 +346,6 @@ let CoaDetails = React.createClass({
             CoaActions.fetchOne(this.props.edition.coa);
         }
         else {
-            console.log('create coa');
             CoaActions.create(this.props.edition);
         }
     },

js/components/ascribe_detail/further_details.js

@@ -24,7 +24,7 @@ import { getCookie } from '../../utils/fetch_api_utils';
 let FurtherDetails = React.createClass({
     propTypes: {
         editable: React.PropTypes.bool,
-        pieceId: React.PropTypes.int,
+        pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
         otherData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -105,7 +105,7 @@ let FurtherDetails = React.createClass({
 
 let FileUploader = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.int,
+        pieceId: React.PropTypes.number,
         otherData: React.PropTypes.object,
         setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,

js/components/ascribe_forms/form_piece_extradata.js

@@ -13,7 +13,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 let PieceExtraDataForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.int,
+        pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
         name: React.PropTypes.string,
@@ -49,7 +49,7 @@ let PieceExtraDataForm = React.createClass({
                         editable={this.props.editable}
                         defaultValue={defaultValue}
                         placeholder={getLangText('Fill in%s', ' ') + this.props.title}
-                        required/>
+                        required="required"/>
                 </Property>
                 <hr />
             </Form>

js/components/ascribe_forms/form_property_header.js

@@ -4,7 +4,10 @@ import React from 'react';
 
 let FormPropertyHeader = React.createClass({
     propTypes: {
-        children: React.PropTypes.arrayOf(React.PropTypes.element)
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     render() {

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -24,11 +24,17 @@ var ReactS3FineUploader = React.createClass({
         keyRoutine: React.PropTypes.shape({
             url: React.PropTypes.string,
             fileClass: React.PropTypes.string,
-            pieceId: React.PropTypes.string
+            pieceId: React.PropTypes.oneOfType([
+                React.PropTypes.string,
+                React.PropTypes.number
+            ])
         }),
         createBlobRoutine: React.PropTypes.shape({
             url: React.PropTypes.string,
-            pieceId: React.PropTypes.string
+            pieceId: React.PropTypes.oneOfType([
+                React.PropTypes.string,
+                React.PropTypes.number
+            ])
         }),
         submitKey: React.PropTypes.func,
         autoUpload: React.PropTypes.bool,
@@ -70,7 +76,10 @@ var ReactS3FineUploader = React.createClass({
             customHeaders: React.PropTypes.object
         }).isRequired,
         session: React.PropTypes.shape({
-            endpoint: React.PropTypes.bool
+            customHeaders: React.PropTypes.object,
+            endpoint: React.PropTypes.string,
+            params: React.PropTypes.object,
+            refreshOnRequests: React.PropTypes.bool
         }),
         validation: React.PropTypes.shape({
             itemLimit: React.PropTypes.number,

js/components/login_container.js

@@ -81,7 +81,7 @@ let LoginForm = React.createClass({
     },
 
     handleSuccess(){
-        let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
+        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // register_piece is waiting for a login success as login_container and it is wrapped

js/components/register_piece.js

@@ -138,8 +138,7 @@ let RegisterPiece = React.createClass( {
                     label={getLangText('Copyright license%s', '...')}
                     onChange={this.onLicenseChange}
                     footer={
-                        <a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">
+                        <a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">{getLangText('Learn more')}
-			{getLangText('Learn more')}
                         </a>}>
                     <select name="license">
                         {this.state.licenses.map((license, i) => {

js/constants/api_urls.js

@@ -13,6 +13,7 @@ let apiUrls = {
     'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
     'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
     'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
+    'editions': AppConstants.apiEndpoint + 'editions/', // this should be moved to the one below
     'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
     'licenses': AppConstants.apiEndpoint + 'ownership/licenses/',
     'note_notes': AppConstants.apiEndpoint + 'note/notes/',

js/constants/languages.js

@@ -206,6 +206,7 @@ const languages = {
         'Title': 'Title',
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
+        'Create editions': 'Create editions',
     },
     'de': {
         'ID': 'ID',
@@ -412,6 +413,7 @@ const languages = {
         'Title': 'Titel',
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
+        'Create editions': 'Create editions',
     },
     'fr': {
         'ID': 'ID',
@@ -618,6 +620,7 @@ const languages = {
         'Title': 'Title',
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
+        'Create editions': 'Create editions',
     }
 };
 

js/fetchers/coa_fetcher.js

@@ -11,7 +11,6 @@ let CoaFetcher = {
         return requests.get('coa', {'id': id});
     },
     create(bitcoinId) {
-        console.log(bitcoinId);
         return requests.post('coa_create', {body: {'bitcoin_id': bitcoinId}});
     }
 };

js/stores/piece_list_store.js

@@ -84,6 +84,19 @@ class PieceListStore {
             throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
         }
     }
+
+    onUpdatePropertyForPiece({pieceId, key, value}) {
+        let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);
+
+        if(filteredPieceList.length === 1) {
+
+            let piece = filteredPieceList[0];
+            piece[key] = value;
+
+        } else {
+            throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
+        }
+    }
 }
 
 export default alt.createStore(PieceListStore, 'PieceListStore');

sass/ascribe-global-notification.scss

@@ -50,7 +50,7 @@
 }
 
 .ascribe-global-notification-bubble-off {
-    right: -50em;
+    right: -100em;
 }
 
 .ascribe-global-notification-bubble-on {

sass/ascribe_accordion_list.scss

@@ -150,6 +150,11 @@ span.ascribe-accordion-list-table-toggle {
 .ascribe-accordion-list-item-edition-widget {
     cursor: pointer;
 
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+
     &:hover {
         color: $ascribe-color-dark;
     }

sass/ascribe_uploader.scss

@@ -82,7 +82,7 @@
 
 .file-drag-and-drop-preview-image .action-file {
     font-size: 2.5em;
-    margin-top: .3em;
+    margin-top: .6em;
     color: white;
     text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
     cursor: pointer;