Merge remote-tracking branch 'origin/AD-419-decouple-piece-registration-from-' into AD-499-whitelabel-prize-with-sluice-as-k

js/components/ascribe_detail/piece.js

@@ -6,12 +6,8 @@ import Router from 'react-router';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
-
 import DetailProperty from './detail_property';
 
-import FurtherDetails from './further_details';
-
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
@@ -37,13 +33,15 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
+
 /**
  * This is the component that implements display-specific functionality
  */
 let Piece = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
-        loadPiece: React.PropTypes.func
+        loadPiece: React.PropTypes.func,
+        children: React.PropTypes.object
     },
 
     mixins: [Router.Navigation],
@@ -160,20 +158,8 @@ let Piece = React.createClass({
                     </AclButtonList>
 
                     {this.getCreateEditionsDialog()}
+                    {this.props.children}
 
-                    <CollapsibleParagraph
-                        title="Further Details"
-                        show={this.props.piece.acl.acl_edit
-                            || Object.keys(this.props.piece.extra_data).length > 0
-                            || this.props.piece.other_data !== null}
-                        defaultExpanded={true}>
-                        <FurtherDetails
-                            editable={this.props.piece.acl.acl_edit}
-                            pieceId={this.props.piece.id}
-                            extraData={this.props.piece.extra_data}
-                            otherData={this.props.piece.other_data}
-                            handleSuccess={this.props.loadPiece}/>
-                    </CollapsibleParagraph>
                 </Col>
             </Row>
         );

js/components/ascribe_detail/piece_container.js

@@ -6,6 +6,8 @@ import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
 
 import Piece from './piece';
+import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
+import FurtherDetails from './further_details';
 
 import AppConstants from '../../constants/application_constants';
 
@@ -46,7 +48,21 @@ let PieceContainer = React.createClass({
             return (
                 <Piece
                     piece={this.state.piece}
-                    loadPiece={this.loadPiece}/>
+                    loadPiece={this.loadPiece}>
+                    <CollapsibleParagraph
+                        title="Further Details"
+                        show={this.state.piece.acl.acl_edit
+                            || Object.keys(this.state.piece.extra_data).length > 0
+                            || this.state.piece.other_data !== null}
+                        defaultExpanded={true}>
+                        <FurtherDetails
+                            editable={this.state.piece.acl.acl_edit}
+                            pieceId={this.state.piece.id}
+                            extraData={this.state.piece.extra_data}
+                            otherData={this.state.piece.other_data}
+                            handleSuccess={this.loadPiece}/>
+                    </CollapsibleParagraph>
+                </Piece>
             );
         } else {
             return (

js/components/whitelabel/prize/components/ascribe_detail/piece_container.js

@@ -0,0 +1,85 @@
+'use strict';
+
+import React from 'react';
+
+import PieceActions from '../../../../../actions/piece_actions';
+import PieceStore from '../../../../../stores/piece_store';
+
+import Piece from '../../../../../components/ascribe_detail/piece';
+
+import AppConstants from '../../../../../constants/application_constants';
+
+import Form from '../../../../../components/ascribe_forms/form';
+import Property from '../../../../../components/ascribe_forms/property';
+import InputTextAreaToggable from '../../../../../components/ascribe_forms/input_textarea_toggable';
+import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph';
+
+/**
+ * This is the component that implements resource/data specific functionality
+ */
+let PieceContainer = React.createClass({
+    getInitialState() {
+        return PieceStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        PieceStore.listen(this.onChange);
+        PieceActions.fetchOne(this.props.params.pieceId);
+    },
+
+    componentWillUnmount() {
+        // Every time we're leaving the piece detail page,
+        // just reset the piece that is saved in the piece store
+        // as it will otherwise display wrong/old data once the user loads
+        // the piece detail a second time
+        PieceActions.updatePiece({});
+        
+        PieceStore.unlisten(this.onChange);
+    },
+
+
+    loadPiece() {
+        PieceActions.fetchOne(this.props.params.pieceId);
+    },
+
+    render() {
+        if('title' in this.state.piece) {
+            return (
+                <Piece
+                    piece={this.state.piece}
+                    loadPiece={this.loadPiece}>
+                    <CollapsibleParagraph
+                        title="Prize Details"
+                        show={true}
+                        defaultExpanded={true}>
+                        <Form
+                            ref='form'>
+                            <Property
+                                name='test'
+                                label='test'
+                                editable={false}>
+                                <InputTextAreaToggable
+                                    rows={1}
+                                    editable={false}
+                                    defaultValue='test'/>
+                            </Property>
+                            <hr />
+                        </Form>
+                    </CollapsibleParagraph>
+                </Piece>
+            );
+        } else {
+            return (
+                <div className="fullpage-spinner">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        }
+    }
+});
+
+export default PieceContainer;

js/components/whitelabel/prize/routes.js

@@ -9,7 +9,7 @@ import SignupContainer from './components/signup_container';
 import PasswordResetContainer from '../../../components/password_reset_container';
 import PrizeRegisterPiece from './components/register_piece';
 import PrizePieceList from './components/piece_list';
-import PieceContainer from '../../ascribe_detail/piece_container';
+import PrizePieceContainer from './components/ascribe_detail/piece_container';
 import EditionContainer from '../../ascribe_detail/edition_container';
 import SettingsContainer from '../../../components/settings_container';
 
@@ -29,7 +29,7 @@ function getRoutes(commonRoutes) {
             <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
             <Route name="register_piece" path="register_piece" handler={PrizeRegisterPiece} />
             <Route name="pieces" path="collection" handler={PrizePieceList} />
-            <Route name="piece" path="pieces/:pieceId" handler={PieceContainer} />
+            <Route name="piece" path="pieces/:pieceId" handler={PrizePieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
         </Route>