From c7560247020718977f352a32429f548fbf49abde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 21 Sep 2015 15:08:24 +0200 Subject: [PATCH] Add whitelabel tailored extra_data forms to piece detail --- .../ascribe_forms/input_textarea_toggable.js | 8 +-- .../ascribe_detail/ikonotv_piece_container.js | 64 ++++------------- .../ikonotv_artist_details_form.js | 71 +++++++++++++------ .../ikonotv_artwork_details_form.js | 70 ++++++++++++------ 4 files changed, 116 insertions(+), 97 deletions(-) diff --git a/js/components/ascribe_forms/input_textarea_toggable.js b/js/components/ascribe_forms/input_textarea_toggable.js index e789b61e..1986cf24 100644 --- a/js/components/ascribe_forms/input_textarea_toggable.js +++ b/js/components/ascribe_forms/input_textarea_toggable.js @@ -22,7 +22,7 @@ let InputTextAreaToggable = React.createClass({ componentDidUpdate(prevProps, prevState) { // if the components state value was changed during an update, we want to refresh it // in this component as well as in the parent Property - if(this.state.value !== prevState.value) { + if(!this.state.value && this.state.value !== prevState.value) { this.handleChange({ target: { value: this.state.value @@ -33,10 +33,8 @@ let InputTextAreaToggable = React.createClass({ // Otherwise, if state wasn't defined beforehand and defaultValue is defined from the outside // we set it as the component's state and update Property by calling handleChange if(!this.state.value && this.props.defaultValue) { - this.handleChange({ - target: { - value: this.props.defaultValue - } + this.setState({ + value: this.props.defaultValue }); } }, diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js index 0425d5d8..bd0cd104 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js @@ -16,17 +16,11 @@ import AclButtonList from '../../../../../ascribe_buttons/acl_button_list'; import DeleteButton from '../../../../../ascribe_buttons/delete_button'; import IkonotvSubmitButton from '../ascribe_buttons/ikonotv_submit_button'; -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'; import IkonotvArtistDetailsForm from '../ascribe_forms/ikonotv_artist_details_form'; import IkonotvArtworkDetailsForm from '../ascribe_forms/ikonotv_artwork_details_form'; -import GlobalNotificationModel from '../../../../../../models/global_notification_model'; -import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; - import HistoryIterator from '../../../../../ascribe_detail/history_iterator'; import Note from '../../../../../ascribe_detail/note'; @@ -161,7 +155,19 @@ let IkonotvPieceContainer = React.createClass({ currentUser={this.state.currentUser}/> - + + + + ); } else { @@ -174,48 +180,4 @@ let IkonotvPieceContainer = React.createClass({ } }); - -let IkonotvPieceDetails = React.createClass({ - propTypes: { - piece: React.PropTypes.object - }, - - handleSuccess() { - let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - }, - - render() { - if (this.props.piece && Object.keys(this.props.piece.extra_data).length !== 0){ - return ( - -
- {Object.keys(this.props.piece.extra_data).map((data, i) => { - let label = data.replace('_', ' '); - return ( - ); - } - )} -
-
- - ); - } - return null; - } -}); - export default IkonotvPieceContainer; diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js index 11f4d147..93c4ef63 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js @@ -7,6 +7,9 @@ import Property from '../../../../../ascribe_forms/property'; import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable'; +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'; @@ -20,7 +23,15 @@ let IkonotvArtistDetailsForm = React.createClass({ handleSuccess: React.PropTypes.func.isRequired, piece: React.PropTypes.object.isRequired, - disabled: React.PropTypes.bool + disabled: React.PropTypes.bool, + + isInline: React.PropTypes.bool + }, + + getDefaultProps() { + return { + isInline: false + }; }, getFormData() { @@ -41,7 +52,42 @@ let IkonotvArtistDetailsForm = React.createClass({ }, + handleSuccess() { + let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + + render() { + let buttons, spinner, heading; + let { isInline } = this.props; + + + if(!isInline) { + buttons = ( + + ); + + spinner = ( +
+ +
+ ); + + heading = ( +
+

+ {getLangText('Artist Details')} +

+
+ ); + } + if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) { return (
- {getLangText('Proceed to artwork details')} - - } - spinner={ -
- -
- }> -
-

- {getLangText('Artist Details')} -

-
+ buttons={buttons} + spinner={spinner}> + {heading} diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js index c4a3be37..cfd51d5b 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js @@ -7,6 +7,9 @@ import Property from '../../../../../ascribe_forms/property'; import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable'; +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'; @@ -17,10 +20,17 @@ import { getLangText } from '../../../../../../utils/lang_utils'; let IkonotvArtworkDetailsForm = React.createClass({ propTypes: { - handleSuccess: React.PropTypes.func.isRequired, piece: React.PropTypes.object.isRequired, - disabled: React.PropTypes.bool + disabled: React.PropTypes.bool, + + isInline: React.PropTypes.bool + }, + + getDefaultProps() { + return { + isInline: false + }; }, getFormData() { @@ -41,7 +51,40 @@ let IkonotvArtworkDetailsForm = React.createClass({ }, + handleSuccess() { + let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + render() { + let buttons, spinner, heading; + let { isInline } = this.props; + + if(!isInline) { + buttons = ( + + ); + + spinner = ( +
+ +
+ ); + + heading = ( +
+

+ {getLangText('Artwork Details')} +

+
+ ); + } + if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) { return ( - {getLangText('Proceed to loan')} - - } - spinner={ -
- -
- }> -
-

- {getLangText('Artwork Details')} -

-
+ buttons={buttons} + spinner={spinner}> + {heading}