diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js index 85084b5f..471ba9d5 100644 --- a/js/components/ascribe_accordion_list/accordion_list.js +++ b/js/components/ascribe_accordion_list/accordion_list.js @@ -28,7 +28,7 @@ let AccordionList = React.createClass({ ); } else { return ( -
+
{this.props.loadingElement}
); diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index 9a3f2269..50b6eb82 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/js/components/ascribe_slides_container/slides_container.js @@ -11,7 +11,6 @@ let Navigation = Router.Navigation; let SlidesContainer = React.createClass({ propTypes: { - breadcrumbs: React.PropTypes.arrayOf(React.PropTypes.string), children: React.PropTypes.arrayOf(React.PropTypes.element), forwardProcess: React.PropTypes.bool.isRequired }, @@ -22,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 }; }, @@ -55,9 +61,23 @@ let SlidesContainer = React.createClass({ window.addEventListener('resize', this.handleContainerResize); }, - componentDidUpdate() { - // check if slide_num was defined, and if not then default to 0 + componentWillReceiveProps() { 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); }, @@ -72,6 +92,12 @@ let SlidesContainer = React.createClass({ }); }, + // When the start_from parameter is used, this.setSlideNum can not simply be used anymore. + nextSlide() { + let nextSlide = this.state.slideNum + 1; + this.setSlideNum(nextSlide); + }, + // We let every one from the outsite set the page number of the slider, // though only if the slideNum is actually in the range of our children-list. setSlideNum(slideNum) { @@ -102,7 +128,7 @@ let SlidesContainer = React.createClass({ // if slideNum is within the range of slides and none of the previous cases // where matched, we can actually do transitions - } else if(slideNum >= 0 || slideNum < React.Children.count(this.props.children)) { + } else if(slideNum >= 0 || slideNum < this.customChildrenCount()) { if(slideNum !== this.state.slideNum - 1) { // Bootstrapping the component, getInitialState is called once to save @@ -135,15 +161,45 @@ let SlidesContainer = React.createClass({ } }, - renderBreadCrumbs() { - if (this.props.breadcrumbs) { - let numSlides = this.props.breadcrumbs.length; + extractBreadcrumbs() { + let breadcrumbs = []; + + ReactAddons.Children.map(this.props.children, (child, i) => { + 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 = this.customChildrenCount(); + + // check if every child/slide has a title, + // otherwise do not display the breadcrumbs at all + // 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); + return (
- {this.props.breadcrumbs.map((breadcrumb, i) => { + {breadcrumbs.map((breadcrumb, i) => { return (
- {this.props.breadcrumbs[i]} + {breadcrumb} @@ -163,21 +219,30 @@ let SlidesContainer = React.createClass({
); + } else { + return null; } - return null; }, // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps // Also, a key is nice to have! renderChildren() { return ReactAddons.Children.map(this.props.children, (child, i) => { - return ReactAddons.addons.cloneWithProps(child, { - className: 'ascribe-slide', - style: { - width: this.state.containerWidth - }, - key: i - }); + // since the default parameter of startFrom is -1, we do not need to check + // if its actually present in the url bar, as it will just not match + + if(i >= this.state.startFrom) { + return ReactAddons.addons.cloneWithProps(child, { + className: 'ascribe-slide', + style: { + width: this.state.containerWidth + }, + key: i + }); + } else { + // Abortions are bad mkay + return null; + } }); }, @@ -186,11 +251,11 @@ let SlidesContainer = React.createClass({
- {this.renderBreadCrumbs()} + {this.renderBreadcrumbs()}
diff --git a/js/components/piece_list.js b/js/components/piece_list.js index eac6ca15..14554ea0 100644 --- a/js/components/piece_list.js +++ b/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); }, diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js b/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js index 2bb35719..ab7723ea 100644 --- a/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js +++ b/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js @@ -3,18 +3,12 @@ import React from 'react'; import classNames from 'classnames'; -import Moment from 'moment'; +import ButtonLink from 'react-router-bootstrap/lib/ButtonLink'; import WhitelabelActions from '../../../../../../actions/whitelabel_actions'; import WhitelabelStore from '../../../../../../stores/whitelabel_store'; -import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper'; -import LoanForm from '../../../../../ascribe_forms/form_loan'; - -import ApiUrls from '../../../../../../constants/api_urls'; - import { getLangText } from '../../../../../../utils/lang_utils'; -import { getAclFormMessage } from '../../../../../../utils/form_utils'; let CylandSubmitButton = React.createClass({ propTypes: { @@ -41,36 +35,25 @@ let CylandSubmitButton = React.createClass({ this.setState(state); }, - getSubmitButton() { + render() { + let piece = this.props.piece; + let startFrom = 1; + + if(piece && piece.extra_data && Object.keys(piece.extra_data).length > 0) { + startFrom = 2; + } + return ( - - ); - }, - - render() { - let today = new Moment(); - let loanEndDate = new Moment(); - loanEndDate.add(1000, 'years'); - - return ( - - - + ); } }); diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js index d22d8638..c8011fc7 100644 --- a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js +++ b/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}>
- {Object.keys(this.props.piece.extra_data).map((data) => { + {Object.keys(this.props.piece.extra_data).map((data, i) => { let label = data.replace('_', ' '); return ( diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js index cddabb0c..38eeee7f 100644 --- a/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js +++ b/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 }; }, @@ -119,7 +119,11 @@ let CylandAdditionalDataForm = React.createClass({ ); } else { - return First register the piece.; + return ( +
+ +
+ ); } } }); diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js index 5a17ae94..1c07bbd1 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js +++ b/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() { @@ -85,24 +92,32 @@ let CylandRegisterPiece = React.createClass({ handleRegisterSuccess(response){ + this.refreshPieceList(); + // also start loading the piece for the next step if(response && response.piece) { PieceActions.updatePiece(response.piece); } - this.refs.slidesContainer.setSlideNum(1); + this.refs.slidesContainer.nextSlide(); }, handleAdditionalDataSuccess() { - this.refs.slidesContainer.setSlideNum(2); + this.refreshPieceList(); + this.refs.slidesContainer.nextSlide(); }, handleLoanSuccess(response) { let notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); - // once the user was able to register + loan a piece successfully, we need to make sure to keep - // the piece list up to date + this.refreshPieceList(); + + PieceActions.fetchOne(this.state.piece.id); + this.transitionTo('piece', {pieceId: this.state.piece.id}); + }, + + refreshPieceList() { PieceListActions.fetchPieceList( this.state.page, this.state.pageSize, @@ -111,9 +126,6 @@ let CylandRegisterPiece = React.createClass({ this.state.orderAsc, this.state.filterBy ); - - PieceActions.fetchOne(this.state.piece.id); - this.transitionTo('piece', {pieceId: this.state.piece.id}); }, changeSlide() { @@ -138,9 +150,8 @@ let CylandRegisterPiece = React.createClass({ return ( -
+
-
+
-
+