ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2016-01-18 10:40:13 +01:00
commit a2320b892d
127 changed files with 2161 additions and 1406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -31,6 +31,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
127.0.0.1 sluice.localhost.com 127.0.0.1 sluice.localhost.com
127.0.0.1 lumenus.localhost.com 127.0.0.1 lumenus.localhost.com
127.0.0.1 portfolioreview.localhost.com 127.0.0.1 portfolioreview.localhost.com
127.0.0.1 23vivi.localhost.com
``` ```

BIN
fonts/ascribe-font.eot Executable file
View File

Binary file not shown.

7
fonts/ascribe-logo.svg → fonts/ascribe-font.svg Normal file → Executable file
View File

@ -3,7 +3,7 @@
<svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata> <metadata>Generated by IcoMoon</metadata>
<defs> <defs>
<font id="icomoon" horiz-adv-x="1024"> <font id="ascribe-font" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" /> <font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" /> <missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" /> <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@ -12,9 +12,10 @@
<glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" /> <glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
<glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" /> <glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
<glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" /> <glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe805;" glyph-name="uniE805" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" /> <glyph unicode="&#xe805;" glyph-name="add-blue" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
<glyph unicode="&#xe806;" glyph-name="uniE806" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" /> <glyph unicode="&#xe806;" glyph-name="add-blue2" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" /> <glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
<glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" /> <glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
<glyph unicode="&#xe809;" glyph-name="ok" horiz-adv-x="1348" d="M436.706-64l-406.588 399.059 112.941 105.412 293.647-293.647 768 760.471 105.412-105.412z" /> <glyph unicode="&#xe809;" glyph-name="ok" horiz-adv-x="1348" d="M436.706-64l-406.588 399.059 112.941 105.412 293.647-293.647 768 760.471 105.412-105.412z" />
<glyph unicode="&#xe810;" glyph-name="thin-cross" d="M1018.389 944.57l5.611 5.611-9.819 9.819-502.181-502.181-502.181 502.181-9.819-9.819 502.181-502.181-502.181-502.181 9.819-9.819 502.181 502.181 502.181-502.181 9.819 9.819-502.181 502.181z" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
fonts/ascribe-font.ttf Executable file
View File

Binary file not shown.

BIN
fonts/ascribe-font.woff Executable file
View File

Binary file not shown.

BIN
fonts/ascribe-logo.eot
View File

Binary file not shown.

BIN
fonts/ascribe-logo.ttf
View File

Binary file not shown.

BIN
fonts/ascribe-logo.woff
View File

Binary file not shown.

51
js/actions/coa_actions.js
View File

@ -1,51 +0,0 @@
'use strict';
import { alt } from '../alt';
import CoaFetcher from '../fetchers/coa_fetcher';
import Q from 'q';
class CoaActions {
constructor() {
this.generateActions(
'updateCoa',
'flushCoa'
);
}
fetchOrCreate(id, bitcoinId) {
return Q.Promise((resolve, reject) => {
CoaFetcher.fetchOne(id)
.then((res) => {
if (res.coa) {
this.actions.updateCoa(res.coa);
resolve(res.coa);
}
else {
this.actions.create(bitcoinId);
}
})
.catch((err) => {
console.logGlobal(err);
this.actions.updateCoa(null);
reject(err);
});
});
}
create(bitcoinId) {
return Q.Promise((resolve, reject) => {
CoaFetcher.create(bitcoinId)
.then((res) => {
this.actions.updateCoa(res.coa);
})
.catch((err) => {
console.logGlobal(err);
this.actions.updateCoa(null);
reject(err);
});
});
}
}
export default alt.createActions(CoaActions);

11
js/actions/contract_agreement_list_actions.js
View File

@ -83,9 +83,9 @@ class ContractAgreementListActions {
contractAgreementList in the store is already set to null; contractAgreementList in the store is already set to null;
*/ */
} }
}).then((publicContracAgreement) => { }).then((publicContractAgreement) => {
if (publicContracAgreement) { if (publicContractAgreement) {
this.actions.updateContractAgreementList([publicContracAgreement]); this.actions.updateContractAgreementList([publicContractAgreement]);
} }
}).catch(console.logGlobal); }).catch(console.logGlobal);
} }
@ -93,7 +93,10 @@ class ContractAgreementListActions {
createContractAgreement(issuer, contract){ createContractAgreement(issuer, contract){
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
OwnershipFetcher OwnershipFetcher
.createContractAgreement(issuer, contract).then(resolve) .createContractAgreement(issuer, contract)
.then((res) => {
resolve(res && res.contractagreement)
})
.catch((err) => { .catch((err) => {
console.logGlobal(err); console.logGlobal(err);
reject(err); reject(err);

20
js/actions/edition_actions.js
View File

@ -1,27 +1,19 @@
'use strict'; 'use strict';
import { alt } from '../alt'; import { alt } from '../alt';
import EditionFetcher from '../fetchers/edition_fetcher';
class EditionActions { class EditionActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'updateEdition', 'fetchEdition',
'editionFailed' 'successFetchEdition',
'successFetchCoa',
'flushEdition',
'errorCoa',
'errorEdition'
); );
} }
fetchOne(editionId) {
EditionFetcher.fetchOne(editionId)
.then((res) => {
this.actions.updateEdition(res.edition);
})
.catch((err) => {
console.logGlobal(err);
this.actions.editionFailed(err.json);
});
}
} }
export default alt.createActions(EditionActions); export default alt.createActions(EditionActions);

17
js/actions/edition_list_actions.js
View File

@ -17,7 +17,7 @@ class EditionListActions {
); );
} }
fetchEditionList({pieceId, page, pageSize, orderBy, orderAsc, filterBy}) { fetchEditionList({pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition}) {
if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) { if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
orderBy = 'edition_number'; orderBy = 'edition_number';
orderAsc = true; orderAsc = true;
@ -29,9 +29,17 @@ class EditionListActions {
pageSize = 10; pageSize = 10;
} }
let itemsToFetch = pageSize;
// If we only want to fetch up to a specified edition, fetch all pages up to it
// as one page and adjust afterwards
if (typeof maxEdition === 'number') {
itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize;
page = 1;
}
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
EditionListFetcher EditionListFetcher
.fetch({pieceId, page, pageSize, orderBy, orderAsc, filterBy}) .fetch({pieceId, page, itemsToFetch, orderBy, orderAsc, filterBy})
.then((res) => { .then((res) => {
if (res && !res.editions) { if (res && !res.editions) {
throw new Error('Piece has no editions to fetch.'); throw new Error('Piece has no editions to fetch.');
@ -44,8 +52,9 @@ class EditionListActions {
orderBy, orderBy,
orderAsc, orderAsc,
filterBy, filterBy,
'editionListOfPiece': res.editions, maxEdition,
'count': res.count count: res.count,
editionListOfPiece: res.editions
}); });
resolve(res); resolve(res);
}) })

5
js/actions/notification_actions.js
View File

@ -9,10 +9,13 @@ class NotificationActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'updatePieceListNotifications', 'updatePieceListNotifications',
'flushPieceListNotifications',
'updateEditionListNotifications', 'updateEditionListNotifications',
'flushEditionListNotifications',
'updateEditionNotifications', 'updateEditionNotifications',
'updatePieceNotifications', 'updatePieceNotifications',
'updateContractAgreementListNotifications' 'updateContractAgreementListNotifications',
'flushContractAgreementListNotifications'
); );
} }

3
js/app.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
require('babel/polyfill'); import 'babel/polyfill';
import 'classlist-polyfill';
import React from 'react'; import React from 'react';
import { Router, Redirect } from 'react-router'; import { Router, Redirect } from 'react-router';

2
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -119,7 +119,7 @@ let AccordionListItemEditionWidget = React.createClass({
<button <button
disabled disabled
title={getLangText('All editions for this have been deleted already.')} title={getLangText('All editions for this have been deleted already.')}
className={classNames('btn', 'btn-default', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}> className={classNames('btn', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
{'0 ' + getLangText('Editions')} {'0 ' + getLangText('Editions')}
</button> </button>
); );

20
js/components/ascribe_accordion_list/accordion_list_item_piece.js
View File

@ -12,8 +12,11 @@ import { getLangText } from '../../utils/lang_utils';
let AccordionListItemPiece = React.createClass({ let AccordionListItemPiece = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string, className: React.PropTypes.string,
artistName: React.PropTypes.string, artistName: React.PropTypes.oneOfType([
piece: React.PropTypes.object, React.PropTypes.string,
React.PropTypes.element
]),
piece: React.PropTypes.object.isRequired,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -51,17 +54,21 @@ let AccordionListItemPiece = React.createClass({
piece, piece,
subsubheading, subsubheading,
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props; thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
const { url, url_safe } = piece.thumbnail; const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail;
// Display the 300x300 thumbnail if we have it, otherwise just use the safe url
const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl;
let thumbnail; let thumbnail;
// Since we're going to refactor the thumbnail generation anyway at one point, // Since we're going to refactor the thumbnail generation anyway at one point,
// for not use the annoying ascribe_spiral.png, we're matching the url against // for not use the annoying ascribe_spiral.png, we're matching the url against
// this name and replace it with a CSS version of the new logo. // this name and replace it with a CSS version of the new logo.
if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) { if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
thumbnail = (<ThumbnailPlaceholder />); thumbnail = (<ThumbnailPlaceholder />);
} else { } else {
thumbnail = ( thumbnail = (
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/> <div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
); );
} }
@ -79,8 +86,7 @@ let AccordionListItemPiece = React.createClass({
subsubheading={subsubheading} subsubheading={subsubheading}
buttons={buttons} buttons={buttons}
badge={badge} badge={badge}
linkData={this.getLinkData()} linkData={this.getLinkData()}>
>
{children} {children}
</AccordionListItem> </AccordionListItem>
); );

117
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -90,6 +90,10 @@ let AccordionListItemTableEditions = React.createClass({
}); });
}, },
render() { render() {
const { className, parentId } = this.props;
const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
const editionsForPiece = editionList[parentId];
let selectedEditionsCount = 0; let selectedEditionsCount = 0;
let allEditionsCount = 0; let allEditionsCount = 0;
let orderBy; let orderBy;
@ -97,9 +101,6 @@ let AccordionListItemTableEditions = React.createClass({
let show = false; let show = false;
let showExpandOption = false; let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
// here we need to check if all editions of a specific // here we need to check if all editions of a specific
// piece are already defined. Otherwise .length will throw an error and we'll not // piece are already defined. Otherwise .length will throw an error and we'll not
// be notified about it. // be notified about it.
@ -110,8 +111,8 @@ let AccordionListItemTableEditions = React.createClass({
orderAsc = editionsForPiece.orderAsc; orderAsc = editionsForPiece.orderAsc;
} }
if(this.props.parentId in this.state.isEditionListOpenForPieceId) { if (parentId in isEditionListOpenForPieceId) {
show = this.state.isEditionListOpenForPieceId[this.props.parentId].show; show = isEditionListOpenForPieceId[parentId].show;
} }
// if the number of editions in the array is equal to the maximum number of editions, // if the number of editions in the array is equal to the maximum number of editions,
@ -120,72 +121,77 @@ let AccordionListItemTableEditions = React.createClass({
showExpandOption = true; showExpandOption = true;
} }
let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() ); const transition = new TransitionModel({
to: 'editions',
queryKey: 'editionId',
valueKey: 'bitcoin_id',
callback: (e) => e.stopPropagation()
});
let columnList = [ const columnList = [
new ColumnModel( new ColumnModel({
(item) => { transformFn: (item) => {
return { return {
'editionId': item.id, 'editionId': item.id,
'pieceId': this.props.parentId, 'pieceId': parentId,
'selectItem': this.selectItem, 'selectItem': this.selectItem,
'selected': item.selected 'selected': item.selected
}; }, };
'', },
displayElement: (
<AccordionListItemTableSelectAllEditionsCheckbox <AccordionListItemTableSelectAllEditionsCheckbox
onChange={this.toggleAllItems} onChange={this.toggleAllItems}
numOfSelectedEditions={selectedEditionsCount} numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>, numOfAllEditions={allEditionsCount}/>
TableItemCheckbox,
1,
false
), ),
new ColumnModel( displayType: TableItemCheckbox,
(item) => { rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return { return {
'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions 'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
}; }, };
'edition_number', },
getLangText('Edition'), columnName: 'edition_number',
TableItemText, displayElement: getLangText('Edition'),
1, displayType: TableItemText,
false, rowWidth: 1
transition }),
), new ColumnModel({
new ColumnModel( transition,
(item) => { transformFn: (item) => {
return { return {
'content': item.bitcoin_id 'content': item.bitcoin_id
}; }, };
'bitcoin_id', },
getLangText('ID'), columnName: 'bitcoin_id',
TableItemText, displayElement: getLangText('ID'),
5, displayType: TableItemText,
false, rowWidth: 5,
className: 'hidden-xs visible-sm visible-md visible-lg'
}),
new ColumnModel({
transition, transition,
'hidden-xs visible-sm visible-md visible-lg' transformFn: (item) => {
),
new ColumnModel(
(item) => {
let content = item.acl;
return { return {
'content': content, 'content': item.acl,
'notifications': item.notifications 'notifications': item.notifications
}; }, };
'acl', },
getLangText('Actions'), columnName: 'acl',
TableItemAclFiltered, displayElement: getLangText('Actions'),
4, displayType: TableItemAclFiltered,
false, rowWidth: 4
transition })
)
]; ];
if(show && editionsForPiece && editionsForPiece.length > 0) { if (show && editionsForPiece && editionsForPiece.length) {
return ( return (
<div className={this.props.className}> <div className={className}>
<AccordionListItemTable <AccordionListItemTable
parentId={this.props.parentId} parentId={parentId}
itemList={editionsForPiece} itemList={editionsForPiece}
columnList={columnList} columnList={columnList}
show={show} show={show}
@ -196,7 +202,14 @@ let AccordionListItemTableEditions = React.createClass({
<AccordionListItemTableToggle <AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle" className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions} onClick={this.loadFurtherEditions}
message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} /> message={show && showExpandOption ? (
<span>
{showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
: <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
{getLangText('Show me more')}
</span>
) : null
} />
</div> </div>
); );
} else { } else {

26
js/components/ascribe_detail/detail_property.js
View File

@ -1,9 +1,10 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
let DetailProperty = React.createClass({ const DetailProperty = React.createClass({
propTypes: { propTypes: {
label: React.PropTypes.string, label: React.PropTypes.string,
value: React.PropTypes.oneOfType([ value: React.PropTypes.oneOfType([
@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
React.PropTypes.element React.PropTypes.element
]), ]),
separator: React.PropTypes.string, separator: React.PropTypes.string,
className: React.PropTypes.string,
labelClassName: React.PropTypes.string, labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string, valueClassName: React.PropTypes.string,
ellipsis: React.PropTypes.bool, ellipsis: React.PropTypes.bool,
@ -30,31 +32,23 @@ let DetailProperty = React.createClass({
}, },
render() { render() {
let styles = {}; const {
const { labelClassName, children,
className,
ellipsis,
label, label,
labelClassName,
separator, separator,
valueClassName, valueClassName,
children,
value } = this.props; value } = this.props;
if(this.props.ellipsis) {
styles = {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
};
}
return ( return (
<div className="row ascribe-detail-property"> <div className={classNames('row ascribe-detail-property', className)}>
<div className="row-same-height"> <div className="row-same-height">
<div className={labelClassName}> <div className={labelClassName}>
{label} {separator} {label} {separator}
</div> </div>
<div <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
className={valueClassName}
style={styles}>
{children || value} {children || value}
</div> </div>
</div> </div>

263
js/components/ascribe_detail/edition.js
View File

@ -1,18 +1,13 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link, History } from 'react-router'; import { Link } from 'react-router';
import Moment from 'moment'; import Moment from 'moment';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col'; import Col from 'react-bootstrap/lib/Col';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import CoaActions from '../../actions/coa_actions';
import CoaStore from '../../stores/coa_store';
import HistoryIterator from './history_iterator'; import HistoryIterator from './history_iterator';
import MediaContainer from './media_container'; import MediaContainer from './media_container';
@ -21,7 +16,7 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
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 EditionDetailProperty from './detail_property'; import DetailProperty from './detail_property';
import LicenseDetail from './license_detail'; import LicenseDetail from './license_detail';
import FurtherDetails from './further_details'; import FurtherDetails from './further_details';
@ -44,134 +39,115 @@ let Edition = React.createClass({
actionPanelButtonListType: React.PropTypes.func, actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func, furtherDetailsType: React.PropTypes.func,
edition: React.PropTypes.object, edition: React.PropTypes.object,
coaError: React.PropTypes.object,
currentUser: React.PropTypes.object,
loadEdition: React.PropTypes.func loadEdition: React.PropTypes.func
}, },
mixins: [History],
getDefaultProps() { getDefaultProps() {
return { return {
furtherDetailsType: FurtherDetails furtherDetailsType: FurtherDetails
}; };
}, },
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
// Flushing the coa state is essential to not displaying the same
// data to the user while he's on another edition
//
// BUGFIX: Previously we had this line in the componentWillUnmount of
// CoaDetails, but since we're reloading the edition after performing an ACL action
// on it, this resulted in multiple events occupying the dispatcher, which eventually
// resulted in crashing the app.
CoaActions.flushCoa();
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() { render() {
let FurtherDetailsType = this.props.furtherDetailsType; const {
actionPanelButtonListType,
coaError,
currentUser,
edition,
furtherDetailsType: FurtherDetailsType,
loadEdition } = this.props;
return ( return (
<Row> <Row>
<Col md={6}> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
content={this.props.edition}/> content={edition}
currentUser={currentUser} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1> <h1 className="ascribe-detail-title">{edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} /> <DetailProperty label="BY" value={edition.artist_name} />
<EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
<EditionSummary <EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
edition={this.props.edition} edition={edition}
currentUser={this.state.currentUser} currentUser={currentUser}
handleSuccess={this.props.loadEdition}/> handleSuccess={loadEdition}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Certificate of Authenticity')} title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}> show={edition.acl.acl_coa === true}>
<CoaDetails <CoaDetails
edition={this.props.edition}/> coa={edition.coa}
coaError={coaError}
editionId={edition.bitcoin_id}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Provenance/Ownership History')} title={getLangText('Provenance/Ownership History')}
show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}> show={edition.ownership_history && edition.ownership_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.ownership_history} /> history={edition.ownership_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Consignment History')} title={getLangText('Consignment History')}
show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}> show={edition.consign_history && edition.consign_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.consign_history} /> history={edition.consign_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}> show={edition.loan_history && edition.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.loan_history} /> history={edition.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title="Notes" title="Notes"
show={!!(this.state.currentUser.username show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null} defaultValue={edition.private_note ? edition.private_note : null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition} url={ApiUrls.note_private_edition}
currentUser={this.state.currentUser}/> currentUser={currentUser}/>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null} defaultValue={edition.public_note ? edition.public_note : null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit} editable={!!edition.acl.acl_edit}
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit} show={!!edition.public_note || !!edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')} successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition} url={ApiUrls.note_public_edition}
currentUser={this.state.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit show={edition.acl.acl_edit ||
|| Object.keys(this.props.edition.extra_data).length > 0 Object.keys(edition.extra_data).length > 0 ||
|| this.props.edition.other_data.length > 0}> edition.other_data.length > 0}>
<FurtherDetailsType <FurtherDetailsType
editable={this.props.edition.acl.acl_edit} editable={edition.acl.acl_edit}
pieceId={this.props.edition.parent} pieceId={edition.parent}
extraData={this.props.edition.extra_data} extraData={edition.extra_data}
otherData={this.props.edition.other_data} otherData={edition.other_data}
handleSuccess={this.props.loadEdition} /> handleSuccess={loadEdition} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('SPOOL Details')}> title={getLangText('SPOOL Details')}>
<SpoolDetails <SpoolDetails
edition={this.props.edition} /> edition={edition} />
</CollapsibleParagraph> </CollapsibleParagraph>
</Col> </Col>
</Row> </Row>
@ -196,10 +172,10 @@ let EditionSummary = React.createClass({
let status = null; let status = null;
if (this.props.edition.status.length > 0){ if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' '); let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>; status = <DetailProperty label="STATUS" value={ statusStr }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){ if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = ( status = (
<EditionDetailProperty label="STATUS" value={ statusStr } /> <DetailProperty label="STATUS" value={ statusStr } />
); );
} }
} }
@ -210,14 +186,14 @@ let EditionSummary = React.createClass({
let { actionPanelButtonListType, edition, currentUser } = this.props; let { actionPanelButtonListType, edition, currentUser } = this.props;
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<EditionDetailProperty <DetailProperty
label={getLangText('EDITION')} label={getLangText('EDITION')}
value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} /> value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
<EditionDetailProperty <DetailProperty
label={getLangText('ID')} label={getLangText('ID')}
value={ edition.bitcoin_id } value={ edition.bitcoin_id }
ellipsis={true} /> ellipsis={true} />
<EditionDetailProperty <DetailProperty
label={getLangText('OWNER')} label={getLangText('OWNER')}
value={ edition.owner } /> value={ edition.owner } />
<LicenseDetail license={edition.license_type}/> <LicenseDetail license={edition.license_type}/>
@ -228,14 +204,15 @@ let EditionSummary = React.createClass({
`AclInformation` would show up `AclInformation` would show up
*/} */}
<AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}> <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
<EditionDetailProperty <DetailProperty
label={getLangText('ACTIONS')}> label={getLangText('ACTIONS')}
className="hidden-print">
<EditionActionPanel <EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
edition={edition} edition={edition}
currentUser={currentUser} currentUser={currentUser}
handleSuccess={this.handleSuccess} /> handleSuccess={this.handleSuccess} />
</EditionDetailProperty> </DetailProperty>
</AclProxy> </AclProxy>
<hr/> <hr/>
</div> </div>
@ -246,38 +223,47 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({ let CoaDetails = React.createClass({
propTypes: { propTypes: {
edition: React.PropTypes.object editionId: React.PropTypes.string,
coa: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
React.PropTypes.object
]),
coaError: React.PropTypes.object
}, },
getInitialState() { contactOnIntercom() {
return CoaStore.getState(); const { coaError, editionId } = this.props;
},
componentDidMount() { window.Intercom('showNewMessage', getLangText("Hi, I'm having problems generating a Certificate of Authenticity for Edition: %s", editionId));
let { edition } = this.props; console.logGlobal(new Error(`Coa couldn't be created for edition: ${editionId}`), coaError);
CoaStore.listen(this.onChange);
if(edition.coa) {
CoaActions.fetchOrCreate(edition.coa, edition.bitcoin_id);
}
else {
CoaActions.create(edition.bitcoin_id);
}
},
componentWillUnmount() {
CoaStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
}, },
render() { render() {
if(this.state.coa && this.state.coa.url_safe) { const { coa, coaError } = this.props;
return ( let coaDetailElement;
<div>
<p className="text-center ascribe-button-list"> if (coaError) {
<a href={this.state.coa.url_safe} target="_blank"> coaDetailElement = [
<p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>,
<p>
{getLangText('Try to refresh the page. If this happens repeatedly, please ')}
<a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
</p>
];
} else if (coa && coa.url_safe) {
coaDetailElement = [
<div
className="notification-contract-pdf"
style={{paddingBottom: '1em'}}>
<embed
className="embed-form"
src={coa.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
</div>,
<div className="text-center ascribe-button-list">
<a href={coa.url_safe} target="_blank">
<button className="btn btn-default btn-xs"> <button className="btn btn-default btn-xs">
{getLangText('Download')} <Glyphicon glyph="cloud-download"/> {getLangText('Download')} <Glyphicon glyph="cloud-download"/>
</button> </button>
@ -287,20 +273,27 @@ let CoaDetails = React.createClass({
{getLangText('Verify')} <Glyphicon glyph="check"/> {getLangText('Verify')} <Glyphicon glyph="check"/>
</button> </button>
</Link> </Link>
</p>
</div> </div>
); ];
} else if(typeof this.state.coa === 'string'){ } else if (typeof coa === 'string') {
return ( coaDetailElement = coa;
<div className="text-center"> } else {
{this.state.coa} coaDetailElement = [
</div> <AscribeSpinner color='dark-blue' size='md'/>,
); <p>{getLangText("Just a sec, we're generating your COA")}</p>,
<p>{getLangText('(you may leave the page)')}</p>
];
} }
return ( return (
<div className="text-center"> <div>
<AscribeSpinner color='dark-blue' size='lg'/> <div className="text-center hidden-print">
{coaDetailElement}
</div>
{/* Hide the COA and just show that it's a seperate document when printing */}
<div className="visible-print ascribe-coa-print-placeholder">
{getLangText('The COA is available as a seperate document')}
</div>
</div> </div>
); );
} }
@ -312,16 +305,34 @@ let SpoolDetails = React.createClass({
}, },
render() { render() {
let bitcoinIdValue = ( const { edition: {
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a> bitcoin_id: bitcoinId,
hash_as_address: hashAsAddress,
btc_owner_address_noprefix: bitcoinOwnerAddress
} } = this.props;
const bitcoinIdValue = (
<a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + bitcoinId}>
{bitcoinId}
</a>
); );
let hashOfArtwork = ( const hashOfArtwork = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a> <a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
{hashAsAddress}
</a>
); );
let ownerAddress = ( const ownerAddress = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a> <a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
{bitcoinOwnerAddress}
</a>
); );
return ( return (

4
js/components/ascribe_detail/edition_action_panel.js
View File

@ -72,10 +72,10 @@ let EditionActionPanel = React.createClass({
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
refreshCollection() { refreshCollection() {

52
js/components/ascribe_detail/edition_container.js
View File

@ -9,12 +9,16 @@ import { ResourceNotFoundError } from '../../models/errors';
import EditionActions from '../../actions/edition_actions'; import EditionActions from '../../actions/edition_actions';
import EditionStore from '../../stores/edition_store'; import EditionStore from '../../stores/edition_store';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import Edition from './edition'; import Edition from './edition';
import AscribeSpinner from '../ascribe_spinner'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import { setDocumentTitle } from '../../utils/dom_utils'; import { setDocumentTitle } from '../../utils/dom_utils';
import { mergeOptions } from '../../utils/general_utils';
/** /**
@ -30,33 +34,37 @@ let EditionContainer = React.createClass({
mixins: [History, ReactError], mixins: [History, ReactError],
getInitialState() { getInitialState() {
return EditionStore.getState(); return mergeOptions(
EditionStore.getState(),
UserStore.getState()
);
}, },
componentDidMount() { componentDidMount() {
EditionStore.listen(this.onChange); EditionStore.listen(this.onChange);
UserStore.listen(this.onChange);
// Every time we're entering the edition detail page, // Every time we're entering the edition detail page,
// just reset the edition that is saved in the edition store // just reset the edition that is saved in the edition store
// as it will otherwise display wrong/old data once the user loads // as it will otherwise display wrong/old data once the user loads
// the edition detail a second time // the edition detail a second time
EditionActions.updateEdition({}); EditionActions.flushEdition();
this.loadEdition(); EditionActions.fetchEdition(this.props.params.editionId);
UserActions.fetchCurrentUser();
}, },
// This is done to update the container when the user clicks on the prev or next // This is done to update the container when the user clicks on the prev or next
// button to update the URL parameter (and therefore to switch pieces) // button to update the URL parameter (and therefore to switch pieces)
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(this.props.params.editionId !== nextProps.params.editionId) { if(this.props.params.editionId !== nextProps.params.editionId) {
EditionActions.updateEdition({}); EditionActions.fetchEdition(this.props.params.editionId);
EditionActions.fetchOne(nextProps.params.editionId);
} }
}, },
componentDidUpdate() { componentDidUpdate() {
const { editionError } = this.state; const { editionMeta } = this.state;
if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
if(editionError && editionError.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist."))); this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
} }
}, },
@ -64,34 +72,36 @@ let EditionContainer = React.createClass({
componentWillUnmount() { componentWillUnmount() {
window.clearInterval(this.state.timerId); window.clearInterval(this.state.timerId);
EditionStore.unlisten(this.onChange); EditionStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
if (!state.edition.digital_work) {
return; if(state && state.edition && state.edition.digital_work) {
}
let isEncoding = state.edition.digital_work.isEncoding; let isEncoding = state.edition.digital_work.isEncoding;
if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000); let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
this.setState({timerId: timerId}); this.setState({timerId: timerId});
} }
}, }
loadEdition() {
EditionActions.fetchOne(this.props.params.editionId);
}, },
render() { render() {
if(this.state.edition && this.state.edition.id) { const { edition, currentUser, coaMeta } = this.state;
setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', ')); const { actionPanelButtonListType, furtherDetailsType } = this.props;
if (Object.keys(edition).length && edition.id) {
setDocumentTitle([edition.artist_name, edition.title].join(', '));
return ( return (
<Edition <Edition
actionPanelButtonListType={this.props.actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
furtherDetailsType={this.props.furtherDetailsType} furtherDetailsType={furtherDetailsType}
edition={this.state.edition} edition={edition}
loadEdition={this.loadEdition} /> coaError={coaMeta.err}
currentUser={currentUser}
loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)} />
); );
} else { } else {
return ( return (

2
js/components/ascribe_detail/further_details_fileuploader.js
View File

@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({
otherData: React.PropTypes.arrayOf(React.PropTypes.object), otherData: React.PropTypes.arrayOf(React.PropTypes.object),
setIsUploadReady: React.PropTypes.func, setIsUploadReady: React.PropTypes.func,
submitFile: React.PropTypes.func, submitFile: React.PropTypes.func,
onValidationFailed: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func, isReadyForFormSubmission: React.PropTypes.func,
editable: React.PropTypes.bool, editable: React.PropTypes.bool,
multiple: React.PropTypes.bool multiple: React.PropTypes.bool
@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
}} }}
validation={AppConstants.fineUploader.validation.additionalData} validation={AppConstants.fineUploader.validation.additionalData}
submitFile={this.props.submitFile} submitFile={this.props.submitFile}
onValidationFailed={this.props.onValidationFailed}
setIsUploadReady={this.props.setIsUploadReady} setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission} isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{ session={{

6
js/components/ascribe_detail/history_iterator.js
View File

@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({
return ( return (
<span> <span>
{historicalEventDescription} {historicalEventDescription}
<a href={historicalEvent[2]} target="_blank">{contractName}</a> <a className="anchor-no-expand-print"
target="_blank"
href={historicalEvent[2]}>
{contractName}
</a>
</span> </span>
); );
} else if(historicalEvent.length === 2) { } else if(historicalEvent.length === 2) {

44
js/components/ascribe_detail/media_container.js
View File

@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
import AclProxy from '../acl_proxy'; import AclProxy from '../acl_proxy';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import { mergeOptions } from '../../utils/general_utils.js';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
const EMBED_IFRAME_HEIGHT = { const EMBED_IFRAME_HEIGHT = {
@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = {
let MediaContainer = React.createClass({ let MediaContainer = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
currentUser: React.PropTypes.object,
refreshObject: React.PropTypes.func refreshObject: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
return mergeOptions( return {
UserStore.getState(),
{
timerId: null timerId: null
}); };
}, },
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
if (!this.props.content.digital_work) { if (!this.props.content.digital_work) {
return; return;
} }
let isEncoding = this.props.content.digital_work.isEncoding;
const isEncoding = this.props.content.digital_work.isEncoding;
if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(this.props.refreshObject, 10000); let timerId = window.setInterval(this.props.refreshObject, 10000);
this.setState({timerId: timerId}); this.setState({timerId: timerId});
@ -60,22 +53,16 @@ let MediaContainer = React.createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
UserStore.unlisten(this.onChange);
window.clearInterval(this.state.timerId); window.clearInterval(this.state.timerId);
}, },
onChange(state) {
this.setState(state);
},
render() { render() {
const { content } = this.props; const { content, currentUser } = this.props;
// Pieces and editions are joined to the user by a foreign key in the database, so // Pieces and editions are joined to the user by a foreign key in the database, so
// the information in content will be updated if a user updates their username. // the information in content will be updated if a user updates their username.
// We also force uniqueness of usernames, so this check is safe to dtermine if the // We also force uniqueness of usernames, so this check is safe to dtermine if the
// content was registered by the current user. // content was registered by the current user.
const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered); const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@ -94,8 +81,11 @@ let MediaContainer = React.createClass({
embed = ( embed = (
<CollapsibleButton <CollapsibleButton
button={ button={
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}> <Button
Embed bsSize="xsmall"
className="ascribe-margin-1px"
disabled={isEmbedDisabled}>
{getLangText('Embed')}
</Button> </Button>
} }
panel={ panel={
@ -114,7 +104,7 @@ let MediaContainer = React.createClass({
url={content.digital_work.url} url={content.digital_work.url}
extraData={extraData} extraData={extraData}
encodingStatus={content.digital_work.isEncoding} /> encodingStatus={content.digital_work.isEncoding} />
<p className="text-center"> <p className="text-center hidden-print">
<span className="ascribe-social-button-list"> <span className="ascribe-social-button-list">
<FacebookShareButton /> <FacebookShareButton />
<TwitterShareButton <TwitterShareButton
@ -125,8 +115,12 @@ let MediaContainer = React.createClass({
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download} show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
aclObject={content.acl} aclObject={content.acl}
aclName="acl_download"> aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank"> <Button
Download .{mimetype} <Glyphicon glyph="cloud-download"/> bsSize="xsmall"
className="ascribe-margin-1px"
href={content.digital_work.url}
target="_blank">
{getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
</Button> </Button>
</AclProxy> </AclProxy>
{embed} {embed}

22
js/components/ascribe_detail/piece.js
View File

@ -16,10 +16,10 @@ import MediaContainer from './media_container';
let Piece = React.createClass({ let Piece = React.createClass({
propTypes: { propTypes: {
piece: React.PropTypes.object, piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
header: React.PropTypes.object, header: React.PropTypes.object,
subheader: React.PropTypes.object, subheader: React.PropTypes.object,
buttons: React.PropTypes.object, buttons: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -32,20 +32,22 @@ let Piece = React.createClass({
}, },
render() { render() {
const { buttons, children, currentUser, header, piece, subheader } = this.props;
return ( return (
<Row> <Row>
<Col md={6}> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
refreshObject={this.updateObject} content={piece}
content={this.props.piece}/> currentUser={currentUser}
refreshObject={this.updateObject} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header} {header}
{this.props.subheader} {subheader}
{this.props.buttons} {buttons}
{this.props.children}
{children}
</Col> </Col>
</Row> </Row>
); );

71
js/components/ascribe_detail/piece_container.js
View File

@ -85,6 +85,7 @@ let PieceContainer = React.createClass({
// store as it will otherwise display wrong/old data once the user loads // store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time // the piece detail a second time
PieceActions.updatePiece({}); PieceActions.updatePiece({});
this.loadPiece(); this.loadPiece();
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
}, },
@ -160,7 +161,7 @@ let PieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCreateEditionsDialog() { getCreateEditionsDialog() {
@ -220,7 +221,9 @@ let PieceContainer = React.createClass({
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
`AclInformation` would show up `AclInformation` would show up
*/} */}
<DetailProperty label={getLangText('ACTIONS')}> <DetailProperty
label={getLangText('ACTIONS')}
className="hidden-print">
<AclButtonList <AclButtonList
className="ascribe-button-list" className="ascribe-button-list"
availableAcls={piece.acl} availableAcls={piece.acl}
@ -248,76 +251,76 @@ let PieceContainer = React.createClass({
}, },
render() { render() {
if (this.state.piece && this.state.piece.id) { const { furtherDetailsType: FurtherDetailsType } = this.props;
let FurtherDetailsType = this.props.furtherDetailsType; const { currentUser, piece } = this.state;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
if (piece && piece.id) {
setDocumentTitle([piece.artist_name, piece.title].join(', '));
return ( return (
<Piece <Piece
piece={this.state.piece} piece={piece}
loadPiece={this.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}} />
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null} {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={this.state.piece.license_type} /> <LicenseDetail license={piece.license_type} />
</div> </div>
} }
buttons={this.getActions()}> buttons={this.getActions()}>
{this.getCreateEditionsDialog()} {this.getCreateEditionsDialog()}
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.state.piece.loan_history} /> history={piece.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.state.currentUser.username show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null} defaultValue={piece.private_note || null}
show = {!!this.state.currentUser.username} show = {!!currentUser.username}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.state.currentUser}/> currentUser={currentUser}/>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null} defaultValue={piece.public_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit} editable={!!piece.acl.acl_edit}
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)} show={!!(piece.public_note || piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')} successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece} url={ApiUrls.note_public_piece}
currentUser={this.state.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.state.piece.acl.acl_edit show={piece.acl.acl_edit
|| Object.keys(this.state.piece.extra_data).length > 0 || Object.keys(piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0} || piece.other_data.length > 0}
defaultExpanded={true}> defaultExpanded={true}>
<FurtherDetailsType <FurtherDetailsType
editable={this.state.piece.acl.acl_edit} editable={piece.acl.acl_edit}
pieceId={this.state.piece.id} pieceId={piece.id}
extraData={this.state.piece.extra_data} extraData={piece.extra_data}
otherData={this.state.piece.other_data} otherData={piece.other_data}
handleSuccess={this.loadPiece} /> handleSuccess={this.loadPiece} />
</CollapsibleParagraph> </CollapsibleParagraph>

4
js/components/ascribe_forms/form.js
View File

@ -182,7 +182,7 @@ let Form = React.createClass({
delete formData.password; delete formData.password;
} }
console.logGlobal(err, false, formData); console.logGlobal(err, formData);
if (this.props.isInline) { if (this.props.isInline) {
let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger'); let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
@ -190,8 +190,8 @@ let Form = React.createClass({
} else { } else {
this.setState({errors: [getLangText('Something went wrong, please try again later')]}); this.setState({errors: [getLangText('Something went wrong, please try again later')]});
} }
} }
this.setState({submitted: false}); this.setState({submitted: false});
}, },

8
js/components/ascribe_forms/form_consign.js
View File

@ -41,6 +41,14 @@ let ConsignForm = React.createClass({
}; };
}, },
componentWillReceiveProps(nextProps) {
if (this.props.email !== nextProps.email) {
this.setState({
email: nextProps.email
});
}
},
getFormData() { getFormData() {
return this.props.id; return this.props.id;
}, },

15
js/components/ascribe_forms/form_loan.js
View File

@ -25,6 +25,7 @@ import { mergeOptions } from '../../utils/general_utils';
let LoanForm = React.createClass({ let LoanForm = React.createClass({
propTypes: { propTypes: {
loanHeading: React.PropTypes.string, loanHeading: React.PropTypes.string,
buttons: React.PropTypes.element,
email: React.PropTypes.string, email: React.PropTypes.string,
gallery: React.PropTypes.string, gallery: React.PropTypes.string,
startDate: React.PropTypes.object, startDate: React.PropTypes.object,
@ -60,6 +61,14 @@ let LoanForm = React.createClass({
}; };
}, },
componentWillReceiveProps(nextProps) {
if (this.props.email !== nextProps.email) {
this.setState({
email: nextProps.email
});
}
},
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
}, },
@ -80,7 +89,11 @@ let LoanForm = React.createClass({
}, },
getButtons() { getButtons() {
if(this.props.loanHeading) { const { buttons, loanHeading } = this.props;
if (buttons) {
return buttons;
} else if (loanHeading) {
return ( return (
<button <button
type="submit" type="submit"

2
js/components/ascribe_forms/form_login.js
View File

@ -93,7 +93,6 @@ let LoginForm = React.createClass({
<input <input
type="email" type="email"
placeholder={getLangText('Enter your email')} placeholder={getLangText('Enter your email')}
name="email"
defaultValue={email} defaultValue={email}
required/> required/>
</Property> </Property>
@ -103,7 +102,6 @@ let LoginForm = React.createClass({
<input <input
type="password" type="password"
placeholder={getLangText('Enter your password')} placeholder={getLangText('Enter your password')}
name="password"
required/> required/>
</Property> </Property>
</Form> </Form>

10
js/components/ascribe_forms/form_register_piece.js
View File

@ -109,6 +109,11 @@ let RegisterPieceForm = React.createClass({
); );
}, },
handleThumbnailValidationFailed(thumbnailFile) {
// If the validation fails, set the thumbnail as submittable since its optional
this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
},
isThumbnailDialogExpanded() { isThumbnailDialogExpanded() {
const { enableSeparateThumbnail } = this.props; const { enableSeparateThumbnail } = this.props;
const { digitalWorkFile } = this.state; const { digitalWorkFile } = this.state;
@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
handleChangedFile={this.handleChangedThumbnail} handleChangedFile={this.handleChangedThumbnail}
onValidationFailed={this.handleThumbnailValidationFailed}
isReadyForFormSubmission={formSubmissionValidation.fileOptional} isReadyForFormSubmission={formSubmissionValidation.fileOptional}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail' fileClass: 'thumbnail'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}} }}
setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')} setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}

11
js/components/ascribe_forms/form_send_contract_agreement.js
View File

@ -58,11 +58,15 @@ let SendContractAgreementForm = React.createClass({
notification = new GlobalNotificationModel(notification, 'success', 10000); notification = new GlobalNotificationModel(notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getFormData() { getFormData() {
return {'appendix': {'default': this.refs.form.refs.appendix.state.value}}; const appendixValue = this.refs.form.refs.appendix.state.value;
if (appendixValue) {
return { 'appendix': { 'default': appendixValue } };
}
}, },
getContracts() { getContracts() {
@ -124,7 +128,8 @@ let SendContractAgreementForm = React.createClass({
<Property <Property
name='appendix' name='appendix'
checkboxLabel={getLangText('Add appendix to the contract')} checkboxLabel={getLangText('Add appendix to the contract')}
expanded={false}> expanded={false}
style={{paddingBottom: 0}}>
<span>{getLangText('Appendix')}</span> <span>{getLangText('Appendix')}</span>
{/* We're using disabled on a form here as PropertyCollapsible currently {/* We're using disabled on a form here as PropertyCollapsible currently
does not support the disabled + overrideForm functionality */} does not support the disabled + overrideForm functionality */}

3
js/components/ascribe_forms/input_fineuploader.js
View File

@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({
plural: string plural: string
}), }),
handleChangedFile: func, handleChangedFile: func,
onValidationFailed: func,
// Provided by `Property` // Provided by `Property`
onChange: React.PropTypes.func onChange: React.PropTypes.func
@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({
isFineUploaderActive, isFineUploaderActive,
isReadyForFormSubmission, isReadyForFormSubmission,
keyRoutine, keyRoutine,
onValidationFailed,
setIsUploadReady, setIsUploadReady,
uploadMethod, uploadMethod,
validation, validation,
@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({
createBlobRoutine={createBlobRoutine} createBlobRoutine={createBlobRoutine}
validation={validation} validation={validation}
submitFile={this.submitFile} submitFile={this.submitFile}
onValidationFailed={onValidationFailed}
setIsUploadReady={setIsUploadReady} setIsUploadReady={setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission} isReadyForFormSubmission={isReadyForFormSubmission}
areAssetsDownloadable={areAssetsDownloadable} areAssetsDownloadable={areAssetsDownloadable}

2
js/components/ascribe_media/media_player.js
View File

@ -184,7 +184,7 @@ let Video = React.createClass({
); );
} else { } else {
return ( return (
<Image src={this.props.preview} /> <Image preview={this.props.preview} />
); );
} }
} }

8
js/components/ascribe_modal/modal_wrapper.js
View File

@ -46,7 +46,13 @@ let ModalWrapper = React.createClass({
renderChildren() { renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, { return ReactAddons.addons.cloneWithProps(child, {
handleSuccess: this.handleSuccess handleSuccess: (response) => {
if (typeof child.props.handleSuccess === 'function') {
child.props.handleSuccess(response);
}
this.handleSuccess(response);
}
}); });
}); });
}, },

34
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
]) ])
}, },
getFilterWidget(){
if (this.props.filterParams){
return (
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
);
}
return null;
},
getOrderWidget(){
if (this.props.orderParams){
return (
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
);
}
return null;
},
render() { render() {
const { className, children, searchFor, searchQuery } = this.props; const { className, children, searchFor, searchQuery } = this.props;
@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
{children} {children}
</span> </span>
<span className="pull-right"> <span className="pull-right">
{this.getOrderWidget()} <PieceListToolbarOrderWidget
{this.getFilterWidget()} orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
</span> </span>
<SearchBar <SearchBar
className="pull-right search-bar ascribe-input-glyph" className="pull-right search-bar ascribe-input-glyph"

30
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // the surrounding button is not resized up on appearance
if(trueValuesOnly.length > 0) { if (trueValuesOnly.length) {
return { visibility: 'visible'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -81,6 +81,7 @@ let PieceListToolbarFilterWidget = React.createClass({
</span> </span>
); );
if (this.props.filterParams && this.props.filterParams.length) {
return ( return (
<DropdownButton <DropdownButton
pullRight={true} pullRight={true}
@ -90,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({
label also iterate over its items, to get all filterable options */} label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => { {this.props.filterParams.map(({ label, items }, i) => {
return ( return (
<div> <div key={label}>
<li <li style={{'textAlign': 'center'}}>
style={{'textAlign': 'center'}}
key={i}>
<em>{label}:</em> <em>{label}:</em>
</li> </li>
{items.map((param, j) => { {items.map((paramItem) => {
let itemLabel;
let param;
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // be a string or an object of the shape:
@ -107,22 +108,22 @@ let PieceListToolbarFilterWidget = React.createClass({
// } // }
// //
// This is why we need to distinguish between both here. // This is why we need to distinguish between both here.
if(typeof param !== 'string') { if (typeof paramItem !== 'string') {
label = param.label; param = paramItem.key;
param = param.key; itemLabel = paramItem.label;
} else { } else {
param = param; param = paramItem;
label = param.split('acl_')[1].replace(/_/g, ' '); itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={j} key={itemLabel}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(itemLabel)}
</span> </span>
<input <input
readOnly readOnly
@ -137,6 +138,9 @@ let PieceListToolbarFilterWidget = React.createClass({
})} })}
</DropdownButton> </DropdownButton>
); );
} else {
return null;
}
} }
}); });

10
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
isOrderActive() { isOrderActive() {
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // the surrounding button is not resized up on appearance
if(this.props.orderBy.length > 0) { if (this.props.orderBy && this.props.orderBy.length) {
return { visibility: 'visible'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -51,8 +51,9 @@ let PieceListToolbarOrderWidget = React.createClass({
<span style={this.isOrderActive()}>&middot;</span> <span style={this.isOrderActive()}>&middot;</span>
</span> </span>
); );
return (
if (this.props.orderParams && this.props.orderParams.length) {
return (
<DropdownButton <DropdownButton
pullRight={true} pullRight={true}
title={filterIcon} title={filterIcon}
@ -62,7 +63,6 @@ let PieceListToolbarOrderWidget = React.createClass({
</li> </li>
{this.props.orderParams.map((param) => { {this.props.orderParams.map((param) => {
return ( return (
<div>
<li <li
key={param} key={param}
onClick={this.orderBy(param)} onClick={this.orderBy(param)}
@ -77,11 +77,13 @@ let PieceListToolbarOrderWidget = React.createClass({
checked={param.indexOf(this.props.orderBy) > -1} /> checked={param.indexOf(this.props.orderBy) > -1} />
</div> </div>
</li> </li>
</div>
); );
})} })}
</DropdownButton> </DropdownButton>
); );
} else {
return null;
}
} }
}); });

132
js/components/ascribe_routes/proxy_handler.js Normal file
View File

@ -0,0 +1,132 @@
'use strict';
import React from 'react';
import { RouteContext } from 'react-router';
import history from '../../history';
import UserStore from '../../stores/user_store';
import UserActions from '../../actions/user_actions';
import AppConstants from '../../constants/application_constants';
const { object } = React.PropTypes;
const WHEN_ENUM = ['loggedIn', 'loggedOut'];
/**
* Redirects the user conditionally according to his authentication
*
* @param {enum/string} options.when ('loggedIn' || 'loggedOut')
*/
export function AuthRedirect({to, when}) {
// validate `when`, must be contained in `WHEN_ENUM`.
// Throw an error otherwise.
if(WHEN_ENUM.indexOf(when) === -1) {
let whenValues = WHEN_ENUM.join(', ');
throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
}
return function(currentUser, query) {
const { redirectAuthenticated, redirect } = query;
// The user of this handler specifies with `when`, what kind of status
// needs to be checked to conditionally do - if that state is `true` -
// a redirect.
//
// So if when === 'loggedIn', we're checking if the user is logged in (and
// vice versa)
let exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email
: currentUser && !currentUser.email;
// and redirect if `true`.
if(exprToValidate) {
window.setTimeout(() => history.replace({ query, pathname: to }));
return true;
// Otherwise there can also be the case that the backend
// wants to redirect the user to a specific route when the user is logged out already
} else if(!exprToValidate && when === 'loggedIn' && redirect) {
delete query.redirect;
window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
return true;
} else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
/*
* redirectAuthenticated contains an arbitrary path
* eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
* hence transitionTo cannot be used directly.
*
* While we're getting rid of `query.redirect` explicitly in the
* above `else if` statement, here it's sufficient to just call
* `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well.
*/
window.location = AppConstants.baseUrl + redirectAuthenticated;
return true;
}
return false;
};
}
/**
* Can be used in combination with `Route` as an intermediate Handler
* between the actual component we want to display dependent on a certain state
* that is required to display that component.
*
* @param {[function]} redirectFn A function that conditionally redirects
*/
export function ProxyHandler(...redirectFunctions) {
return (Component) => {
return React.createClass({
displayName: 'ProxyHandler',
propTypes: {
location: object
},
// We need insert `RouteContext` here in order to be able
// to use the `Lifecycle` widget in further down nested components
mixins: [RouteContext],
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentDidUpdate() {
if(!UserStore.isLoading()) {
const { currentUser } = this.state;
const { query } = this.props.location;
for(let i = 0; i < redirectFunctions.length; i++) {
// if a redirectFunction redirects the user,
// it should return `true` and therefore
// stop/avoid the execution of all functions
// that follow
if(redirectFunctions[i](currentUser, query)) {
break;
}
}
}
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() {
return (
<Component {...this.props}/>
);
}
});
};
}

115
js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js
View File

@ -1,115 +0,0 @@
'use strict';
import React from 'react';
import { History, RouteContext } from 'react-router';
import UserStore from '../../../stores/user_store';
import UserActions from '../../../actions/user_actions';
import AppConstants from '../../../constants/application_constants';
const { object } = React.PropTypes;
const WHEN_ENUM = ['loggedIn', 'loggedOut'];
/**
* Can be used in combination with `Route` as an intermediate Handler
* between the actual component we want to display dependent on a certain state
* that is required to display that component.
*
* @param {string} options.to Any type of route path that is defined in routes.js
* @param {enum/string} options.when ('loggedIn' || 'loggedOut')
*/
export default function AuthProxyHandler({to, when}) {
// validate `when`, must be contained in `WHEN_ENUM`.
// Throw an error otherwise.
if(WHEN_ENUM.indexOf(when) === -1) {
let whenValues = WHEN_ENUM.join(', ');
throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
}
return (Component) => {
return React.createClass({
displayName: 'AuthProxyHandler',
propTypes: {
location: object
},
// We need insert `RouteContext` here in order to be able
// to use the `Lifecycle` widget in further down nested components
mixins: [History, RouteContext],
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentDidUpdate() {
// Only refresh this component, when UserSources are not loading
// data from the server
if(!UserStore.isLoading()) {
this.redirectConditionally();
}
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
redirectConditionally() {
const { query } = this.props.location;
const { redirectAuthenticated, redirect } = query;
// The user of this handler specifies with `when`, what kind of status
// needs to be checked to conditionally do - if that state is `true` -
// a redirect.
//
// So if when === 'loggedIn', we're checking if the user is logged in (and
// vice versa)
let exprToValidate = when === 'loggedIn' ?
this.state.currentUser && this.state.currentUser.email :
this.state.currentUser && !this.state.currentUser.email;
// and redirect if `true`.
if(exprToValidate) {
window.setTimeout(() => this.history.replaceState(null, to, query));
// Otherwise there can also be the case that the backend
// wants to redirect the user to a specific route when the user is logged out already
} else if(!exprToValidate && when === 'loggedIn' && redirect) {
delete query.redirect;
window.setTimeout(() => this.history.replaceState(null, '/' + redirect, query));
} else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
/*
* redirectAuthenticated contains an arbirary path
* eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
* hence transitionTo cannot be used directly.
*
* While we're getting rid of `query.redirect` explicitly in the
* above `else if` statement, here it's sufficient to just call
* `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well.
*/
window.location = AppConstants.baseUrl + redirectAuthenticated;
}
},
onChange(state) {
this.setState(state);
},
render() {
return (
<Component {...this.props}/>
);
}
});
};
}

12
js/components/ascribe_slides_container/slides_container.js
View File

@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
// When the start_from parameter is used, this.setSlideNum can not simply be used anymore. // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
nextSlide(additionalQueryParams) { nextSlide(additionalQueryParams) {
const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0; const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
let nextSlide = slideNum + 1; this.setSlideNum(slideNum + 1, additionalQueryParams);
this.setSlideNum(nextSlide, additionalQueryParams);
}, },
setSlideNum(nextSlideNum, additionalQueryParams = {}) { setSlideNum(nextSlideNum, additionalQueryParams = {}) {
let queryParams = Object.assign(this.props.location.query, additionalQueryParams); const { location: { pathname } } = this.props;
queryParams.slide_num = nextSlideNum; const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
this.history.pushState(null, this.props.location.pathname, queryParams);
this.history.push({ pathname, query });
}, },
// breadcrumbs are defined as attributes of the slides. // breadcrumbs are defined as attributes of the slides.
// To extract them we have to read the DOM element's attributes // To extract them we have to read the DOM element's attributes
extractBreadcrumbs() { extractBreadcrumbs() {
const startFrom = parseInt(this.props.location.query.start_from, 10) || -1; const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
let breadcrumbs = []; const breadcrumbs = [];
React.Children.map(this.props.children, (child, i) => { React.Children.map(this.props.children, (child, i) => {
if(child && i >= startFrom && child.props['data-slide-title']) { if(child && i >= startFrom && child.props['data-slide-title']) {

8
js/components/ascribe_table/models/table_models.js
View File

@ -2,15 +2,15 @@
export class ColumnModel { export class ColumnModel {
// ToDo: Add validation for all passed-in parameters // ToDo: Add validation for all passed-in parameters
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) { constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) {
this.transformFn = transformFn; this.transformFn = transformFn;
this.columnName = columnName; this.columnName = columnName;
this.displayName = displayName; this.displayElement = displayElement;
this.displayType = displayType; this.displayType = displayType;
this.rowWidth = rowWidth; this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered; this.canBeOrdered = canBeOrdered;
this.transition = transition; this.transition = transition;
this.className = className ? className : ''; this.className = className;
} }
} }
@ -28,7 +28,7 @@ export class ColumnModel {
* our selfes, using this TransitionModel. * our selfes, using this TransitionModel.
*/ */
export class TransitionModel { export class TransitionModel {
constructor(to, queryKey, valueKey, callback) { constructor({ to, queryKey, valueKey, callback }) {
this.to = to; this.to = to;
this.queryKey = queryKey; this.queryKey = queryKey;
this.valueKey = valueKey; this.valueKey = valueKey;

4
js/components/ascribe_table/table_header.js
View File

@ -1,5 +1,5 @@
'use strict';
'use strict';
import React from 'react'; import React from 'react';
import TableHeaderItem from './table_header_item'; import TableHeaderItem from './table_header_item';
@ -29,7 +29,7 @@ let TableHeader = React.createClass({
<TableHeaderItem <TableHeaderItem
className={column.className} className={column.className}
key={i} key={i}
displayName={column.displayName} displayElement={column.displayElement}
columnName={columnName} columnName={columnName}
canBeOrdered={canBeOrdered} canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}

20
js/components/ascribe_table/table_header_item.js
View File

@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
let TableHeaderItem = React.createClass({ let TableHeaderItem = React.createClass({
propTypes: { propTypes: {
displayName: React.PropTypes.oneOfType([ displayElement: React.PropTypes.oneOfType([
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.element React.PropTypes.element
]).isRequired, ]).isRequired,
@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
}, },
render() { render() {
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) { const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
if(this.props.columnName === this.props.orderBy) {
if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
if (columnName === orderBy) {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span> <span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
</th> </th>
); );
} else { } else {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName}</span> <span>{displayElement}</span>
</th> </th>
); );
} }
} else { } else {
return ( return (
<th className={'ascribe-table-header-column ' + this.props.className}> <th className={'ascribe-table-header-column ' + className}>
<span> <span>
{this.props.displayName} {displayElement}
</span> </span>
</th> </th>
); );

19
js/components/ascribe_table/table_item_acl_filtered.js
View File

@ -3,15 +3,15 @@
import React from 'react'; import React from 'react';
let TableItemAclFiltered = React.createClass({ const TableItemAclFiltered = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
notifications: React.PropTypes.string notifications: React.PropTypes.array
}, },
render() { render() {
var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete']; const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
if (this.props.notifications && this.props.notifications.length > 0){ if (this.props.notifications && this.props.notifications.length) {
return ( return (
<span> <span>
{this.props.notifications[0].action_str} {this.props.notifications[0].action_str}
@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
); );
} }
let filteredAcls = Object.keys(this.props.content).filter((key) => { const filteredAcls = Object.keys(this.props.content)
return availableAcls.indexOf(key) > -1 && this.props.content[key]; .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
}); .map((acl) => acl.split('acl_')[1])
.join('/');
filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
return ( return (
<span> <span>
{filteredAcls.join('/')} {filteredAcls}
</span> </span>
); );
} }

40
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
View File

@ -26,7 +26,7 @@ let FileDragAndDropDialog = React.createClass({
getDragDialog(fileClass) { getDragDialog(fileClass) {
if (dragAndDropAvailable) { if (dragAndDropAvailable) {
return [ return [
<p>{getLangText('Drag %s here', fileClass)}</p>, <p className="file-drag-and-drop-dialog-title">{getLangText('Drag %s here', fileClass)}</p>,
<p>{getLangText('or')}</p> <p>{getLangText('or')}</p>
]; ];
} else { } else {
@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({
if (hasFiles) { if (hasFiles) {
return null; return null;
} else { } else {
let dialogElement;
if (enableLocalHashing && !uploadMethod) { if (enableLocalHashing && !uploadMethod) {
const currentQueryParams = getCurrentQueryParams(); const currentQueryParams = getCurrentQueryParams();
@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({
const queryParamsUpload = Object.assign({}, currentQueryParams); const queryParamsUpload = Object.assign({}, currentQueryParams);
queryParamsUpload.method = 'upload'; queryParamsUpload.method = 'upload';
return ( dialogElement = (
<div className="file-drag-and-drop-dialog present-options"> <div className="present-options">
<p>{getLangText('Would you rather')}</p> <p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
{/* {/*
The frontend in live is hosted under /app, The frontend in live is hosted under /app,
Since `Link` is appending that base url, if its defined Since `Link` is appending that base url, if its defined
@ -85,34 +87,42 @@ let FileDragAndDropDialog = React.createClass({
); );
} else { } else {
if (multipleFiles) { if (multipleFiles) {
return ( dialogElement = [
<span className="file-drag-and-drop-dialog"> this.getDragDialog(fileClassToUpload.plural),
{this.getDragDialog(fileClassToUpload.plural)}
<span <span
className="btn btn-default" className="btn btn-default"
onClick={onClick}> onClick={onClick}>
{getLangText('choose %s to upload', fileClassToUpload.plural)} {getLangText('choose %s to upload', fileClassToUpload.plural)}
</span> </span>
</span> ];
);
} else { } else {
const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular) const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
: getLangText('choose a %s to upload', fileClassToUpload.singular); : getLangText('choose a %s to upload', fileClassToUpload.singular);
return ( dialogElement = [
<span className="file-drag-and-drop-dialog"> this.getDragDialog(fileClassToUpload.singular),
{this.getDragDialog(fileClassToUpload.singular)}
<span <span
className="btn btn-default" className="btn btn-default"
onClick={onClick}> onClick={onClick}>
{dialog} {dialog}
</span> </span>
</span> ];
}
}
return (
<div className="file-drag-and-drop-dialog">
<div className="hidden-print">
{dialogElement}
</div>
{/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
<p className="text-align-center visible-print">
{getLangText('No files uploaded')}
</p>
</div>
); );
} }
} }
}
}
}); });
export default FileDragAndDropDialog; export default FileDragAndDropDialog;

2
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
View File

@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
return ( return (
<div <div
className="file-drag-and-drop-preview-image" className="file-drag-and-drop-preview-image hidden-print"
style={imageStyle}> style={imageStyle}>
<AclProxy <AclProxy
show={showProgress}> show={showProgress}>

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

@ -71,17 +71,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
handleOnClick() { handleOnClick() {
if(!this.state.disabled) { if(!this.state.disabled) {
let evt; let evt;
const uploadingFiles = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile();
this.clearSelection(); // First, remove any currently uploading or uploaded items
if(uploadingFiles.length) { this.onClickRemove();
this.props.handleCancelFile(uploadingFiles[0].id);
} else if(uploadedFile && !uploadedFile.s3UrlSafe) {
this.props.handleCancelFile(uploadedFile.id);
} else if(uploadedFile && uploadedFile.s3UrlSafe) {
this.props.handleDeleteFile(uploadedFile.id);
}
try { try {
evt = new MouseEvent('click', { evt = new MouseEvent('click', {
@ -99,18 +91,19 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
} }
}, },
onClickCancel() {
this.clearSelection();
const uploadingFile = this.getUploadingFiles()[0];
this.props.handleCancelFile(uploadingFile.id);
},
onClickRemove() { onClickRemove() {
this.clearSelection(); const uploadingFiles = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile(); const uploadedFile = this.getUploadedFile();
this.props.handleDeleteFile(uploadedFile.id);
},
this.clearSelection();
if(uploadingFiles.length) {
this.props.handleCancelFile(uploadingFiles[0].id);
} else if(uploadedFile && !uploadedFile.s3UrlSafe) {
this.props.handleCancelFile(uploadedFile.id);
} else if(uploadedFile && uploadedFile.s3UrlSafe) {
this.props.handleDeleteFile(uploadedFile.id);
}
},
getButtonLabel() { getButtonLabel() {
let { filesToUpload, fileClassToUpload } = this.props; let { filesToUpload, fileClassToUpload } = this.props;
@ -133,7 +126,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
return ( return (
<span> <span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '} {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>] [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span> </span>
); );
} else if(uploadedFile) { } else if(uploadedFile) {

15
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({
}), }),
handleChangedFile: func, // is for when a file is dropped or selected handleChangedFile: func, // is for when a file is dropped or selected
submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
onValidationFailed: func,
autoUpload: bool, autoUpload: bool,
debug: bool, debug: bool,
objectProperties: shape({ objectProperties: shape({
@ -344,6 +345,7 @@ const ReactS3FineUploader = React.createClass({
// still we warn the user of this component // still we warn the user of this component
console.warn('createBlobRoutine was not defined for ReactS3FineUploader. Continuing without creating the blob on the server.'); console.warn('createBlobRoutine was not defined for ReactS3FineUploader. Continuing without creating the blob on the server.');
resolve(); resolve();
return;
} }
window.fetch(createBlobRoutine.url, { window.fetch(createBlobRoutine.url, {
@ -439,7 +441,7 @@ const ReactS3FineUploader = React.createClass({
onComplete(id, name, res, xhr) { onComplete(id, name, res, xhr) {
// There has been an issue with the server's connection // There has been an issue with the server's connection
if (xhr && xhr.status === 0 && res.success) { if (xhr && xhr.status === 0 && res.success) {
console.logGlobal(new Error('Upload succeeded with a status code 0'), false, { console.logGlobal(new Error('Upload succeeded with a status code 0'), {
files: this.state.filesToUpload, files: this.state.filesToUpload,
chunks: this.state.chunks, chunks: this.state.chunks,
xhr: this.getXhrErrorComment(xhr) xhr: this.getXhrErrorComment(xhr)
@ -497,7 +499,7 @@ const ReactS3FineUploader = React.createClass({
}, },
onError(id, name, errorReason, xhr) { onError(id, name, errorReason, xhr) {
console.logGlobal(errorReason, false, { console.logGlobal(errorReason, {
files: this.state.filesToUpload, files: this.state.filesToUpload,
chunks: this.state.chunks, chunks: this.state.chunks,
xhr: this.getXhrErrorComment(xhr) xhr: this.getXhrErrorComment(xhr)
@ -523,12 +525,15 @@ const ReactS3FineUploader = React.createClass({
isFileValid(file) { isFileValid(file) {
if (file.size > this.props.validation.sizeLimit) { if (file.size > this.props.validation.sizeLimit) {
const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000; const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof this.props.onValidationFailed === 'function') {
this.props.onValidationFailed(file);
}
return false; return false;
} else { } else {
return true; return true;

9
js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
View File

@ -1,5 +1,7 @@
'use strict'; 'use strict';
import MimeTypes from '../../constants/mime_types';
export const formSubmissionValidation = { export const formSubmissionValidation = {
/** /**
* Returns a boolean if there has been at least one file uploaded * Returns a boolean if there has been at least one file uploaded
@ -73,8 +75,11 @@ export function displayValidProgressFilesFilter(file) {
* @return {string} Joined string (comma-separated) of the passed-in array * @return {string} Joined string (comma-separated) of the passed-in array
*/ */
export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) { export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) {
// add a dot in front of the extension // Get the mime type of the extension if it's defined or add a dot in front of the extension
let prefixedAllowedExtensions = allowedExtensions.map((ext) => '.' + ext); // This is important for Safari as it doesn't understand just the extension.
let prefixedAllowedExtensions = allowedExtensions.map((ext) => {
return MimeTypes[ext] || ('.' + ext);
});
// generate a comma separated list to add them to the DOM element // generate a comma separated list to add them to the DOM element
// See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file // See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

18
js/components/coa_verify_container.js
View File

@ -17,7 +17,12 @@ import { setDocumentTitle } from '../utils/dom_utils';
let CoaVerifyContainer = React.createClass({ let CoaVerifyContainer = React.createClass({
propTypes: {
location: React.PropTypes.object
},
render() { render() {
const { message, signature } = this.props.location.query;
setDocumentTitle(getLangText('Verify your Certificate of Authenticity')); setDocumentTitle(getLangText('Verify your Certificate of Authenticity'));
return ( return (
@ -27,7 +32,9 @@ let CoaVerifyContainer = React.createClass({
{getLangText('Verify your Certificate of Authenticity')} {getLangText('Verify your Certificate of Authenticity')}
</div> </div>
<CoaVerifyForm /> <CoaVerifyForm
message={message}
signature={signature}/>
<br /> <br />
<br /> <br />
{getLangText('ascribe is using the following public key for verification')}: {getLangText('ascribe is using the following public key for verification')}:
@ -47,6 +54,11 @@ let CoaVerifyContainer = React.createClass({
let CoaVerifyForm = React.createClass({ let CoaVerifyForm = React.createClass({
propTypes: {
message: React.PropTypes.string,
signature: React.PropTypes.string
},
handleSuccess(response){ handleSuccess(response){
let notification = null; let notification = null;
if (response.verdict) { if (response.verdict) {
@ -56,6 +68,8 @@ let CoaVerifyForm = React.createClass({
}, },
render() { render() {
const { message, signature } = this.props;
return ( return (
<div> <div>
<Form <Form
@ -79,6 +93,7 @@ let CoaVerifyForm = React.createClass({
type="text" type="text"
placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')} placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
autoComplete="on" autoComplete="on"
defaultValue={message}
name="username" name="username"
required/> required/>
</Property> </Property>
@ -90,6 +105,7 @@ let CoaVerifyForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={3} rows={3}
placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')} placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
defaultValue={signature}
required/> required/>
</Property> </Property>
<hr /> <hr />

3
js/components/footer.js
View File

@ -7,10 +7,11 @@ import { getLangText } from '../utils/lang_utils';
let Footer = React.createClass({ let Footer = React.createClass({
render() { render() {
return ( return (
<div className="ascribe-footer"> <div className="ascribe-footer hidden-print">
<p className="ascribe-sub-sub-statement"> <p className="ascribe-sub-sub-statement">
<br /> <br />
<a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> | <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |
<a href="https://www.ascribe.io/faq/" target="_blank"> {getLangText('faq')}</a> |
<a href="https://www.ascribe.io/imprint/" target="_blank"> {getLangText('imprint')}</a> | <a href="https://www.ascribe.io/imprint/" target="_blank"> {getLangText('imprint')}</a> |
<a href="https://www.ascribe.io/terms/" target="_blank"> {getLangText('terms of service')}</a> | <a href="https://www.ascribe.io/terms/" target="_blank"> {getLangText('terms of service')}</a> |
<a href="https://www.ascribe.io/privacy/" target="_blank"> {getLangText('privacy')}</a> <a href="https://www.ascribe.io/privacy/" target="_blank"> {getLangText('privacy')}</a>

40
js/components/header.js
View File

@ -16,12 +16,13 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import AclProxy from './acl_proxy'; import AclProxy from './acl_proxy';
import EventActions from '../actions/event_actions';
import UserActions from '../actions/user_actions'; import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store'; import UserStore from '../stores/user_store';
import WhitelabelActions from '../actions/whitelabel_actions'; import WhitelabelActions from '../actions/whitelabel_actions';
import WhitelabelStore from '../stores/whitelabel_store'; import WhitelabelStore from '../stores/whitelabel_store';
import EventActions from '../actions/event_actions';
import HeaderNotifications from './header_notification'; import HeaderNotifications from './header_notification';
@ -37,16 +38,9 @@ import { constructHead } from '../utils/dom_utils';
let Header = React.createClass({ let Header = React.createClass({
propTypes: { propTypes: {
showAddWork: React.PropTypes.bool,
routes: React.PropTypes.arrayOf(React.PropTypes.object) routes: React.PropTypes.arrayOf(React.PropTypes.object)
}, },
getDefaultProps() {
return {
showAddWork: true
};
},
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
WhitelabelStore.getState(), WhitelabelStore.getState(),
@ -55,15 +49,29 @@ let Header = React.createClass({
}, },
componentDidMount() { componentDidMount() {
UserActions.fetchCurrentUser();
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel(); UserActions.fetchCurrentUser.defer();
WhitelabelStore.listen(this.onChange); WhitelabelStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel.defer();
// react-bootstrap 0.25.1 has a bug in which it doesn't // react-bootstrap 0.25.1 has a bug in which it doesn't
// close the mobile expanded navigation after a click by itself. // close the mobile expanded navigation after a click by itself.
// To get rid of this, we set the state of the component ourselves. // To get rid of this, we set the state of the component ourselves.
history.listen(this.onRouteChange); history.listen(this.onRouteChange);
if (this.state.currentUser && this.state.currentUser.email) {
EventActions.profileDidLoad.defer(this.state.currentUser);
}
},
componentWillUpdate(nextProps, nextState) {
const { currentUser: { email: curEmail } = {} } = this.state;
const { currentUser: { email: nextEmail } = {} } = nextState;
if (nextEmail && curEmail !== nextEmail) {
EventActions.profileDidLoad.defer(nextState.currentUser);
}
}, },
componentWillUnmount() { componentWillUnmount() {
@ -111,10 +119,6 @@ let Header = React.createClass({
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
EventActions.profileDidLoad.defer(this.state.currentUser);
}
}, },
onMenuItemClick() { onMenuItemClick() {
@ -146,7 +150,9 @@ let Header = React.createClass({
// the collapsibleNav by itself on click. setState() isn't available on a ref so // the collapsibleNav by itself on click. setState() isn't available on a ref so
// doing this explicitly is the only way for now. // doing this explicitly is the only way for now.
onRouteChange() { onRouteChange() {
if (this.refs.navbar) {
this.refs.navbar.state.navExpanded = false; this.refs.navbar.state.navExpanded = false;
}
}, },
render() { render() {
@ -213,10 +219,11 @@ let Header = React.createClass({
return ( return (
<div> <div>
<Navbar <Navbar
ref="navbar"
brand={this.getLogo()} brand={this.getLogo()}
toggleNavKey={0} toggleNavKey={0}
fixedTop={true} fixedTop={true}
ref="navbar"> className="hidden-print">
<CollapsibleNav <CollapsibleNav
eventKey={0}> eventKey={0}>
<Nav navbar left> <Nav navbar left>
@ -231,6 +238,9 @@ let Header = React.createClass({
{navRoutesLinks} {navRoutesLinks}
</CollapsibleNav> </CollapsibleNav>
</Navbar> </Navbar>
<p className="ascribe-print-header visible-print">
<span className="icon-ascribe-logo" />
</p>
</div> </div>
); );
} }

5
js/components/password_reset_container.js
View File

@ -130,8 +130,9 @@ let PasswordResetForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
this.history.pushState(null, '/collection'); this.history.push('/collection');
let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },

29
js/components/piece_list.js
View File

@ -37,6 +37,7 @@ let PieceList = React.createClass({
bulkModalButtonListType: React.PropTypes.func, bulkModalButtonListType: React.PropTypes.func,
canLoadPieceList: React.PropTypes.bool, canLoadPieceList: React.PropTypes.bool,
redirectTo: React.PropTypes.string, redirectTo: React.PropTypes.string,
shouldRedirect: React.PropTypes.func,
customSubmitButton: React.PropTypes.element, customSubmitButton: React.PropTypes.element,
customThumbnailPlaceholder: React.PropTypes.func, customThumbnailPlaceholder: React.PropTypes.func,
filterParams: React.PropTypes.array, filterParams: React.PropTypes.array,
@ -114,9 +115,13 @@ let PieceList = React.createClass({
}, },
componentDidUpdate() { componentDidUpdate() {
if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) { const { location: { query }, redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
} }
}, },
@ -169,15 +174,16 @@ let PieceList = React.createClass({
} }
}, },
searchFor(searchTerm) { searchFor(search) {
this.loadPieceList({ const { location: { pathname } } = this.props;
page: 1,
search: searchTerm this.loadPieceList({ search, page: 1 });
}); this.history.push({ pathname, query: { page: 1 } });
this.history.pushState(null, this.props.location.pathname, {page: 1});
}, },
applyFilterBy(filterBy) { applyFilterBy(filterBy) {
const { location: { pathname } } = this.props;
this.setState({ this.setState({
isFilterDirty: true isFilterDirty: true
}); });
@ -190,19 +196,20 @@ let PieceList = React.createClass({
this.state.pieceList this.state.pieceList
.forEach((piece) => { .forEach((piece) => {
// but only if they're actually open // but only if they're actually open
if(this.state.isEditionListOpenForPieceId[piece.id].show) { const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id];
if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) {
EditionListActions.refreshEditionList({ EditionListActions.refreshEditionList({
pieceId: piece.id, pieceId: piece.id,
filterBy filterBy
}); });
} }
}); });
}); });
// we have to redirect the user always to page one as it could be that there is no page two // we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces // for filtered pieces
this.history.pushState(null, this.props.location.pathname, {page: 1}); this.history.push({ pathname, query: { page: 1 } });
}, },
applyOrderBy(orderBy) { applyOrderBy(orderBy) {

4
js/components/register_piece.js
View File

@ -68,14 +68,14 @@ let RegisterPiece = React.createClass( {
handleSuccess(response) { handleSuccess(response) {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state; const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
// once the user was able to register a piece successfully, we need to make sure to keep // once the user was able to register a piece successfully, we need to make sure to keep
// the piece list up to date // the piece list up to date
PieceListActions.fetchPieceList({page, pageSize, search, orderBy, orderAsc, filterBy}); PieceListActions.fetchPieceList({page, pageSize, search, orderBy, orderAsc, filterBy});
this.history.pushState(null, `/pieces/${response.piece.id}`); this.history.push(`/pieces/${response.piece.id}`);
}, },
getSpecifyEditions() { getSpecifyEditions() {

121
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -19,8 +19,10 @@ import ApiUrls from '../../../../../../constants/api_urls';
import requests from '../../../../../../utils/requests'; import requests from '../../../../../../utils/requests';
import { getLangText } from '../../../../../../utils/lang_utils'; import { getErrorNotificationMessage } from '../../../../../../utils/error_utils';
import { setCookie } from '../../../../../../utils/fetch_api_utils'; import { setCookie } from '../../../../../../utils/fetch_api_utils';
import { validateForms } from '../../../../../../utils/form_utils';
import { getLangText } from '../../../../../../utils/lang_utils';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils'; import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
@ -56,13 +58,13 @@ const PRRegisterPieceForm = React.createClass({
submit() { submit() {
if (!this.validateForms()) { if (!this.validateForms()) {
return; return;
} else { }
// disable the submission button right after the user // disable the submission button right after the user
// clicks on it to avoid double submission // clicks on it to avoid double submission
this.setState({ this.setState({
submitted: true submitted: true
}); });
}
const { currentUser } = this.props; const { currentUser } = this.props;
const { registerPieceForm, const { registerPieceForm,
@ -75,7 +77,7 @@ const PRRegisterPieceForm = React.createClass({
const additionalDataFormData = additionalDataForm.getFormData(); const additionalDataFormData = additionalDataForm.getFormData();
// composing data for piece registration // composing data for piece registration
let registerPieceFormData = registerPieceForm.getFormData(); const registerPieceFormData = registerPieceForm.getFormData();
registerPieceFormData.digital_work_key = digitalWorkKey.state.value; registerPieceFormData.digital_work_key = digitalWorkKey.state.value;
registerPieceFormData.thumbnail_file = thumbnailKey.state.value; registerPieceFormData.thumbnail_file = thumbnailKey.state.value;
registerPieceFormData.terms = true; registerPieceFormData.terms = true;
@ -83,34 +85,42 @@ const PRRegisterPieceForm = React.createClass({
// submitting the piece // submitting the piece
requests requests
.post(ApiUrls.pieces_list, { body: registerPieceFormData }) .post(ApiUrls.pieces_list, { body: registerPieceFormData })
.then(({ success, piece, notification }) => { .then(({ piece, notification }) => {
if(success) { this.setState({piece}, () => {
this.setState({
piece
}, () => {
supportingMaterials.refs.input.createBlobRoutine(); supportingMaterials.refs.input.createBlobRoutine();
proofOfPayment.refs.input.createBlobRoutine(); proofOfPayment.refs.input.createBlobRoutine();
}); });
setCookie(currentUser.email, piece.id); setCookie(currentUser.email, piece.id);
return requests.post(ApiUrls.piece_extradata, { return requests
.post(ApiUrls.piece_extradata, {
body: { body: {
extradata: additionalDataFormData, extradata: additionalDataFormData,
piece_id: piece.id piece_id: piece.id
}, },
piece_id: piece.id piece_id: piece.id
});
} else {
const notificationMessage = new GlobalNotificationModel(notification, 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notificationMessage);
}
}) })
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .then(() => {
.catch(() => { const notificationMessage = new GlobalNotificationModel(notification || getLangText('You have successfully submitted "%s" to Portfolio Review 2015', piece.title), 'success', 5000);
const notificationMessage = new GlobalNotificationModel(getLangText("Ups! We weren't able to send your submission. Contact: support@ascribe.io"), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notificationMessage); GlobalNotificationActions.appendGlobalNotification(notificationMessage);
}); });
})
.then(() => this.history.push(`/pieces/${this.state.piece.id}`))
.catch((err) => {
const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
getLangText(' Please contact support@ascribe.io');
const notificationMessage = new GlobalNotificationModel(errMessage, 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notificationMessage);
console.logGlobal(new Error('Portfolio Review piece registration failed'), err);
// Reset the submit button
this.setState({
submitted: false
});
});
}, },
validateForms() { validateForms() {
@ -118,11 +128,7 @@ const PRRegisterPieceForm = React.createClass({
additionalDataForm, additionalDataForm,
uploadersForm } = this.refs; uploadersForm } = this.refs;
const registerPieceFormValidation = registerPieceForm.validate(); return validateForms([registerPieceForm, additionalDataForm, uploadersForm], true);
const additionalDataFormValidation = additionalDataForm.validate();
const uploaderFormValidation = uploadersForm.validate();
return registerPieceFormValidation && additionalDataFormValidation && uploaderFormValidation;
}, },
getCreateBlobRoutine() { getCreateBlobRoutine() {
@ -139,7 +145,7 @@ const PRRegisterPieceForm = React.createClass({
}, },
/** /**
* This method is overloaded so that we can track the ready-state * These two methods are overloaded so that we can track the ready-state
* of each uploader in the component * of each uploader in the component
* @param {string} uploaderKey Name of the uploader's key to track * @param {string} uploaderKey Name of the uploader's key to track
*/ */
@ -151,6 +157,14 @@ const PRRegisterPieceForm = React.createClass({
}; };
}, },
handleOptionalFileValidationFailed(uploaderKey) {
return () => {
this.setState({
[uploaderKey]: true
});
};
},
getSubmitButton() { getSubmitButton() {
const { digitalWorkKeyReady, const { digitalWorkKeyReady,
thumbnailKeyReady, thumbnailKeyReady,
@ -167,7 +181,7 @@ const PRRegisterPieceForm = React.createClass({
} else { } else {
return ( return (
<button <button
type="submit" type="button"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={!(digitalWorkKeyReady && thumbnailKeyReady && proofOfPaymentReady && supportingMaterialsReady)} disabled={!(digitalWorkKeyReady && thumbnailKeyReady && proofOfPaymentReady && supportingMaterialsReady)}
onClick={this.submit}> onClick={this.submit}>
@ -191,7 +205,7 @@ const PRRegisterPieceForm = React.createClass({
label={getLangText('Full name')}> label={getLangText('Full name')}>
<input <input
type="text" type="text"
placeholder="(e.g. Andy Warhol)" placeholder={getLangText('(e.g. Andy Warhol)')}
required/> required/>
</Property> </Property>
<Property <Property
@ -199,7 +213,7 @@ const PRRegisterPieceForm = React.createClass({
label={getLangText('Title of the Work')}> label={getLangText('Title of the Work')}>
<input <input
type="text" type="text"
placeholder="(e.g. 32 Campbell's Soup Cans)" placeholder={getLangText("(e.g. 32 Campbell's Soup Cans)")}
required/> required/>
</Property> </Property>
<Property <Property
@ -207,7 +221,7 @@ const PRRegisterPieceForm = React.createClass({
label={getLangText('Year of creation')}> label={getLangText('Year of creation')}>
<input <input
type="number" type="number"
placeholder="(e.g. 1962)" placeholder={getLangText('(e.g. 1962)')}
min={1} min={1}
required/> required/>
</Property> </Property>
@ -224,25 +238,51 @@ const PRRegisterPieceForm = React.createClass({
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref="additionalDataForm"> ref="additionalDataForm">
<Property <Property
name='artist_bio' name='1-date_of_birth'
label={getLangText('Date of Birth')}>
<input
type="number"
placeholder={getLangText('(e.g. 1962)')}
min={1900}
required/>
</Property>
<Property
name='2-artist_bio'
label={getLangText('Biography')}> label={getLangText('Biography')}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
placeholder={getLangText('Enter your biography')}/> placeholder={getLangText('Enter your biography')}/>
</Property> </Property>
<Property <Property
name='exhibition' name='3-exhibition'
label={getLangText('Exhibition / Publication history (optional)')}> label={getLangText('Exhibition / Publication history (optional)')}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
placeholder={getLangText('Enter exhibitions and publication history')}/> placeholder={getLangText('Enter exhibitions and publication history')}/>
</Property> </Property>
<Property <Property
name='contact_information' name='4-phone_number'
label={getLangText('Contact information')}> label={getLangText('Phone Number')}>
<InputTextAreaToggable <input
rows={1} type="tel"
placeholder={getLangText('Enter your contact information (phone/website)')}/> placeholder={getLangText('Enter your phone number')}
required/>
</Property>
<Property
name='5-email'
label={getLangText('Email Address')}>
<input
type="email"
placeholder={getLangText('Enter your email')}
required/>
</Property>
<Property
name='6-website'
label={getLangText('Website')}>
<input
type="url"
placeholder={getLangText('Enter your website')}
required/>
</Property> </Property>
</Form> </Form>
<Form <Form
@ -277,7 +317,7 @@ const PRRegisterPieceForm = React.createClass({
</Property> </Property>
<Property <Property
name="thumbnailKey" name="thumbnailKey"
label={getLangText('Featured Cover photo')}> label={getLangText('Featured Cover photo (max 5MB)')}>
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton()} fileInputElement={UploadButton()}
createBlobRoutine={{ createBlobRoutine={{
@ -290,8 +330,8 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'thumbnail' fileClass: 'thumbnail'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}} }}
location={location} location={location}
@ -308,10 +348,11 @@ const PRRegisterPieceForm = React.createClass({
fileInputElement={UploadButton()} fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data' fileClass: 'otherdata'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
@ -333,7 +374,7 @@ const PRRegisterPieceForm = React.createClass({
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data' fileClass: 'otherdata'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,

35
js/components/whitelabel/prize/portfolioreview/components/pr_hero.js
View File

@ -1,39 +1,30 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link } from 'react-router';
import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import { getLangText } from '../../../../../utils/lang_utils';
const PRHero = React.createClass({ const PRHero = React.createClass({
getInitialState() { propTypes: {
return UserStore.getState(); currentUser: React.PropTypes.shape({
}, email: React.PropTypes.object
})
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
}, },
render() { render() {
const { currentUser } = this.state; const { currentUser } = this.props;
return ( return (
<div className="piece--hero"> <div className="piece--hero">
<h2><Glyphicon glyph="ok" /> Congratulations {currentUser.email}!</h2> <h2><Glyphicon glyph="ok" />
<h1>You have successfully submitted to Portfolio Review 2016</h1> &nbsp;{getLangText('Congratulations') + (currentUser.email ? ` ${currentUser.email}!` : '!')}
<p>See below, your uploaded portfolio:</p> </h2>
<h1>{getLangText('You have successfully submitted to Portfolio Review 2016.')}</h1>
<p>Not you? <Link to="/logout">{getLangText('Change account.')}</Link></p>
</div> </div>
); );
} }

13
js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
View File

@ -14,7 +14,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import UserStore from '../../../../../stores/user_store'; import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions'; import UserActions from '../../../../../actions/user_actions';
import { mergeOptions } from '../../../../../utils/general_utils'; import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -34,15 +34,18 @@ const PRLanding = React.createClass({
componentDidMount() { componentDidMount() {
const { location } = this.props; const { location } = this.props;
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeStore.listen(this.onChange); PrizeStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeActions.fetchPrize(); PrizeActions.fetchPrize();
if (location && location.query && location.query.redirect) { if (location && location.query && location.query.redirect) {
let queryCopy = JSON.parse(JSON.stringify(location.query)); window.setTimeout(() => this.history.replace({
delete queryCopy.redirect; pathname: `/${location.query.redirect}`,
window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy)); query: omitFromObject(location.query, ['redirect'])
}));
} }
}, },

0
js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js
View File

9
js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
View File

@ -39,7 +39,7 @@ const PRRegisterPiece = React.createClass({
if(currentUser && currentUser.email) { if(currentUser && currentUser.email) {
const submittedPieceId = getCookie(currentUser.email); const submittedPieceId = getCookie(currentUser.email);
if(submittedPieceId) { if(submittedPieceId) {
this.history.pushState(null, `/pieces/${submittedPieceId}`); this.history.push(`/pieces/${submittedPieceId}`);
} }
} }
}, },
@ -62,7 +62,12 @@ const PRRegisterPiece = React.createClass({
<Col xs={6}> <Col xs={6}>
<div className="register-piece--info"> <div className="register-piece--info">
<h1>Portfolio Review</h1> <h1>Portfolio Review</h1>
<h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2> <h2>{getLangText('Submission closing on %s', ' 27 Dec 2015')}</h2>
<p>For more information, visit:&nbsp;
<a href="http://www.portfolio-review.de/submission/" target="_blank">
portfolio-review.de
</a>
</p>
<p style={{marginTop: '1em'}}> <p style={{marginTop: '1em'}}>
{getLangText("You're submitting as %s. ", currentUser.email)} {getLangText("You're submitting as %s. ", currentUser.email)}
<Link to="/logout">{getLangText('Change account?')}</Link> <Link to="/logout">{getLangText('Change account?')}</Link>

26
js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js Normal file
View File

@ -0,0 +1,26 @@
'use strict';
import history from '../../../../../../history';
export function AuthPrizeRoleRedirect({ to, when }) {
if (when.constructor !== Array || !when.length) {
throw new Error('`when` of AuthPrizeRoleRedirect must be an array containing values');
}
if (!to || to.indexOf('/') === -1) {
throw new Error('`to` of AuthPrizeRoleRedirect must be defined and contain a valid route');
}
return function(currentUser, query) {
const exprToValidate = when
.map(role => currentUser[role])
.reduce((a, b) => a || b);
if (exprToValidate) {
window.setTimeout(() => history.replace({ query, pathname: to }));
return true;
} else {
return false;
}
};
}

31
js/components/whitelabel/prize/portfolioreview/pr_app.js
View File

@ -4,6 +4,9 @@ import React from 'react';
import GlobalNotification from '../../../global_notification'; import GlobalNotification from '../../../global_notification';
import Hero from './components/pr_hero'; import Hero from './components/pr_hero';
import Header from '../../../header';
import EventActions from '../../../../actions/event_actions';
import UserStore from '../../../../stores/user_store'; import UserStore from '../../../../stores/user_store';
import UserActions from '../../../../actions/user_actions'; import UserActions from '../../../../actions/user_actions';
@ -29,6 +32,19 @@ let PRApp = React.createClass({
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
if (this.state.currentUser && this.state.currentUser.email) {
EventActions.profileDidLoad.defer(this.state.currentUser);
}
},
componentWillUpdate(nextProps, nextState) {
const { currentUser: { email: curEmail } = {} } = this.state;
const { currentUser: { email: nextEmail } = {} } = nextState;
if (nextEmail && curEmail !== nextEmail) {
EventActions.profileDidLoad.defer(nextState.currentUser);
}
}, },
componentWillUnmount() { componentWillUnmount() {
@ -40,19 +56,28 @@ let PRApp = React.createClass({
}, },
render() { render() {
const { history, children } = this.props; const { history, children, routes } = this.props;
const { currentUser } = this.state; const { currentUser } = this.state;
let style = {};
let subdomain = getSubdomain(); let subdomain = getSubdomain();
let header; let header;
if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) { if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
header = <Hero />; header = <Hero currentUser={currentUser} />;
style = { paddingTop: '0 !important' };
} else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
header = <Header routes={routes} />;
} else {
style = { paddingTop: '0 !important' };
} }
return ( return (
<div> <div>
{header} {header}
<div className={'container ascribe-prize-app client--' + subdomain}> <div
style={style}
className={'container ascribe-prize-app client--' + subdomain}>
{children} {children}
<GlobalNotification /> <GlobalNotification />
<div id="modal" className="container"></div> <div id="modal" className="container"></div>

53
js/components/whitelabel/prize/prize_routes.js
View File

@ -12,6 +12,8 @@ import SPPieceContainer from './simple_prize/components/ascribe_detail/prize_pie
import SPSettingsContainer from './simple_prize/components/prize_settings_container'; import SPSettingsContainer from './simple_prize/components/prize_settings_container';
import SPApp from './simple_prize/prize_app'; import SPApp from './simple_prize/prize_app';
import SluicePieceContainer from './sluice/components/sluice_detail/sluice_piece_container';
import PRApp from './portfolioreview/pr_app'; import PRApp from './portfolioreview/pr_app';
import PRLanding from './portfolioreview/components/pr_landing'; import PRLanding from './portfolioreview/components/pr_landing';
import PRRegisterPiece from './portfolioreview/components/pr_register_piece'; import PRRegisterPiece from './portfolioreview/components/pr_register_piece';
@ -22,7 +24,8 @@ import PasswordResetContainer from '../../password_reset_container';
import CoaVerifyContainer from '../../coa_verify_container'; import CoaVerifyContainer from '../../coa_verify_container';
import ErrorNotFoundPage from '../../error_not_found_page'; import ErrorNotFoundPage from '../../error_not_found_page';
import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler'; import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler';
import { AuthPrizeRoleRedirect } from './portfolioreview/components/pr_routes/pr_proxy_handler';
const ROUTES = { const ROUTES = {
@ -31,29 +34,28 @@ const ROUTES = {
<IndexRoute component={SPLanding} /> <IndexRoute component={SPLanding} />
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SPLoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SPSignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SPSettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SPRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'/>
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SPPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION'/>
<Route path='pieces/:pieceId' component={SluicePieceContainer} />
<Route path='pieces/:pieceId' component={SPPieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} /> <Route path='*' component={ErrorNotFoundPage} />
@ -61,24 +63,41 @@ const ROUTES = {
), ),
portfolioreview: ( portfolioreview: (
<Route path='/' component={PRApp}> <Route path='/' component={PRApp}>
<IndexRoute component={PRLanding} /> <IndexRoute component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(PRRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}/>
headerTitle='+ NEW WORK'/> <Route
path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
headerTitle='SUBMISSIONS'/>
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/register_piece', when: 'loggedIn'})(SPLoginContainer)} /> component={ProxyHandler(
AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
AuthRedirect({to: '/register_piece', when: 'loggedIn'})
)(SPLoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)} /> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/register_piece', when: 'loggedIn'})(SPSignupContainer)} /> component={ProxyHandler(
AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
AuthRedirect({to: '/register_piece', when: 'loggedIn'})
)(SPSignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/register_piece', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(
AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
AuthRedirect({to: '/register_piece', when: 'loggedIn'})
)(PasswordResetContainer)} />
<Route
path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
<Route path='pieces/:pieceId' component={SPPieceContainer} /> <Route path='pieces/:pieceId' component={SPPieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} /> <Route path='*' component={ErrorNotFoundPage} />
</Route> </Route>
) )

2
js/components/whitelabel/prize/simple_prize/actions/prize_actions.js
View File

@ -16,7 +16,7 @@ class PrizeActions {
.fetch() .fetch()
.then((res) => { .then((res) => {
this.actions.updatePrize({ this.actions.updatePrize({
prize: res.prize prize: res
}); });
}) })
.catch((err) => { .catch((err) => {

19
js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js
View File

@ -10,14 +10,15 @@ class PrizeRatingActions {
this.generateActions( this.generateActions(
'updatePrizeRatings', 'updatePrizeRatings',
'updatePrizeRatingAverage', 'updatePrizeRatingAverage',
'updatePrizeRating' 'updatePrizeRating',
'resetPrizeRatings'
); );
} }
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchAverage(pieceId) .fetchAverage(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRatingAverage(res.data); this.actions.updatePrizeRatingAverage(res.data);
resolve(res); resolve(res);
@ -29,10 +30,10 @@ class PrizeRatingActions {
}); });
} }
fetchOne(pieceId) { fetchOne(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchOne(pieceId) .fetchOne(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -43,10 +44,10 @@ class PrizeRatingActions {
}); });
} }
createRating(pieceId, rating) { createRating(pieceId, rating, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.rate(pieceId, rating) .rate(pieceId, rating, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -70,10 +71,6 @@ class PrizeRatingActions {
}); });
}); });
} }
updateRating(rating) {
this.actions.updatePrizeRating(rating);
}
} }
export default alt.createActions(PrizeRatingActions); export default alt.createActions(PrizeRatingActions);

16
js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
View File

@ -173,23 +173,25 @@ let AccordionListItemPrize = React.createClass({
}, },
render() { render() {
const { children, className, content } = this.props;
const { currentUser } = this.state;
// Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) || let artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ?
(this.state.currentUser.is_judge && !this.props.content.selected )) ? <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name;
<span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.props.content.artist_name;
return ( return (
<div> <div>
<AccordionListItemPiece <AccordionListItemPiece
className={this.props.className} className={className}
piece={this.props.content} piece={content}
artistName={artistName} artistName={artistName}
subsubheading={ subsubheading={
<div> <div>
<span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span> <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
</div>} </div>}
buttons={this.getPrizeButtons()} buttons={this.getPrizeButtons()}
badge={this.getPrizeBadge()}> badge={this.getPrizeBadge()}>
{this.props.children} {children}
</AccordionListItemPiece> </AccordionListItemPiece>
</div> </div>
); );

263
js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
View File

@ -6,15 +6,19 @@ import Moment from 'moment';
import StarRating from 'react-star-rating'; import StarRating from 'react-star-rating';
import PieceActions from '../../../../../../actions/piece_actions'; import ReactError from '../../../../../../mixins/react_error';
import PieceStore from '../../../../../../stores/piece_store'; import { ResourceNotFoundError } from '../../../../../../models/errors';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import PrizeActions from '../../actions/prize_actions';
import PrizeStore from '../../stores/prize_store';
import PrizeRatingActions from '../../actions/prize_rating_actions'; import PrizeRatingActions from '../../actions/prize_rating_actions';
import PrizeRatingStore from '../../stores/prize_rating_store'; import PrizeRatingStore from '../../stores/prize_rating_store';
import PieceActions from '../../../../../../actions/piece_actions';
import PieceStore from '../../../../../../stores/piece_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import UserStore from '../../../../../../stores/user_store'; import UserStore from '../../../../../../stores/user_store';
import UserActions from '../../../../../../actions/user_actions'; import UserActions from '../../../../../../actions/user_actions';
@ -31,9 +35,7 @@ import CollapsibleParagraph from '../../../../../../components/ascribe_collapsib
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader'; import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import InputCheckbox from '../../../../../ascribe_forms/input_checkbox'; import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
import LoanForm from '../../../../../ascribe_forms/form_loan';
import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions'; import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import GlobalNotificationModel from '../../../../../../models/global_notification_model'; import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
@ -49,36 +51,49 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
/** /**
* This is the component that implements resource/data specific functionality * This is the component that implements resource/data specific functionality
*/ */
let PieceContainer = React.createClass({ let PrizePieceContainer = React.createClass({
propTypes: { propTypes: {
params: React.PropTypes.object params: React.PropTypes.object,
selectedPrizeActionButton: React.PropTypes.func
}, },
mixins: [ReactError],
getInitialState() { getInitialState() {
return mergeOptions( //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
PieceStore.getState(), // It should instead use something like getInitialState() where that call also resets the state.
UserStore.getState() return UserStore.getState();
);
}, },
componentDidMount() { componentWillMount() {
PieceStore.listen(this.onChange);
PieceActions.fetchOne(this.props.params.pieceId);
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
// Every time we enter the piece detail page, just reset the piece // Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads // store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time // the piece detail a second time
PieceActions.updatePiece({}); PieceActions.updatePiece({});
}, },
componentDidMount() {
PieceStore.listen(this.onChange);
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
this.loadPiece();
},
// This is done to update the container when the user clicks on the prev or next // This is done to update the container when the user clicks on the prev or next
// button to update the URL parameter (and therefore to switch pieces) // button to update the URL parameter (and therefore to switch pieces)
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.params.pieceId !== nextProps.params.pieceId) { if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({}); PieceActions.updatePiece({});
PieceActions.fetchOne(nextProps.params.pieceId); this.loadPiece(nextProps.params.pieceId);
}
},
componentDidUpdate() {
const { pieceError } = this.state;
if (pieceError && pieceError.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
} }
}, },
@ -87,30 +102,32 @@ let PieceContainer = React.createClass({
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
}, },
loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId);
},
getActions() { getActions() {
if (this.state.piece && const { currentUser, piece } = this.state;
this.state.piece.notifications &&
this.state.piece.notifications.length > 0) { if (piece && piece.notifications && piece.notifications.length > 0) {
return ( return (
<ListRequestActions <ListRequestActions
pieceOrEditions={this.state.piece} pieceOrEditions={piece}
currentUser={this.state.currentUser} currentUser={currentUser}
handleSuccess={this.loadPiece} handleSuccess={this.loadPiece}
notifications={this.state.piece.notifications}/>); notifications={piece.notifications}/>);
} }
}, },
loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchOne(pieceId);
},
render() { render() {
if(this.state.piece && this.state.piece.id) { const { selectedPrizeActionButton } = this.props;
const { currentUser, piece } = this.state;
if (piece && piece.id) {
/* /*
This really needs a refactor! This really needs a refactor!
@ -119,37 +136,32 @@ let PieceContainer = React.createClass({
*/ */
// Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) || let artistName;
(this.state.currentUser.is_judge && !this.state.piece.selected )) ? if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
null : this.state.piece.artist_name; artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
setDocumentTitle(piece.title);
} else {
artistName = piece.artist_name;
setDocumentTitle([artistName, piece.title].join(', '));
}
// Only show the artist email if you are a judge and the piece is shortlisted // Only show the artist email if you are a judge and the piece is shortlisted
let artistEmail = (this.state.currentUser.is_judge && this.state.piece.selected ) ? const artistEmail = (currentUser.is_judge && piece.selected ) ?
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null; <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } /> : null;
if (artistName === null) {
setDocumentTitle(this.state.piece.title);
} else {
setDocumentTitle([artistName, this.state.piece.title].join(', '));
}
if (artistName === null) {
artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
}
return ( return (
<Piece <Piece
piece={this.state.piece} piece={piece}
loadPiece={this.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<NavigationHeader <NavigationHeader
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser}/> currentUser={currentUser}/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label={getLangText('BY')} value={artistName} /> <DetailProperty label={getLangText('BY')} value={artistName} />
<DetailProperty label={getLangText('DATE')} value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
{artistEmail} {artistEmail}
{this.getActions()} {this.getActions()}
<hr/> <hr/>
@ -158,10 +170,11 @@ let PieceContainer = React.createClass({
subheader={ subheader={
<PrizePieceRatings <PrizePieceRatings
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser}/> currentUser={currentUser}
selectedPrizeActionButton={selectedPrizeActionButton} />
}> }>
<PrizePieceDetails piece={this.state.piece} /> <PrizePieceDetails piece={piece} />
</Piece> </Piece>
); );
} else { } else {
@ -215,31 +228,31 @@ let PrizePieceRatings = React.createClass({
propTypes: { propTypes: {
loadPiece: React.PropTypes.func, loadPiece: React.PropTypes.func,
piece: React.PropTypes.object, piece: React.PropTypes.object,
currentUser: React.PropTypes.object currentUser: React.PropTypes.object,
selectedPrizeActionButton: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceListStore.getState(), PieceListStore.getState(),
PrizeRatingStore.getState() PrizeStore.getState(),
PrizeRatingStore.getInitialState()
); );
}, },
componentDidMount() { componentDidMount() {
PrizeRatingStore.listen(this.onChange);
PrizeRatingActions.fetchOne(this.props.piece.id);
PrizeRatingActions.fetchAverage(this.props.piece.id);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
PrizeStore.listen(this.onChange);
PrizeRatingStore.listen(this.onChange);
PrizeActions.fetchPrize();
this.fetchPrizeRatings();
}, },
componentWillUnmount() { componentWillUnmount() {
// Every time we're leaving the piece detail page,
// just reset the piece that is saved in the piece store
// as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PrizeRatingActions.updateRating({});
PrizeRatingStore.unlisten(this.onChange);
PieceListStore.unlisten(this.onChange); PieceListStore.unlisten(this.onChange);
PrizeStore.unlisten(this.onChange);
PrizeRatingStore.unlisten(this.onChange);
}, },
// The StarRating component does not have a property that lets us set // The StarRating component does not have a property that lets us set
@ -247,7 +260,12 @@ let PrizePieceRatings = React.createClass({
// every mouseover be overridden, we need to set it ourselves initially to deal // every mouseover be overridden, we need to set it ourselves initially to deal
// with the problem. // with the problem.
onChange(state) { onChange(state) {
if (state.prize && state.prize.active_round != this.state.prize.active_round) {
this.fetchPrizeRatings(state);
}
this.setState(state); this.setState(state);
if (this.refs.rating) { if (this.refs.rating) {
this.refs.rating.state.ratingCache = { this.refs.rating.state.ratingCache = {
pos: this.refs.rating.state.pos, pos: this.refs.rating.state.pos,
@ -258,50 +276,30 @@ let PrizePieceRatings = React.createClass({
} }
}, },
fetchPrizeRatings(state = this.state) {
PrizeRatingActions.fetchOne(this.props.piece.id, state.prize.active_round);
PrizeRatingActions.fetchAverage(this.props.piece.id, state.prize.active_round);
},
onRatingClick(event, args) { onRatingClick(event, args) {
event.preventDefault(); event.preventDefault();
PrizeRatingActions.createRating(this.props.piece.id, args.rating).then( PrizeRatingActions
this.refreshPieceData() .createRating(this.props.piece.id, args.rating, this.state.prize.active_round)
); .then(this.refreshPieceData);
}, },
handleLoanRequestSuccess(message){ getSelectedActionButton() {
let notification = new GlobalNotificationModel(message, 'success', 4000); const { currentUser, piece, selectedPrizeActionButton: SelectedPrizeActionButton } = this.props;
GlobalNotificationActions.appendGlobalNotification(notification);
},
getLoanButton(){ if (piece.selected && SelectedPrizeActionButton) {
let today = new Moment();
let endDate = new Moment();
endDate.add(6, 'months');
return ( return (
<ModalWrapper <span className="pull-right">
trigger={ <SelectedPrizeActionButton
<button className='btn btn-default btn-sm'> piece={piece}
{getLangText('SEND LOAN REQUEST')} currentUser={currentUser} />
</button> </span>
);
} }
handleSuccess={this.handleLoanRequestSuccess}
title='REQUEST LOAN'>
<LoanForm
loanHeading={null}
message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
'Please accept the loan request to proceed.')}
id={{piece_id: this.props.piece.id}}
url={ApiUrls.ownership_loans_pieces_request}
email={this.props.currentUser.email}
gallery={this.props.piece.prize.name}
startDate={today}
endDate={endDate}
showPersonalMessage={true}
showPassword={false}
handleSuccess={this.handleLoanSuccess} />
</ModalWrapper>);
},
handleShortlistSuccess(message){
let notification = new GlobalNotificationModel(message, 'success', 2000);
GlobalNotificationActions.appendGlobalNotification(notification);
}, },
refreshPieceData() { refreshPieceData() {
@ -312,10 +310,15 @@ let PrizePieceRatings = React.createClass({
}, },
onSelectChange() { onSelectChange() {
PrizeRatingActions.toggleShortlist(this.props.piece.id) PrizeRatingActions
.toggleShortlist(this.props.piece.id)
.then((res) => { .then((res) => {
this.refreshPieceData(); this.refreshPieceData();
this.handleShortlistSuccess(res.notification);
if (res && res.notification) {
const notification = new GlobalNotificationModel(res.notification, 'success', 2000);
GlobalNotificationActions.appendGlobalNotification(notification);
}
}); });
}, },
@ -337,9 +340,7 @@ let PrizePieceRatings = React.createClass({
</span> </span>
</InputCheckbox> </InputCheckbox>
</span> </span>
<span className="pull-right"> {this.getSelectedActionButton()}
{this.props.piece.selected ? this.getLoanButton() : null}
</span>
</div> </div>
<hr /> <hr />
</CollapsibleParagraph> </CollapsibleParagraph>
@ -358,13 +359,19 @@ let PrizePieceRatings = React.createClass({
</div> </div>
<hr /> <hr />
{this.state.ratings.map((item, i) => { {this.state.ratings.map((item, i) => {
let note = item.note ? let note = item.note ? (
<div className="rating-note"> <div className="rating-note">
note: {item.note} note: {item.note}
</div> : null; </div>
) : null;
return ( return (
<div className="rating-list"> <div
<div id="list-rating" className="row no-margin"> key={item.user}
className="rating-list">
<div
id="list-rating"
className="row no-margin">
<span className="pull-right"> <span className="pull-right">
<StarRating <StarRating
ref={'rating' + i} ref={'rating' + i}
@ -384,8 +391,7 @@ let PrizePieceRatings = React.createClass({
<hr /> <hr />
</CollapsibleParagraph> </CollapsibleParagraph>
</div>); </div>);
} } else if (this.props.currentUser && this.props.currentUser.is_jury) {
else if (this.props.currentUser && this.props.currentUser.is_jury) {
// Jury can set rating and note // Jury can set rating and note
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
@ -412,9 +418,10 @@ let PrizePieceRatings = React.createClass({
url={ApiUrls.notes} url={ApiUrls.notes}
currentUser={this.props.currentUser}/> currentUser={this.props.currentUser}/>
</CollapsibleParagraph>); </CollapsibleParagraph>);
} } else {
return null; return null;
} }
}
}); });
@ -424,21 +431,25 @@ let PrizePieceDetails = React.createClass({
}, },
render() { render() {
if (this.props.piece const { piece } = this.props;
&& this.props.piece.prize
&& this.props.piece.prize.name if (piece &&
&& Object.keys(this.props.piece.extra_data).length !== 0){ piece.prize &&
piece.prize.name &&
Object.keys(piece.extra_data).length !== 0) {
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Prize Details')} title={getLangText('Prize Details')}
defaultExpanded={true}> defaultExpanded={true}>
<Form ref='form'> <Form ref='form'>
{Object.keys(this.props.piece.extra_data).map((data) => { {Object.keys(piece.extra_data).sort().map((data) => {
let label = data.replace('_', ' '); // Remove leading number (for sorting), if any, and underscores with spaces
const value = this.props.piece.extra_data[data] || 'N/A'; let label = data.replace(/^\d-/, '').replace(/_/g, ' ');
const value = piece.extra_data[data] || 'N/A';
return ( return (
<Property <Property
key={label}
name={data} name={data}
label={label} label={label}
editable={false} editable={false}
@ -455,8 +466,8 @@ let PrizePieceDetails = React.createClass({
isReadyForFormSubmission={() => {}} isReadyForFormSubmission={() => {}}
editable={false} editable={false}
overrideForm={true} overrideForm={true}
pieceId={this.props.piece.id} pieceId={piece.id}
otherData={this.props.piece.other_data} otherData={piece.other_data}
multiple={true} /> multiple={true} />
</Form> </Form>
</CollapsibleParagraph> </CollapsibleParagraph>
@ -466,4 +477,4 @@ let PrizePieceDetails = React.createClass({
} }
}); });
export default PieceContainer; export default PrizePieceContainer;

2
js/components/whitelabel/prize/simple_prize/components/prize_landing.js
View File

@ -46,7 +46,7 @@ let Landing = React.createClass({
// if user is already logged in, redirect him to piece list // if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },

6
js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
View File

@ -48,7 +48,8 @@ let PrizePieceList = React.createClass({
}, },
getButtonSubmit() { getButtonSubmit() {
if (this.state.prize && this.state.prize.active && !this.state.currentUser.is_jury){ const { currentUser, prize } = this.state;
if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
return ( return (
<LinkContainer to="/register_piece"> <LinkContainer to="/register_piece">
<Button> <Button>
@ -57,9 +58,6 @@ let PrizePieceList = React.createClass({
</LinkContainer> </LinkContainer>
); );
} }
else if (this.state.prize && this.state.currentUser.is_judge){
return null;
}
return null; return null;
}, },

7
js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
View File

@ -135,14 +135,15 @@ let PrizeJurySettings = React.createClass({
handleCreateSuccess(response) { handleCreateSuccess(response) {
PrizeJuryActions.fetchJury(); PrizeJuryActions.fetchJury();
let notification = new GlobalNotificationModel(response.notification, 'success', 5000); this.displayNotification(response);
GlobalNotificationActions.appendGlobalNotification(notification);
this.refs.form.refs.email.refs.input.getDOMNode().value = null; this.refs.form.refs.email.refs.input.getDOMNode().value = null;
}, },
handleActivate(event) { handleActivate(event) {
let email = event.target.getAttribute('data-id'); let email = event.target.getAttribute('data-id');
PrizeJuryActions.activateJury(email).then((response) => { PrizeJuryActions
.activateJury(email)
.then((response) => {
PrizeJuryActions.fetchJury(); PrizeJuryActions.fetchJury();
this.displayNotification(response); this.displayNotification(response);
}); });

37
js/components/whitelabel/prize/simple_prize/fetchers/prize_rating_fetcher.js
View File

@ -4,16 +4,41 @@ import requests from '../../../../../utils/requests';
let PrizeRatingFetcher = { let PrizeRatingFetcher = {
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return requests.get('rating_average', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating_average', params);
}, },
fetchOne(pieceId) { fetchOne(pieceId, round) {
return requests.get('rating', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating', params);
}, },
rate(pieceId, rating) { rate(pieceId, rating, round) {
return requests.post('ratings', {body: {'piece_id': pieceId, 'note': rating}}); const body = {
'piece_id': pieceId,
'note': rating
};
if (typeof round === 'number') {
body['prize_round'] = round;
}
return requests.post('ratings', { body });
}, },
select(pieceId) { select(pieceId) {

2
js/components/whitelabel/prize/simple_prize/prize_app.js
View File

@ -32,7 +32,7 @@ let PrizeApp = React.createClass({
if (!path || history.isActive('/login') || history.isActive('/signup')) { if (!path || history.isActive('/login') || history.isActive('/signup')) {
header = <Hero />; header = <Hero />;
} else { } else {
header = <Header showAddWork={false} routes={routes}/>; header = <Header routes={routes}/>;
} }
return ( return (

24
js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
View File

@ -6,10 +6,12 @@ import PrizeRatingActions from '../actions/prize_rating_actions';
class PrizeRatingStore { class PrizeRatingStore {
constructor() { constructor() {
this.ratings = []; this.getInitialState();
this.currentRating = null;
this.average = null;
this.bindActions(PrizeRatingActions); this.bindActions(PrizeRatingActions);
this.exportPublicMethods({
getInitialState: this.getInitialState.bind(this)
});
} }
onUpdatePrizeRatings(ratings) { onUpdatePrizeRatings(ratings) {
@ -24,6 +26,22 @@ class PrizeRatingStore {
this.average = data.average; this.average = data.average;
this.ratings = data.ratings; this.ratings = data.ratings;
} }
onResetPrizeRatings() {
this.getInitialState();
}
getInitialState() {
this.ratings = [];
this.currentRating = null;
this.average = null;
return {
ratings: this.ratings,
currentRating: this.currentRating,
average: this.average
};
}
} }
export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore'); export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');

2
js/components/whitelabel/prize/simple_prize/stores/prize_store.js
View File

@ -6,7 +6,7 @@ import PrizeActions from '../actions/prize_actions';
class PrizeStore { class PrizeStore {
constructor() { constructor() {
this.prize = []; this.prize = {};
this.bindActions(PrizeActions); this.bindActions(PrizeActions);
} }

70
js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js Normal file
View File

@ -0,0 +1,70 @@
'use strict'
import React from 'react';
import Moment from 'moment';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import LoanForm from '../../../../../ascribe_forms/form_loan';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls';
import { getLangText } from '../../../../../../utils/lang_utils';
const SluiceSelectedPrizeActionButton = React.createClass({
propTypes: {
piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
startLoanDate: React.PropTypes.object,
endLoanDate: React.PropTypes.object,
className: React.PropTypes.string,
handleSuccess: React.PropTypes.func
},
handleSuccess(res) {
const notification = new GlobalNotificationModel(res && res.notification || getLangText('You have successfully requested the loan, pending their confirmation.'), 'success', 4000);
GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof this.props.handleSuccess === 'function') {
this.props.handleSuccess(res);
}
},
render() {
const { currentUser, piece } = this.props;
// Can't use default props since those are only created once
const startLoanDate = this.props.startLoanDate || new Moment();
const endLoanDate = this.props.endLoanDate || (new Moment()).add(6, 'months');
return (
<ModalWrapper
trigger={
<button className='btn btn-default btn-sm'>
{getLangText('SEND LOAN REQUEST')}
</button>
}
handleSuccess={this.handleSuccess}
title={getLangText('REQUEST LOAN')}>
<LoanForm
loanHeading={null}
message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
'Please accept the loan request to proceed.')}
id={{ piece_id: piece.id }}
url={ApiUrls.ownership_loans_pieces_request}
email={currentUser.email}
gallery={piece.prize.name}
startDate={startLoanDate}
endDate={endLoanDate}
showPersonalMessage={true}
showPassword={false} />
</ModalWrapper>
);
}
});
export default SluiceSelectedPrizeActionButton;

23
js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js Normal file
View File

@ -0,0 +1,23 @@
'use strict';
import React from 'react';
import SluiceSelectedPrizeActionButton from '../sluice_buttons/sluice_selected_prize_action_button';
import PrizePieceContainer from '../../../simple_prize/components/ascribe_detail/prize_piece_container';
const SluicePieceContainer = React.createClass({
propTypes: {
params: React.PropTypes.object
},
render() {
return (
<PrizePieceContainer
{...this.props}
selectedPrizeActionButton={SluiceSelectedPrizeActionButton} />
);
}
});
export default SluicePieceContainer;

4
js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
View File

@ -47,7 +47,7 @@ let Vivi23Landing = React.createClass({
</div> </div>
</div> </div>
<div className="row vivi23-landing--content"> <div className="row vivi23-landing--content">
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Existing ascribe user?')} {getLangText('Existing ascribe user?')}
</p> </p>
@ -57,7 +57,7 @@ let Vivi23Landing = React.createClass({
</Button> </Button>
</LinkContainer> </LinkContainer>
</div> </div>
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Do you need an account?')} {getLangText('Do you need an account?')}
</p> </p>

59
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -25,63 +25,72 @@ let WalletPieceContainer = React.createClass({
currentUser: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired, loadPiece: React.PropTypes.func.isRequired,
handleDeleteSuccess: React.PropTypes.func.isRequired, handleDeleteSuccess: React.PropTypes.func.isRequired,
submitButtonType: React.PropTypes.func.isRequired submitButtonType: React.PropTypes.func.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
])
}, },
render() { render() {
if(this.props.piece && this.props.piece.id) { const {
children,
currentUser,
handleDeleteSuccess,
loadPiece,
piece,
submitButtonType } = this.props;
if (piece && piece.id) {
return ( return (
<Piece <Piece
piece={this.props.piece} piece={piece}
loadPiece={this.props.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/> <hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<hr/> <hr/>
</div> </div>
}> }>
<WalletActionPanel <WalletActionPanel
piece={this.props.piece} piece={piece}
currentUser={this.props.currentUser} currentUser={currentUser}
loadPiece={this.props.loadPiece} loadPiece={loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess} handleDeleteSuccess={handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/> submitButtonType={submitButtonType}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.piece.loan_history && this.props.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.piece.loan_history}/> history={piece.loan_history}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.props.currentUser.username || this.props.piece.public_note)}> show={!!(currentUser.username || piece.public_note)}>
<Note <Note
id={() => {return {'id': this.props.piece.id}; }} id={() => {return {'id': piece.id}; }}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.props.piece.private_note || null} defaultValue={piece.private_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
{children}
{this.props.children}
</Piece> </Piece>
); );
} } else {
else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' /> <AscribeSpinner color='dark-blue' size='lg' />

2
js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
View File

@ -86,7 +86,7 @@ let CylandPieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {

6
js/components/whitelabel/wallet/components/cyland/cyland_landing.js
View File

@ -49,7 +49,7 @@ let CylandLanding = React.createClass({
// if user is already logged in, redirect him to piece list // if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },
@ -70,7 +70,7 @@ let CylandLanding = React.createClass({
</div> </div>
</div> </div>
<div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}> <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Existing ascribe user?')} {getLangText('Existing ascribe user?')}
</p> </p>
@ -80,7 +80,7 @@ let CylandLanding = React.createClass({
</Button> </Button>
</LinkContainer> </LinkContainer>
</div> </div>
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Do you need an account?')} {getLangText('Do you need an account?')}
</p> </p>

57
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -8,6 +8,8 @@ import Moment from 'moment';
import Col from 'react-bootstrap/lib/Col'; import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
import WhitelabelActions from '../../../../../actions/whitelabel_actions'; import WhitelabelActions from '../../../../../actions/whitelabel_actions';
@ -127,7 +129,7 @@ let CylandRegisterPiece = React.createClass({
PieceActions.fetchOne(this.state.piece.id); PieceActions.fetchOne(this.state.piece.id);
this.history.pushState(null, `/pieces/${this.state.piece.id}`); this.history.push(`/pieces/${this.state.piece.id}`);
}, },
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out
@ -145,20 +147,34 @@ let CylandRegisterPiece = React.createClass({
PieceListActions.fetchPieceList({page, pageSize, search, orderBy, orderAsc, filterBy}); PieceListActions.fetchPieceList({page, pageSize, search, orderBy, orderAsc, filterBy});
}, },
changeSlide() {
// only transition to the login store, if user is not logged in
// ergo the currentUser object is not properly defined
if(this.state.currentUser && !this.state.currentUser.email) {
this.onLoggedOut();
}
},
render() { render() {
const { location } = this.props;
const { currentUser, piece, step, whitelabel } = this.state;
let today = new Moment(); const today = new Moment();
let datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment(); const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();
datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years'); datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years');
const loanHeading = getLangText('Loan to Cyland archive');
const loanButtons = (
<div>
<div className='col-xs-6 ascribe-form-btn-container-left'>
<button className='btn btn-default btn-wide'>
{getLangText('Loan to archive')}
</button>
</div>
<div className='col-xs-6 ascribe-form-btn-container-right'>
<LinkContainer to='/collection'>
<button
type='button'
className='btn btn-secondary btn-wide'>
{getLangText('Loan later')}
</button>
</LinkContainer>
</div>
</div>
);
setDocumentTitle(getLangText('Register a new piece')); setDocumentTitle(getLangText('Register a new piece'));
return ( return (
@ -169,18 +185,18 @@ let CylandRegisterPiece = React.createClass({
pending: 'glyphicon glyphicon-chevron-right', pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock' completed: 'glyphicon glyphicon-lock'
}} }}
location={this.props.location}> location={location}>
<div data-slide-title={getLangText('Register work')}> <div data-slide-title={getLangText('Register work')}>
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<RegisterPieceForm <RegisterPieceForm
disabled={this.state.step > 0} disabled={step > 0}
enableLocalHashing={false} enableLocalHashing={false}
headerMessage={getLangText('Submit to Cyland Archive')} headerMessage={getLangText('Submit to Cyland Archive')}
submitMessage={getLangText('Submit')} submitMessage={getLangText('Submit')}
isFineUploaderActive={true} isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
location={this.props.location}/> location={location}/>
</Col> </Col>
</Row> </Row>
</div> </div>
@ -188,9 +204,9 @@ let CylandRegisterPiece = React.createClass({
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<CylandAdditionalDataForm <CylandAdditionalDataForm
disabled={this.state.step > 1} disabled={step > 1}
handleSuccess={this.handleAdditionalDataSuccess} handleSuccess={this.handleAdditionalDataSuccess}
piece={this.state.piece} /> piece={piece} />
</Col> </Col>
</Row> </Row>
</div> </div>
@ -199,15 +215,16 @@ let CylandRegisterPiece = React.createClass({
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<LoanForm <LoanForm
loanHeading={getLangText('Loan to Cyland archive')} loanHeading={getLangText('Loan to Cyland archive')}
buttons={loanButtons}
message={getAclFormMessage({ message={getAclFormMessage({
aclName: 'acl_loan', aclName: 'acl_loan',
entities: this.state.piece, entities: piece,
isPiece: true, isPiece: true,
senderName: this.state.currentUser.username senderName: currentUser.username
})} })}
id={{piece_id: this.state.piece.id}} id={{piece_id: piece.id}}
url={ApiUrls.ownership_loans_pieces} url={ApiUrls.ownership_loans_pieces}
email={this.state.whitelabel.user} email={whitelabel.user}
gallery="Cyland Archive" gallery="Cyland Archive"
startDate={today} startDate={today}
endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain} endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}

21
js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
View File

@ -106,28 +106,33 @@ let IkonotvContractNotifications = React.createClass({
handleConfirm() { handleConfirm() {
let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement; let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
OwnershipFetcher.confirmContractAgreement(contractAgreement).then( OwnershipFetcher
() => this.handleConfirmSuccess() .confirmContractAgreement(contractAgreement)
); .then(this.handleConfirmSuccess);
}, },
handleConfirmSuccess() { handleConfirmSuccess() {
let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000); let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
// Flush contract notifications and refetch
NotificationActions.flushContractAgreementListNotifications();
NotificationActions.fetchContractAgreementListNotifications();
this.history.push('/collection');
}, },
handleDeny() { handleDeny() {
let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement; let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
OwnershipFetcher.denyContractAgreement(contractAgreement).then( OwnershipFetcher
() => this.handleDenySuccess() .denyContractAgreement(contractAgreement)
); .then(this.handleDenySuccess);
}, },
handleDenySuccess() { handleDenySuccess() {
let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000); let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCopyrightAssociationForm(){ getCopyrightAssociationForm(){

2
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -95,7 +95,7 @@ let IkonotvPieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {

1
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
View File

@ -61,7 +61,6 @@ let IkonotvArtistDetailsForm = React.createClass({
let buttons, spinner, heading; let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props; let { isInline, handleSuccess } = this.props;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button

21
js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
View File

@ -1,15 +1,18 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import PieceList from '../../../../piece_list'; import PieceList from '../../../../piece_list';
import UserActions from '../../../../../actions/user_actions'; import UserActions from '../../../../../actions/user_actions';
import UserStore from '../../../../../stores/user_store'; import UserStore from '../../../../../stores/user_store';
import NotificationStore from '../../../../../stores/notification_store';
import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item'; import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
let IkonotvPieceList = React.createClass({ let IkonotvPieceList = React.createClass({
@ -18,20 +21,33 @@ let IkonotvPieceList = React.createClass({
}, },
getInitialState() { getInitialState() {
return UserStore.getState(); return mergeOptions(
NotificationStore.getState(),
UserStore.getState()
);
}, },
componentDidMount() { componentDidMount() {
NotificationStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
}, },
componentWillUnmount() { componentWillUnmount() {
NotificationStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
},
redirectIfNoContractNotifications() {
const { contractAgreementListNotifications } = this.state;
return contractAgreementListNotifications && !contractAgreementListNotifications.length;
}, },
render() { render() {
@ -41,6 +57,7 @@ let IkonotvPieceList = React.createClass({
<div> <div>
<PieceList <PieceList
redirectTo="/register_piece?slide_num=0" redirectTo="/register_piece?slide_num=0"
shouldRedirect={this.redirectIfNoContractNotifications}
accordionListItemType={IkonotvAccordionListItem} accordionListItemType={IkonotvAccordionListItem}
filterParams={[{ filterParams={[{
label: getLangText('Show works I have'), label: getLangText('Show works I have'),

4
js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
View File

@ -103,7 +103,7 @@ let IkonotvRegisterPiece = React.createClass({
PieceActions.updatePiece(response.piece); PieceActions.updatePiece(response.piece);
} }
if (!this.canSubmit()) { if (!this.canSubmit()) {
this.history.pushState(null, '/collection'); this.history.push('/collection');
} }
else { else {
this.incrementStep(); this.incrementStep();
@ -134,7 +134,7 @@ let IkonotvRegisterPiece = React.createClass({
this.refreshPieceList(); this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id); PieceActions.fetchOne(this.state.piece.id);
this.history.pushState(null, `/pieces/${this.state.piece.id}`); this.history.push(`/pieces/${this.state.piece.id}`);
}, },
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out

4
js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
View File

@ -53,7 +53,7 @@ let LumenusLanding = React.createClass({
</div> </div>
</div> </div>
<div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}> <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Existing ascribe user?')} {getLangText('Existing ascribe user?')}
</p> </p>
@ -63,7 +63,7 @@ let LumenusLanding = React.createClass({
</Button> </Button>
</LinkContainer> </LinkContainer>
</div> </div>
<div className="col-sm-6"> <div className="col-xs-6">
<p> <p>
{getLangText('Do you need an account?')} {getLangText('Do you need an account?')}
</p> </p>

2
js/components/whitelabel/wallet/components/market/market_register_piece.js
View File

@ -82,7 +82,7 @@ let MarketRegisterPiece = React.createClass({
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
this.refreshPieceList(); this.refreshPieceList();
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out

2
js/components/whitelabel/wallet/wallet_app.js
View File

@ -35,7 +35,7 @@ let WalletApp = React.createClass({
&& (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) { && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = <Header showAddWork={true} routes={routes} />; header = <Header routes={routes} />;
} }
// In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however, // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,

98
js/components/whitelabel/wallet/wallet_routes.js
View File

@ -40,7 +40,7 @@ import LumenusLanding from './components/lumenus/lumenus_landing';
import Vivi23Landing from './components/23vivi/23vivi_landing'; import Vivi23Landing from './components/23vivi/23vivi_landing';
import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler'; import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler';
import WalletApp from './wallet_app'; import WalletApp from './wallet_app';
@ -51,29 +51,30 @@ let ROUTES = {
<IndexRoute component={CylandLanding} /> <IndexRoute component={CylandLanding} />
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(CylandRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'
aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(CylandPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
headerTitle='COLLECTION' /> headerTitle='COLLECTION' />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
@ -85,29 +86,29 @@ let ROUTES = {
<Route path='/' component={WalletApp}> <Route path='/' component={WalletApp}>
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(CCRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)}
headerTitle='+ NEW WORK' /> headerTitle='+ NEW WORK' />
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(PieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
headerTitle='COLLECTION' /> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={PieceContainer} /> <Route path='pieces/:pieceId' component={PieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
@ -120,39 +121,39 @@ let ROUTES = {
<IndexRoute component={IkonotvLanding} /> <IndexRoute component={IkonotvLanding} />
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='request_loan' path='request_loan'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)}
headerTitle='SEND NEW CONTRACT' headerTitle='SEND NEW CONTRACT'
aclName='acl_create_contractagreement' /> aclName='acl_create_contractagreement' />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(IkonotvRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)}
headerTitle='+ NEW WORK' headerTitle='+ NEW WORK'
aclName='acl_create_piece'/> aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(IkonotvPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
headerTitle='COLLECTION' /> headerTitle='COLLECTION' />
<Route <Route
path='contract_notifications' path='contract_notifications'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(IkonotvContractNotifications)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
<Route path='pieces/:pieceId' component={IkonotvPieceContainer} /> <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
@ -161,32 +162,33 @@ let ROUTES = {
), ),
'lumenus': ( 'lumenus': (
<Route path='/' component={WalletApp}> <Route path='/' component={WalletApp}>
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} /> <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LumenusLanding)} />
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'
aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
headerTitle='COLLECTION' /> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={MarketPieceContainer} /> <Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} /> <Route path='editions/:editionId' component={MarketEditionContainer} />
@ -196,33 +198,33 @@ let ROUTES = {
), ),
'23vivi': ( '23vivi': (
<Route path='/' component={WalletApp}> <Route path='/' component={WalletApp}>
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} /> <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(Vivi23Landing)} />
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
headerTitle='+ NEW WORK' headerTitle='+ NEW WORK'
aclName='acl_wallet_submit' /> aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
headerTitle='COLLECTION' /> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={MarketPieceContainer} /> <Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} /> <Route path='editions/:editionId' component={MarketEditionContainer} />

4
js/constants/application_constants.js
View File

@ -91,6 +91,10 @@ const constants = {
'registerWork': { 'registerWork': {
'itemLimit': 1, 'itemLimit': 1,
'sizeLimit': '25000000000' 'sizeLimit': '25000000000'
},
'workThumbnail': {
'itemLimit': 1,
'sizeLimit': '5000000'
} }
} }
}, },

11
js/constants/mime_types.js Normal file
View File

@ -0,0 +1,11 @@
'use strict';
const MimeTypes = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'gif': 'image/gif',
'pdf': 'application/pdf',
'png': 'image/png'
};
export default MimeTypes;

18
js/fetchers/coa_fetcher.js
View File

@ -1,18 +0,0 @@
'use strict';
import requests from '../utils/requests';
let CoaFetcher = {
/**
* Fetch one user from the API.
* If no arg is supplied, load the current user
*/
fetchOne(id) {
return requests.get('coa', {'id': id});
},
create(bitcoinId) {
return requests.post('coa_create', {body: {'bitcoin_id': bitcoinId}});
}
};
export default CoaFetcher;

15
js/fetchers/edition_fetcher.js
View File

@ -1,15 +0,0 @@
'use strict';
import requests from '../utils/requests';
let EditionFetcher = {
/**
* Fetch one user from the API.
* If no arg is supplied, load the current user
*/
fetchOne(editionId) {
return requests.get('edition', {'bitcoin_id': editionId});
}
};
export default EditionFetcher;

3
js/history.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import useBasename from 'history/lib/useBasename'; import useBasename from 'history/lib/useBasename';
import useQueries from 'history/lib/useQueries';
import createBrowserHistory from 'history/lib/createBrowserHistory'; import createBrowserHistory from 'history/lib/createBrowserHistory';
import AppConstants from './constants/application_constants'; import AppConstants from './constants/application_constants';
@ -8,6 +9,6 @@ import AppConstants from './constants/application_constants';
// Remove the trailing slash if present // Remove the trailing slash if present
let baseUrl = AppConstants.baseUrl.replace(/\/$/, ''); let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
export default useBasename(createBrowserHistory)({ export default useBasename(useQueries(createBrowserHistory))({
basename: baseUrl basename: baseUrl
}); });

18
js/routes.js
View File

@ -25,39 +25,39 @@ import ErrorNotFoundPage from './components/error_not_found_page';
import RegisterPiece from './components/register_piece'; import RegisterPiece from './components/register_piece';
import AuthProxyHandler from './components/ascribe_routes/proxy_routes/auth_proxy_handler'; import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_handler';
let COMMON_ROUTES = ( let COMMON_ROUTES = (
<Route path='/' component={App}> <Route path='/' component={App}>
<Route <Route
path='login' path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='register_piece' path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(RegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(RegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'/>
<Route <Route
path='collection' path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(PieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION'/>
<Route <Route
path='signup' path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route <Route
path='logout' path='logout'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(LogoutContainer)}/>
<Route path='pieces/:pieceId' component={PieceContainer} /> <Route path='pieces/:pieceId' component={PieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route <Route
path='password_reset' path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
<Route <Route
path='contract_settings' path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
<Route path='coa_verify' component={CoaVerifyContainer} /> <Route path='coa_verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} /> <Route path='*' component={ErrorNotFoundPage} />
</Route> </Route>

32
js/sources/coa_source.js Normal file
View File

@ -0,0 +1,32 @@
'use strict';
import requests from '../utils/requests';
import EditionActions from '../actions/edition_actions';
const CoaSource = {
lookupCoa: {
remote(state) {
return requests
.get('coa', { id: state.edition.coa })
.then((res) => {
// If no coa is found here, fake a 404 error so the error action can pick it up
return (res && res.coa) ? res : Promise.reject({ json: { status: 404 } });
});
},
success: EditionActions.successFetchCoa,
error: EditionActions.errorCoa
},
performCreateCoa: {
remote(state) {
return requests.post('coa_create', {body: { bitcoin_id: state.edition.bitcoin_id }});
},
success: EditionActions.successFetchCoa,
error: EditionActions.errorCoa
}
};
export default CoaSource;

19
js/sources/edition_source.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
import requests from '../utils/requests';
import EditionActions from '../actions/edition_actions';
const EditionSource = {
lookupEdition: {
remote(state) {
return requests.get('edition', { bitcoin_id: state.editionMeta.idToFetch });
},
success: EditionActions.successFetchEdition,
error: EditionActions.errorEdition
}
};
export default EditionSource;

22
js/stores/coa_store.js
View File

@ -1,22 +0,0 @@
'use strict';
import { alt } from '../alt';
import CoaActions from '../actions/coa_actions';
class CoaStore {
constructor() {
this.coa = {};
this.bindActions(CoaActions);
}
onUpdateCoa(coa) {
this.coa = coa;
}
onFlushCoa() {
this.coa = {};
}
}
export default alt.createStore(CoaStore, 'CoaStore');

Some files were not shown because too many files have changed in this diff Show More