Add sliding piece registration with dummy additional form

js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js

@@ -0,0 +1,129 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../../../../../ascribe_forms/form';
+import Property from '../../../../../ascribe_forms/property';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+
+import requests from '../../../../../../utils/requests';
+
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+
+let LumenusAdditionalDataForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func,
+        piece: React.PropTypes.object.isRequired,
+        isInline: React.PropTypes.bool,
+        location: React.PropTypes.object
+    },
+
+    getDefaultProps() {
+        return {
+            isInline: false
+        };
+    },
+
+    getInitialState() {
+        return {
+            isUploadReady: true
+        };
+    },
+
+    handleSuccess() {
+        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getFormData() {
+        let extradata = {};
+        let formRefs = this.refs.form.refs;
+
+        // Put additional fields in extra data object
+        Object
+            .keys(formRefs)
+            .forEach((fieldName) => {
+                extradata[fieldName] = formRefs[fieldName].state.value;
+            });
+
+        return {
+            extradata: extradata,
+            piece_id: this.props.piece.id
+        };
+
+    },
+
+    render() {
+        let { piece, isInline, handleSuccess } = this.props;
+        let buttons, spinner, heading;
+
+        if(!isInline) {
+            buttons = (
+                <button
+                    type="submit"
+                    className="btn ascribe-btn ascribe-btn-login">
+                    {getLangText('Register work')}
+                </button>
+            );
+
+            spinner = (
+                <div className="modal-footer">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                </div>
+            );
+
+            heading = (
+                <div className="ascribe-form-header">
+                    <h3>
+                        {getLangText('Provide additional details')}
+                    </h3>
+                </div>
+            );
+        }
+
+        if(piece && piece.id) {
+            return (
+                <Form
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    handleSuccess={handleSuccess || this.handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={buttons}
+                    spinner={spinner}>
+                    {heading}
+                    <Property
+                        name='dummy_field'
+                        label={getLangText('Dummy Field')}>
+                        <input
+                            type="text"
+                            placeholder="Your awesome field here!"
+                            required/>
+                    </Property>
+                    <Property
+                        name='dummy_field'
+                        label={getLangText('Dummy Field')}>
+                        <input
+                            type="text"
+                            placeholder="Or here!"
+                            required/>
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        }
+    }
+});
+
+export default LumenusAdditionalDataForm;

js/components/whitelabel/wallet/components/lumenus/lumenus_register_piece.js

@@ -0,0 +1,195 @@
+'use strict';
+
+import React from 'react';
+import { History } from 'react-router';
+
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+
+import Property from '../../../../ascribe_forms/property';
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import PieceListStore from '../../../../../stores/piece_list_store';
+import PieceListActions from '../../../../../actions/piece_list_actions';
+
+import UserStore from '../../../../../stores/user_store';
+import UserActions from '../../../../../actions/user_actions';
+
+import PieceStore from '../../../../../stores/piece_store';
+import PieceActions from '../../../../../actions/piece_actions';
+
+import LumenusAdditionalDataForm from './lumenus_forms/lumenus_additional_data_form';
+
+import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+
+
+let LumenusRegisterPiece = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    mixins: [History],
+
+    getInitialState(){
+        return mergeOptions(
+            UserStore.getState(),
+            PieceListStore.getState(),
+            PieceStore.getState(),
+            WhitelabelStore.getState(),
+            {
+                selectedLicense: 0,
+                isFineUploaderActive: false,
+                step: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        PieceStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+
+        let queryParams = this.props.location.query;
+
+        // Since every step of this register process is atomic,
+        // we may need to enter the process at step 1 or 2.
+        // If this is the case, we'll need the piece number to complete submission.
+        // It is encoded in the URL as a queryParam and we're checking for it here.
+        //
+        // We're using 'in' here as we want to know if 'piece_id' is present in the url,
+        // we don't care about the value.
+        if(queryParams && 'piece_id' in queryParams) {
+            PieceActions.fetchOne(queryParams.piece_id);
+        }
+    },
+
+    componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
+        PieceStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+
+        if(this.state.currentUser && this.state.currentUser.email) {
+            // we should also make the fineuploader component editable again
+            this.setState({
+                isFineUploaderActive: true
+            });
+        }
+    },
+
+    handleRegisterSuccess(response){
+        this.refreshPieceList();
+
+        // also start loading the piece for the next step
+        if(response && response.piece) {
+            PieceActions.updatePiece({});
+            PieceActions.updatePiece(response.piece);
+        }
+
+        this.incrementStep();
+
+        this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id });
+    },
+
+    handleAdditionalDataSuccess() {
+        // We need to refetch the piece again after submitting the additional data
+        // since we want it's otherData to be displayed when the user choses to click
+        // on the browsers back button.
+        PieceActions.fetchOne(this.state.piece.id);
+
+        this.refreshPieceList();
+
+        this.history.pushState(null, `/collection`);
+    },
+
+    // We need to increase the step to lock the forms that are already filled out
+    incrementStep() {
+        // also increase step
+        let newStep = this.state.step + 1;
+        this.setState({
+            step: newStep
+        });
+    },
+
+    refreshPieceList() {
+        PieceListActions.fetchPieceList(
+            this.state.page,
+            this.state.pageSize,
+            this.state.searchTerm,
+            this.state.orderBy,
+            this.state.orderAsc,
+            this.state.filterBy
+        );
+    },
+
+    // basically redirects to the second slide (index: 1), when the user is not logged in
+    onLoggedOut() {
+        this.history.pushState(null, '/login');
+    },
+
+    render() {
+        setDocumentTitle(getLangText('Register a new piece'));
+
+        return (
+            <SlidesContainer
+                ref="slidesContainer"
+                forwardProcess={true}
+                glyphiconClassNames={{
+                    pending: 'glyphicon glyphicon-chevron-right',
+                    completed: 'glyphicon glyphicon-lock'
+                }}
+                location={this.props.location}>
+                <div data-slide-title={getLangText('Register work')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <RegisterPieceForm
+                                disabled={this.state.step > 0}
+                                enableLocalHashing={false}
+                                headerMessage={getLangText('Consign to Lumenus')}
+                                submitMessage={getLangText('Proceed to additional details')}
+                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                handleSuccess={this.handleRegisterSuccess}
+                                onLoggedOut={this.onLoggedOut}
+                                location={this.props.location}>
+                                <Property
+                                    name="num_editions"
+                                    label={getLangText('Specify editions')}>
+                                    <input
+                                        type="number"
+                                        placeholder="(e.g. 32)"
+                                        min={0}
+                                        required/>
+                                </Property>
+                            </RegisterPieceForm>
+                        </Col>
+                    </Row>
+                </div>
+                <div data-slide-title={getLangText('Additional details')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <LumenusAdditionalDataForm
+                                handleSuccess={this.handleAdditionalDataSuccess}
+                                piece={this.state.piece}
+                                location={this.props.location}/>
+                        </Col>
+                    </Row>
+                </div>
+            </SlidesContainer>
+        );
+    }
+});
+
+export default LumenusRegisterPiece;

js/components/whitelabel/wallet/wallet_routes.js

@@ -30,6 +30,7 @@ import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_p
 import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
 
 import LumenusPieceList from './components/lumenus/lumenus_piece_list';
+import LumenusRegisterPiece from './components/lumenus/lumenus_register_piece';
 
 import CCRegisterPiece from './components/cc/cc_register_piece';
 
@@ -174,7 +175,7 @@ let ROUTES = {
                 component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
             <Route
                 path='register_piece'
-                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(RegisterPiece)}
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(LumenusRegisterPiece)}
                 headerTitle='+ NEW WORK'/>
             <Route
                 path='collection'