ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Merge pull request #84 from ascribe/AD-1531-contract-settings-buttons-look-weird

Browse Source 
AD-1531 Contract settings buttons look weird
This commit is contained in:
Brett Sun 2016-01-19 17:09:26 +01:00
commit 405a46dca3
6 changed files with 116 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/actions/contract_list_actions.js
View File

@ -28,12 +28,10 @@ class ContractListActions {
} }
changeContract(contract){ changeContract(contract) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
OwnershipFetcher.changeContract(contract) OwnershipFetcher.changeContract(contract)
.then((res) => { .then(resolve)
resolve(res);
})
.catch((err)=> { .catch((err)=> {
console.logGlobal(err); console.logGlobal(err);
reject(err); reject(err);
@ -41,13 +39,11 @@ class ContractListActions {
}); });
} }
removeContract(contractId){ removeContract(contractId) {
return Q.Promise( (resolve, reject) => { return Q.Promise((resolve, reject) => {
OwnershipFetcher.deleteContract(contractId) OwnershipFetcher.deleteContract(contractId)
.then((res) => { .then(resolve)
resolve(res); .catch((err) => {
})
.catch( (err) => {
console.logGlobal(err); console.logGlobal(err);
reject(err); reject(err);
}); });

36
js/components/ascribe_settings/contract_settings.js
View File

@ -28,11 +28,7 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils
let ContractSettings = React.createClass({ let ContractSettings = React.createClass({
propTypes: { getInitialState() {
location: React.PropTypes.object
},
getInitialState(){
return mergeOptions( return mergeOptions(
ContractListStore.getState(), ContractListStore.getState(),
UserStore.getState() UserStore.getState()
@ -64,40 +60,39 @@ let ContractSettings = React.createClass({
ContractListActions.removeContract(contract.id) ContractListActions.removeContract(contract.id)
.then((response) => { .then((response) => {
ContractListActions.fetchContractList(true); ContractListActions.fetchContractList(true);
let notification = new GlobalNotificationModel(response.notification, 'success', 4000); const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}) })
.catch((err) => { .catch((err) => {
let notification = new GlobalNotificationModel(err, 'danger', 10000); const notification = new GlobalNotificationModel(err, 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}); });
}; };
}, },
getPublicContracts(){ getPublicContracts() {
return this.state.contractList.filter((contract) => contract.is_public); return this.state.contractList.filter((contract) => contract.is_public);
}, },
getPrivateContracts(){ getPrivateContracts() {
return this.state.contractList.filter((contract) => !contract.is_public); return this.state.contractList.filter((contract) => !contract.is_public);
}, },
render() { render() {
let publicContracts = this.getPublicContracts(); const publicContracts = this.getPublicContracts();
let privateContracts = this.getPrivateContracts(); const privateContracts = this.getPrivateContracts();
let createPublicContractForm = null; let createPublicContractForm = null;
setDocumentTitle(getLangText('Contracts settings')); setDocumentTitle(getLangText('Contracts settings'));
if(publicContracts.length === 0) { if (publicContracts.length === 0) {
createPublicContractForm = ( createPublicContractForm = (
<CreateContractForm <CreateContractForm
isPublic={true} isPublic={true}
fileClassToUpload={{ fileClassToUpload={{
singular: 'new contract', singular: 'new contract',
plural: 'new contracts' plural: 'new contracts'
}} }} />
location={this.props.location}/>
); );
} }
@ -114,7 +109,7 @@ let ContractSettings = React.createClass({
{publicContracts.map((contract, i) => { {publicContracts.map((contract, i) => {
return ( return (
<ActionPanel <ActionPanel
key={i} key={contract.id}
title={contract.name} title={contract.name}
content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')} content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
buttons={ buttons={
@ -123,8 +118,7 @@ let ContractSettings = React.createClass({
aclObject={this.state.whitelabel} aclObject={this.state.whitelabel}
aclName="acl_update_public_contract"> aclName="acl_update_public_contract">
<ContractSettingsUpdateButton <ContractSettingsUpdateButton
contract={contract} contract={contract} />
location={this.props.location}/>
</AclProxy> </AclProxy>
<a <a
className="btn btn-default btn-sm margin-left-2px" className="btn btn-default btn-sm margin-left-2px"
@ -154,12 +148,11 @@ let ContractSettings = React.createClass({
fileClassToUpload={{ fileClassToUpload={{
singular: getLangText('new contract'), singular: getLangText('new contract'),
plural: getLangText('new contracts') plural: getLangText('new contracts')
}} }} />
location={this.props.location}/>
{privateContracts.map((contract, i) => { {privateContracts.map((contract, i) => {
return ( return (
<ActionPanel <ActionPanel
key={i} key={contract.id}
title={contract.name} title={contract.name}
content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')} content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
buttons={ buttons={
@ -168,8 +161,7 @@ let ContractSettings = React.createClass({
aclObject={this.state.whitelabel} aclObject={this.state.whitelabel}
aclName="acl_update_private_contract"> aclName="acl_update_private_contract">
<ContractSettingsUpdateButton <ContractSettingsUpdateButton
contract={contract} contract={contract} />
location={this.props.location}/>
</AclProxy> </AclProxy>
<a <a
className="btn btn-default btn-sm margin-left-2px" className="btn btn-default btn-sm margin-left-2px"

32
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -24,38 +24,42 @@ let ContractSettingsUpdateButton = React.createClass({
}, },
submitFile(file) { submitFile(file) {
let contract = this.props.contract;
// override the blob with the key's value // override the blob with the key's value
contract.blob = file.key; const contract = Object.assign(this.props.contract, { blob: file.key });
// send it to the server // send it to the server
ContractListActions ContractListActions
.changeContract(contract) .changeContract(contract)
.then((res) => { .then((res) => {
// Display feedback to the user // Display feedback to the user
let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000); const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
// and refresh the contract list to get the updated contracs // and refresh the contract list to get the updated contracs
return ContractListActions.fetchContractList(true); return ContractListActions
}) .fetchContractList(true)
.then(() => { // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
// Also, reset the fineuploader component so that the user can again 'update' his contract .then(this.refs.fineuploader.reset)
this.refs.fineuploader.reset();
})
.catch((err) => { .catch((err) => {
console.logGlobal(err); const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
return Promise.reject(err);
}); });
}, (err) => {
const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
return Promise.reject(err);
})
.catch(console.logGlobal);
}, },
render() { render() {
return ( return (
<ReactS3FineUploader <ReactS3FineUploader
fileInputElement={UploadButton()} ref='fineuploader'
fileInputElement={UploadButton({ showLabel: false })}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract' fileClass: 'contract'

15
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils'; import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
import { getLangText } from '../../../utils/lang_utils'; import { getLangText } from '../../../utils/lang_utils';
@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
const { func, array, bool, shape, string } = React.PropTypes; const { func, array, bool, shape, string } = React.PropTypes;
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) { export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
return React.createClass({ return React.createClass({
displayName: 'UploadButton', displayName: 'UploadButton',
@ -119,17 +120,18 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
}, },
getUploadedFileLabel() { getUploadedFileLabel() {
if (showLabel) {
const uploadedFile = this.getUploadedFile(); const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles(); const uploadingFiles = this.getUploadingFiles();
if(uploadingFiles.length) { if (uploadingFiles.length) {
return ( return (
<span> <span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '} {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>] [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span> </span>
); );
} else if(uploadedFile) { } else if (uploadedFile) {
return ( return (
<span> <span>
<span className='ascribe-icon icon-ascribe-ok'/> <span className='ascribe-icon icon-ascribe-ok'/>
@ -138,9 +140,8 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
</span> </span>
); );
} else { } else {
return ( return <span>{getLangText('No file chosen')}</span>;
<span>{getLangText('No file chosen')}</span> }
);
} }
}, },
@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button` * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/ */
return ( return (
<div className="upload-button-wrapper"> <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
{/* {/*
The button needs to be of `type="button"` as it would The button needs to be of `type="button"` as it would
otherwise submit the form its in. otherwise submit the form its in.

14
js/fetchers/ownership_fetcher.js
View File

@ -15,7 +15,7 @@ let OwnershipFetcher = {
/** /**
* Fetch the contracts of the logged-in user from the API. * Fetch the contracts of the logged-in user from the API.
*/ */
fetchContractList(isActive, isPublic, issuer){ fetchContractList(isActive, isPublic, issuer) {
let queryParams = { let queryParams = {
isActive, isActive,
isPublic, isPublic,
@ -28,7 +28,7 @@ let OwnershipFetcher = {
/** /**
* Create a contractagreement between the logged-in user and the email from the API with contract. * Create a contractagreement between the logged-in user and the email from the API with contract.
*/ */
createContractAgreement(signee, contractObj){ createContractAgreement(signee, contractObj) {
return requests.post(ApiUrls.ownership_contract_agreements, { body: {signee: signee, contract: contractObj.id }}); return requests.post(ApiUrls.ownership_contract_agreements, { body: {signee: signee, contract: contractObj.id }});
}, },
@ -44,23 +44,23 @@ let OwnershipFetcher = {
return requests.get(ApiUrls.ownership_contract_agreements, queryParams); return requests.get(ApiUrls.ownership_contract_agreements, queryParams);
}, },
confirmContractAgreement(contractAgreement){ confirmContractAgreement(contractAgreement) {
return requests.put(ApiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id}); return requests.put(ApiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id});
}, },
denyContractAgreement(contractAgreement){ denyContractAgreement(contractAgreement) {
return requests.put(ApiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id}); return requests.put(ApiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id});
}, },
fetchLoanPieceRequestList(){ fetchLoanPieceRequestList() {
return requests.get(ApiUrls.ownership_loans_pieces_request); return requests.get(ApiUrls.ownership_loans_pieces_request);
}, },
changeContract(contractObj){ changeContract(contractObj) {
return requests.put(ApiUrls.ownership_contract, { body: contractObj, contract_id: contractObj.id }); return requests.put(ApiUrls.ownership_contract, { body: contractObj, contract_id: contractObj.id });
}, },
deleteContract(contractObjId){ deleteContract(contractObjId) {
return requests.delete(ApiUrls.ownership_contract, {contract_id: contractObjId}); return requests.delete(ApiUrls.ownership_contract, {contract_id: contractObjId});
} }
}; };

7
sass/ascribe_uploader.scss
View File

@ -182,9 +182,13 @@
height: 12px; height: 12px;
} }
.upload-button-wrapper { .ascribe-upload-button {
display: inline-block;
text-align: left; text-align: left;
&.ascribe-upload-button-has-label {
display: block;
.btn { .btn {
font-size: 1em; font-size: 1em;
margin-right: 1em; margin-right: 1em;
@ -193,4 +197,5 @@
span + .btn { span + .btn {
margin-left: 1em; margin-left: 1em;
} }
}
} }