1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Finalize layouting submission form

This commit is contained in:
Tim Daubenschütz 2015-11-09 10:35:23 +01:00
parent 7721d62319
commit 3e22ad1d9d
7 changed files with 222 additions and 6 deletions

View File

@ -0,0 +1,74 @@
'use strict';
import React from 'react';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import { getCookie } from '../../utils/fetch_api_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
const { shape, arrayOf, string, object, number, oneOfType } = React.PropTypes;
const UploadFileButton = React.createClass({
propTypes: {
keyRoutine: shape({
url: string,
fileClass: string
}).isRequired,
validation: shape({
itemLimit: number,
sizeLimit: oneOfType([string, number]),
allowedExtensions: arrayOf(string)
}),
location: object,
fileClassToUpload: shape({
singular: string,
plural: string
}).isRequired
},
submitFile(file) {
console.log(file);
},
render() {
const { fileClassToUpload, validation, keyRoutine } = this.props;
return (
<ReactS3FineUploader
fileInputElement={UploadButton}
keyRoutine={keyRoutine}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={validation}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
fileClassToUpload={fileClassToUpload}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
submitFile={this.submitFile}
location={this.props.location}/>
);
}
});
export default UploadFileButton;

View File

@ -56,7 +56,6 @@ let ContractSettingsUpdateButton = React.createClass({
render() { render() {
return ( return (
<ReactS3FineUploader <ReactS3FineUploader
ref="fineuploader"
fileInputElement={UploadButton} fileInputElement={UploadButton}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',

View File

@ -5,11 +5,22 @@ import React from 'react';
import Form from '../../../../../ascribe_forms/form'; import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property'; import Property from '../../../../../ascribe_forms/property';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable'; import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
import UploadFileButton from '../../../../../ascribe_buttons/upload_file_button';
import AppConstants from '../../../../../../constants/application_constants';
import { getLangText } from '../../../../../../utils/lang_utils'; import { getLangText } from '../../../../../../utils/lang_utils';
const { object } = React.PropTypes;
const PRRegisterPieceForm = React.createClass({ const PRRegisterPieceForm = React.createClass({
propTypes: {
location: object
},
getInitialState(){ getInitialState(){
return { return {
isUploadReady: false isUploadReady: false
@ -21,8 +32,10 @@ const PRRegisterPieceForm = React.createClass({
}, },
render() { render() {
const { location } = this.props;
return ( return (
<div> <div className="register-piece--form">
<Form <Form
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref="registerPieceFields"> ref="registerPieceFields">
@ -77,6 +90,96 @@ const PRRegisterPieceForm = React.createClass({
placeholder={getLangText('THIS NEEDS TEXT')}/> placeholder={getLangText('THIS NEEDS TEXT')}/>
</Property> </Property>
</Form> </Form>
<div className="input-upload-file-button-property">
{getLangText('Select the PDF with your work')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'digitalwork'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload the Portfolio'),
plural: getLangText('Upload the Portfolios')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Featured Cover photo')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['png', 'jpg']
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload cover photo'),
plural: getLangText('Upload cover photos')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Supporting Materials (Optional)')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload'),
plural: getLangText('Upload')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Proof of payment')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload Screenshot'),
plural: getLangText('Upload Screenshots')
}}/>
</div>
<Form
className="ascribe-form-bordered"
ref="terms">
<Property
name="terms"
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
key="terms_explicitly"
defaultChecked={false}>
&nbsp;{getLangText('I agree to the Terms and Conditions of the Portfolio Review')}
</InputCheckbox>
</Property>
</Form>
<button
type="submit"
className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady}>
{getLangText('Submit to Portfolio Review')}
</button>
</div> </div>
); );
} }

View File

@ -8,13 +8,23 @@ import Row from 'react-bootstrap/lib/Row';
import PRRegisterPieceForm from './pr_forms/pr_register_piece_form'; import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
const { object } = React.PropTypes;
const PRRegisterPiece = React.createClass({ const PRRegisterPiece = React.createClass({
propTypes: {
location: object
},
render() { render() {
const { location } = this.props;
setDocumentTitle(getLangText('Submission form'));
return ( return (
<Row> <Row>
<Col xs={4}> <Col xs={6}>
<div className="register-piece--hero"> <div className="register-piece--hero">
<h1>Portfolio Review</h1> <h1>Portfolio Review</h1>
<h2>{getLangText('Submission closing on %s', ' 21 Dec 2015')}</h2> <h2>{getLangText('Submission closing on %s', ' 21 Dec 2015')}</h2>
@ -23,8 +33,9 @@ const PRRegisterPiece = React.createClass({
<p>{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}</p> <p>{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}</p>
</div> </div>
</Col> </Col>
<Col xs={8}> <Col xs={6}>
<PRRegisterPieceForm /> <PRRegisterPieceForm
location={location}/>
</Col> </Col>
</Row> </Row>
); );

View File

@ -219,3 +219,18 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-top: 0; margin-top: 0;
} }
} }
.input-upload-file-button-property {
background-color: white;
padding: 1.5em 0 1.5em 0;
text-align: right;
button {
font-size: 1em;
margin-right: 1em;
}
span + button {
margin-left: 1em;
}
}

View File

@ -28,6 +28,20 @@
p:last-child { p:last-child {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
}
.register-piece--form {
form {
border-top: none;
}
form:first-child {
border-bottom: none;
}
form + form, form:last-child {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
} }
} }