add edition creation functionality

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,8 +3,6 @@
 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';
@@ -12,6 +10,12 @@ 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';
 
 let Link = Router.Link;
@@ -25,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);
@@ -46,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.count
+                });
+
+                EditionListActions.toggleEditionList(this.props.content.id);
+
+            })
+            .catch(() => {
+                /* Ignore and keep going */
+            });
+        }, 5000);
+
+        this.setState({
+            pollingIntervalIndex
+        });
+    },
+
     render() {
         let linkData;
 
@@ -86,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> */}
@@ -98,7 +157,8 @@ let AccordionListItem = React.createClass({
                         </div>
                     </div>
                 </div>
-                <AccordionListItemCreateEditions />
+                {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

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import Form from '../ascribe_forms/form';
-import FormPropertyHeader from '../ascribe_forms/form_property_header';
 import Property from '../ascribe_forms/property';
 
 import apiUrls from '../../constants/api_urls';
@@ -11,8 +10,18 @@ import { getLangText } from '../../utils/lang_utils';
 
 let AccordionListItemCreateEditions = React.createClass({
 
-    handleSuccess() {
+    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() {
@@ -20,21 +29,14 @@ let AccordionListItemCreateEditions = React.createClass({
             <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_list}
+                    url={apiUrls.editions}
                     getFormData={this.getFormData}
-                    handleSuccess={this.handleSuccess}
-                    buttons={<button
-                                type="submit"
-                                className="btn ascribe-btn ascribe-btn-login"
-                                disabled={false}>
-                                {getLangText('Create editions')}
-                            </button>}
+                    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')}>

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_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/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/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 {