Clean up whitelabel AdditionalDataForms

This commit is contained in:
Brett Sun 2016-01-15 17:17:34 +01:00
parent 50129b9d0c
commit 8d9df43339
5 changed files with 155 additions and 138 deletions

View File

@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
let CylandAdditionalDataForm = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
},
handleSuccess() {
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
},
render() {
let { piece, isInline, disabled, handleSuccess, location } = this.props;
let buttons, spinner, heading;
const { disabled, handleSuccess, isInline, piece } = this.props;
if(!isInline) {
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -101,7 +105,7 @@ let CylandAdditionalDataForm = React.createClass({
);
}
if(piece && piece.id) {
if (piece.id && piece.extra_data) {
return (
<Form
disabled={disabled}
@ -120,7 +124,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
placeholder={getLangText('Enter the artist\'s biography...')}/>
placeholder={getLangText('Enter the artist\'s biography...')} />
</Property>
<Property
name='artist_contact_information'
@ -129,7 +133,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_contact_information}
placeholder={getLangText('Enter the artist\'s contact information...')}/>
placeholder={getLangText('Enter the artist\'s contact information...')} />
</Property>
<Property
name='conceptual_overview'
@ -138,7 +142,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a conceptual overview...')}/>
placeholder={getLangText('Enter a conceptual overview...')} />
</Property>
<Property
name='medium'
@ -147,7 +151,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.medium}
placeholder={getLangText('Enter the medium (and other technical specifications)...')}/>
placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
</Property>
<Property
name='size_duration'
@ -156,7 +160,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.size_duration}
placeholder={getLangText('Enter the size / duration...')}/>
placeholder={getLangText('Enter the size / duration...')} />
</Property>
<Property
name='display_instructions'
@ -165,7 +169,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
placeholder={getLangText('Enter the display instructions...')}/>
placeholder={getLangText('Enter the display instructions...')} />
</Property>
<Property
name='additional_details'
@ -174,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.additional_details}
placeholder={getLangText('Enter additional details...')}/>
placeholder={getLangText('Enter additional details...')} />
</Property>
<FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')}
@ -189,7 +193,7 @@ let CylandAdditionalDataForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
}

View File

@ -122,6 +122,7 @@ let IkonotvPieceContainer = React.createClass({
if (piece.id) {
setDocumentTitle([piece.artist_name, piece.title].join(', '));
return (
<WalletPieceContainer
piece={piece}

View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtistDetailsForm = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
},
handleSuccess() {
let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
const notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
const { disabled, isInline, handleSuccess, piece } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
disabled={disabled}>
{getLangText('Proceed to loan')}
</button>
);
@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -88,13 +90,13 @@ let IkonotvArtistDetailsForm = React.createClass({
);
}
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
if (piece.id && piece.extra_data) {
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})}
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
@ -103,39 +105,38 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='artist_website'
label={getLangText('Artist Website')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
expanded={!disabled || !!piece.extra_data.artist_website}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.artist_website}
placeholder={getLangText('The artist\'s website if present...')}/>
defaultValue={piece.extra_data.artist_website}
placeholder={getLangText('The artist\'s website if present...')} />
</Property>
<Property
name='gallery_website'
label={getLangText('Website of related Gallery, Museum, etc.')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
expanded={!disabled || !!piece.extra_data.gallery_website}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')}/>
defaultValue={piece.extra_data.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')} />
</Property>
<Property
name='additional_websites'
label={getLangText('Additional Websites/Publications/Museums/Galleries')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
expanded={!disabled || !!piece.extra_data.additional_websites}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')}/>
defaultValue={piece.extra_data.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')} />
</Property>
<Property
name='conceptual_overview'
label={getLangText('Short text about the Artist')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
expanded={!disabled || !!piece.extra_data.conceptual_overview}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')}
/>
defaultValue={piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')} />
</Property>
</Form>
);

View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtworkDetailsForm = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
},
handleSuccess() {
let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
const notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
const { disabled, isInline, handleSuccess, piece } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
disabled={disabled}>
{getLangText('Proceed to artist details')}
</button>
);
@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -88,13 +90,13 @@ let IkonotvArtworkDetailsForm = React.createClass({
);
}
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
if (piece.id && piece.extra_data) {
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})}
url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
@ -103,56 +105,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='medium'
label={getLangText('Medium')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
expanded={!disabled || !!piece.extra_data.medium}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
defaultValue={piece.extra_data.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
</Property>
<Property
name='size_duration'
label={getLangText('Size/Duration')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
expanded={!disabled || !!piece.extra_data.size_duration}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')}/>
defaultValue={piece.extra_data.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
</Property>
<Property
name='copyright'
label={getLangText('Copyright')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
expanded={!disabled || !!piece.extra_data.copyright}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.copyright}
placeholder={getLangText('Which copyright is attached to this work?')}/>
defaultValue={piece.extra_data.copyright}
placeholder={getLangText('Which copyright is attached to this work?')} />
</Property>
<Property
name='courtesy_of'
label={getLangText('Courtesy of')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
expanded={!disabled || !!piece.extra_data.courtesy_of}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of}
placeholder={getLangText('The current owner of the artwork')}/>
defaultValue={piece.extra_data.courtesy_of}
placeholder={getLangText('The current owner of the artwork')} />
</Property>
<Property
name='copyright_of_photography'
label={getLangText('Copyright of Photography')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
expanded={!disabled || !!piece.extra_data.copyright_of_photography}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')}/>
defaultValue={piece.extra_data.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')} />
</Property>
<Property
name='additional_details'
label={getLangText('Additional Details about the artwork')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
expanded={!disabled || !!piece.extra_data.additional_details}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.additional_details}
placeholder={getLangText('Insert artwork overview')}/>
defaultValue={piece.extra_data.additional_details}
placeholder={getLangText('Insert artwork overview')} />
</Property>
</Form>
);

View File

@ -109,7 +109,7 @@ let MarketAdditionalDataForm = React.createClass({
render() {
const {
editable,
extraData,
extraData = {},
isInline,
handleSuccess,
otherData,
@ -118,8 +118,9 @@ let MarketAdditionalDataForm = React.createClass({
showNotification,
submitLabel } = this.props;
let buttons, heading;
let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
let buttons;
let heading;
let spinner;
if (!isInline) {
buttons = (
@ -134,7 +135,7 @@ let MarketAdditionalDataForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
{spinner}
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -148,68 +149,76 @@ let MarketAdditionalDataForm = React.createClass({
) : null;
}
return (
<Form
className="ascribe-form-bordered"
ref='form'
key={this.state.forceUpdateKey}
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: pieceId})}
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
spinner={spinner}
disabled={!this.props.editable}>
{heading}
<FurtherDetailsFileuploader
label={getLangText('Marketplace Thumbnail Image')}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
pieceId={pieceId}
otherData={otherData}
editable={editable} />
<Property
name='artist_bio'
label={getLangText('Artist Bio')}
expanded={editable || !!extraData.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.artist_bio}
placeholder={getLangText('Enter a biography of the artist...')}
required />
</Property>
<Property
name='work_description'
label={getLangText('Work Description')}
expanded={editable || !!extraData.work_description}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.work_description}
placeholder={getLangText('Enter a description of the work...')}
required />
</Property>
<Property
name='technology_details'
label={getLangText('Technology Details')}
expanded={editable || !!extraData.technology_details}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.technology_details}
placeholder={getLangText('Enter technological details about the work...')}
required />
</Property>
<Property
name='display_instructions'
label={getLangText('Display Instructions')}
expanded={editable || !!extraData.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.display_instructions}
placeholder={getLangText('Enter instructions on how to best display the work...')}
required />
</Property>
</Form>
);
if (pieceId) {
return (
<Form
className="ascribe-form-bordered"
ref='form'
key={this.state.forceUpdateKey}
url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
spinner={spinner}
disabled={!this.props.editable}>
{heading}
<FurtherDetailsFileuploader
label={getLangText('Marketplace Thumbnail Image')}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
pieceId={pieceId}
otherData={otherData}
editable={editable} />
<Property
name='artist_bio'
label={getLangText('Artist Bio')}
expanded={editable || !!extraData.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.artist_bio}
placeholder={getLangText('Enter a biography of the artist...')}
required />
</Property>
<Property
name='work_description'
label={getLangText('Work Description')}
expanded={editable || !!extraData.work_description}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.work_description}
placeholder={getLangText('Enter a description of the work...')}
required />
</Property>
<Property
name='technology_details'
label={getLangText('Technology Details')}
expanded={editable || !!extraData.technology_details}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.technology_details}
placeholder={getLangText('Enter technological details about the work...')}
required />
</Property>
<Property
name='display_instructions'
label={getLangText('Display Instructions')}
expanded={editable || !!extraData.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={extraData.display_instructions}
placeholder={getLangText('Enter instructions on how to best display the work...')}
required />
</Property>
</Form>
);
} else {
return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
}
}
});