add start_from parameter to slide container

js/components/ascribe_accordion_list/accordion_list.js

@@ -28,7 +28,7 @@ let AccordionList = React.createClass({
             );
         } else {
             return (
-                <div className={this.props.className + ' ascribe-accordion-list-loading'}>
+                <div className={this.props.className + ' ascribe-loading-position'}>
                     {this.props.loadingElement}
                 </div>
             );

js/components/ascribe_slides_container/slides_container.js

@@ -21,15 +21,22 @@ let SlidesContainer = React.createClass({
         // handle queryParameters
         let queryParams = this.getQuery();
         let slideNum = -1;
+        let startFrom = -1;
 
         if(queryParams && 'slide_num' in queryParams) {
             slideNum = parseInt(queryParams.slide_num, 10);
         }
         // if slide_num is not set, this will be done in componentDidMount
 
+        // the query param 'start_from' removes all slide children before the respective number
+        if(queryParams && 'start_from' in queryParams) {
+            startFrom = parseInt(queryParams.start_from, 10);
+        }
+
         return {
+            slideNum,
+            startFrom,
             containerWidth: 0,
-            slideNum: slideNum,
             historyLength: window.history.length
         };
     },
@@ -54,9 +61,23 @@ let SlidesContainer = React.createClass({
         window.addEventListener('resize', this.handleContainerResize);
     },
 
-    componentDidUpdate() {
+    componentWillReceiveProps() {
-        // check if slide_num was defined, and if not then default to 0
         let queryParams = this.getQuery();
+
+        // also check if start_from was updated
+        // This applies for example when the user tries to submit a already existing piece
+        // (starting from slide 1 for example) and then clicking on + NEW WORK
+        if(queryParams && !('start_from' in queryParams)) {
+            this.setState({
+                startFrom: -1
+            });
+        }
+    },
+
+    componentDidUpdate() {
+        let queryParams = this.getQuery();
+
+        // check if slide_num was defined, and if not then default to 0
         this.setSlideNum(queryParams.slide_num);
     },
 
@@ -137,20 +158,34 @@ let SlidesContainer = React.createClass({
     extractBreadcrumbs() {
         let breadcrumbs = [];
 
-        ReactAddons.Children.map(this.props.children, (child) => {
+        ReactAddons.Children.map(this.props.children, (child, i) => {
-            breadcrumbs.push(child.props['data-slide-title']);
+            if(i >= this.state.startFrom) {
+                breadcrumbs.push(child.props['data-slide-title']);
+            }
         });
 
         return breadcrumbs;
     },
 
+    customChildrenCount() {
+        let count = 0;
+        React.Children.forEach(this.props.children, (child, i) => {
+            if(i >= this.state.startFrom) {
+                count++;
+            }
+        });
+
+        return count;
+    },
+
     renderBreadcrumbs() {
         let breadcrumbs = this.extractBreadcrumbs();
-        let numOfChildren = React.Children.count(this.props.children);
+        let numOfChildren = this.customChildrenCount();
 
         // check if every child/slide has a title,
         // otherwise do not display the breadcrumbs at all
-        if(breadcrumbs.length === numOfChildren) {
+        // Also, if there is only one child, do not display the breadcrumbs
+        if(breadcrumbs.length === numOfChildren && breadcrumbs.length > 1 && numOfChildren > 1) {
             let numSlides = breadcrumbs.length;
             let columnWidth = Math.floor(12 / numSlides);
 
@@ -187,13 +222,21 @@ let SlidesContainer = React.createClass({
     // Also, a key is nice to have!
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+            // since the default parameter of startFrom is -1, we do not need to check
-                className: 'ascribe-slide',
+            // if its actually present in the url bar, as it will just not match
-                style: {
+
-                    width: this.state.containerWidth
+            if(i >= this.state.startFrom) {
-                },
+                return ReactAddons.addons.cloneWithProps(child, {
-                key: i
+                    className: 'ascribe-slide',
-            });
+                    style: {
+                        width: this.state.containerWidth
+                    },
+                    key: i
+                });
+            } else {
+                // Abortions are bad mkay
+                return null;
+            }
         });
     },
 

js/components/piece_list.js

@@ -138,7 +138,7 @@ let PieceList = React.createClass({
         this.transitionTo(this.getPathname(), {page: 1});
     },
 
-    applyOrderBy(orderBy, orderAsc) {
+    applyOrderBy(orderBy) {
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
                                         orderBy, this.state.orderAsc, this.state.filterBy);
     },

js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js

@@ -39,7 +39,11 @@ let CylandSubmitButton = React.createClass({
         return (
             <ButtonLink
                 to="register_piece"
-                query={{'slide_num': 1}}
+                query={{
+                    'slide_num': 0,
+                    'start_from': 1,
+                    'piece_id': this.props.piece.id
+                }}
                 className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
                 {getLangText('Submit to Cyland')}
             </ButtonLink>

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

@@ -20,11 +20,8 @@ import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_de
 import DetailProperty from '../../../../../ascribe_detail/detail_property';
 
 import { mergeOptions } from '../../../../../../utils/general_utils';
-import { getLangText } from '../../../../../../utils/lang_utils';
 
-/**
+
- * This is the component that implements resource/data specific functionality
- */
 let CylandPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
@@ -106,10 +103,11 @@ let CylandPieceDetails = React.createClass({
                     show={true}
                     defaultExpanded={true}>
                     <Form ref='form'>
-                        {Object.keys(this.props.piece.extra_data).map((data) => {
+                        {Object.keys(this.props.piece.extra_data).map((data, i) => {
                             let label = data.replace('_', ' ');
                             return (
                                 <Property
+                                    key={i}
                                     name={data}
                                     label={label}
                                     editable={false}>

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -24,7 +24,7 @@ let CylandAdditionalDataForm = React.createClass({
 
     getInitialState() {
         return {
-            isUploadReady: false
+            isUploadReady: true
         };
     },
 
@@ -64,6 +64,17 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     render() {
+        let artistBio = '';
+        let conceptualOverview = '';
+
+        if (Object.keys(this.props.piece).length !== 0 && Object.keys(this.props.piece.extra_data).length !== 0) {
+            let extraData = this.props.piece.extra_data;
+
+            artistBio = extraData.artist_bio;
+            conceptualOverview = extraData.conceptual_overview;
+        }
+
+
         if(this.props.piece && this.props.piece.id) {
             return (
                 <Form
@@ -96,6 +107,7 @@ let CylandAdditionalDataForm = React.createClass({
                             rows={1}
                             editable={true}
                             placeholder={getLangText('Enter the artist\'s biography...')}
+                            defaultValue={artistBio}
                             required="required"/>
                     </Property>
                     <Property
@@ -106,6 +118,7 @@ let CylandAdditionalDataForm = React.createClass({
                             rows={1}
                             editable={true}
                             placeholder={getLangText('Enter a conceptual overview...')}
+                            defaultValue={conceptualOverview}
                             required="required"/>
                     </Property>
                     <FurtherDetailsFileuploader
@@ -119,7 +132,11 @@ let CylandAdditionalDataForm = React.createClass({
                 </Form>
             );
         } else {
-            return <span>First register the piece.</span>;
+            return (
+                <div className="ascribe-loading-position">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
         }
     }
 });

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -40,9 +40,10 @@ import { getLangText } from '../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getAclFormMessage } from '../../../../../utils/form_utils';
 
+
 let CylandRegisterPiece = React.createClass({
 
-    mixins: [Router.Navigation],
+    mixins: [Router.Navigation, Router.State],
 
     getInitialState(){
         return mergeOptions(
@@ -63,6 +64,12 @@ let CylandRegisterPiece = React.createClass({
         WhitelabelStore.listen(this.onChange);
         UserActions.fetchCurrentUser();
         WhitelabelActions.fetchWhitelabel();
+
+        let queryParams = this.getQuery();
+
+        if(queryParams && 'piece_id' in queryParams) {
+            PieceActions.fetchOne(queryParams.piece_id);
+        }
     },
 
     componentWillUnmount() {

sass/ascribe_accordion_list.scss

@@ -65,7 +65,7 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             overflow: hidden;
             text-overflow: ellipsis;
         }
-        a {
+        a:not(.btn) {
             color: #666;
         }
     }
@@ -79,11 +79,6 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     }
 }
 
-.ascribe-accordion-list-loading {
-    padding-top: 30%;
-    padding-bottom: 30%;
-}
-
 .ascribe-accordion-list-loading img {
     display: block;
     margin: auto;

sass/main.scss

@@ -428,3 +428,9 @@ hr {
         color: #000;
     }
 }
+
+.ascribe-loading-position {
+    padding-top: 30%;
+    padding-bottom: 30%;
+    text-align: center;
+}