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

2024-12-22 09:23:13 +01:00 · 2015-07-10 14:49:19 +02:00 · 2015-07-10 14:49:19 +02:00 · 8679a2446d
commit 8679a2446d
parent 6a84e9d36e fd6fad5da3
19 changed files with 190 additions and 32 deletions
--- a/js/actions/edition_list_actions.js
+++ b/js/actions/edition_list_actions.js
@ -44,7 +44,7 @@ class EditionListActions {
                })
                .catch((err) => {
                    reject(err);
-                    console.log(err);
+                    //console.log(err);
                });
        });
        
--- a/js/actions/piece_list_actions.js
+++ b/js/actions/piece_list_actions.js
@ -9,7 +9,8 @@ class PieceListActions {
        this.generateActions(
            'updatePieceList',
            'updatePieceListRequestActions',
-            'addFirstEditionToPiece'
+            'addFirstEditionToPiece',
+            'updatePropertyForPiece'
        );
    }

--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/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>
--- a/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
+++ b/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;
--- a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
+++ b/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) {
-            return (
-                <span
-                    onClick={this.toggleTable}
-                    className="ascribe-accordion-list-item-edition-widget">
-                    + Editions
-                </span>
-            );
+            if(this.props.creatingEditions) {
+                return (
+                    <span>
+                        Creating Editions <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>
+                    </span>
+                );
+            } else {
+                return (
+                    <span
+                        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 : '';

--- a/js/components/ascribe_detail/edition.js
+++ b/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%', '...')}
-                            required/>
+                            placeholder={getLangText('Enter a public note for this edition%s', '...')}
+                            required="required"/>
                    </Property>
                    <Property hidden={true} name='bitcoin_id'>
                        <input defaultValue={this.props.edition.bitcoin_id}/>
@ -345,8 +345,7 @@ let CoaDetails = React.createClass({
        if (this.props.edition.coa) {
            CoaActions.fetchOne(this.props.edition.coa);
        }
-        else{
-            console.log('create coa');
+        else {
            CoaActions.create(this.props.edition);
        }
    },
--- a/js/components/ascribe_detail/further_details.js
+++ b/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,
--- a/js/components/ascribe_forms/form_piece_extradata.js
+++ b/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>
--- a/js/components/ascribe_forms/form_property_header.js
+++ b/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() {
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/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,
--- a/js/components/login_container.js
+++ b/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
--- a/js/components/register_piece.js
+++ b/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">
-			{getLangText('Learn more')}
+                        <a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">{getLangText('Learn more')}
                        </a>}>
                    <select name="license">
                        {this.state.licenses.map((license, i) => {
--- a/js/constants/api_urls.js
+++ b/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/',
--- a/js/constants/languages.js
+++ b/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',
    }
 };

--- a/js/fetchers/coa_fetcher.js
+++ b/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}});
    }
 };
--- a/js/stores/piece_list_store.js
+++ b/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');
--- a/sass/ascribe-global-notification.scss
+++ b/sass/ascribe-global-notification.scss
@ -50,7 +50,7 @@
 }

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

 .ascribe-global-notification-bubble-on {
--- a/sass/ascribe_accordion_list.scss
+++ b/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;
    }
--- a/sass/ascribe_uploader.scss
+++ b/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;