Merge remote-tracking branch 'remotes/origin/master' into AD-419-decouple-piece-registration-from-

js/app.js

@@ -33,6 +33,7 @@ requests.defaults({
 class AppGateway {
 
     start() {
+        console.log('start');
         let subdomain = window.location.host.split('.')[0];
         requests.get('whitelabel_settings', {'subdomain': subdomain})
             .then(this.loadSubdomain.bind(this))
@@ -45,11 +46,13 @@ class AppGateway {
         this.load('prize');
     }
 
-    loadDefault() {
+    loadDefault(error) {
+        console.log('Loading default app, error'. error);
         this.load('default');
     }
 
     load(type) {
+        console.log('loading', type);
         Router.run(getRoutes(type), Router.HistoryLocation, (App) => {
             React.render(
                 <App />,

js/components/ascribe_accordion_list/accordion_list.js

@@ -22,7 +22,7 @@ let AccordionList = React.createClass({
         } else if(this.props.count === 0) {
             return (
                 <div>
-                    <p className="text-center">{getLangText('We could not find any works related to you%s', '...')}</p>
+                    <p className="text-center">{getLangText('We could not find any works related to you...')}</p>
                     <p className="text-center">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
                 </div>
             );

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -13,9 +13,6 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
 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;

js/components/ascribe_forms/form_register_piece.js

@@ -18,11 +18,20 @@ import { getLangText } from '../../utils/lang_utils';
 
 let RegisterPieceForm = React.createClass({
     propTypes: {
+        headerMessage: React.PropTypes.string,
+        submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
         isFineUploaderEditable: React.PropTypes.bool,
         children: React.PropTypes.element
     },
 
+    getDefaultProps() {
+        return {
+            headerMessage: getLangText('Register your work'),
+            submitMessage: getLangText('Register work')
+        };
+    },
+
     getInitialState(){
         return {
             digitalWorkKey: null,
@@ -69,7 +78,7 @@ let RegisterPieceForm = React.createClass({
                             type="submit"
                             className="btn ascribe-btn ascribe-btn-login"
                             disabled={!this.state.isUploadReady}>
-                            {getLangText('Register work')}
+                            {this.props.submitMessage}
                         </button>}
                 spinner={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@@ -77,7 +86,7 @@ let RegisterPieceForm = React.createClass({
                     </span>
                     }>
                 <FormPropertyHeader>
-                    <h3>{getLangText('Register your work')}</h3>
+                    <h3>{this.props.headerMessage}</h3>
                 </FormPropertyHeader>
                 <Property
                     ignoreFocus={true}>

js/components/piece_list.js

@@ -20,7 +20,7 @@ import AppConstants from '../constants/application_constants';
 
 let PieceList = React.createClass({
     propTypes: {
-        query: React.PropTypes.object
+        redirectTo: React.PropTypes.string
     },
 
     mixins: [Router.Navigation, Router.State],
@@ -30,7 +30,7 @@ let PieceList = React.createClass({
     },
 
     componentDidMount() {
-        let page = this.props.query.page || 1;
+        let page = this.getQuery().page || 1;
         PieceListStore.listen(this.onChange);
         if (this.state.pieceList.length === 0){
             PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc)
@@ -38,6 +38,12 @@ let PieceList = React.createClass({
         }
     },
 
+    componentDidUpdate() {
+        if (this.props.redirectTo && this.state.pieceListCount === 0) {
+            this.transitionTo(this.props.redirectTo);
+        }
+    },
+
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
     },
@@ -56,6 +62,30 @@ let PieceList = React.createClass({
                                                       this.state.orderAsc);
     },
 
+    getPieceListToolbar() {
+        if(this.state.pieceListCount > 10) {
+            return (
+                <PieceListToolbar
+                    className="ascribe-piece-list-toolbar"
+                    searchFor={this.searchFor} />
+            );
+        }
+    },
+
+    getPagination() {
+        let currentPage = parseInt(this.getQuery().page, 10) || 1;
+        let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
+
+        if (this.state.pieceListCount > 10) {
+            return (
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    goToPage={this.paginationGoToPage} />
+            );
+        }
+    },
+
     searchFor(searchTerm) {
          PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy, this.state.orderAsc);
          this.transitionTo(this.getPathname(), {page: 1});
@@ -67,15 +97,11 @@ let PieceList = React.createClass({
     },
 
     render() {
-        let currentPage = parseInt(this.props.query.page, 10) || 1;
-        let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
         let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
         
         return (
             <div>
-                <PieceListToolbar
+                {this.getPieceListToolbar()}
-                    className="ascribe-piece-list-toolbar"
-                    searchFor={this.searchFor} />
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
                 <AccordionList
                     className="ascribe-accordion-list"
@@ -101,10 +127,7 @@ let PieceList = React.createClass({
                         );
                     })}
                 </AccordionList>
-                <Pagination
+                {this.getPagination()}
-                    currentPage={currentPage}
-                    totalPages={totalPages}
-                    goToPage={this.paginationGoToPage} />
             </div>
         );
     }

js/components/register_piece.js

@@ -29,9 +29,26 @@ import SlidesContainer from './ascribe_slides_container/slides_container';
 import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
+
 let RegisterPiece = React.createClass( {
+
+    propTypes: {
+        headerMessage: React.PropTypes.string,
+        submitMessage: React.PropTypes.string,
+        canSpecifyEditions: React.PropTypes.bool,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element])
+    },
+
     mixins: [Router.Navigation],
 
+    getDefaultProps() {
+        return {
+            canSpecifyEditions: true
+        };
+    },
+
     getInitialState(){
         return mergeOptions(
             LicenseStore.getState(),
@@ -118,6 +135,21 @@ let RegisterPiece = React.createClass( {
         return null;
     },
 
+    getSpecifyEditions() {
+        if (this.props.canSpecifyEditions) {
+            return (
+                <PropertyCollapsible
+                    checkboxLabel={getLangText('Specify editions')}>
+                    <span>{getLangText('Editions')}</span>
+                    <input
+                        type="number"
+                        placeholder="(e.g. 32)"
+                        min={0}/>
+                </PropertyCollapsible>
+            );
+        }
+    },
+
     changeSlide() {
         // only transition to the login store, if user is not logged in
         // ergo the currentUser object is not properly defined
@@ -135,16 +167,11 @@ let RegisterPiece = React.createClass( {
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
+                                {...this.props}
                                 isFineUploaderEditable={this.state.isFineUploaderEditable}
                                 handleSuccess={this.handleSuccess}>
-                                <PropertyCollapsible
+                                {this.getSpecifyEditions()}
-                                    checkboxLabel={getLangText('Specify editions')}>
+                                {this.props.children}
-                                    <span>{getLangText('Editions')}</span>
-                                    <input
-                                        type="number"
-                                        placeholder="(e.g. 32)"
-                                        min={0}/>
-                                </PropertyCollapsible>
                                 {this.getLicenses()}
                             </RegisterPieceForm>
                         </Col>

js/components/whitelabel/prize/app.js

@@ -16,9 +16,7 @@ let PrizeApp = React.createClass({
     render() {
         let header = null;
         if (this.isActive('pieces')) {
-            header = (
+            header = null;
-                <Header />
-            );
         }
 
         return (

js/components/whitelabel/prize/components/piece_list.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import React from 'react';
+import PieceList from '../../../piece_list';
+
+
+let PrizePieceList = React.createClass({
+    render() {
+        return (
+            <PieceList redirectTo="register_piece" />
+        );
+    }
+});
+
+export default PrizePieceList;

js/components/whitelabel/prize/components/register_piece.js

@@ -0,0 +1,50 @@
+'use strict';
+
+import React from 'react';
+import RegisterPiece from '../../../register_piece';
+import Property from '../../../ascribe_forms/property';
+import InputTextAreaToggable from '../../../ascribe_forms/input_textarea_toggable';
+import InputCheckbox from '../../../ascribe_forms/input_checkbox';
+
+import { getLangText } from '../../../../utils/lang_utils';
+
+
+let PrizeRegisterPiece = React.createClass({
+    render() {
+        return (
+            <RegisterPiece
+                headerMessage={getLangText('Submit to the prize')}
+                submitMessage={getLangText('Submit')}
+                canSpecifyEditions={false} >
+                <Property
+                    name='artist_statement'
+                    label={getLangText('Artist statement')}
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
+                        placeholder={getLangText('Enter your statement')}
+                        required="required"/>
+                </Property>
+                <Property
+                    name='work_description'
+                    label={getLangText('Work description')}
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
+                        placeholder={getLangText('Enter the description for your work')}
+                        required="required"/>
+                </Property>
+                <Property
+                    name="terms"
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputCheckbox/>
+                </Property>
+            </RegisterPiece>
+        );
+    }
+});
+
+export default PrizeRegisterPiece;

js/components/whitelabel/prize/components/signup_container.js

@@ -23,9 +23,8 @@ let SignupContainer = React.createClass({
         if (this.state.submitted){
             return (
                 <div className="ascribe-login-wrapper">
-                    <br/>
                     <div className="ascribe-login-text ascribe-login-header">
-                    {this.state.message}
+                        {this.state.message}
                     </div>
                 </div>
             );

js/components/whitelabel/prize/routes.js

@@ -7,6 +7,10 @@ import Landing from './components/landing';
 import LoginContainer from './components/login_container';
 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 EditionContainer from '../../ascribe_detail/edition_container';
 
 import App from './app';
 import AppConstants from '../../../constants/application_constants';
@@ -22,7 +26,10 @@ function getRoutes(commonRoutes) {
             <Route name="login" path="login" handler={LoginContainer} />
             <Route name="signup" path="signup" handler={SignupContainer} />
             <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
-            <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
+            <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="edition" path="editions/:editionId" handler={EditionContainer} />
         </Route>
     );
 }