Add whitelabel tailored extra_data forms to piece detail

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
             });
         }
     },

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}/>
                     </CollapsibleParagraph>
 
-                    <IkonotvPieceDetails piece={this.state.piece}/>
+                    <CollapsibleParagraph
+                        title={getLangText('Further Details')}
+                        show={true}
+                        defaultExpanded={true}>
+                        <IkonotvArtistDetailsForm
+                            piece={this.state.piece}
+                            isInline={true}
+                            disabled={!this.state.piece.acl.acl_edit} />
+                        <IkonotvArtworkDetailsForm
+                            piece={this.state.piece}
+                            isInline={true}
+                            disabled={!this.state.piece.acl.acl_edit} />
+                    </CollapsibleParagraph>
                 </Piece>
             );
         } 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 (
-                <CollapsibleParagraph
-                    title={getLangText('Further Details')}
-                    show={true}
-                    defaultExpanded={true}>
-                    <Form
-                        ref='form'
-                        disabled={!this.props.piece.acl.acl_edit}>
-                        {Object.keys(this.props.piece.extra_data).map((data, i) => {
-                            let label = data.replace('_', ' ');
-                            return (
-                                <Property
-                                    key={i}
-                                    name={data}
-                                    label={label}
-                                    hidden={!this.props.piece.extra_data[data]}>
-                                    <InputTextAreaToggable
-                                        rows={1}
-                                        defaultValue={this.props.piece.extra_data[data]}/>
-                                </Property>);
-                            }
-                        )}
-                        <hr />
-                    </Form>
-                </CollapsibleParagraph>
-            );
-        }
-        return null;
-    }
-});
-
 export default IkonotvPieceContainer;

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 = (
+                <button
+                    type="submit"
+                    className="btn ascribe-btn ascribe-btn-login"
+                    disabled={this.props.disabled}>
+                    {getLangText('Proceed to artwork details')}
+                </button>
+            );
+
+            spinner = (
+                <div className="modal-footer">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                </div>
+            );
+
+            heading = (
+                <div className="ascribe-form-header">
+                    <h3>
+                        {getLangText('Artist Details')}
+                    </h3>
+                </div>
+            );
+        }
+
         if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
             return (
                 <Form
@@ -49,26 +95,11 @@ let IkonotvArtistDetailsForm = React.createClass({
                     className="ascribe-form-bordered"
                     ref='form'
                     url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
-                    handleSuccess={this.props.handleSuccess}
+                    handleSuccess={this.handleSuccess}
                     getFormData={this.getFormData}
-                    buttons={
-                        <button
-                            type="submit"
-                            className="btn ascribe-btn ascribe-btn-login"
-                            disabled={!this.state.isUploadReady || this.props.disabled}>
-                            {getLangText('Proceed to artwork details')}
-                        </button>
-                    }
-                    spinner={
-                        <div className="modal-footer">
-                            <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
-                        </div>
-                    }>
-                    <div className="ascribe-form-header">
-                        <h3>
-                            {getLangText('Artist Details')}
-                        </h3>
-                    </div>
+                    buttons={buttons}
+                    spinner={spinner}>
+                    {heading}
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}>

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 = (
+                <button
+                    type="submit"
+                    className="btn ascribe-btn ascribe-btn-login"
+                    disabled={this.props.disabled}>
+                    {getLangText('Proceed to loan')}
+                </button>
+            );
+
+            spinner = (
+                <div className="modal-footer">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                </div>
+            );
+
+            heading = (
+                <div className="ascribe-form-header">
+                    <h3>
+                        {getLangText('Artwork Details')}
+                    </h3>
+                </div>
+            );
+        }
+
         if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
             return (
                 <Form
@@ -49,26 +92,11 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     className="ascribe-form-bordered"
                     ref='form'
                     url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
-                    handleSuccess={this.props.handleSuccess}
+                    handleSuccess={this.handleSuccess}
                     getFormData={this.getFormData}
-                    buttons={
-                        <button
-                            type="submit"
-                            className="btn ascribe-btn ascribe-btn-login"
-                            disabled={!this.state.isUploadReady || this.props.disabled}>
-                            {getLangText('Proceed to loan')}
-                        </button>
-                    }
-                    spinner={
-                        <div className="modal-footer">
-                            <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
-                        </div>
-                    }>
-                    <div className="ascribe-form-header">
-                        <h3>
-                            {getLangText('Artwork Details')}
-                        </h3>
-                    </div>
+                    buttons={buttons}
+                    spinner={spinner}>
+                    {heading}
                     <Property
                         name='medium'
                         label={getLangText('Medium')}>