From 6c2bb041f9366060a66e6913e7e53c5ee1fff7d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 21 Sep 2015 15:46:24 +0200
Subject: [PATCH] finalize whitelabel custom fields

---
 .../ascribe_detail/cyland_piece_container.js  | 55 +++---------
 .../cyland_additional_data_form.js            | 87 ++++++++++++-------
 .../ikonotv_artist_details_form.js            |  7 +-
 .../ikonotv_artwork_details_form.js           |  5 +-
 4 files changed, 74 insertions(+), 80 deletions(-)

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 3264c27e..51e65386 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
@@ -19,6 +19,8 @@ import CollapsibleParagraph from '../../../../../../components/ascribe_collapsib
 import HistoryIterator from '../../../../../ascribe_detail/history_iterator';
 import Note from '../../../../../ascribe_detail/note';
 
+import CylandAdditionalDataForm from '../../cyland/ascribe_forms/cyland_additional_data_form';
+
 import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
 import DetailProperty from '../../../../../ascribe_detail/detail_property';
 
@@ -102,7 +104,15 @@ let CylandPieceContainer = React.createClass({
                             url={ApiUrls.note_private_piece}
                             currentUser={this.state.currentUser}/>
                     </CollapsibleParagraph>
-                    <CylandPieceDetails piece={this.state.piece}/>
+                    <CollapsibleParagraph
+                        title={getLangText('Further Details')}
+                        show={true}
+                        defaultExpanded={true}>
+                        <CylandAdditionalDataForm
+                            piece={this.state.piece}
+                            disabled={!this.state.piece.acl.acl_edit}
+                            isInline={true} />
+                    </CollapsibleParagraph>
                 </Piece>
             );
         } else {
@@ -115,47 +125,4 @@ let CylandPieceContainer = React.createClass({
     }
 });
 
-
-let CylandPieceDetails = React.createClass({
-    propTypes: {
-        piece: React.PropTypes.object
-    },
-
-    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'>
-                        {Object.keys(this.props.piece.extra_data).map((data, i) => {
-                            let label = data.replace('_', ' ');
-                            return (
-                                <Property
-                                    key={i}
-                                    name={data}
-                                    label={label}
-                                    editable={false}
-                                    overrideForm={true}>
-                                    <InputTextAreaToggable
-                                        rows={1}
-                                        defaultValue={this.props.piece.extra_data[data]}/>
-                                </Property>);
-                            }
-                        )}
-                        <FurtherDetailsFileuploader
-                            editable={false}
-                            pieceId={this.props.piece.id}
-                            otherData={this.props.piece.other_data}
-                            multiple={false}/>
-                        <hr />
-                    </Form>
-                </CollapsibleParagraph>
-            );
-        }
-        return null;
-    }
-});
-
 export default CylandPieceContainer;
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 9214123c..0fd023c2 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
@@ -9,6 +9,9 @@ import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_t
 
 import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
 
+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,10 +23,21 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
 
 let CylandAdditionalDataForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func.isRequired,
+        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
+        disabled: React.PropTypes.bool,
+        isInline: React.PropTypes.bool
+    },
 
-        disabled: React.PropTypes.bool
+    getDefaultProps() {
+        return {
+            isInline: false
+        };
+    },
+
+    handleSuccess() {
+        let notification = new GlobalNotificationModel('Further details successfully updated', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getInitialState() {
@@ -63,56 +77,69 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     render() {
-        if(this.props.piece && this.props.piece.id) {
+        let { piece, isInline, disabled, handleSuccess } = this.props;
+        let buttons, spinner, heading;
+
+        if(!isInline) {
+            buttons = (
+                <button
+                    type="submit"
+                    className="btn ascribe-btn ascribe-btn-login"
+                    disabled={!this.state.isUploadReady || 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('Provide supporting materials')}
+                    </h3>
+                </div>
+            );
+        }
+
+        if(piece && piece.id) {
             return (
                 <Form
-                    disabled={this.props.disabled}
+                    disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
-                    handleSuccess={this.props.handleSuccess}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    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('Provide supporting materials')}
-                        </h3>
-                    </div>
+                    buttons={buttons}
+                    spinner={spinner}>
+                    {heading}
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}>
                         <InputTextAreaToggable
                             rows={1}
-                            placeholder={getLangText('Enter the artist\'s biography...')}
-                            required="required"/>
+                            defaultValue={piece.extra_data.artist_bio}
+                            placeholder={getLangText('Enter the artist\'s biography...')}/>
                     </Property>
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}>
                         <InputTextAreaToggable
                             rows={1}
-                            placeholder={getLangText('Enter a conceptual overview...')}
-                            required="required"/>
+                            defaultValue={piece.extra_data.conceptual_overview}
+                            placeholder={getLangText('Enter a conceptual overview...')}/>
                     </Property>
                     <FurtherDetailsFileuploader
                         uploadStarted={this.uploadStarted}
                         submitFile={this.submitFile}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
-                        pieceId={this.props.piece.id}
-                        otherData={this.props.piece.other_data}
+                        pieceId={piece.id}
+                        otherData={piece.other_data}
                         multiple={true}/>
                 </Form>
             );
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 93c4ef63..1fe5016d 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
@@ -20,7 +20,7 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtistDetailsForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func.isRequired,
+        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
@@ -57,10 +57,9 @@ let IkonotvArtistDetailsForm = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-
     render() {
         let buttons, spinner, heading;
-        let { isInline } = this.props;
+        let { isInline, handleSuccess } = this.props;
         
 
         if(!isInline) {
@@ -95,7 +94,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     className="ascribe-form-bordered"
                     ref='form'
                     url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
-                    handleSuccess={this.handleSuccess}
+                    handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
                     spinner={spinner}>
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 cfd51d5b..f091d860 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
@@ -20,6 +20,7 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtworkDetailsForm = React.createClass({
     propTypes: {
+        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
@@ -58,7 +59,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
 
     render() {
         let buttons, spinner, heading;
-        let { isInline } = this.props;
+        let { isInline, handleSuccess } = this.props;
 
         if(!isInline) {
             buttons = (
@@ -92,7 +93,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     className="ascribe-form-bordered"
                     ref='form'
                     url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
-                    handleSuccess={this.handleSuccess}
+                    handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
                     spinner={spinner}>