Merge with master
@ -1,63 +0,0 @@
|
|||||||
# Feature list
|
|
||||||
|
|
||||||
This list specifies all features in Onion that ought to be tested before actually pushing live:
|
|
||||||
|
|
||||||
- sign up & email activation
|
|
||||||
- login
|
|
||||||
- log out
|
|
||||||
- form input
|
|
||||||
+ reset
|
|
||||||
+ save
|
|
||||||
+ disabled state
|
|
||||||
- form checkbox
|
|
||||||
+ reset
|
|
||||||
+ save
|
|
||||||
+ disabled state
|
|
||||||
- create app
|
|
||||||
+ refresh token
|
|
||||||
- loan contract
|
|
||||||
+ upload
|
|
||||||
+ download
|
|
||||||
+ delete
|
|
||||||
- register work
|
|
||||||
+ with edition
|
|
||||||
+ without edition
|
|
||||||
+ correct encoding of video upload
|
|
||||||
- fineuploader
|
|
||||||
+ upload file
|
|
||||||
+ upload multiple files
|
|
||||||
+ delete file
|
|
||||||
+ cancel upload of file
|
|
||||||
- create editions
|
|
||||||
+ in piece list
|
|
||||||
+ in piece detail
|
|
||||||
- all notes in edition/piece detail
|
|
||||||
- transfer & consign & loan & share & delete
|
|
||||||
+ bulk
|
|
||||||
+ single
|
|
||||||
+ withdraw
|
|
||||||
- piece list
|
|
||||||
+ filter (also check for correct filtering of opened edition tables)
|
|
||||||
+ order
|
|
||||||
+ search
|
|
||||||
+ pagination
|
|
||||||
+ expandable edition list for piece
|
|
||||||
- download coa
|
|
||||||
|
|
||||||
## sluice
|
|
||||||
- hero landing page
|
|
||||||
- activation email
|
|
||||||
- submission (also check extra form fields)
|
|
||||||
+ of existing pieces
|
|
||||||
+ newly registered pieces
|
|
||||||
- rating
|
|
||||||
+ in piece list
|
|
||||||
+ in piece detail
|
|
||||||
- short listing (not yet implemented)
|
|
||||||
- piece list
|
|
||||||
+ order by rating
|
|
||||||
|
|
||||||
## Cyland
|
|
||||||
- hero landing page
|
|
||||||
- activation email
|
|
||||||
- submission (check states of submission (1,2,3))
|
|
@ -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="ascribe-logo" horiz-adv-x="1024">
|
<font id="icomoon" 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=" " horiz-adv-x="512" d="" />
|
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||||
@ -12,8 +12,9 @@
|
|||||||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
|
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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" />
|
||||||
</font></defs></svg>
|
</font></defs></svg>
|
Before (image error) Size: 6.2 KiB After (image error) Size: 6.3 KiB |
Before (image error) Size: 51 KiB |
@ -1,83 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="595.28px" height="419.53px" viewBox="0 0 595.28 419.53" enable-background="new 0 0 595.28 419.53" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<rect id="SVGID_1_" x="6.973" y="169.602" width="580.536" height="116.927"/>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_2_">
|
|
||||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
|
||||||
</clipPath>
|
|
||||||
<path clip-path="url(#SVGID_2_)" d="M415.848,234.446c1.263-7.152,7.572-14.584,17.247-14.584c9.114,0,15.564,6.59,15.705,14.584
|
|
||||||
H415.848z M448.519,258.002c-2.664,5.891-8.272,8.833-15.144,8.833c-10.797,0-18.509-8.833-18.368-20.47h42.767
|
|
||||||
c3.085,0,5.188-1.823,5.188-5.189v-4.486c-0.42-15.986-12.198-29.167-29.727-29.167c-19.91,0-32.11,15.986-32.11,35.476
|
|
||||||
c0,20.894,11.639,36.598,32.251,36.598c13.461,0,24.258-7.151,28.745-18.931c1.263-3.364-0.562-6.17-3.926-6.17h-4.207
|
|
||||||
C451.604,254.496,449.781,255.338,448.519,258.002 M340.692,229.818c3.225-4.627,8.833-9.255,15.984-9.255
|
|
||||||
c10.798,0,17.809,10.656,17.809,22.996c0,12.901-6.45,22.855-17.809,22.855c-7.151,0-12.76-5.188-15.984-10.096V229.818z
|
|
||||||
M340.552,272.585c4.628,4.067,10.096,7.012,16.266,7.012c19.49,0.14,31.409-15.565,31.55-36.178
|
|
||||||
c0.141-20.472-11.779-35.896-31.41-35.896c-6.31,0-12.059,2.945-16.265,6.311v-32.251c0-2.804-2.243-5.048-5.188-5.048h-3.645
|
|
||||||
c-2.806,0-4.909,2.244-4.909,5.048v91.843c0,2.806,2.104,5.048,4.909,5.048h3.505c2.944,0,4.627-2.104,5.048-4.907L340.552,272.585
|
|
||||||
z M285.587,187.612c0,5.329,3.926,9.114,9.115,9.114c5.188,0,9.255-3.785,9.255-9.114c0-5.328-4.067-9.254-9.255-9.254
|
|
||||||
C289.513,178.358,285.587,182.284,285.587,187.612 M287.971,273.426c0,2.806,2.104,5.048,4.908,5.048h3.505
|
|
||||||
c2.804,0,5.048-2.242,5.048-5.048v-59.733c0-2.804-1.823-5.047-4.908-5.047h-3.646c-2.804,0-4.908,2.244-4.908,5.047V273.426z
|
|
||||||
M233.566,273.426c0,2.806,2.244,5.048,5.048,5.048h3.646c3.226,0,5.048-2.242,5.048-5.048v-42.064
|
|
||||||
c2.665-5.189,8.694-10.377,16.827-10.377h2.524c2.944,0,5.188-2.103,5.188-5.048v-3.786c0-2.804-1.963-4.627-4.908-4.627h-2.524
|
|
||||||
c-6.45,0-13.602,4.346-17.107,9.254l-0.14-3.225c-0.28-2.804-1.963-4.908-4.908-4.908h-3.646c-2.804,0-5.048,2.244-5.048,5.047
|
|
||||||
V273.426z M201.036,231.361c0.982,2.805,3.646,3.646,6.311,2.805l3.785-1.263c3.085-0.981,3.787-3.505,2.945-5.89
|
|
||||||
c-3.926-11.498-13.32-19.491-28.043-19.491c-19.491,0-31.83,15.845-31.83,36.037c0,20.472,11.638,36.037,31.549,36.037
|
|
||||||
c14.864,0,26.923-9.815,30.007-22.716c0.702-2.945-1.122-5.328-4.066-5.328h-4.346c-2.665,0-4.768,1.401-5.469,3.926
|
|
||||||
c-2.104,6.73-8.133,10.937-15.565,11.078c-11.498,0.14-18.509-10.096-18.509-22.997c0-13.04,6.871-23.417,18.229-23.276
|
|
||||||
C193.324,220.424,198.513,224.63,201.036,231.361 M98.117,257.302c-0.281-2.664-2.384-4.768-5.188-4.768h-4.066
|
|
||||||
c-2.664,0-4.627,2.104-4.487,4.768c0.421,12.899,10.938,22.295,28.043,22.295c17.948,0,28.466-9.815,28.466-21.875
|
|
||||||
c0-10.937-7.012-17.247-17.107-19.21c-5.328-0.981-11.638-2.244-16.686-3.646c-3.646-0.982-6.45-3.366-6.45-6.591
|
|
||||||
c0-4.487,3.786-8.553,11.639-8.553c7.151,0,11.218,4.207,12.059,7.571c0.701,2.665,3.085,4.206,5.468,4.206h3.926
|
|
||||||
c2.804,0,4.908-1.823,4.487-4.767c-1.542-11.078-11.217-19.21-25.801-19.21c-15.003,0-25.519,8.553-25.519,20.893
|
|
||||||
c0,10.516,7.993,16.126,16.125,18.51c6.029,1.823,11.638,3.084,17.668,4.205c3.786,0.702,6.59,3.086,6.59,6.871
|
|
||||||
c0,5.328-5.048,9.255-14.723,9.115C104.146,266.977,98.537,262.63,98.117,257.302 M31.091,266.274
|
|
||||||
c-6.311-0.561-10.096-3.505-10.096-8.132c0-4.908,3.786-7.853,9.675-7.853c4.066,0,7.432-0.14,11.217-0.42
|
|
||||||
c3.225-0.28,6.59-0.843,8.834-2.805v10.656c-0.702,4.768-4.767,7.853-11.218,8.553C36.839,266.557,33.895,266.557,31.091,266.274
|
|
||||||
M8.095,228.836c-0.561,2.946,1.542,4.77,4.207,4.77h4.206c2.945,0,5.048-1.543,5.609-4.207c1.122-5.469,5.609-9.256,14.303-9.256
|
|
||||||
c9.675,0,14.443,5.749,14.302,13.741v0.702c-1.402,2.244-5.468,3.225-8.974,3.365c-3.506,0.14-6.45,0.28-10.797,0.28
|
|
||||||
c-14.022,0-23.978,6.73-23.978,20.051c0,13.04,9.535,20.332,24.118,21.034c2.664,0.14,5.188,0,7.572-0.142
|
|
||||||
c5.468-0.28,11.357-2.805,14.442-6.87c1.402,3.085,6.59,6.169,10.937,6.169h2.804c2.945,0,5.048-1.821,5.048-4.768v-3.925
|
|
||||||
c0-2.805-1.963-4.628-4.627-4.628c-1.682,0-2.944-1.122-2.944-2.804v-27.483c0-16.266-11.779-27.343-28.044-27.343
|
|
||||||
C21.696,207.523,10.338,215.655,8.095,228.836"/>
|
|
||||||
<path clip-path="url(#SVGID_2_)" d="M585.82,216.386c-1.271-5.163-3.195-10.098-5.719-14.665
|
|
||||||
c-2.625-4.757-5.823-9.102-9.505-12.903c-3.819-3.955-8.108-7.37-12.743-10.145c-4.785-2.876-9.9-5.098-15.215-6.607
|
|
||||||
c-5.469-1.545-11.072-2.373-16.666-2.459c-5.722-0.064-11.451,0.593-17.018,2c-3.65,0.935-7.178,2.193-10.572,3.696l5.607,11.476
|
|
||||||
c2.613-1.129,5.32-2.083,8.114-2.798c4.465-1.129,9.058-1.667,13.683-1.606c4.475,0.069,8.976,0.736,13.373,1.977
|
|
||||||
c4.221,1.199,8.297,2.972,12.125,5.271c3.681,2.204,7.086,4.916,10.131,8.07c2.902,2.998,5.428,6.429,7.508,10.198
|
|
||||||
c1.982,3.589,3.495,7.474,4.498,11.55c0.956,3.874,1.396,7.922,1.308,12.035c-0.081,3.898-0.695,7.834-1.822,11.685
|
|
||||||
c-1.088,3.69-2.67,7.248-4.702,10.571c-1.945,3.18-4.339,6.126-7.115,8.755c-2.651,2.512-5.652,4.679-8.921,6.443
|
|
||||||
c-3.127,1.688-6.502,2.961-10.041,3.791c-3.353,0.79-6.844,1.13-10.398,1.019c-3.349-0.108-6.726-0.675-10.024-1.679
|
|
||||||
c-3.139-0.96-6.166-2.348-8.997-4.125c-2.679-1.684-5.172-3.759-7.399-6.157c-2.093-2.262-3.897-4.834-5.366-7.643
|
|
||||||
c-1.388-2.658-2.427-5.525-3.092-8.532c-0.629-2.822-0.877-5.763-0.738-8.747c0.129-2.789,0.646-5.604,1.541-8.384
|
|
||||||
c0.809-2.536,2.031-5.097,3.538-7.408c1.419-2.182,3.214-4.268,5.194-6.04c1.871-1.675,4.012-3.124,6.349-4.3
|
|
||||||
c2.169-1.084,4.589-1.914,7.003-2.399c2.257-0.456,4.722-0.617,7.112-0.461c2.199,0.145,4.52,0.62,6.707,1.371
|
|
||||||
c1.995,0.688,4.024,1.712,5.873,2.966c1.666,1.129,3.276,2.582,4.669,4.218c1.261,1.469,2.379,3.212,3.244,5.052
|
|
||||||
c0.789,1.672,1.382,3.562,1.716,5.489c0.303,1.7,0.371,3.583,0.199,5.436c-0.155,1.646-0.567,3.397-1.178,5.021
|
|
||||||
c-0.578,1.512-1.393,3.004-2.357,4.319c-0.887,1.213-1.999,2.364-3.221,3.333c-1.078,0.854-2.41,1.643-3.735,2.207
|
|
||||||
c-1.185,0.5-2.586,0.877-3.921,1.057c-1.205,0.153-2.557,0.142-3.816-0.036c-1.102-0.155-2.298-0.497-3.362-0.963
|
|
||||||
c-0.92-0.404-1.919-1.023-2.747-1.704c-0.726-0.596-1.454-1.387-2.009-2.186c-0.47-0.672-0.905-1.536-1.206-2.409
|
|
||||||
c-0.23-0.66-0.395-1.526-0.438-2.34c-0.035-0.613,0.039-1.427,0.18-2.057c0.123-0.527,0.391-1.201,0.689-1.733
|
|
||||||
c0.202-0.363,0.578-0.844,0.977-1.229c0.217-0.215,0.638-0.514,0.948-0.675c0.198-0.104,0.651-0.261,0.896-0.311
|
|
||||||
c0.141-0.027,0.507-0.028,0.719-0.006c3.501,0.422,6.669-2.109,7.072-5.612c0.401-3.504-2.111-6.67-5.614-7.073
|
|
||||||
c-0.692-0.079-2.517-0.227-4.562,0.147c-1.505,0.3-3.101,0.852-4.392,1.52c-0.86,0.447-2.531,1.426-4.003,2.888
|
|
||||||
c-1.245,1.203-2.38,2.672-3.188,4.124c-0.876,1.564-1.578,3.355-1.988,5.111c-0.413,1.846-0.583,3.846-0.483,5.609
|
|
||||||
c0.075,1.411,0.334,3.571,1.127,5.829c0.678,1.971,1.648,3.886,2.795,5.523c1.221,1.756,2.735,3.396,4.372,4.742
|
|
||||||
c1.74,1.432,3.721,2.653,5.735,3.538c2.137,0.933,4.456,1.593,6.696,1.908c2.387,0.342,4.89,0.358,7.266,0.053
|
|
||||||
c2.495-0.334,4.997-1.01,7.251-1.964c2.396-1.023,4.706-2.392,6.678-3.955c2.104-1.67,4.038-3.674,5.588-5.793
|
|
||||||
c1.624-2.216,3.001-4.74,3.993-7.336c1.017-2.705,1.69-5.591,1.953-8.362c0.28-3.029,0.165-6.008-0.337-8.834
|
|
||||||
c-0.525-3.018-1.474-6.037-2.74-8.716c-1.358-2.896-3.076-5.563-5.088-7.908c-2.145-2.518-4.571-4.704-7.214-6.492
|
|
||||||
c-2.801-1.901-5.788-3.405-8.88-4.471c-3.294-1.132-6.666-1.818-10.036-2.041c-3.552-0.223-7.076,0.003-10.462,0.688
|
|
||||||
c-3.555,0.715-6.982,1.891-10.204,3.503c-3.358,1.688-6.436,3.777-9.141,6.2c-2.845,2.544-5.328,5.434-7.379,8.587
|
|
||||||
c-2.15,3.299-3.833,6.829-4.997,10.477c-1.237,3.84-1.956,7.774-2.138,11.692c-0.191,4.113,0.156,8.188,1.028,12.104
|
|
||||||
c0.906,4.095,2.332,8.022,4.24,11.679c1.992,3.812,4.453,7.311,7.319,10.409c2.993,3.225,6.348,6.012,9.974,8.29
|
|
||||||
c3.784,2.376,7.838,4.234,12.062,5.527c4.381,1.332,8.866,2.079,13.336,2.227c0.582,0.019,1.165,0.027,1.746,0.027
|
|
||||||
c4.078,0,8.107-0.464,11.988-1.38c4.626-1.085,9.061-2.761,13.182-4.981c4.257-2.297,8.174-5.128,11.641-8.411
|
|
||||||
c3.59-3.402,6.694-7.226,9.227-11.362c2.615-4.277,4.652-8.861,6.061-13.637c1.445-4.943,2.231-9.996,2.335-15.011
|
|
||||||
C587.607,226.516,587.045,221.347,585.82,216.386"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before (image error) Size: 8.2 KiB |
@ -1,110 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="595.279px" height="419.531px" viewBox="0 0 595.279 419.531" enable-background="new 0 0 595.279 419.531"
|
|
||||||
xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<rect id="SVGID_1_" x="6.973" y="169.602" width="580.536" height="116.927"/>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_2_">
|
|
||||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
|
||||||
</clipPath>
|
|
||||||
<path clip-path="url(#SVGID_2_)" d="M415.848,234.446c1.263-7.151,7.572-14.584,17.247-14.584c9.114,0,15.563,6.591,15.705,14.584
|
|
||||||
H415.848z M448.519,258.001c-2.664,5.892-8.272,8.834-15.144,8.834c-10.798,0-18.51-8.834-18.368-20.471h42.767
|
|
||||||
c3.085,0,5.188-1.822,5.188-5.189v-4.485c-0.421-15.985-12.198-29.167-29.728-29.167c-19.91,0-32.109,15.986-32.109,35.477
|
|
||||||
c0,20.894,11.639,36.598,32.25,36.598c13.462,0,24.259-7.15,28.745-18.932c1.264-3.363-0.562-6.17-3.926-6.17h-4.207
|
|
||||||
C451.604,254.496,449.781,255.337,448.519,258.001 M340.692,229.818c3.226-4.627,8.833-9.255,15.984-9.255
|
|
||||||
c10.798,0,17.809,10.655,17.809,22.996c0,12.901-6.449,22.854-17.809,22.854c-7.151,0-12.76-5.188-15.984-10.096V229.818z
|
|
||||||
M340.552,272.585c4.628,4.066,10.096,7.012,16.266,7.012c19.49,0.14,31.409-15.564,31.551-36.178
|
|
||||||
c0.141-20.473-11.779-35.896-31.41-35.896c-6.311,0-12.06,2.945-16.266,6.311v-32.25c0-2.804-2.243-5.048-5.188-5.048h-3.646
|
|
||||||
c-2.806,0-4.908,2.244-4.908,5.048v91.842c0,2.807,2.104,5.049,4.908,5.049h3.506c2.943,0,4.627-2.104,5.048-4.907L340.552,272.585
|
|
||||||
z M285.587,187.612c0,5.329,3.926,9.114,9.115,9.114c5.188,0,9.255-3.785,9.255-9.114c0-5.328-4.067-9.254-9.255-9.254
|
|
||||||
C289.513,178.358,285.587,182.284,285.587,187.612 M287.971,273.425c0,2.807,2.104,5.049,4.908,5.049h3.505
|
|
||||||
c2.804,0,5.048-2.242,5.048-5.049v-59.732c0-2.804-1.823-5.047-4.908-5.047h-3.646c-2.804,0-4.908,2.244-4.908,5.047
|
|
||||||
L287.971,273.425L287.971,273.425z M233.566,273.425c0,2.807,2.244,5.049,5.048,5.049h3.646c3.226,0,5.048-2.242,5.048-5.049
|
|
||||||
v-42.063c2.665-5.188,8.694-10.377,16.827-10.377h2.524c2.943,0,5.188-2.103,5.188-5.048v-3.786c0-2.804-1.963-4.627-4.908-4.627
|
|
||||||
h-2.523c-6.45,0-13.603,4.347-17.107,9.254l-0.14-3.226c-0.28-2.803-1.963-4.907-4.908-4.907h-3.646
|
|
||||||
c-2.804,0-5.048,2.244-5.048,5.047V273.425L233.566,273.425z M201.036,231.361c0.981,2.805,3.646,3.646,6.311,2.805l3.785-1.263
|
|
||||||
c3.085-0.981,3.787-3.505,2.945-5.89c-3.927-11.498-13.32-19.491-28.043-19.491c-19.491,0-31.83,15.845-31.83,36.037
|
|
||||||
c0,20.472,11.638,36.037,31.549,36.037c14.864,0,26.923-9.815,30.007-22.716c0.702-2.945-1.122-5.328-4.066-5.328h-4.346
|
|
||||||
c-2.665,0-4.768,1.4-5.469,3.926c-2.104,6.73-8.133,10.938-15.565,11.078c-11.498,0.14-18.509-10.096-18.509-22.997
|
|
||||||
c0-13.04,6.871-23.417,18.229-23.276C193.324,220.423,198.513,224.63,201.036,231.361 M98.117,257.302
|
|
||||||
c-0.281-2.664-2.385-4.768-5.188-4.768h-4.066c-2.664,0-4.627,2.104-4.486,4.768c0.421,12.898,10.938,22.295,28.043,22.295
|
|
||||||
c17.948,0,28.466-9.814,28.466-21.875c0-10.938-7.012-17.247-17.107-19.21c-5.327-0.981-11.638-2.244-16.686-3.646
|
|
||||||
c-3.646-0.982-6.45-3.367-6.45-6.592c0-4.486,3.786-8.553,11.639-8.553c7.151,0,11.219,4.207,12.06,7.57
|
|
||||||
c0.701,2.666,3.085,4.207,5.468,4.207h3.926c2.805,0,4.908-1.824,4.487-4.768c-1.542-11.078-11.217-19.21-25.801-19.21
|
|
||||||
c-15.003,0-25.52,8.554-25.52,20.894c0,10.516,7.993,16.125,16.125,18.51c6.029,1.822,11.639,3.084,17.668,4.205
|
|
||||||
c3.786,0.701,6.591,3.086,6.591,6.871c0,5.328-5.049,9.254-14.724,9.115C104.146,266.977,98.537,262.63,98.117,257.302
|
|
||||||
M31.091,266.274c-6.312-0.562-10.096-3.505-10.096-8.132c0-4.908,3.785-7.854,9.675-7.854c4.065,0,7.432-0.14,11.217-0.42
|
|
||||||
c3.225-0.279,6.59-0.843,8.834-2.805v10.656c-0.702,4.768-4.767,7.854-11.218,8.553C36.839,266.557,33.895,266.557,31.091,266.274
|
|
||||||
M8.095,228.835c-0.561,2.947,1.542,4.771,4.207,4.771h4.206c2.945,0,5.048-1.543,5.609-4.207
|
|
||||||
c1.121-5.469,5.608-9.256,14.303-9.256c9.675,0,14.442,5.749,14.302,13.741v0.701c-1.402,2.244-5.468,3.226-8.974,3.365
|
|
||||||
c-3.506,0.141-6.45,0.28-10.797,0.28c-14.022,0-23.979,6.729-23.979,20.052c0,13.039,9.535,20.332,24.118,21.033
|
|
||||||
c2.664,0.141,5.188,0,7.572-0.143c5.468-0.279,11.356-2.805,14.441-6.869c1.402,3.085,6.59,6.169,10.938,6.169h2.804
|
|
||||||
c2.945,0,5.048-1.821,5.048-4.769v-3.924c0-2.806-1.963-4.629-4.627-4.629c-1.682,0-2.944-1.121-2.944-2.804v-27.483
|
|
||||||
c0-16.266-11.778-27.343-28.044-27.343C21.696,207.523,10.338,215.655,8.095,228.835"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<rect id="SVGID_3_" x="6.973" y="169.602" width="580.536" height="116.927"/>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_4_">
|
|
||||||
<use xlink:href="#SVGID_3_" overflow="visible"/>
|
|
||||||
</clipPath>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path d="M519.088,182.75c1.375-0.154,2.759-0.25,4.148-0.297l-0.362-12.773c-1.799,0.062-3.593,0.197-5.381,0.404L519.088,182.75z
|
|
||||||
M527.134,220.031c-0.267-0.029-0.7-0.071-1.249-0.087c-0.88-0.028-2.051,0.002-3.311,0.233c-1.508,0.298-3.103,0.854-4.393,1.523
|
|
||||||
c-0.861,0.445-2.532,1.424-4.005,2.886c-1.244,1.203-2.38,2.673-3.188,4.123c-0.496,0.885-0.924,1.843-1.286,2.822l12.254,3.784
|
|
||||||
c0.061-0.126,0.114-0.264,0.182-0.379c0.2-0.364,0.574-0.844,0.976-1.228c0.217-0.217,0.636-0.514,0.948-0.676
|
|
||||||
c0.197-0.105,0.648-0.263,0.895-0.31c0.114-0.023,0.382-0.028,0.59-0.015c0.047,0.002,0.093,0.002,0.129,0.007
|
|
||||||
c3.502,0.422,6.671-2.107,7.073-5.613C533.15,223.599,530.636,220.434,527.134,220.031 M509.485,171.556
|
|
||||||
c-0.965,0.248-1.918,0.52-2.867,0.811l3.677,12.229c0.774-0.238,1.552-0.465,2.342-0.666c2.006-0.507,5.735-1.088,5.557-1.064
|
|
||||||
l-1.659-12.666C516.711,170.178,511.983,170.925,509.485,171.556 M574.729,231.505c-0.075,3.552-0.609,7.126-1.555,10.646
|
|
||||||
l12.34,3.361c1.215-4.536,1.887-9.148,1.982-13.733c0.025-1.19,0.01-2.376-0.033-3.558l-12.763,0.422
|
|
||||||
C574.735,229.595,574.749,230.547,574.729,231.505 M498.38,175.332l5.607,11.479c0.501-0.219,1.01-0.424,1.519-0.627l-4.727-11.859
|
|
||||||
C499.972,174.647,499.171,174.982,498.38,175.332 M561.09,262.52c-2.652,2.512-5.652,4.679-8.923,6.44
|
|
||||||
c-3.127,1.689-6.503,2.963-10.041,3.793c-3.351,0.79-6.843,1.133-10.397,1.018c-1.92-0.06-3.849-0.292-5.767-0.65l-2.308,12.554
|
|
||||||
c2.544,0.472,5.104,0.776,7.664,0.862c0.58,0.019,1.162,0.024,1.742,0.024c4.08,0,8.11-0.465,11.988-1.378
|
|
||||||
c4.625-1.086,9.062-2.764,13.184-4.982c4.258-2.295,8.175-5.127,11.641-8.409c0.533-0.507,1.034-1.042,1.55-1.567l-9.139-8.914
|
|
||||||
C561.889,261.717,561.502,262.127,561.09,262.52 M568.204,253.764c-1.188,1.943-2.562,3.789-4.072,5.536l9.695,8.305
|
|
||||||
c1.949-2.264,3.73-4.653,5.274-7.177c1.848-3.021,3.401-6.199,4.653-9.488l-11.935-4.569
|
|
||||||
C570.85,248.925,569.647,251.407,568.204,253.764 M585.971,217.079l-12.446,2.881c0.341,1.46,0.604,2.943,0.799,4.444l12.673-1.697
|
|
||||||
C586.747,220.808,586.404,218.927,585.971,217.079 M542.637,172.095c-1.34-0.377-2.687-0.713-4.038-1.004l-2.693,12.482
|
|
||||||
c1.091,0.237,2.175,0.505,3.253,0.809c0.679,0.194,1.349,0.426,2.023,0.649l4.046-12.131
|
|
||||||
C544.368,172.616,543.507,172.343,542.637,172.095 M528.501,169.732l-0.751,12.769c1.538,0.083,3.074,0.214,4.607,0.436
|
|
||||||
l1.805-12.643C532.281,170.021,530.393,169.835,528.501,169.732 M580.102,201.75c-2.626-4.757-5.824-9.101-9.507-12.903
|
|
||||||
c-3.818-3.953-8.107-7.369-12.74-10.146c-2.381-1.429-4.843-2.696-7.369-3.796l-5.08,11.717c2.012,0.878,3.975,1.888,5.878,3.032
|
|
||||||
c3.683,2.203,7.086,4.916,10.133,8.068c2.9,2.998,5.427,6.43,7.507,10.2c1.355,2.449,2.471,5.05,3.375,7.742l12.098-4.121
|
|
||||||
C583.249,208.139,581.818,204.859,580.102,201.75 M531.03,248.33c-0.688-0.098-1.407-0.274-2.113-0.499l-3.888,12.154
|
|
||||||
c1.395,0.446,2.816,0.789,4.215,0.987c0.933,0.136,1.886,0.204,2.842,0.236l0.135-12.767
|
|
||||||
C531.818,248.416,531.422,248.384,531.03,248.33 M538.768,247.306c-1.088,0.461-2.356,0.807-3.59,1.002l1.932,12.615
|
|
||||||
c2.294-0.358,4.577-0.985,6.653-1.863c0.313-0.135,0.623-0.288,0.931-0.436l-5.345-11.588
|
|
||||||
C539.156,247.128,538.963,247.225,538.768,247.306 M521.705,272.095c-3.141-0.959-6.169-2.349-8.997-4.127
|
|
||||||
c-2.683-1.684-5.173-3.757-7.402-6.157c-0.494-0.532-0.968-1.089-1.432-1.655l-9.938,8.017c0.644,0.794,1.312,1.569,2.007,2.318
|
|
||||||
c2.994,3.229,6.351,6.016,9.975,8.294c3.776,2.37,7.824,4.225,12.037,5.518l3.779-12.197
|
|
||||||
C521.725,272.098,521.715,272.096,521.705,272.095 M524.923,245.663c-0.729-0.596-1.46-1.387-2.013-2.187
|
|
||||||
c-0.47-0.671-0.903-1.533-1.205-2.407c-0.229-0.66-0.394-1.527-0.438-2.339c-0.002-0.009,0-0.016,0-0.021l-12.76,0.114
|
|
||||||
c0.005,0.202,0,0.41,0.011,0.608c0.076,1.411,0.333,3.571,1.128,5.828c0.677,1.972,1.648,3.887,2.795,5.524
|
|
||||||
c1.222,1.754,2.734,3.396,4.371,4.743c0.592,0.483,1.215,0.935,1.851,1.365l7.059-10.633
|
|
||||||
C525.446,246.069,525.173,245.869,524.923,245.663 M499.942,254.168c-1.387-2.659-2.426-5.527-3.093-8.531
|
|
||||||
c-0.631-2.822-0.876-5.763-0.738-8.749c0.13-2.788,0.646-5.605,1.542-8.384c0.81-2.537,2.03-5.098,3.537-7.408
|
|
||||||
c0.197-0.303,0.418-0.596,0.627-0.894l-10.385-7.42c-0.317,0.447-0.645,0.887-0.942,1.346c-2.149,3.297-3.832,6.831-4.995,10.477
|
|
||||||
c-1.237,3.84-1.958,7.774-2.139,11.692c-0.191,4.115,0.156,8.188,1.027,12.105c0.907,4.096,2.33,8.021,4.239,11.682
|
|
||||||
c0.576,1.099,1.197,2.159,1.851,3.204l10.814-6.779C500.815,255.746,500.361,254.972,499.942,254.168 M506.385,215.056
|
|
||||||
c1.871-1.675,4.013-3.124,6.35-4.301c0.679-0.338,1.389-0.642,2.109-0.93l-4.726-11.859c-1.057,0.419-2.097,0.868-3.108,1.375
|
|
||||||
c-3.357,1.688-6.437,3.778-9.142,6.199c-1.511,1.353-2.915,2.81-4.212,4.345l9.735,8.265
|
|
||||||
C504.323,217.053,505.324,216.006,506.385,215.056 M538.66,211.746l6.869-10.757c-1.771-1.12-3.602-2.104-5.488-2.904
|
|
||||||
l-4.987,11.759C536.281,210.365,537.496,211.015,538.66,211.746 M544.099,216.451c1.263,1.47,2.38,3.214,3.243,5.053
|
|
||||||
c0.788,1.67,1.383,3.564,1.719,5.489c0.302,1.7,0.369,3.582,0.196,5.438c-0.154,1.644-0.565,3.395-1.177,5.018
|
|
||||||
c-0.578,1.511-1.393,3.005-2.356,4.319c-0.889,1.215-2,2.365-3.224,3.335c-0.011,0.007-0.022,0.017-0.034,0.022l7.857,10.063
|
|
||||||
c0.039-0.026,0.079-0.057,0.116-0.084c2.104-1.669,4.038-3.673,5.587-5.794c1.624-2.215,3.002-4.738,3.994-7.335
|
|
||||||
c1.015-2.705,1.69-5.59,1.952-8.362c0.28-3.029,0.166-6.008-0.337-8.834c-0.525-3.018-1.476-6.039-2.74-8.718
|
|
||||||
c-1.358-2.895-3.075-5.562-5.09-7.907c-1.05-1.238-2.173-2.39-3.354-3.457l-8.577,9.463
|
|
||||||
C542.658,214.867,543.405,215.637,544.099,216.451 M518.809,208.576l-2.863-12.439c0.422-0.098,0.842-0.213,1.27-0.297
|
|
||||||
c3.387-0.686,6.912-0.911,10.459-0.687c2.167,0.142,4.326,0.497,6.471,1.016l-2.969,12.417c-1.45-0.353-2.91-0.595-4.326-0.69
|
|
||||||
c-2.391-0.156-4.854,0.005-7.113,0.461C519.429,208.419,519.117,208.503,518.809,208.576"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before (image error) Size: 10 KiB |
Before (image error) Size: 24 KiB |
Before (image error) Size: 5.7 KiB |
Before (image error) Size: 2.5 KiB |
Before (image error) Size: 11 KiB |
Before (image error) Size: 2.7 KiB |
Before (image error) Size: 3.5 KiB |
Before (image error) Size: 5.3 KiB |
Before (image error) Size: 7.2 KiB |
Before (image error) Size: 8.9 KiB |
Before (image error) Size: 9.5 KiB |
Before (image error) Size: 12 KiB |
Before (image error) Size: 12 KiB |
Before (image error) Size: 4.4 KiB |
Before (image error) Size: 4.6 KiB |
Before (image error) Size: 5.5 KiB |
Before (image error) Size: 5.9 KiB |
Before (image error) Size: 14 KiB |
Before (image error) Size: 12 KiB |
@ -1,12 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<browserconfig>
|
|
||||||
<msapplication>
|
|
||||||
<tile>
|
|
||||||
<square70x70logo src="images/hq-favicons/mstile-70x70.png"/>
|
|
||||||
<square150x150logo src="images/hq-favicons/mstile-150x150.png"/>
|
|
||||||
<square310x310logo src="images/hq-favicons/mstile-310x310.png"/>
|
|
||||||
<wide310x150logo src="images/hq-favicons/mstile-310x150.png"/>
|
|
||||||
<TileColor>#00aba9</TileColor>
|
|
||||||
</tile>
|
|
||||||
</msapplication>
|
|
||||||
</browserconfig>
|
|
Before (image error) Size: 1.5 KiB |
Before (image error) Size: 1.7 KiB |
Before (image error) Size: 6.3 KiB |
Before Width: 48px | Height: 48px | Size: 15 KiB |
@ -1,35 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Ascribe",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "images\/hq-favicons\/android-chrome-36x36.png",
|
|
||||||
"sizes": "36x36",
|
|
||||||
"type": "image\/png",
|
|
||||||
"density": "0.75"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "images\/hq-favicons\/android-chrome-48x48.png",
|
|
||||||
"sizes": "48x48",
|
|
||||||
"type": "image\/png",
|
|
||||||
"density": "1.0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "images\/hq-favicons\/android-chrome-72x72.png",
|
|
||||||
"sizes": "72x72",
|
|
||||||
"type": "image\/png",
|
|
||||||
"density": "1.5"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "images\/hq-favicons\/android-chrome-96x96.png",
|
|
||||||
"sizes": "96x96",
|
|
||||||
"type": "image\/png",
|
|
||||||
"density": "2.0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "images\/hq-favicons\/android-chrome-144x144.png",
|
|
||||||
"sizes": "144x144",
|
|
||||||
"type": "image\/png",
|
|
||||||
"density": "3.0"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
Before (image error) Size: 5.1 KiB |
Before (image error) Size: 4.8 KiB |
Before (image error) Size: 5.1 KiB |
Before (image error) Size: 4.7 KiB |
Before (image error) Size: 3.3 KiB |
@ -22,8 +22,7 @@ class ContractAgreementListActions {
|
|||||||
if (contractAgreementList.count > 0) {
|
if (contractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(contractAgreementList.results);
|
this.actions.updateContractAgreementList(contractAgreementList.results);
|
||||||
resolve(contractAgreementList.results);
|
resolve(contractAgreementList.results);
|
||||||
}
|
} else {
|
||||||
else{
|
|
||||||
resolve(null);
|
resolve(null);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -35,13 +34,13 @@ class ContractAgreementListActions {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchAvailableContractAgreementList(issuer, createContractAgreement) {
|
fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
|
||||||
return Q.Promise((resolve, reject) => {
|
return Q.Promise((resolve, reject) => {
|
||||||
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
|
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
|
||||||
.then((acceptedContractAgreementList) => {
|
.then((acceptedContractAgreementList) => {
|
||||||
// if there is at least an accepted contract agreement, we're going to
|
// if there is at least an accepted contract agreement, we're going to
|
||||||
// use it
|
// use it
|
||||||
if(acceptedContractAgreementList.count > 0) {
|
if (acceptedContractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
|
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
|
||||||
} else {
|
} else {
|
||||||
// otherwise, we're looking for contract agreements that are still pending
|
// otherwise, we're looking for contract agreements that are still pending
|
||||||
@ -50,15 +49,13 @@ class ContractAgreementListActions {
|
|||||||
// overcomplicate the method
|
// overcomplicate the method
|
||||||
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
|
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
|
||||||
.then((pendingContractAgreementList) => {
|
.then((pendingContractAgreementList) => {
|
||||||
if(pendingContractAgreementList.count > 0) {
|
if (pendingContractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
|
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
|
||||||
} else {
|
} else if (createPublicContractAgreement) {
|
||||||
// if there was neither a pending nor an active contractAgreement
|
// if there was neither a pending nor an active contractAgreement
|
||||||
// found and createContractAgreement is set to true, we create a
|
// found and createPublicContractAgreement is set to true, we create a
|
||||||
// new contract agreement
|
// new public contract agreement
|
||||||
if(createContractAgreement) {
|
this.actions.createContractAgreementFromPublicContract(issuer);
|
||||||
this.actions.createContractAgreementFromPublicContract(issuer);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -81,8 +78,7 @@ class ContractAgreementListActions {
|
|||||||
// create an agreement with the public contract if there is one
|
// create an agreement with the public contract if there is one
|
||||||
if (publicContract && publicContract.length > 0) {
|
if (publicContract && publicContract.length > 0) {
|
||||||
return this.actions.createContractAgreement(null, publicContract[0]);
|
return this.actions.createContractAgreement(null, publicContract[0]);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
/*
|
/*
|
||||||
contractAgreementList in the store is already set to null;
|
contractAgreementList in the store is already set to null;
|
||||||
*/
|
*/
|
||||||
@ -91,21 +87,17 @@ class ContractAgreementListActions {
|
|||||||
if (publicContracAgreement) {
|
if (publicContracAgreement) {
|
||||||
this.actions.updateContractAgreementList([publicContracAgreement]);
|
this.actions.updateContractAgreementList([publicContracAgreement]);
|
||||||
}
|
}
|
||||||
}).catch((err) => {
|
}).catch(console.logGlobal);
|
||||||
console.logGlobal(err);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createContractAgreement(issuer, contract){
|
createContractAgreement(issuer, contract){
|
||||||
return Q.Promise((resolve, reject) => {
|
return Q.Promise((resolve, reject) => {
|
||||||
OwnershipFetcher.createContractAgreement(issuer, contract).then(
|
OwnershipFetcher
|
||||||
(contractAgreement) => {
|
.createContractAgreement(issuer, contract).then(resolve)
|
||||||
resolve(contractAgreement);
|
.catch((err) => {
|
||||||
}
|
console.logGlobal(err);
|
||||||
).catch((err) => {
|
reject(err);
|
||||||
console.logGlobal(err);
|
});
|
||||||
reject(err);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,8 @@ import EditionFetcher from '../fetchers/edition_fetcher';
|
|||||||
class EditionActions {
|
class EditionActions {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'updateEdition'
|
'updateEdition',
|
||||||
|
'editionFailed'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -18,6 +19,7 @@ class EditionActions {
|
|||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.logGlobal(err);
|
console.logGlobal(err);
|
||||||
|
this.actions.editionFailed(err.json);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,13 +2,15 @@
|
|||||||
|
|
||||||
import { alt } from '../alt';
|
import { alt } from '../alt';
|
||||||
|
|
||||||
|
|
||||||
class GlobalNotificationActions {
|
class GlobalNotificationActions {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'appendGlobalNotification',
|
'appendGlobalNotification',
|
||||||
|
'showNextGlobalNotification',
|
||||||
'shiftGlobalNotification',
|
'shiftGlobalNotification',
|
||||||
'emulateEmptyStore'
|
'cooldownGlobalNotifications',
|
||||||
|
'pauseGlobalNotifications',
|
||||||
|
'resumeGlobalNotifications'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,8 @@ class PieceActions {
|
|||||||
constructor() {
|
constructor() {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'updatePiece',
|
'updatePiece',
|
||||||
'updateProperty'
|
'updateProperty',
|
||||||
|
'pieceFailed'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -19,6 +20,7 @@ class PieceActions {
|
|||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.logGlobal(err);
|
console.logGlobal(err);
|
||||||
|
this.actions.pieceFailed(err.json);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<AscribeSpinner
|
<AscribeSpinner
|
||||||
size='sm'
|
size='sm'
|
||||||
color='white'
|
|
||||||
classNames='pull-right margin-left-2px'/>
|
classNames='pull-right margin-left-2px'/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default AccordionListItemEditionWidget;
|
export default AccordionListItemEditionWidget;
|
||||||
|
@ -4,6 +4,7 @@ import React from 'react';
|
|||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
import AccordionListItem from './accordion_list_item';
|
import AccordionListItem from './accordion_list_item';
|
||||||
|
import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
|
||||||
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({
|
|||||||
]),
|
]),
|
||||||
subsubheading: React.PropTypes.object,
|
subsubheading: React.PropTypes.object,
|
||||||
buttons: React.PropTypes.object,
|
buttons: React.PropTypes.object,
|
||||||
badge: React.PropTypes.object
|
badge: React.PropTypes.object,
|
||||||
|
thumbnailPlaceholder: React.PropTypes.func
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getLinkData() {
|
getLinkData() {
|
||||||
@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
|
const {
|
||||||
|
artistName,
|
||||||
|
badge,
|
||||||
|
buttons,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
piece,
|
||||||
|
subsubheading,
|
||||||
|
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
|
||||||
const { url, url_safe } = piece.thumbnail;
|
const { url, url_safe } = piece.thumbnail;
|
||||||
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 (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
|
||||||
thumbnail = (
|
thumbnail = (<ThumbnailPlaceholder />);
|
||||||
<span className="ascribe-logo-circle">
|
|
||||||
<span>A</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
thumbnail = (
|
thumbnail = (
|
||||||
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
|
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
|
||||||
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
let AccordionListItemThumbnailPlaceholder = React.createClass({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span className="ascribe-logo-circle">
|
||||||
|
<span>A</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AccordionListItemThumbnailPlaceholder;
|
@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
content: React.PropTypes.object,
|
content: React.PropTypes.object,
|
||||||
|
thumbnailPlaceholder: 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
|
||||||
@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { children, className, content, thumbnailPlaceholder } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AccordionListItemPiece
|
<AccordionListItemPiece
|
||||||
className={this.props.className}
|
className={className}
|
||||||
piece={this.props.content}
|
piece={content}
|
||||||
subsubheading={
|
subsubheading={
|
||||||
<div className="pull-left">
|
<div className="pull-left">
|
||||||
<span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
|
<span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
|
||||||
{this.getLicences()}
|
{this.getLicences()}
|
||||||
</div>}
|
</div>
|
||||||
|
}
|
||||||
buttons={
|
buttons={
|
||||||
<div>
|
<div>
|
||||||
<AclProxy
|
<AclProxy
|
||||||
aclObject={this.props.content.acl}
|
aclObject={content.acl}
|
||||||
aclName="acl_view_editions">
|
aclName="acl_view_editions">
|
||||||
<AccordionListItemEditionWidget
|
<AccordionListItemEditionWidget
|
||||||
className="pull-right"
|
className="pull-right"
|
||||||
piece={this.props.content}
|
piece={content}
|
||||||
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
|
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
|
||||||
onPollingSuccess={this.onPollingSuccess}/>
|
onPollingSuccess={this.onPollingSuccess}/>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
</div>}
|
</div>
|
||||||
badge={this.getGlyphicon()}>
|
}
|
||||||
|
badge={this.getGlyphicon()}
|
||||||
|
thumbnailPlaceholder={thumbnailPlaceholder}>
|
||||||
{this.getCreateEditionsDialog()}
|
{this.getCreateEditionsDialog()}
|
||||||
{/* this.props.children is AccordionListItemTableEditions */}
|
{/* this.props.children is AccordionListItemTableEditions */}
|
||||||
{this.props.children}
|
{children}
|
||||||
</AccordionListItemPiece>
|
</AccordionListItemPiece>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,7 @@ export default function ({ action, displayName, title, tooltip }) {
|
|||||||
availableAcls: React.PropTypes.object.isRequired,
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
buttonAcceptName: React.PropTypes.string,
|
buttonAcceptName: React.PropTypes.string,
|
||||||
buttonAcceptClassName: React.PropTypes.string,
|
buttonAcceptClassName: React.PropTypes.string,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
currentUser: React.PropTypes.object,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
pieceOrEditions: React.PropTypes.oneOfType([
|
pieceOrEditions: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
|
58
js/components/ascribe_buttons/form_submit_button.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react/addons';
|
||||||
|
|
||||||
|
const { string, object } = React.PropTypes;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Originally, this button was introduced for `RegisterPieceForm`.
|
||||||
|
* The underlying problem that lead to the implementation was that multiple `InputFineuploader`s
|
||||||
|
* where displayed in one form.
|
||||||
|
* For the form's submit button always to represent an applicable state we had to save
|
||||||
|
* the ready states of the multiple uploaders in `RegisterPieceForm`.
|
||||||
|
* However, on each invocation of `this.setState`, we were re-rendering the form again,
|
||||||
|
* which caused (if the user had the file-selector open) a detachment between user input and
|
||||||
|
* displayed page.
|
||||||
|
*
|
||||||
|
* This button helps to outsource the state of the form's readiness to another component,
|
||||||
|
* to solve the problem.
|
||||||
|
*/
|
||||||
|
const FormSubmitButton = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
defaultReadyStates: object.isRequired,
|
||||||
|
label: string.isRequired
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
readyStates: this.props.defaultReadyStates
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
setReadyStateForKey(key, state) {
|
||||||
|
const readyStates = React.addons.update(this.state.readyStates, { [key]: { $set: state } });
|
||||||
|
this.setState({ readyStates });
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { label } = this.props;
|
||||||
|
const { readyStates } = this.state;
|
||||||
|
|
||||||
|
// Reduce all readyStates to a single boolean
|
||||||
|
const ready = Object.keys(readyStates)
|
||||||
|
.reduce((defaultState, stateKey) => {
|
||||||
|
return defaultState && readyStates[stateKey];
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-default btn-wide"
|
||||||
|
disabled={!ready}>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default FormSubmitButton;
|
@ -12,7 +12,9 @@ const CollapsibleParagraph = React.createClass({
|
|||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
]),
|
]),
|
||||||
iconName: React.PropTypes.string
|
iconName: React.PropTypes.string,
|
||||||
|
show: React.PropTypes.bool,
|
||||||
|
defaultExpanded: React.PropTypes.bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
|
@ -7,6 +7,7 @@ let DetailProperty = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
value: React.PropTypes.oneOfType([
|
value: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.number,
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.element
|
React.PropTypes.element
|
||||||
]),
|
]),
|
||||||
|
@ -41,12 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
*/
|
*/
|
||||||
let Edition = React.createClass({
|
let Edition = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
|
furtherDetailsType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
loadEdition: React.PropTypes.func
|
loadEdition: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
mixins: [History],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
furtherDetailsType: FurtherDetails
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return UserStore.getState();
|
return UserStore.getState();
|
||||||
},
|
},
|
||||||
@ -74,6 +82,8 @@ let Edition = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
let FurtherDetailsType = this.props.furtherDetailsType;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={6}>
|
<Col md={6}>
|
||||||
@ -89,6 +99,7 @@ let Edition = React.createClass({
|
|||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
<EditionSummary
|
<EditionSummary
|
||||||
|
actionPanelButtonListType={this.props.actionPanelButtonListType}
|
||||||
edition={this.props.edition}
|
edition={this.props.edition}
|
||||||
currentUser={this.state.currentUser}
|
currentUser={this.state.currentUser}
|
||||||
handleSuccess={this.props.loadEdition}/>
|
handleSuccess={this.props.loadEdition}/>
|
||||||
@ -136,7 +147,7 @@ let Edition = React.createClass({
|
|||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
<Note
|
<Note
|
||||||
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
|
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
|
||||||
label={getLangText('Edition note (public)')}
|
label={getLangText('Personal note (public)')}
|
||||||
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
|
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
|
||||||
placeholder={getLangText('Enter your comments ...')}
|
placeholder={getLangText('Enter your comments ...')}
|
||||||
editable={!!this.props.edition.acl.acl_edit}
|
editable={!!this.props.edition.acl.acl_edit}
|
||||||
@ -150,7 +161,7 @@ let Edition = React.createClass({
|
|||||||
show={this.props.edition.acl.acl_edit
|
show={this.props.edition.acl.acl_edit
|
||||||
|| Object.keys(this.props.edition.extra_data).length > 0
|
|| Object.keys(this.props.edition.extra_data).length > 0
|
||||||
|| this.props.edition.other_data.length > 0}>
|
|| this.props.edition.other_data.length > 0}>
|
||||||
<FurtherDetails
|
<FurtherDetailsType
|
||||||
editable={this.props.edition.acl.acl_edit}
|
editable={this.props.edition.acl.acl_edit}
|
||||||
pieceId={this.props.edition.parent}
|
pieceId={this.props.edition.parent}
|
||||||
extraData={this.props.edition.extra_data}
|
extraData={this.props.edition.extra_data}
|
||||||
@ -171,6 +182,7 @@ let Edition = React.createClass({
|
|||||||
|
|
||||||
let EditionSummary = React.createClass({
|
let EditionSummary = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
currentUser: React.PropTypes.object,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
@ -183,7 +195,7 @@ let EditionSummary = React.createClass({
|
|||||||
getStatus(){
|
getStatus(){
|
||||||
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(/_/, ' ');
|
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
|
||||||
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
|
status = <EditionDetailProperty 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 = (
|
||||||
@ -195,7 +207,7 @@ let EditionSummary = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { edition, currentUser } = this.props;
|
let { actionPanelButtonListType, edition, currentUser } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className="ascribe-detail-header">
|
<div className="ascribe-detail-header">
|
||||||
<EditionDetailProperty
|
<EditionDetailProperty
|
||||||
@ -210,10 +222,16 @@ let EditionSummary = React.createClass({
|
|||||||
value={ edition.owner } />
|
value={ edition.owner } />
|
||||||
<LicenseDetail license={edition.license_type}/>
|
<LicenseDetail license={edition.license_type}/>
|
||||||
{this.getStatus()}
|
{this.getStatus()}
|
||||||
<AclProxy show={currentUser && currentUser.email}>
|
{/*
|
||||||
|
`acl_view` is always available in `edition.acl`, therefore if it has
|
||||||
|
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
|
||||||
|
`AclInformation` would show up
|
||||||
|
*/}
|
||||||
|
<AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
|
||||||
<EditionDetailProperty
|
<EditionDetailProperty
|
||||||
label={getLangText('ACTIONS')}>
|
label={getLangText('ACTIONS')}>
|
||||||
<EditionActionPanel
|
<EditionActionPanel
|
||||||
|
actionPanelButtonListType={actionPanelButtonListType}
|
||||||
edition={edition}
|
edition={edition}
|
||||||
currentUser={currentUser}
|
currentUser={currentUser}
|
||||||
handleSuccess={this.handleSuccess} />
|
handleSuccess={this.handleSuccess} />
|
||||||
|
@ -36,6 +36,7 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
*/
|
*/
|
||||||
let EditionActionPanel = React.createClass({
|
let EditionActionPanel = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
currentUser: React.PropTypes.object,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
@ -43,6 +44,12 @@ let EditionActionPanel = React.createClass({
|
|||||||
|
|
||||||
mixins: [History],
|
mixins: [History],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
actionPanelButtonListType: AclButtonList
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return PieceListStore.getState();
|
return PieceListStore.getState();
|
||||||
},
|
},
|
||||||
@ -87,7 +94,10 @@ let EditionActionPanel = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
let {edition, currentUser} = this.props;
|
const {
|
||||||
|
actionPanelButtonListType: ActionPanelButtonListType,
|
||||||
|
edition,
|
||||||
|
currentUser } = this.props;
|
||||||
|
|
||||||
if (edition &&
|
if (edition &&
|
||||||
edition.notifications &&
|
edition.notifications &&
|
||||||
@ -104,7 +114,7 @@ let EditionActionPanel = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col md={12}>
|
||||||
<AclButtonList
|
<ActionPanelButtonListType
|
||||||
className="ascribe-button-list"
|
className="ascribe-button-list"
|
||||||
availableAcls={edition.acl}
|
availableAcls={edition.acl}
|
||||||
pieceOrEditions={[edition]}
|
pieceOrEditions={[edition]}
|
||||||
@ -119,10 +129,11 @@ let EditionActionPanel = React.createClass({
|
|||||||
isInline={true}>
|
isInline={true}>
|
||||||
<Property
|
<Property
|
||||||
name="bitcoin_id"
|
name="bitcoin_id"
|
||||||
hidden={true}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={edition.bitcoin_id} />
|
value={edition.bitcoin_id}
|
||||||
|
readOnly />
|
||||||
</Property>
|
</Property>
|
||||||
<Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
|
<Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
|
||||||
{getLangText('WITHDRAW TRANSFER')}
|
{getLangText('WITHDRAW TRANSFER')}
|
||||||
@ -139,10 +150,11 @@ let EditionActionPanel = React.createClass({
|
|||||||
isInline={true}>
|
isInline={true}>
|
||||||
<Property
|
<Property
|
||||||
name="bitcoin_id"
|
name="bitcoin_id"
|
||||||
hidden={true}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={edition.bitcoin_id} />
|
value={edition.bitcoin_id}
|
||||||
|
readOnly />
|
||||||
</Property>
|
</Property>
|
||||||
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
|
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
|
||||||
{getLangText('WITHDRAW CONSIGN')}
|
{getLangText('WITHDRAW CONSIGN')}
|
||||||
@ -164,7 +176,7 @@ let EditionActionPanel = React.createClass({
|
|||||||
aim="button"
|
aim="button"
|
||||||
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
|
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
|
||||||
aclObject={edition.acl}/>
|
aclObject={edition.acl}/>
|
||||||
</AclButtonList>
|
</ActionPanelButtonListType>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { History } from 'react-router';
|
||||||
|
|
||||||
|
import ReactError from '../../mixins/react_error';
|
||||||
|
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';
|
||||||
@ -9,6 +13,7 @@ import Edition from './edition';
|
|||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
import { setDocumentTitle } from '../../utils/dom_utils';
|
import { setDocumentTitle } from '../../utils/dom_utils';
|
||||||
|
|
||||||
|
|
||||||
@ -17,9 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
|
|||||||
*/
|
*/
|
||||||
let EditionContainer = React.createClass({
|
let EditionContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
|
furtherDetailsType: React.PropTypes.func,
|
||||||
params: React.PropTypes.object
|
params: React.PropTypes.object
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mixins: [History, ReactError],
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return EditionStore.getState();
|
return EditionStore.getState();
|
||||||
},
|
},
|
||||||
@ -27,11 +36,11 @@ let EditionContainer = React.createClass({
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
EditionStore.listen(this.onChange);
|
EditionStore.listen(this.onChange);
|
||||||
|
|
||||||
// Every time we enter the edition detail page, just reset the edition
|
// Every time we're entering the edition detail page,
|
||||||
// store as it will otherwise display wrong/old data once the user loads
|
// just reset the edition that is saved in the edition store
|
||||||
|
// 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.updateEdition({});
|
||||||
|
|
||||||
this.loadEdition();
|
this.loadEdition();
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -44,6 +53,14 @@ let EditionContainer = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
const { editionError } = this.state;
|
||||||
|
|
||||||
|
if(editionError && editionError.status === 404) {
|
||||||
|
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
window.clearInterval(this.state.timerId);
|
window.clearInterval(this.state.timerId);
|
||||||
EditionStore.unlisten(this.onChange);
|
EditionStore.unlisten(this.onChange);
|
||||||
@ -71,6 +88,8 @@ let EditionContainer = React.createClass({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Edition
|
<Edition
|
||||||
|
actionPanelButtonListType={this.props.actionPanelButtonListType}
|
||||||
|
furtherDetailsType={this.props.furtherDetailsType}
|
||||||
edition={this.state.edition}
|
edition={this.state.edition}
|
||||||
loadEdition={this.loadEdition} />
|
loadEdition={this.loadEdition} />
|
||||||
);
|
);
|
||||||
|
@ -10,10 +10,12 @@ import ApiUrls from '../../constants/api_urls';
|
|||||||
import AppConstants from '../../constants/application_constants';
|
import AppConstants from '../../constants/application_constants';
|
||||||
|
|
||||||
import { getCookie } from '../../utils/fetch_api_utils';
|
import { getCookie } from '../../utils/fetch_api_utils';
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let FurtherDetailsFileuploader = React.createClass({
|
let FurtherDetailsFileuploader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
uploadStarted: React.PropTypes.func,
|
label: React.PropTypes.string,
|
||||||
pieceId: React.PropTypes.number,
|
pieceId: React.PropTypes.number,
|
||||||
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||||
setIsUploadReady: React.PropTypes.func,
|
setIsUploadReady: React.PropTypes.func,
|
||||||
@ -25,6 +27,7 @@ let FurtherDetailsFileuploader = React.createClass({
|
|||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
|
label: getLangText('Additional files'),
|
||||||
multiple: false
|
multiple: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -44,9 +47,8 @@ let FurtherDetailsFileuploader = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Property
|
<Property
|
||||||
name="other_data_key"
|
name="other_data_key"
|
||||||
label="Additional files">
|
label={this.props.label}>
|
||||||
<ReactS3FineUploader
|
<ReactS3FineUploader
|
||||||
uploadStarted={this.props.uploadStarted}
|
|
||||||
keyRoutine={{
|
keyRoutine={{
|
||||||
url: AppConstants.serverUrl + 's3/key/',
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
fileClass: 'otherdata',
|
fileClass: 'otherdata',
|
||||||
|
@ -20,7 +20,10 @@ let Piece = React.createClass({
|
|||||||
subheader: React.PropTypes.object,
|
subheader: React.PropTypes.object,
|
||||||
buttons: React.PropTypes.object,
|
buttons: React.PropTypes.object,
|
||||||
loadPiece: React.PropTypes.func,
|
loadPiece: React.PropTypes.func,
|
||||||
children: React.PropTypes.object
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
|
React.PropTypes.element
|
||||||
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
@ -4,6 +4,9 @@ import React from 'react';
|
|||||||
import { History } from 'react-router';
|
import { History } from 'react-router';
|
||||||
import Moment from 'moment';
|
import Moment from 'moment';
|
||||||
|
|
||||||
|
import ReactError from '../../mixins/react_error';
|
||||||
|
import { ResourceNotFoundError } from '../../models/errors';
|
||||||
|
|
||||||
import PieceActions from '../../actions/piece_actions';
|
import PieceActions from '../../actions/piece_actions';
|
||||||
import PieceStore from '../../stores/piece_store';
|
import PieceStore from '../../stores/piece_store';
|
||||||
|
|
||||||
@ -50,10 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
|
|||||||
*/
|
*/
|
||||||
let PieceContainer = React.createClass({
|
let PieceContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
furtherDetailsType: React.PropTypes.func,
|
||||||
params: React.PropTypes.object
|
params: React.PropTypes.object
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
mixins: [History, ReactError],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
furtherDetailsType: FurtherDetails
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
@ -69,15 +79,22 @@ let PieceContainer = React.createClass({
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
PieceListStore.listen(this.onChange);
|
PieceListStore.listen(this.onChange);
|
||||||
UserActions.fetchCurrentUser();
|
|
||||||
PieceStore.listen(this.onChange);
|
PieceStore.listen(this.onChange);
|
||||||
|
|
||||||
// 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({});
|
||||||
|
|
||||||
this.loadPiece();
|
this.loadPiece();
|
||||||
|
UserActions.fetchCurrentUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
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.")));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
@ -88,7 +105,7 @@ let PieceContainer = React.createClass({
|
|||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
/*
|
/*
|
||||||
|
|
||||||
ATTENTION:
|
ATTENTION:
|
||||||
THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
|
THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
|
||||||
FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
|
FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
|
||||||
@ -102,7 +119,6 @@ let PieceContainer = React.createClass({
|
|||||||
|
|
||||||
let pieceState = mergeOptions({}, state.piece);
|
let pieceState = mergeOptions({}, state.piece);
|
||||||
pieceState.acl.acl_loan = false;
|
pieceState.acl.acl_loan = false;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
piece: pieceState
|
piece: pieceState
|
||||||
});
|
});
|
||||||
@ -196,7 +212,12 @@ let PieceContainer = React.createClass({
|
|||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<AclProxy
|
<AclProxy
|
||||||
show={currentUser && currentUser.email}>
|
show={currentUser && currentUser.email && Object.keys(piece.acl).length > 1}>
|
||||||
|
{/*
|
||||||
|
`acl_view` is always available in `edition.acl`, therefore if it has
|
||||||
|
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
|
||||||
|
`AclInformation` would show up
|
||||||
|
*/}
|
||||||
<DetailProperty label={getLangText('ACTIONS')}>
|
<DetailProperty label={getLangText('ACTIONS')}>
|
||||||
<AclButtonList
|
<AclButtonList
|
||||||
className="ascribe-button-list"
|
className="ascribe-button-list"
|
||||||
@ -225,7 +246,8 @@ let PieceContainer = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if(this.state.piece && this.state.piece.id) {
|
if (this.state.piece && this.state.piece.id) {
|
||||||
|
let FurtherDetailsType = this.props.furtherDetailsType;
|
||||||
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
|
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -251,7 +273,6 @@ let PieceContainer = React.createClass({
|
|||||||
}
|
}
|
||||||
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={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
|
||||||
@ -260,11 +281,14 @@ let PieceContainer = React.createClass({
|
|||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
<CollapsibleParagraph
|
<CollapsibleParagraph
|
||||||
title={getLangText('Notes')}
|
title={getLangText('Notes')}
|
||||||
show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
|
show={!!(this.state.currentUser.username
|
||||||
|
|| 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={this.state.piece.private_note || null}
|
||||||
|
show = {!!this.state.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')}
|
||||||
@ -272,11 +296,12 @@ let PieceContainer = React.createClass({
|
|||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
<Note
|
<Note
|
||||||
id={this.getId}
|
id={this.getId}
|
||||||
label={getLangText('Piece note (public)')}
|
label={getLangText('Personal note (public)')}
|
||||||
defaultValue={this.state.piece.public_note || null}
|
defaultValue={this.state.piece.public_note || null}
|
||||||
placeholder={getLangText('Enter your comments ...')}
|
placeholder={getLangText('Enter your comments ...')}
|
||||||
editable={!!this.state.piece.acl.acl_edit}
|
editable={!!this.state.piece.acl.acl_edit}
|
||||||
successMessage={getLangText('Public piece note saved')}
|
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
|
||||||
|
successMessage={getLangText('Public note saved')}
|
||||||
url={ApiUrls.note_public_piece}
|
url={ApiUrls.note_public_piece}
|
||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
@ -286,7 +311,7 @@ let PieceContainer = React.createClass({
|
|||||||
|| Object.keys(this.state.piece.extra_data).length > 0
|
|| Object.keys(this.state.piece.extra_data).length > 0
|
||||||
|| this.state.piece.other_data.length > 0}
|
|| this.state.piece.other_data.length > 0}
|
||||||
defaultExpanded={true}>
|
defaultExpanded={true}>
|
||||||
<FurtherDetails
|
<FurtherDetailsType
|
||||||
editable={this.state.piece.acl.acl_edit}
|
editable={this.state.piece.acl.acl_edit}
|
||||||
pieceId={this.state.piece.id}
|
pieceId={this.state.piece.id}
|
||||||
extraData={this.state.piece.extra_data}
|
extraData={this.state.piece.extra_data}
|
||||||
|
@ -20,9 +20,11 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
|
|||||||
let AclFormFactory = React.createClass({
|
let AclFormFactory = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
|
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
autoFocusProperty: React.PropTypes.string,
|
||||||
|
currentUser: React.PropTypes.object,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
|
labels: React.PropTypes.object,
|
||||||
pieceOrEditions: React.PropTypes.oneOfType([
|
pieceOrEditions: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
@ -53,10 +55,12 @@ let AclFormFactory = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
action,
|
action,
|
||||||
|
autoFocusProperty,
|
||||||
pieceOrEditions,
|
pieceOrEditions,
|
||||||
currentUser,
|
currentUser,
|
||||||
email,
|
email,
|
||||||
message,
|
message,
|
||||||
|
labels,
|
||||||
handleSuccess,
|
handleSuccess,
|
||||||
showNotification } = this.props;
|
showNotification } = this.props;
|
||||||
|
|
||||||
@ -64,14 +68,16 @@ let AclFormFactory = React.createClass({
|
|||||||
aclName: action,
|
aclName: action,
|
||||||
entities: pieceOrEditions,
|
entities: pieceOrEditions,
|
||||||
isPiece: this.isPiece(),
|
isPiece: this.isPiece(),
|
||||||
senderName: currentUser.username
|
senderName: currentUser && currentUser.username
|
||||||
});
|
});
|
||||||
|
|
||||||
if (action === 'acl_consign') {
|
if (action === 'acl_consign') {
|
||||||
return (
|
return (
|
||||||
<ConsignForm
|
<ConsignForm
|
||||||
|
autoFocusProperty={autoFocusProperty}
|
||||||
email={email}
|
email={email}
|
||||||
message={formMessage}
|
message={formMessage}
|
||||||
|
labels={labels}
|
||||||
id={this.getFormDataId()}
|
id={this.getFormDataId()}
|
||||||
url={ApiUrls.ownership_consigns}
|
url={ApiUrls.ownership_consigns}
|
||||||
handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
|
handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
|
||||||
|
@ -124,8 +124,18 @@ let Form = React.createClass({
|
|||||||
getFormData() {
|
getFormData() {
|
||||||
let data = {};
|
let data = {};
|
||||||
|
|
||||||
for (let ref in this.refs) {
|
for (let refName in this.refs) {
|
||||||
data[this.refs[ref].props.name] = this.refs[ref].state.value;
|
const ref = this.refs[refName];
|
||||||
|
|
||||||
|
if (ref.state && 'value' in ref.state) {
|
||||||
|
// An input can also provide an `Object` as a value
|
||||||
|
// which we're going to merge with `data` (overwrites)
|
||||||
|
if(ref.state.value && ref.state.value.constructor === Object) {
|
||||||
|
Object.assign(data, ref.state.value);
|
||||||
|
} else {
|
||||||
|
data[ref.props.name] = ref.state.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof this.props.getFormData === 'function') {
|
if (typeof this.props.getFormData === 'function') {
|
||||||
@ -238,7 +248,15 @@ let Form = React.createClass({
|
|||||||
renderChildren() {
|
renderChildren() {
|
||||||
return ReactAddons.Children.map(this.props.children, (child, i) => {
|
return ReactAddons.Children.map(this.props.children, (child, i) => {
|
||||||
if (child) {
|
if (child) {
|
||||||
return ReactAddons.addons.cloneWithProps(child, {
|
// Since refs will be overwritten by this functions return statement,
|
||||||
|
// we still want to be able to define refs for nested `Form` or `Property`
|
||||||
|
// children, which is why we're upfront simply invoking the callback-ref-
|
||||||
|
// function before overwriting it.
|
||||||
|
if(typeof child.ref === 'function' && this.refs[child.props.name]) {
|
||||||
|
child.ref(this.refs[child.props.name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return React.cloneElement(child, {
|
||||||
handleChange: this.handleChangeChild,
|
handleChange: this.handleChangeChild,
|
||||||
ref: child.props.name,
|
ref: child.props.name,
|
||||||
key: i,
|
key: i,
|
||||||
|
@ -6,31 +6,70 @@ import Button from 'react-bootstrap/lib/Button';
|
|||||||
|
|
||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
|
|
||||||
|
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
|
||||||
import InputTextAreaToggable from './input_textarea_toggable';
|
import InputTextAreaToggable from './input_textarea_toggable';
|
||||||
|
|
||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
import { getLangText } from '../../utils/lang_utils.js';
|
|
||||||
import AclInformation from '../ascribe_buttons/acl_information';
|
import AclInformation from '../ascribe_buttons/acl_information';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils.js';
|
||||||
|
|
||||||
let ConsignForm = React.createClass({
|
let ConsignForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
url: React.PropTypes.string,
|
url: React.PropTypes.string,
|
||||||
id: React.PropTypes.object,
|
id: React.PropTypes.object,
|
||||||
|
autoFocusProperty: React.PropTypes.string,
|
||||||
|
email: React.PropTypes.string,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
|
labels: React.PropTypes.object,
|
||||||
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
getFormData(){
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
labels: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
email: this.props.email || ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getFormData() {
|
||||||
return this.props.id;
|
return this.props.id;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleEmailOnChange(event) {
|
||||||
|
// event.target.value is the submitted email of the consignee
|
||||||
|
this.setState({
|
||||||
|
email: event && event.target && event.target.value || ''
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { email } = this.state;
|
||||||
|
const {
|
||||||
|
autoFocusProperty,
|
||||||
|
createPublicContractAgreement,
|
||||||
|
email: defaultEmail,
|
||||||
|
handleSuccess,
|
||||||
|
id,
|
||||||
|
message,
|
||||||
|
labels,
|
||||||
|
url } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
ref='form'
|
ref='form'
|
||||||
url={this.props.url}
|
url={url}
|
||||||
getFormData={this.getFormData}
|
getFormData={this.getFormData}
|
||||||
handleSuccess={this.props.handleSuccess}
|
handleSuccess={handleSuccess}
|
||||||
buttons={
|
buttons={
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
<p className="pull-right">
|
<p className="pull-right">
|
||||||
@ -49,24 +88,39 @@ let ConsignForm = React.createClass({
|
|||||||
</div>}>
|
</div>}>
|
||||||
<AclInformation aim={'form'} verbs={['acl_consign']}/>
|
<AclInformation aim={'form'} verbs={['acl_consign']}/>
|
||||||
<Property
|
<Property
|
||||||
|
autoFocus={autoFocusProperty === 'email'}
|
||||||
name='consignee'
|
name='consignee'
|
||||||
label={getLangText('Email')}>
|
label={labels.email || getLangText('Email')}
|
||||||
|
editable={!defaultEmail}
|
||||||
|
onChange={this.handleEmailOnChange}
|
||||||
|
overrideForm={!!defaultEmail}>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
|
value={email}
|
||||||
placeholder={getLangText('Email of the consignee')}
|
placeholder={getLangText('Email of the consignee')}
|
||||||
required/>
|
required/>
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
|
autoFocus={autoFocusProperty === 'message'}
|
||||||
name='consign_message'
|
name='consign_message'
|
||||||
label={getLangText('Personal Message')}
|
label={labels.message || getLangText('Personal Message')}
|
||||||
editable={true}
|
editable
|
||||||
overrideForm={true}>
|
overrideForm>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required />
|
required />
|
||||||
</Property>
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='contract_agreement'
|
||||||
|
label={getLangText('Consign Contract')}
|
||||||
|
className="ascribe-property-collapsible-toggle"
|
||||||
|
style={{paddingBottom: 0}}>
|
||||||
|
<InputContractAgreementCheckbox
|
||||||
|
createPublicContractAgreement={createPublicContractAgreement}
|
||||||
|
email={email} />
|
||||||
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='password'
|
name='password'
|
||||||
label={getLangText('Password')}>
|
label={getLangText('Password')}>
|
||||||
|
@ -51,9 +51,9 @@ let CreateContractForm = React.createClass({
|
|||||||
this.refs.form.reset();
|
this.refs.form.reset();
|
||||||
},
|
},
|
||||||
|
|
||||||
submitFileName(fileName) {
|
submitFile({ originalName }) {
|
||||||
this.setState({
|
this.setState({
|
||||||
contractName: fileName
|
contractName: originalName
|
||||||
});
|
});
|
||||||
|
|
||||||
this.refs.form.submit();
|
this.refs.form.submit();
|
||||||
@ -69,7 +69,7 @@ let CreateContractForm = React.createClass({
|
|||||||
name="blob"
|
name="blob"
|
||||||
label={getLangText('Contract file (*.pdf only, max. 50MB per contract)')}>
|
label={getLangText('Contract file (*.pdf only, max. 50MB per contract)')}>
|
||||||
<InputFineUploader
|
<InputFineUploader
|
||||||
submitFileName={this.submitFileName}
|
submitFile={this.submitFile}
|
||||||
keyRoutine={{
|
keyRoutine={{
|
||||||
url: AppConstants.serverUrl + 's3/key/',
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
fileClass: 'contract'
|
fileClass: 'contract'
|
||||||
@ -91,14 +91,14 @@ let CreateContractForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='name'
|
name='name'
|
||||||
label={getLangText('Contract name')}
|
label={getLangText('Contract name')}
|
||||||
hidden={true}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={this.state.contractName}/>
|
value={this.state.contractName}/>
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name="is_public"
|
name="is_public"
|
||||||
hidden={true}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
value={this.props.isPublic} />
|
value={this.props.isPublic} />
|
||||||
|
@ -1,33 +1,34 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
import Button from 'react-bootstrap/lib/Button';
|
import Button from 'react-bootstrap/lib/Button';
|
||||||
|
|
||||||
|
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
||||||
|
|
||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
import InputTextAreaToggable from './input_textarea_toggable';
|
|
||||||
import InputDate from './input_date';
|
|
||||||
import InputCheckbox from './input_checkbox';
|
|
||||||
|
|
||||||
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
import InputDate from './input_date';
|
||||||
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
|
import InputTextAreaToggable from './input_textarea_toggable';
|
||||||
|
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
|
||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
|
||||||
import AclInformation from '../ascribe_buttons/acl_information';
|
import AclInformation from '../ascribe_buttons/acl_information';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
|
|
||||||
let LoanForm = React.createClass({
|
let LoanForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
loanHeading: React.PropTypes.string,
|
loanHeading: React.PropTypes.string,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
gallery: React.PropTypes.string,
|
gallery: React.PropTypes.string,
|
||||||
startdate: React.PropTypes.object,
|
startDate: React.PropTypes.object,
|
||||||
enddate: React.PropTypes.object,
|
endDate: React.PropTypes.object,
|
||||||
showPersonalMessage: React.PropTypes.bool,
|
showPersonalMessage: React.PropTypes.bool,
|
||||||
showEndDate: React.PropTypes.bool,
|
showEndDate: React.PropTypes.bool,
|
||||||
showStartDate: React.PropTypes.bool,
|
showStartDate: React.PropTypes.bool,
|
||||||
@ -36,7 +37,11 @@ let LoanForm = React.createClass({
|
|||||||
id: React.PropTypes.object,
|
id: React.PropTypes.object,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
createPublicContractAgreement: React.PropTypes.bool,
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func,
|
||||||
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.object,
|
||||||
|
React.PropTypes.array
|
||||||
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
@ -45,148 +50,33 @@ let LoanForm = React.createClass({
|
|||||||
showPersonalMessage: true,
|
showPersonalMessage: true,
|
||||||
showEndDate: true,
|
showEndDate: true,
|
||||||
showStartDate: true,
|
showStartDate: true,
|
||||||
showPassword: true,
|
showPassword: true
|
||||||
createPublicContractAgreement: true
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return ContractAgreementListStore.getState();
|
return {
|
||||||
},
|
email: this.props.email || ''
|
||||||
|
};
|
||||||
componentDidMount() {
|
|
||||||
ContractAgreementListStore.listen(this.onChange);
|
|
||||||
this.getContractAgreementsOrCreatePublic(this.props.email);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This method needs to be in form_loan as some whitelabel pages (Cyland) load
|
|
||||||
* the loanee's email async!
|
|
||||||
*
|
|
||||||
* SO LEAVE IT IN!
|
|
||||||
*/
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
|
|
||||||
this.getContractAgreementsOrCreatePublic(nextProps.email);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
ContractAgreementListStore.unlisten(this.onChange);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractAgreementsOrCreatePublic(email){
|
handleEmailOnChange(event) {
|
||||||
ContractAgreementListActions.flushContractAgreementList.defer();
|
|
||||||
if (email) {
|
|
||||||
// fetch the available contractagreements (pending/accepted)
|
|
||||||
ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getFormData(){
|
|
||||||
return mergeOptions(
|
|
||||||
this.props.id,
|
|
||||||
this.getContractAgreementId()
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleOnChange(event) {
|
|
||||||
// event.target.value is the submitted email of the loanee
|
// event.target.value is the submitted email of the loanee
|
||||||
if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
|
this.setState({
|
||||||
this.getContractAgreementsOrCreatePublic(event.target.value);
|
email: event && event.target && event.target.value || ''
|
||||||
} else {
|
});
|
||||||
ContractAgreementListActions.flushContractAgreementList();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractAgreementId() {
|
handleReset() {
|
||||||
if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
this.handleEmailOnChange();
|
||||||
return {'contract_agreement_id': this.state.contractAgreementList[0].id};
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractCheckbox() {
|
getFormData() {
|
||||||
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
return this.props.id;
|
||||||
// we need to define a key on the InputCheckboxes as otherwise
|
|
||||||
// react is not rerendering them on a store switch and is keeping
|
|
||||||
// the default value of the component (which is in that case true)
|
|
||||||
let contractAgreement = this.state.contractAgreementList[0];
|
|
||||||
let contract = contractAgreement.contract;
|
|
||||||
|
|
||||||
if(contractAgreement.datetime_accepted) {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
label={getLangText('Loan Contract')}
|
|
||||||
hidden={false}
|
|
||||||
className="notification-contract-pdf">
|
|
||||||
<embed
|
|
||||||
className="loan-form"
|
|
||||||
src={contract.blob.url_safe}
|
|
||||||
alt="pdf"
|
|
||||||
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
|
|
||||||
<a href={contract.blob.url_safe} target="_blank">
|
|
||||||
<span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
|
|
||||||
</a>
|
|
||||||
{/* We still need to send the server information that we're accepting */}
|
|
||||||
<InputCheckbox
|
|
||||||
style={{'display': 'none'}}
|
|
||||||
key="terms_implicitly"
|
|
||||||
defaultChecked={true} />
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
className="ascribe-property-collapsible-toggle"
|
|
||||||
style={{paddingBottom: 0}}>
|
|
||||||
<InputCheckbox
|
|
||||||
key="terms_explicitly"
|
|
||||||
defaultChecked={false}>
|
|
||||||
<span>
|
|
||||||
{getLangText('I agree to the')}
|
|
||||||
<a href={contract.blob.url_safe} target="_blank">
|
|
||||||
{getLangText('terms of ')} {contract.issuer}
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</InputCheckbox>
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
style={{paddingBottom: 0}}
|
|
||||||
hidden={true}>
|
|
||||||
<InputCheckbox
|
|
||||||
key="terms_implicitly"
|
|
||||||
defaultChecked={true} />
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getAppendix() {
|
|
||||||
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
|
||||||
let appendix = this.state.contractAgreementList[0].appendix;
|
|
||||||
if (appendix && appendix.default) {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name='appendix'
|
|
||||||
label={getLangText('Appendix')}>
|
|
||||||
<pre className="ascribe-pre">{appendix.default}</pre>
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getButtons() {
|
getButtons() {
|
||||||
@ -214,14 +104,31 @@ let LoanForm = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { email } = this.state;
|
||||||
|
const {
|
||||||
|
children,
|
||||||
|
createPublicContractAgreement,
|
||||||
|
email: defaultEmail,
|
||||||
|
handleSuccess,
|
||||||
|
gallery,
|
||||||
|
loanHeading,
|
||||||
|
message,
|
||||||
|
showPersonalMessage,
|
||||||
|
endDate,
|
||||||
|
startDate,
|
||||||
|
showEndDate,
|
||||||
|
showStartDate,
|
||||||
|
showPassword,
|
||||||
|
url } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
|
className={classnames({'ascribe-form-bordered': loanHeading})}
|
||||||
ref='form'
|
ref='form'
|
||||||
url={this.props.url}
|
url={url}
|
||||||
getFormData={this.getFormData}
|
getFormData={this.getFormData}
|
||||||
onReset={this.handleOnChange}
|
onReset={this.handleReset}
|
||||||
handleSuccess={this.props.handleSuccess}
|
handleSuccess={handleSuccess}
|
||||||
buttons={this.getButtons()}
|
buttons={this.getButtons()}
|
||||||
spinner={
|
spinner={
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
@ -229,18 +136,18 @@ let LoanForm = React.createClass({
|
|||||||
<AscribeSpinner color='dark-blue' size='md'/>
|
<AscribeSpinner color='dark-blue' size='md'/>
|
||||||
</p>
|
</p>
|
||||||
</div>}>
|
</div>}>
|
||||||
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
|
<div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
|
||||||
<h3>{this.props.loanHeading}</h3>
|
<h3>{loanHeading}</h3>
|
||||||
</div>
|
</div>
|
||||||
<AclInformation aim={'form'} verbs={['acl_loan']}/>
|
<AclInformation aim={'form'} verbs={['acl_loan']}/>
|
||||||
<Property
|
<Property
|
||||||
name='loanee'
|
name='loanee'
|
||||||
label={getLangText('Loanee Email')}
|
label={getLangText('Loanee Email')}
|
||||||
editable={!this.props.email}
|
editable={!defaultEmail}
|
||||||
onChange={this.handleOnChange}
|
onChange={this.handleEmailOnChange}
|
||||||
overrideForm={!!this.props.email}>
|
overrideForm={!!defaultEmail}>
|
||||||
<input
|
<input
|
||||||
value={this.props.email}
|
value={email}
|
||||||
type="email"
|
type="email"
|
||||||
placeholder={getLangText('Email of the loanee')}
|
placeholder={getLangText('Email of the loanee')}
|
||||||
required/>
|
required/>
|
||||||
@ -248,31 +155,31 @@ let LoanForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='gallery'
|
name='gallery'
|
||||||
label={getLangText('Gallery/exhibition (optional)')}
|
label={getLangText('Gallery/exhibition (optional)')}
|
||||||
editable={!this.props.gallery}
|
editable={!gallery}
|
||||||
overrideForm={!!this.props.gallery}>
|
overrideForm={!!gallery}>
|
||||||
<input
|
<input
|
||||||
value={this.props.gallery}
|
value={gallery}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='startdate'
|
name='startdate'
|
||||||
label={getLangText('Start date')}
|
label={getLangText('Start date')}
|
||||||
editable={!this.props.startdate}
|
editable={!startDate}
|
||||||
overrideForm={!!this.props.startdate}
|
overrideForm={!!startDate}
|
||||||
hidden={!this.props.showStartDate}>
|
expanded={showStartDate}>
|
||||||
<InputDate
|
<InputDate
|
||||||
defaultValue={this.props.startdate}
|
defaultValue={startDate}
|
||||||
placeholderText={getLangText('Loan start date')} />
|
placeholderText={getLangText('Loan start date')} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='enddate'
|
name='enddate'
|
||||||
editable={!this.props.enddate}
|
editable={!endDate}
|
||||||
overrideForm={!!this.props.enddate}
|
overrideForm={!!endDate}
|
||||||
label={getLangText('End date')}
|
label={getLangText('End date')}
|
||||||
hidden={!this.props.showEndDate}>
|
expanded={showEndDate}>
|
||||||
<InputDate
|
<InputDate
|
||||||
defaultValue={this.props.enddate}
|
defaultValue={endDate}
|
||||||
placeholderText={getLangText('Loan end date')} />
|
placeholderText={getLangText('Loan end date')} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
@ -280,25 +187,32 @@ let LoanForm = React.createClass({
|
|||||||
label={getLangText('Personal Message')}
|
label={getLangText('Personal Message')}
|
||||||
editable={true}
|
editable={true}
|
||||||
overrideForm={true}
|
overrideForm={true}
|
||||||
hidden={!this.props.showPersonalMessage}>
|
expanded={showPersonalMessage}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required={this.props.showPersonalMessage}/>
|
required={showPersonalMessage}/>
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='contract_agreement'
|
||||||
|
label={getLangText('Loan Contract')}
|
||||||
|
className="ascribe-property-collapsible-toggle"
|
||||||
|
style={{paddingBottom: 0}}>
|
||||||
|
<InputContractAgreementCheckbox
|
||||||
|
createPublicContractAgreement={createPublicContractAgreement}
|
||||||
|
email={email} />
|
||||||
</Property>
|
</Property>
|
||||||
{this.getContractCheckbox()}
|
|
||||||
{this.getAppendix()}
|
|
||||||
<Property
|
<Property
|
||||||
name='password'
|
name='password'
|
||||||
label={getLangText('Password')}
|
label={getLangText('Password')}
|
||||||
hidden={!this.props.showPassword}>
|
expanded={showPassword}>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
placeholder={getLangText('Enter your password')}
|
placeholder={getLangText('Enter your password')}
|
||||||
required={this.props.showPassword ? 'required' : ''}/>
|
required={showPassword}/>
|
||||||
</Property>
|
</Property>
|
||||||
{this.props.children}
|
{children}
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -65,8 +65,8 @@ let LoanRequestAnswerForm = React.createClass({
|
|||||||
url={this.props.url}
|
url={this.props.url}
|
||||||
email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
|
email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
|
||||||
gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
|
gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
|
||||||
startdate={startDate}
|
startDate={startDate}
|
||||||
enddate={endDate}
|
endDate={endDate}
|
||||||
showPassword={true}
|
showPassword={true}
|
||||||
showPersonalMessage={false}
|
showPersonalMessage={false}
|
||||||
handleSuccess={this.props.handleSuccess}/>
|
handleSuccess={this.props.handleSuccess}/>
|
||||||
@ -76,4 +76,4 @@ let LoanRequestAnswerForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default LoanRequestAnswerForm;
|
export default LoanRequestAnswerForm;
|
||||||
|
@ -8,6 +8,8 @@ import UserActions from '../../actions/user_actions';
|
|||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
import InputFineUploader from './input_fineuploader';
|
import InputFineUploader from './input_fineuploader';
|
||||||
|
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
|
||||||
|
import FormSubmitButton from '../ascribe_buttons/form_submit_button';
|
||||||
|
|
||||||
import ApiUrls from '../../constants/api_urls';
|
import ApiUrls from '../../constants/api_urls';
|
||||||
import AppConstants from '../../constants/application_constants';
|
import AppConstants from '../../constants/application_constants';
|
||||||
@ -26,7 +28,7 @@ let RegisterPieceForm = React.createClass({
|
|||||||
isFineUploaderActive: React.PropTypes.bool,
|
isFineUploaderActive: React.PropTypes.bool,
|
||||||
isFineUploaderEditable: React.PropTypes.bool,
|
isFineUploaderEditable: React.PropTypes.bool,
|
||||||
enableLocalHashing: React.PropTypes.bool,
|
enableLocalHashing: React.PropTypes.bool,
|
||||||
onLoggedOut: React.PropTypes.func,
|
enableSeparateThumbnail: React.PropTypes.bool,
|
||||||
|
|
||||||
// For this form to work with SlideContainer, we sometimes have to disable it
|
// For this form to work with SlideContainer, we sometimes have to disable it
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
@ -41,14 +43,15 @@ let RegisterPieceForm = React.createClass({
|
|||||||
return {
|
return {
|
||||||
headerMessage: getLangText('Register your work'),
|
headerMessage: getLangText('Register your work'),
|
||||||
submitMessage: getLangText('Register work'),
|
submitMessage: getLangText('Register work'),
|
||||||
enableLocalHashing: true
|
enableLocalHashing: true,
|
||||||
|
enableSeparateThumbnail: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState(){
|
getInitialState(){
|
||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
{
|
{
|
||||||
isUploadReady: false
|
digitalWorkFile: null
|
||||||
},
|
},
|
||||||
UserStore.getState()
|
UserStore.getState()
|
||||||
);
|
);
|
||||||
@ -67,31 +70,89 @@ let RegisterPieceForm = React.createClass({
|
|||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
setIsUploadReady(isReady) {
|
/**
|
||||||
this.setState({
|
* This method is overloaded so that we can track the ready-state
|
||||||
isUploadReady: isReady
|
* of each uploader in the component
|
||||||
});
|
* @param {string} uploaderKey Name of the uploader's key to track
|
||||||
|
*/
|
||||||
|
setIsUploadReady(uploaderKey) {
|
||||||
|
return (isUploadReady) => {
|
||||||
|
// See documentation of `FormSubmitButton` for more detailed information
|
||||||
|
// on this.
|
||||||
|
this.refs.submitButton.setReadyStateForKey(uploaderKey, isUploadReady);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
handleChangedDigitalWork(digitalWorkFile) {
|
||||||
|
if (digitalWorkFile &&
|
||||||
|
(digitalWorkFile.status === 'deleted' || digitalWorkFile.status === 'canceled')) {
|
||||||
|
this.refs.form.refs.thumbnail_file.reset();
|
||||||
|
|
||||||
|
// Manually we need to set the ready state for `thumbnailKeyReady` back
|
||||||
|
// to `true` as `ReactS3Fineuploader`'s `reset` method triggers
|
||||||
|
// `setIsUploadReady` with `false`
|
||||||
|
this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
|
||||||
|
this.setState({ digitalWorkFile: null });
|
||||||
|
} else {
|
||||||
|
this.setState({ digitalWorkFile });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleChangedThumbnail(thumbnailFile) {
|
||||||
|
const { digitalWorkFile } = this.state;
|
||||||
|
const { fineuploader } = this.refs.digitalWorkFineUploader.refs;
|
||||||
|
|
||||||
|
fineuploader.setThumbnailForFileId(
|
||||||
|
digitalWorkFile.id,
|
||||||
|
// if thumbnail was delete, we delete it from the display as well
|
||||||
|
thumbnailFile.status !== 'deleted' ? thumbnailFile.url : null
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
isThumbnailDialogExpanded() {
|
||||||
|
const { enableSeparateThumbnail } = this.props;
|
||||||
|
const { digitalWorkFile } = this.state;
|
||||||
|
|
||||||
|
if(digitalWorkFile && enableSeparateThumbnail) {
|
||||||
|
const { type: mimeType } = digitalWorkFile;
|
||||||
|
const mimeSubType = mimeType && mimeType.split('/').length ? mimeType.split('/')[1]
|
||||||
|
: 'unknown';
|
||||||
|
return AppConstants.supportedThumbnailFileFormats.indexOf(mimeSubType) === -1;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let currentUser = this.state.currentUser;
|
const { disabled,
|
||||||
let enableLocalHashing = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
|
handleSuccess,
|
||||||
enableLocalHashing = enableLocalHashing && this.props.enableLocalHashing;
|
submitMessage,
|
||||||
|
headerMessage,
|
||||||
|
isFineUploaderActive,
|
||||||
|
isFineUploaderEditable,
|
||||||
|
location,
|
||||||
|
children,
|
||||||
|
enableLocalHashing } = this.props;
|
||||||
|
const { currentUser} = this.state;
|
||||||
|
|
||||||
|
const profileHashLocally = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
|
||||||
|
const hashLocally = profileHashLocally && enableLocalHashing;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
disabled={this.props.disabled}
|
disabled={disabled}
|
||||||
className="ascribe-form-bordered"
|
className="ascribe-form-bordered"
|
||||||
ref='form'
|
ref='form'
|
||||||
url={ApiUrls.pieces_list}
|
url={ApiUrls.pieces_list}
|
||||||
handleSuccess={this.props.handleSuccess}
|
handleSuccess={handleSuccess}
|
||||||
buttons={
|
buttons={
|
||||||
<button
|
<FormSubmitButton
|
||||||
type="submit"
|
ref="submitButton"
|
||||||
className="btn btn-default btn-wide"
|
defaultReadyStates={{
|
||||||
disabled={!this.state.isUploadReady || this.props.disabled}>
|
digitalWorkKeyReady: false,
|
||||||
{this.props.submitMessage}
|
thumbnailKeyReady: true
|
||||||
</button>
|
}}
|
||||||
|
label={submitMessage}/>
|
||||||
}
|
}
|
||||||
spinner={
|
spinner={
|
||||||
<span className="btn btn-default btn-wide btn-spinner">
|
<span className="btn btn-default btn-wide btn-spinner">
|
||||||
@ -99,12 +160,14 @@ let RegisterPieceForm = React.createClass({
|
|||||||
</span>
|
</span>
|
||||||
}>
|
}>
|
||||||
<div className="ascribe-form-header">
|
<div className="ascribe-form-header">
|
||||||
<h3>{this.props.headerMessage}</h3>
|
<h3>{headerMessage}</h3>
|
||||||
</div>
|
</div>
|
||||||
<Property
|
<Property
|
||||||
name="digital_work_key"
|
name="digital_work_key"
|
||||||
ignoreFocus={true}>
|
ignoreFocus={true}
|
||||||
|
label={getLangText('Your Work')}>
|
||||||
<InputFineUploader
|
<InputFineUploader
|
||||||
|
ref={ref => this.refs.digitalWorkFineUploader = ref}
|
||||||
keyRoutine={{
|
keyRoutine={{
|
||||||
url: AppConstants.serverUrl + 's3/key/',
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
fileClass: 'digitalwork'
|
fileClass: 'digitalwork'
|
||||||
@ -113,13 +176,43 @@ let RegisterPieceForm = React.createClass({
|
|||||||
url: ApiUrls.blob_digitalworks
|
url: ApiUrls.blob_digitalworks
|
||||||
}}
|
}}
|
||||||
validation={AppConstants.fineUploader.validation.registerWork}
|
validation={AppConstants.fineUploader.validation.registerWork}
|
||||||
setIsUploadReady={this.setIsUploadReady}
|
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
isFineUploaderActive={this.props.isFineUploaderActive}
|
isFineUploaderActive={isFineUploaderActive}
|
||||||
onLoggedOut={this.props.onLoggedOut}
|
disabled={!isFineUploaderEditable}
|
||||||
disabled={!this.props.isFineUploaderEditable}
|
enableLocalHashing={hashLocally}
|
||||||
|
uploadMethod={location.query.method}
|
||||||
|
handleChangedFile={this.handleChangedDigitalWork}/>
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name="thumbnail_file"
|
||||||
|
expanded={this.isThumbnailDialogExpanded()}>
|
||||||
|
<InputFineUploader
|
||||||
|
ref={ref => this.refs.thumbnailFineUploader = ref}
|
||||||
|
fileInputElement={UploadButton({ className: 'btn btn-secondary btn-sm' })}
|
||||||
|
createBlobRoutine={{
|
||||||
|
url: ApiUrls.blob_thumbnails
|
||||||
|
}}
|
||||||
|
handleChangedFile={this.handleChangedThumbnail}
|
||||||
|
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
|
||||||
|
keyRoutine={{
|
||||||
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
|
fileClass: 'thumbnail'
|
||||||
|
}}
|
||||||
|
validation={{
|
||||||
|
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
|
||||||
|
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
|
||||||
|
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
|
||||||
|
}}
|
||||||
|
setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
|
||||||
|
fileClassToUpload={{
|
||||||
|
singular: getLangText('Select representative image'),
|
||||||
|
plural: getLangText('Select representative images')
|
||||||
|
}}
|
||||||
|
isFineUploaderActive={isFineUploaderActive}
|
||||||
|
disabled={!isFineUploaderEditable}
|
||||||
enableLocalHashing={enableLocalHashing}
|
enableLocalHashing={enableLocalHashing}
|
||||||
uploadMethod={this.props.location.query.method} />
|
uploadMethod={location.query.method} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='artist_name'
|
name='artist_name'
|
||||||
@ -146,7 +239,7 @@ let RegisterPieceForm = React.createClass({
|
|||||||
min={1}
|
min={1}
|
||||||
required/>
|
required/>
|
||||||
</Property>
|
</Property>
|
||||||
{this.props.children}
|
{children}
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,6 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
|
|||||||
|
|
||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
import PropertyCollapsible from './property_collapsible';
|
|
||||||
import InputTextAreaToggable from './input_textarea_toggable';
|
import InputTextAreaToggable from './input_textarea_toggable';
|
||||||
|
|
||||||
import ApiUrls from '../../constants/api_urls';
|
import ApiUrls from '../../constants/api_urls';
|
||||||
@ -21,7 +20,7 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
import { mergeOptions } from '../../utils/general_utils';
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
|
|
||||||
let ContractAgreementForm = React.createClass({
|
let SendContractAgreementForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
},
|
},
|
||||||
@ -55,7 +54,7 @@ let ContractAgreementForm = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleSubmitSuccess() {
|
handleSubmitSuccess() {
|
||||||
let notification = 'Contract agreement send';
|
let notification = 'Contract agreement sent';
|
||||||
notification = new GlobalNotificationModel(notification, 'success', 10000);
|
notification = new GlobalNotificationModel(notification, 'success', 10000);
|
||||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
|
||||||
@ -122,9 +121,10 @@ let ContractAgreementForm = React.createClass({
|
|||||||
required/>
|
required/>
|
||||||
</Property>
|
</Property>
|
||||||
{this.getContracts()}
|
{this.getContracts()}
|
||||||
<PropertyCollapsible
|
<Property
|
||||||
name='appendix'
|
name='appendix'
|
||||||
checkboxLabel={getLangText('Add appendix to the contract')}>
|
checkboxLabel={getLangText('Add appendix to the contract')}
|
||||||
|
expanded={false}>
|
||||||
<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 */}
|
||||||
@ -132,7 +132,7 @@ let ContractAgreementForm = React.createClass({
|
|||||||
rows={1}
|
rows={1}
|
||||||
disabled={false}
|
disabled={false}
|
||||||
placeholder={getLangText('This will be appended to the contract selected above')}/>
|
placeholder={getLangText('This will be appended to the contract selected above')}/>
|
||||||
</PropertyCollapsible>
|
</Property>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -148,4 +148,4 @@ let ContractAgreementForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ContractAgreementForm;
|
export default SendContractAgreementForm;
|
@ -57,7 +57,7 @@ let UnConsignRequestForm = React.createClass({
|
|||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={this.props.message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required="required"/>
|
required />
|
||||||
</Property>
|
</Property>
|
||||||
<hr />
|
<hr />
|
||||||
</Form>
|
</Form>
|
||||||
@ -65,4 +65,4 @@ let UnConsignRequestForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default UnConsignRequestForm;
|
export default UnConsignRequestForm;
|
||||||
|
206
js/components/ascribe_forms/input_contract_agreement_checkbox.js
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react/addons';
|
||||||
|
|
||||||
|
import InputCheckbox from './input_checkbox';
|
||||||
|
|
||||||
|
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
||||||
|
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
import { isEmail } from '../../utils/regex_utils';
|
||||||
|
|
||||||
|
|
||||||
|
const InputContractAgreementCheckbox = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
|
email: React.PropTypes.string,
|
||||||
|
|
||||||
|
required: React.PropTypes.bool,
|
||||||
|
|
||||||
|
// provided by Property
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
onChange: React.PropTypes.func,
|
||||||
|
name: React.PropTypes.string,
|
||||||
|
setExpanded: React.PropTypes.func,
|
||||||
|
|
||||||
|
// can be used to style the component from the outside
|
||||||
|
style: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
createPublicContractAgreement: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return mergeOptions(
|
||||||
|
ContractAgreementListStore.getState(),
|
||||||
|
{
|
||||||
|
value: {
|
||||||
|
terms: null,
|
||||||
|
contract_agreement_id: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
ContractAgreementListStore.listen(this.onStoreChange);
|
||||||
|
this.getContractAgreementsOrCreatePublic(this.props.email);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps({ email: nextEmail }) {
|
||||||
|
if (this.props.email !== nextEmail) {
|
||||||
|
if (isEmail(nextEmail)) {
|
||||||
|
this.getContractAgreementsOrCreatePublic(nextEmail);
|
||||||
|
} else if (this.getContractAgreement()) {
|
||||||
|
ContractAgreementListActions.flushContractAgreementList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
ContractAgreementListStore.unlisten(this.onStoreChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onStoreChange(state) {
|
||||||
|
const contractAgreement = this.getContractAgreement(state.contractAgreementList);
|
||||||
|
|
||||||
|
// If there is no contract available, hide this `Property` from the user
|
||||||
|
this.props.setExpanded(!!contractAgreement);
|
||||||
|
|
||||||
|
state = mergeOptions(state, {
|
||||||
|
value: {
|
||||||
|
// If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
|
||||||
|
// is either:
|
||||||
|
//
|
||||||
|
// - fetching a already existing contract agreement; or
|
||||||
|
// - trying to create a contract agreement
|
||||||
|
//
|
||||||
|
// If both attempts result in `contractAgreement` being not defined,
|
||||||
|
// it means that the receiver hasn't defined a contract, which means
|
||||||
|
// a contract agreement cannot be created, which means we don't have to
|
||||||
|
// specify `contract_agreement_id` when sending a request to the server.
|
||||||
|
contract_agreement_id: contractAgreement ? contractAgreement.id : null,
|
||||||
|
// If the receiver hasn't set a contract or the contract was
|
||||||
|
// previously accepted, we set the terms to `true`
|
||||||
|
// as we always need to at least give a boolean value for `terms`
|
||||||
|
// to the API endpoint
|
||||||
|
terms: !contractAgreement || !!contractAgreement.datetime_accepted
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(event) {
|
||||||
|
// Sync the value between our `InputCheckbox` and this component's `terms`
|
||||||
|
// so the parent `Property` is able to get the correct value of this component
|
||||||
|
// when the `Form` queries it.
|
||||||
|
this.setState({
|
||||||
|
value: React.addons.update(this.state.value, {
|
||||||
|
terms: { $set: event.target.value }
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
// Propagate change events from the checkbox up to the parent `Property`
|
||||||
|
this.props.onChange(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
|
||||||
|
if (contractAgreementList && contractAgreementList.length) {
|
||||||
|
return contractAgreementList[0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractAgreementsOrCreatePublic(email) {
|
||||||
|
ContractAgreementListActions.flushContractAgreementList.defer();
|
||||||
|
|
||||||
|
if (email) {
|
||||||
|
// fetch the available contractagreements (pending/accepted)
|
||||||
|
ContractAgreementListActions.fetchAvailableContractAgreementList(email, this.props.createPublicContractAgreement);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getAppendix() {
|
||||||
|
const contractAgreement = this.getContractAgreement();
|
||||||
|
|
||||||
|
if (contractAgreement &&
|
||||||
|
contractAgreement.appendix &&
|
||||||
|
contractAgreement.appendix.default) {
|
||||||
|
return (
|
||||||
|
<div className="ascribe-property contract-appendix-form">
|
||||||
|
<p><span>{getLangText('Appendix')}</span></p>
|
||||||
|
<pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractCheckbox() {
|
||||||
|
const contractAgreement = this.getContractAgreement();
|
||||||
|
|
||||||
|
if(contractAgreement) {
|
||||||
|
const {
|
||||||
|
datetime_accepted: datetimeAccepted,
|
||||||
|
contract: {
|
||||||
|
issuer: contractIssuer,
|
||||||
|
blob: { url_safe: contractUrl }
|
||||||
|
}
|
||||||
|
} = contractAgreement;
|
||||||
|
|
||||||
|
if(datetimeAccepted) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="notification-contract-pdf"
|
||||||
|
style={{paddingBottom: '1em'}}>
|
||||||
|
<embed
|
||||||
|
className="embed-form"
|
||||||
|
src={contractUrl}
|
||||||
|
alt="pdf"
|
||||||
|
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
|
||||||
|
<a href={contractUrl} target="_blank">
|
||||||
|
<span className="glyphicon glyphicon-download" aria-hidden="true" /> {getLangText('Download contract')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
disabled,
|
||||||
|
style } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<InputCheckbox
|
||||||
|
name={name}
|
||||||
|
disabled={disabled}
|
||||||
|
style={style}
|
||||||
|
onChange={this.onChange}
|
||||||
|
key="terms_explicitly"
|
||||||
|
defaultChecked={false}>
|
||||||
|
<span>
|
||||||
|
{getLangText('I agree to the')}
|
||||||
|
<a href={contractUrl} target="_blank">
|
||||||
|
{getLangText('terms of ')} {contractIssuer}
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</InputCheckbox>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.getContractCheckbox()}
|
||||||
|
{this.getAppendix()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default InputContractAgreementCheckbox;
|
@ -10,13 +10,13 @@ import AppConstants from '../../constants/application_constants';
|
|||||||
import { getCookie } from '../../utils/fetch_api_utils';
|
import { getCookie } from '../../utils/fetch_api_utils';
|
||||||
|
|
||||||
|
|
||||||
const { func, bool, object, shape, string, number, arrayOf } = React.PropTypes;
|
const { func, bool, shape, string, number, arrayOf } = React.PropTypes;
|
||||||
|
|
||||||
const InputFineUploader = React.createClass({
|
const InputFineUploader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
setIsUploadReady: func,
|
setIsUploadReady: func,
|
||||||
isReadyForFormSubmission: func,
|
isReadyForFormSubmission: func,
|
||||||
submitFileName: func,
|
submitFile: func,
|
||||||
fileInputElement: func,
|
fileInputElement: func,
|
||||||
|
|
||||||
areAssetsDownloadable: bool,
|
areAssetsDownloadable: bool,
|
||||||
@ -38,7 +38,6 @@ const InputFineUploader = React.createClass({
|
|||||||
// a user is actually not logged in already to prevent him from droping files
|
// a user is actually not logged in already to prevent him from droping files
|
||||||
// before login in
|
// before login in
|
||||||
isFineUploaderActive: bool,
|
isFineUploaderActive: bool,
|
||||||
onLoggedOut: func,
|
|
||||||
|
|
||||||
enableLocalHashing: bool,
|
enableLocalHashing: bool,
|
||||||
uploadMethod: string,
|
uploadMethod: string,
|
||||||
@ -51,7 +50,11 @@ const InputFineUploader = React.createClass({
|
|||||||
fileClassToUpload: shape({
|
fileClassToUpload: shape({
|
||||||
singular: string,
|
singular: string,
|
||||||
plural: string
|
plural: string
|
||||||
})
|
}),
|
||||||
|
handleChangedFile: func,
|
||||||
|
|
||||||
|
// Provided by `Property`
|
||||||
|
onChange: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
@ -77,8 +80,8 @@ const InputFineUploader = React.createClass({
|
|||||||
this.props.onChange({ target: { value: this.state.value } });
|
this.props.onChange({ target: { value: this.state.value } });
|
||||||
}
|
}
|
||||||
|
|
||||||
if(typeof this.props.submitFileName === 'function') {
|
if(typeof this.props.submitFile === 'function') {
|
||||||
this.props.submitFileName(file.originalName);
|
this.props.submitFile(file);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -94,23 +97,26 @@ const InputFineUploader = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fileInputElement,
|
const {
|
||||||
keyRoutine,
|
areAssetsDownloadable,
|
||||||
createBlobRoutine,
|
enableLocalHashing,
|
||||||
validation,
|
createBlobRoutine,
|
||||||
setIsUploadReady,
|
disabled,
|
||||||
isReadyForFormSubmission,
|
fileClassToUpload,
|
||||||
areAssetsDownloadable,
|
fileInputElement,
|
||||||
onLoggedOut,
|
isFineUploaderActive,
|
||||||
enableLocalHashing,
|
isReadyForFormSubmission,
|
||||||
fileClassToUpload,
|
keyRoutine,
|
||||||
location } = this.props;
|
setIsUploadReady,
|
||||||
let editable = this.props.isFineUploaderActive;
|
uploadMethod,
|
||||||
|
validation,
|
||||||
|
handleChangedFile } = this.props;
|
||||||
|
let editable = isFineUploaderActive;
|
||||||
|
|
||||||
// if disabled is actually set by property, we want to override
|
// if disabled is actually set by property, we want to override
|
||||||
// isFineUploaderActive
|
// isFineUploaderActive
|
||||||
if(typeof this.props.disabled !== 'undefined') {
|
if(typeof disabled !== 'undefined') {
|
||||||
editable = !this.props.disabled;
|
editable = !disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -139,10 +145,10 @@ const InputFineUploader = React.createClass({
|
|||||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onInactive={this.props.onLoggedOut}
|
enableLocalHashing={enableLocalHashing}
|
||||||
enableLocalHashing={this.props.enableLocalHashing}
|
uploadMethod={uploadMethod}
|
||||||
uploadMethod={this.props.uploadMethod}
|
fileClassToUpload={fileClassToUpload}
|
||||||
fileClassToUpload={this.props.fileClassToUpload} />
|
handleChangedFile={handleChangedFile}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -7,6 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
|
|||||||
|
|
||||||
let InputTextAreaToggable = React.createClass({
|
let InputTextAreaToggable = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
autoFocus: React.PropTypes.bool,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
rows: React.PropTypes.number.isRequired,
|
rows: React.PropTypes.number.isRequired,
|
||||||
required: React.PropTypes.bool,
|
required: React.PropTypes.bool,
|
||||||
@ -23,6 +24,10 @@ let InputTextAreaToggable = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
if (this.props.autoFocus) {
|
||||||
|
this.refs.textarea.focus();
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
value: this.props.defaultValue
|
value: this.props.defaultValue
|
||||||
});
|
});
|
||||||
@ -51,6 +56,7 @@ let InputTextAreaToggable = React.createClass({
|
|||||||
className = className + ' ascribe-textarea-editable';
|
className = className + ' ascribe-textarea-editable';
|
||||||
textarea = (
|
textarea = (
|
||||||
<TextareaAutosize
|
<TextareaAutosize
|
||||||
|
ref='textarea'
|
||||||
className={className}
|
className={className}
|
||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
rows={this.props.rows}
|
rows={this.props.rows}
|
||||||
|
@ -10,7 +10,7 @@ let ListRequestActions = React.createClass({
|
|||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
]).isRequired,
|
]).isRequired,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func.isRequired,
|
handleSuccess: React.PropTypes.func.isRequired,
|
||||||
notifications: React.PropTypes.array.isRequired
|
notifications: React.PropTypes.array.isRequired
|
||||||
},
|
},
|
||||||
@ -33,4 +33,4 @@ let ListRequestActions = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ListRequestActions;
|
export default ListRequestActions;
|
||||||
|
@ -3,58 +3,69 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactAddons from 'react/addons';
|
import ReactAddons from 'react/addons';
|
||||||
|
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
import Panel from 'react-bootstrap/lib/Panel';
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
|
||||||
|
|
||||||
import AppConstants from '../../constants/application_constants';
|
import AppConstants from '../../constants/application_constants';
|
||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
|
|
||||||
let Property = React.createClass({
|
const { bool, element, string, oneOfType, func, object, arrayOf } = React.PropTypes;
|
||||||
propTypes: {
|
|
||||||
hidden: React.PropTypes.bool,
|
|
||||||
|
|
||||||
editable: React.PropTypes.bool,
|
const Property = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
editable: bool,
|
||||||
|
|
||||||
// If we want Form to have a different value for disabled as Property has one for
|
// If we want Form to have a different value for disabled as Property has one for
|
||||||
// editable, we need to set overrideForm to true, as it will then override Form's
|
// editable, we need to set overrideForm to true, as it will then override Form's
|
||||||
// disabled value for individual Properties
|
// disabled value for individual Properties
|
||||||
overrideForm: React.PropTypes.bool,
|
overrideForm: bool,
|
||||||
|
|
||||||
tooltip: React.PropTypes.element,
|
label: string,
|
||||||
label: React.PropTypes.string,
|
value: oneOfType([
|
||||||
value: React.PropTypes.oneOfType([
|
string,
|
||||||
React.PropTypes.string,
|
element
|
||||||
React.PropTypes.element
|
|
||||||
]),
|
]),
|
||||||
footer: React.PropTypes.element,
|
footer: element,
|
||||||
handleChange: React.PropTypes.func,
|
handleChange: func,
|
||||||
ignoreFocus: React.PropTypes.bool,
|
ignoreFocus: bool,
|
||||||
name: React.PropTypes.string.isRequired,
|
name: string.isRequired,
|
||||||
className: React.PropTypes.string,
|
className: string,
|
||||||
|
|
||||||
onClick: React.PropTypes.func,
|
onClick: func,
|
||||||
onChange: React.PropTypes.func,
|
onChange: func,
|
||||||
onBlur: React.PropTypes.func,
|
onBlur: func,
|
||||||
|
|
||||||
children: React.PropTypes.oneOfType([
|
children: oneOfType([
|
||||||
React.PropTypes.arrayOf(React.PropTypes.element),
|
arrayOf(element),
|
||||||
React.PropTypes.element
|
element
|
||||||
]),
|
]),
|
||||||
style: React.PropTypes.object
|
style: object,
|
||||||
|
expanded: bool,
|
||||||
|
checkboxLabel: string,
|
||||||
|
autoFocus: bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
editable: true,
|
editable: true,
|
||||||
hidden: false,
|
expanded: true,
|
||||||
className: ''
|
className: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
|
const { expanded, ignoreFocus, checkboxLabel } = this.props;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
// We're mirroring expanded here as a state
|
||||||
|
// React's docs do NOT consider this an antipattern as long as it's
|
||||||
|
// not a "source of truth"-duplication
|
||||||
|
expanded,
|
||||||
|
|
||||||
|
// When a checkboxLabel is defined in the props, we want to set
|
||||||
|
// `ignoreFocus` to true
|
||||||
|
ignoreFocus: ignoreFocus || checkboxLabel,
|
||||||
// Please don't confuse initialValue with react's defaultValue.
|
// Please don't confuse initialValue with react's defaultValue.
|
||||||
// initialValue is set by us to ensure that a user can reset a specific
|
// initialValue is set by us to ensure that a user can reset a specific
|
||||||
// property (after editing) to its initial value
|
// property (after editing) to its initial value
|
||||||
@ -65,9 +76,27 @@ let Property = React.createClass({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps() {
|
componentDidMount() {
|
||||||
|
if(this.props.autoFocus) {
|
||||||
|
this.handleFocus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
let childInput = this.refs.input;
|
let childInput = this.refs.input;
|
||||||
|
|
||||||
|
// For expanded there are actually three use cases:
|
||||||
|
//
|
||||||
|
// 1. Control its value from the outside completely (do not define `checkboxLabel`)
|
||||||
|
// 2. Let it be controlled from the inside (default value can be set though via `expanded`)
|
||||||
|
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
|
||||||
|
// set from the outside as a prop then(!!!))
|
||||||
|
//
|
||||||
|
// This handles case 1. and 3.
|
||||||
|
if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
|
||||||
|
this.setState({ expanded: nextProps.expanded });
|
||||||
|
}
|
||||||
|
|
||||||
// In order to set this.state.value from another component
|
// In order to set this.state.value from another component
|
||||||
// the state of value should only be set if its not undefined and
|
// the state of value should only be set if its not undefined and
|
||||||
// actually references something
|
// actually references something
|
||||||
@ -80,13 +109,13 @@ let Property = React.createClass({
|
|||||||
// from native HTML elements.
|
// from native HTML elements.
|
||||||
// To enable developers to create input elements, they can expose a property called value
|
// To enable developers to create input elements, they can expose a property called value
|
||||||
// in their state that will be picked up by property.js
|
// in their state that will be picked up by property.js
|
||||||
} else if(childInput.state && typeof childInput.state.value !== 'undefined') {
|
} else if(childInput && childInput.state && typeof childInput.state.value !== 'undefined') {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: childInput.state.value
|
value: childInput.state.value
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!this.state.initialValue && childInput.props.defaultValue) {
|
if(!this.state.initialValue && childInput && childInput.props.defaultValue) {
|
||||||
this.setState({
|
this.setState({
|
||||||
initialValue: childInput.props.defaultValue
|
initialValue: childInput.props.defaultValue
|
||||||
});
|
});
|
||||||
@ -138,7 +167,7 @@ let Property = React.createClass({
|
|||||||
handleFocus() {
|
handleFocus() {
|
||||||
// if ignoreFocus (bool) is defined, then just ignore focusing on
|
// if ignoreFocus (bool) is defined, then just ignore focusing on
|
||||||
// the property and input
|
// the property and input
|
||||||
if(this.props.ignoreFocus) {
|
if(this.state.ignoreFocus) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -190,7 +219,7 @@ let Property = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
getClassName() {
|
getClassName() {
|
||||||
if(this.props.hidden){
|
if(!this.state.expanded && !this.props.checkboxLabel){
|
||||||
return 'is-hidden';
|
return 'is-hidden';
|
||||||
}
|
}
|
||||||
if(!this.props.editable){
|
if(!this.props.editable){
|
||||||
@ -206,61 +235,102 @@ let Property = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setExpanded(expanded) {
|
||||||
|
this.setState({ expanded });
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCheckboxToggle() {
|
||||||
|
this.setExpanded(!this.state.expanded);
|
||||||
|
},
|
||||||
|
|
||||||
renderChildren(style) {
|
renderChildren(style) {
|
||||||
return ReactAddons.Children.map(this.props.children, (child) => {
|
// Input's props should only be cloned and propagated down the tree,
|
||||||
return ReactAddons.addons.cloneWithProps(child, {
|
// if the component is actually being shown (!== 'expanded === false')
|
||||||
style,
|
if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
|
||||||
onChange: this.handleChange,
|
return ReactAddons.Children.map(this.props.children, (child) => {
|
||||||
onFocus: this.handleFocus,
|
// Since refs will be overriden by this functions return statement,
|
||||||
onBlur: this.handleBlur,
|
// we still want to be able to define refs for nested `Form` or `Property`
|
||||||
disabled: !this.props.editable,
|
// children, which is why we're upfront simply invoking the callback-ref-
|
||||||
ref: 'input',
|
// function before overriding it.
|
||||||
name: this.props.name
|
if(typeof child.ref === 'function' && this.refs.input) {
|
||||||
|
child.ref(this.refs.input);
|
||||||
|
}
|
||||||
|
|
||||||
|
return React.cloneElement(child, {
|
||||||
|
style,
|
||||||
|
onChange: this.handleChange,
|
||||||
|
onFocus: this.handleFocus,
|
||||||
|
onBlur: this.handleBlur,
|
||||||
|
disabled: !this.props.editable,
|
||||||
|
ref: 'input',
|
||||||
|
name: this.props.name,
|
||||||
|
setExpanded: this.setExpanded
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getLabelAndErrors() {
|
||||||
|
if(this.props.label || this.state.errors) {
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
<span className="pull-left">{this.props.label}</span>
|
||||||
|
<span className="pull-right">{this.state.errors}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getCheckbox() {
|
||||||
|
const { checkboxLabel } = this.props;
|
||||||
|
|
||||||
|
if(checkboxLabel) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="ascribe-property-collapsible-toggle"
|
||||||
|
onClick={this.handleCheckboxToggle}>
|
||||||
|
<input
|
||||||
|
onChange={this.handleCheckboxToggle}
|
||||||
|
type="checkbox"
|
||||||
|
checked={this.state.expanded}
|
||||||
|
ref="checkboxCollapsible"/>
|
||||||
|
<span className="checkbox">{' ' + checkboxLabel}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let footer = null;
|
let footer = null;
|
||||||
let tooltip = <span/>;
|
|
||||||
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
|
|
||||||
|
|
||||||
if(this.props.tooltip){
|
|
||||||
tooltip = (
|
|
||||||
<Tooltip>
|
|
||||||
{this.props.tooltip}
|
|
||||||
</Tooltip>);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.props.footer){
|
if(this.props.footer){
|
||||||
footer = (
|
footer = (
|
||||||
<div className="ascribe-property-footer">
|
<div className="ascribe-property-footer">
|
||||||
{this.props.footer}
|
{this.props.footer}
|
||||||
</div>);
|
</div>
|
||||||
}
|
);
|
||||||
|
|
||||||
if(!this.props.editable) {
|
|
||||||
style.cursor = 'not-allowed';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={'ascribe-property-wrapper ' + this.getClassName()}
|
className={'ascribe-property-wrapper ' + this.getClassName()}
|
||||||
onClick={this.handleFocus}
|
onClick={this.handleFocus}
|
||||||
style={style}>
|
style={this.props.style}>
|
||||||
<OverlayTrigger
|
{this.getCheckbox()}
|
||||||
delay={500}
|
<Panel
|
||||||
placement="top"
|
collapsible
|
||||||
overlay={tooltip}>
|
expanded={this.state.expanded}
|
||||||
|
className="bs-custom-panel">
|
||||||
<div className={'ascribe-property ' + this.props.className}>
|
<div className={'ascribe-property ' + this.props.className}>
|
||||||
<p>
|
{this.getLabelAndErrors()}
|
||||||
<span className="pull-left">{this.props.label}</span>
|
{this.renderChildren(this.props.style)}
|
||||||
<span className="pull-right">{this.state.errors}</span>
|
|
||||||
</p>
|
|
||||||
{this.renderChildren(style)}
|
|
||||||
{footer}
|
{footer}
|
||||||
</div>
|
</div>
|
||||||
</OverlayTrigger>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,96 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import ReactAddons from 'react/addons';
|
|
||||||
|
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
|
||||||
import Panel from 'react-bootstrap/lib/Panel';
|
|
||||||
|
|
||||||
|
|
||||||
let PropertyCollapsile = React.createClass({
|
|
||||||
propTypes: {
|
|
||||||
children: React.PropTypes.arrayOf(React.PropTypes.element),
|
|
||||||
checkboxLabel: React.PropTypes.string,
|
|
||||||
tooltip: React.PropTypes.string
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState() {
|
|
||||||
return {
|
|
||||||
show: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
handleFocus() {
|
|
||||||
this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
|
|
||||||
this.setState({
|
|
||||||
show: this.refs.checkboxCollapsible.getDOMNode().checked
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleChange(event) {
|
|
||||||
this.setState({value: event.target.value});
|
|
||||||
},
|
|
||||||
|
|
||||||
renderChildren() {
|
|
||||||
if(this.state.show) {
|
|
||||||
return ReactAddons.Children.map(this.props.children, (child) => {
|
|
||||||
return ReactAddons.addons.cloneWithProps(child, {
|
|
||||||
onChange: this.handleChange
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
// If the child input is a native HTML element, it will be reset automatically
|
|
||||||
// by the DOM.
|
|
||||||
// However, we need to collapse this component again.
|
|
||||||
this.setState(this.getInitialState());
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let tooltip = <span/>;
|
|
||||||
if (this.props.tooltip){
|
|
||||||
tooltip = (
|
|
||||||
<Tooltip>
|
|
||||||
{this.props.tooltip}
|
|
||||||
</Tooltip>);
|
|
||||||
}
|
|
||||||
|
|
||||||
let style = this.state.show ? {} : {paddingBottom: 0};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={'ascribe-property-wrapper'}
|
|
||||||
style={style}>
|
|
||||||
<OverlayTrigger
|
|
||||||
delay={500}
|
|
||||||
placement="top"
|
|
||||||
overlay={tooltip}>
|
|
||||||
<div
|
|
||||||
className="ascribe-property-collapsible-toggle"
|
|
||||||
onClick={this.handleFocus}
|
|
||||||
onFocus={this.handleFocus}>
|
|
||||||
<input
|
|
||||||
onChange={this.handleChange}
|
|
||||||
type="checkbox"
|
|
||||||
ref="checkboxCollapsible"/>
|
|
||||||
{/* PLEASE LEAVE THE SPACE BETWEEN LABEL and this.props.label */}
|
|
||||||
<span className="checkbox"> {this.props.checkboxLabel}</span>
|
|
||||||
</div>
|
|
||||||
</OverlayTrigger>
|
|
||||||
<Panel
|
|
||||||
collapsible
|
|
||||||
expanded={this.state.show}
|
|
||||||
className="bs-custom-panel">
|
|
||||||
<div className="ascribe-property">
|
|
||||||
{this.renderChildren()}
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default PropertyCollapsile;
|
|
@ -4,77 +4,24 @@ import React from 'react';
|
|||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
import EditionListStore from '../../stores/edition_list_store';
|
|
||||||
import EditionListActions from '../../actions/edition_list_actions';
|
import EditionListActions from '../../actions/edition_list_actions';
|
||||||
|
|
||||||
import UserStore from '../../stores/user_store';
|
|
||||||
import UserActions from '../../actions/user_actions';
|
|
||||||
|
|
||||||
import PieceListStore from '../../stores/piece_list_store';
|
|
||||||
import PieceListActions from '../../actions/piece_list_actions';
|
|
||||||
|
|
||||||
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
|
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
|
||||||
import AclButtonList from '../ascribe_buttons/acl_button_list';
|
|
||||||
import DeleteButton from '../ascribe_buttons/delete_button';
|
|
||||||
|
|
||||||
import { getAvailableAcls } from '../../utils/acl_utils';
|
|
||||||
import { getLangText } from '../../utils/lang_utils.js';
|
import { getLangText } from '../../utils/lang_utils.js';
|
||||||
|
|
||||||
let PieceListBulkModal = React.createClass({
|
let PieceListBulkModal = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
},
|
className: React.PropTypes.string,
|
||||||
|
selectedEditions: React.PropTypes.oneOfType([
|
||||||
getInitialState() {
|
React.PropTypes.object,
|
||||||
return mergeOptions(
|
React.PropTypes.array
|
||||||
EditionListStore.getState(),
|
]),
|
||||||
UserStore.getState(),
|
children: React.PropTypes.oneOfType([
|
||||||
PieceListStore.getState()
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
);
|
React.PropTypes.element
|
||||||
},
|
])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
EditionListStore.listen(this.onChange);
|
|
||||||
UserStore.listen(this.onChange);
|
|
||||||
PieceListStore.listen(this.onChange);
|
|
||||||
|
|
||||||
UserActions.fetchCurrentUser();
|
|
||||||
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
|
||||||
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
EditionListStore.unlisten(this.onChange);
|
|
||||||
PieceListStore.unlisten(this.onChange);
|
|
||||||
UserStore.unlisten(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(state) {
|
|
||||||
this.setState(state);
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchSelectedPieceEditionList() {
|
|
||||||
let filteredPieceIdList = Object.keys(this.state.editionList)
|
|
||||||
.filter((pieceId) => {
|
|
||||||
return this.state.editionList[pieceId]
|
|
||||||
.filter((edition) => edition.selected).length > 0;
|
|
||||||
});
|
|
||||||
return filteredPieceIdList;
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchSelectedEditionList() {
|
|
||||||
let selectedEditionList = [];
|
|
||||||
|
|
||||||
Object
|
|
||||||
.keys(this.state.editionList)
|
|
||||||
.forEach((pieceId) => {
|
|
||||||
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
|
|
||||||
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
|
|
||||||
});
|
|
||||||
|
|
||||||
return selectedEditionList;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clearAllSelections() {
|
clearAllSelections() {
|
||||||
@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
|
|||||||
EditionListActions.closeAllEditionLists();
|
EditionListActions.closeAllEditionLists();
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSuccess() {
|
|
||||||
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
|
||||||
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
|
||||||
|
|
||||||
this.fetchSelectedPieceEditionList()
|
|
||||||
.forEach((pieceId) => {
|
|
||||||
EditionListActions.refreshEditionList({pieceId, filterBy: {}});
|
|
||||||
});
|
|
||||||
EditionListActions.clearAllEditionSelections();
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let selectedEditions = this.fetchSelectedEditionList();
|
if (Object.keys(this.props.availableAcls).length) {
|
||||||
let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
|
|
||||||
|
|
||||||
if(Object.keys(availableAcls).length > 0) {
|
|
||||||
return (
|
return (
|
||||||
<div className={this.props.className}>
|
<div className={this.props.className}>
|
||||||
<div className="row no-margin">
|
<div className="row no-margin">
|
||||||
@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<PieceListBulkModalSelectedEditionsWidget
|
<PieceListBulkModalSelectedEditionsWidget
|
||||||
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
|
numberOfSelectedEditions={this.props.selectedEditions.length} />
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="piece-list-bulk-modal-clear-all"
|
className="piece-list-bulk-modal-clear-all"
|
||||||
@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<div className="row-fluid">
|
<div className="row-fluid">
|
||||||
<AclButtonList
|
{this.props.children}
|
||||||
availableAcls={availableAcls}
|
|
||||||
pieceOrEditions={selectedEditions}
|
|
||||||
handleSuccess={this.handleSuccess}
|
|
||||||
className="text-center ascribe-button-list collapse-group">
|
|
||||||
<DeleteButton
|
|
||||||
handleSuccess={this.handleSuccess}
|
|
||||||
editions={selectedEditions}/>
|
|
||||||
</AclButtonList>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
|
|||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
generateFilterByStatement(param) {
|
generateFilterByStatement(param) {
|
||||||
let filterBy = this.props.filterBy;
|
const filterBy = Object.assign({}, this.props.filterBy);
|
||||||
|
|
||||||
if(filterBy) {
|
if(filterBy) {
|
||||||
// we need hasOwnProperty since the values are all booleans
|
// we need hasOwnProperty since the values are all booleans
|
||||||
@ -56,13 +56,13 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
*/
|
*/
|
||||||
filterBy(param) {
|
filterBy(param) {
|
||||||
return () => {
|
return () => {
|
||||||
let filterBy = this.generateFilterByStatement(param);
|
const filterBy = this.generateFilterByStatement(param);
|
||||||
this.props.applyFilterBy(filterBy);
|
this.props.applyFilterBy(filterBy);
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
isFilterActive() {
|
isFilterActive() {
|
||||||
let trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
|
const trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
|
||||||
|
|
||||||
// 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
|
||||||
@ -74,7 +74,7 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let filterIcon = (
|
const filterIcon = (
|
||||||
<span>
|
<span>
|
||||||
<span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
|
<span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
|
||||||
<span style={this.isFilterActive()}>*</span>
|
<span style={this.isFilterActive()}>*</span>
|
||||||
@ -140,4 +140,4 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default PieceListToolbarFilterWidget;
|
export default PieceListToolbarFilterWidget;
|
||||||
|
@ -55,7 +55,7 @@ let ContractSettingsUpdateButton = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<ReactS3FineUploader
|
<ReactS3FineUploader
|
||||||
fileInputElement={UploadButton}
|
fileInputElement={UploadButton()}
|
||||||
keyRoutine={{
|
keyRoutine={{
|
||||||
url: AppConstants.serverUrl + 's3/key/',
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
fileClass: 'contract'
|
fileClass: 'contract'
|
||||||
|
@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
classNames: React.PropTypes.string,
|
classNames: React.PropTypes.string,
|
||||||
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
|
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||||
color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
|
color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
inline: false,
|
inline: false,
|
||||||
size: 'md',
|
size: 'md'
|
||||||
color: 'loop'
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { classNames: classes, color, size } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={
|
className={classNames('spinner-wrapper-' + size,
|
||||||
classNames('spinner-wrapper-' + this.props.size,
|
color ? 'spinner-wrapper-' + color : null,
|
||||||
'spinner-wrapper-' + this.props.color,
|
classes)}>
|
||||||
this.props.classNames)}>
|
<div className='spinner-circle' />
|
||||||
<div className={classNames('spinner-circle')}></div>
|
<div className='spinner-inner'>A</div>
|
||||||
<div className={classNames('spinner-inner')}>A</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,6 @@ let FileDragAndDrop = React.createClass({
|
|||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onDrop: React.PropTypes.func.isRequired,
|
onDrop: React.PropTypes.func.isRequired,
|
||||||
onDragOver: React.PropTypes.func,
|
onDragOver: React.PropTypes.func,
|
||||||
onInactive: React.PropTypes.func,
|
|
||||||
filesToUpload: React.PropTypes.array,
|
filesToUpload: React.PropTypes.array,
|
||||||
handleDeleteFile: React.PropTypes.func,
|
handleDeleteFile: React.PropTypes.func,
|
||||||
handleCancelFile: React.PropTypes.func,
|
handleCancelFile: React.PropTypes.func,
|
||||||
@ -60,28 +59,21 @@ let FileDragAndDrop = React.createClass({
|
|||||||
handleDrop(event) {
|
handleDrop(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
let files;
|
|
||||||
|
|
||||||
if(this.props.dropzoneInactive) {
|
if (!this.props.dropzoneInactive) {
|
||||||
// if there is a handle function for doing stuff
|
let files;
|
||||||
// when the dropzone is inactive, then call it
|
|
||||||
if(this.props.onInactive) {
|
// handle Drag and Drop
|
||||||
this.props.onInactive();
|
if(event.dataTransfer && event.dataTransfer.files.length > 0) {
|
||||||
|
files = event.dataTransfer.files;
|
||||||
|
} else if(event.target.files) { // handle input type file
|
||||||
|
files = event.target.files;
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle Drag and Drop
|
if(typeof this.props.onDrop === 'function' && files) {
|
||||||
if(event.dataTransfer && event.dataTransfer.files.length > 0) {
|
this.props.onDrop(files);
|
||||||
files = event.dataTransfer.files;
|
}
|
||||||
} else if(event.target.files) { // handle input type file
|
|
||||||
files = event.target.files;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(typeof this.props.onDrop === 'function' && files) {
|
|
||||||
this.props.onDrop(files);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleDeleteFile(fileId) {
|
handleDeleteFile(fileId) {
|
||||||
@ -113,31 +105,25 @@ let FileDragAndDrop = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleOnClick() {
|
handleOnClick() {
|
||||||
let evt;
|
// do not propagate event if the drop zone's inactive,
|
||||||
// when multiple is set to false and the user already uploaded a piece,
|
// for example when multiple is set to false and the user already uploaded a piece
|
||||||
// do not propagate event
|
if (!this.props.dropzoneInactive) {
|
||||||
if(this.props.dropzoneInactive) {
|
let evt;
|
||||||
// if there is a handle function for doing stuff
|
|
||||||
// when the dropzone is inactive, then call it
|
try {
|
||||||
if(this.props.onInactive) {
|
evt = new MouseEvent('click', {
|
||||||
this.props.onInactive();
|
view: window,
|
||||||
|
bubbles: true,
|
||||||
|
cancelable: true
|
||||||
|
});
|
||||||
|
} catch(e) {
|
||||||
|
// For browsers that do not support the new MouseEvent syntax
|
||||||
|
evt = document.createEvent('MouseEvents');
|
||||||
|
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
||||||
evt = new MouseEvent('click', {
|
|
||||||
view: window,
|
|
||||||
bubbles: true,
|
|
||||||
cancelable: true
|
|
||||||
});
|
|
||||||
} catch(e) {
|
|
||||||
// For browsers that do not support the new MouseEvent syntax
|
|
||||||
evt = document.createEvent('MouseEvents');
|
|
||||||
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
@ -5,22 +5,31 @@ import React from 'react';
|
|||||||
import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
|
import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
|
||||||
import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
|
import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
|
||||||
|
|
||||||
|
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
import { getLangText } from '../../../utils/lang_utils';
|
||||||
|
import { truncateTextAtCharIndex } from '../../../utils/general_utils';
|
||||||
|
import { extractFileExtensionFromString } from '../../../utils/file_utils';
|
||||||
|
|
||||||
let FileDragAndDropPreview = React.createClass({
|
|
||||||
|
|
||||||
|
const { shape, string, number, func, bool } = React.PropTypes;
|
||||||
|
|
||||||
|
const FileDragAndDropPreview = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
file: React.PropTypes.shape({
|
file: shape({
|
||||||
url: React.PropTypes.string,
|
url: string,
|
||||||
type: React.PropTypes.string
|
type: string,
|
||||||
|
progress: number,
|
||||||
|
id: number,
|
||||||
|
status: string,
|
||||||
|
s3Url: string,
|
||||||
|
s3UrlSafe: string
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
handleDeleteFile: React.PropTypes.func,
|
handleDeleteFile: func,
|
||||||
handleCancelFile: React.PropTypes.func,
|
handleCancelFile: func,
|
||||||
handlePauseFile: React.PropTypes.func,
|
handlePauseFile: func,
|
||||||
handleResumeFile: React.PropTypes.func,
|
handleResumeFile: func,
|
||||||
areAssetsDownloadable: React.PropTypes.bool,
|
areAssetsDownloadable: bool,
|
||||||
areAssetsEditable: React.PropTypes.bool
|
areAssetsEditable: bool,
|
||||||
|
numberOfDisplayedFiles: number
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleUploadProcess() {
|
toggleUploadProcess() {
|
||||||
@ -32,14 +41,21 @@ let FileDragAndDropPreview = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleDeleteFile() {
|
handleDeleteFile() {
|
||||||
// handleDeleteFile is optional, so if its not submitted,
|
const { handleDeleteFile,
|
||||||
// don't run it
|
handleCancelFile,
|
||||||
// On the other hand, if the files progress is not yet at a 100%,
|
file } = this.props;
|
||||||
// just run fineuploader.cancel
|
// `handleDeleteFile` is optional, so if its not submitted, don't run it
|
||||||
if(this.props.handleDeleteFile && this.props.file.progress === 100) {
|
//
|
||||||
this.props.handleDeleteFile(this.props.file.id);
|
// For delete though, we only want to trigger it, when we're sure that
|
||||||
} else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
|
// the file has *completely* been uploaded to S3 and call now also be
|
||||||
this.props.handleCancelFile(this.props.file.id);
|
// deleted using an HTTP DELETE request.
|
||||||
|
if (handleDeleteFile &&
|
||||||
|
file.progress === 100 &&
|
||||||
|
(file.status === 'upload successful' || file.status === 'online') &&
|
||||||
|
file.s3UrlSafe) {
|
||||||
|
handleDeleteFile(file.id);
|
||||||
|
} else if(handleCancelFile) {
|
||||||
|
handleCancelFile(file.id);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -50,44 +66,80 @@ let FileDragAndDropPreview = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getFileName() {
|
||||||
|
const { numberOfDisplayedFiles, file } = this.props;
|
||||||
|
|
||||||
|
if(numberOfDisplayedFiles === 1) {
|
||||||
|
return (
|
||||||
|
<span className="file-name">
|
||||||
|
{truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getRemoveButton() {
|
||||||
|
if(this.props.areAssetsEditable) {
|
||||||
|
return (
|
||||||
|
<div className="delete-file">
|
||||||
|
<span
|
||||||
|
className="glyphicon glyphicon-remove text-center"
|
||||||
|
aria-hidden="true"
|
||||||
|
title={getLangText('Remove file')}
|
||||||
|
onClick={this.handleDeleteFile}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { file,
|
||||||
|
areAssetsDownloadable,
|
||||||
|
numberOfDisplayedFiles } = this.props;
|
||||||
|
const innerStyle = numberOfDisplayedFiles === 1 ? { verticalAlign: 'middle' } : null;
|
||||||
|
const outerStyle = numberOfDisplayedFiles !== 1 ? { display: 'inline-block' } : null;
|
||||||
|
|
||||||
let previewElement;
|
let previewElement;
|
||||||
let removeBtn;
|
|
||||||
|
|
||||||
// Decide whether an image or a placeholder picture should be displayed
|
// Decide whether an image or a placeholder picture should be displayed
|
||||||
if(this.props.file.type.split('/')[0] === 'image') {
|
// If a file has its `thumbnailUrl` defined, then we display it also as an image
|
||||||
previewElement = (<FileDragAndDropPreviewImage
|
if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
|
||||||
onClick={this.handleDeleteFile}
|
previewElement = (
|
||||||
progress={this.props.file.progress}
|
<FileDragAndDropPreviewImage
|
||||||
url={this.props.file.url}
|
onClick={this.handleDeleteFile}
|
||||||
toggleUploadProcess={this.toggleUploadProcess}
|
progress={file.progress}
|
||||||
areAssetsDownloadable={this.props.areAssetsDownloadable}
|
url={file.thumbnailUrl || file.url}
|
||||||
downloadUrl={this.props.file.s3UrlSafe}/>);
|
toggleUploadProcess={this.toggleUploadProcess}
|
||||||
|
areAssetsDownloadable={areAssetsDownloadable}
|
||||||
|
downloadUrl={file.s3UrlSafe}
|
||||||
|
showProgress={numberOfDisplayedFiles > 1} />
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
previewElement = (<FileDragAndDropPreviewOther
|
previewElement = (
|
||||||
onClick={this.handleDeleteFile}
|
<FileDragAndDropPreviewOther
|
||||||
progress={this.props.file.progress}
|
onClick={this.handleDeleteFile}
|
||||||
type={this.props.file.type.split('/')[1]}
|
progress={file.progress}
|
||||||
toggleUploadProcess={this.toggleUploadProcess}
|
type={file.type.split('/')[1]}
|
||||||
areAssetsDownloadable={this.props.areAssetsDownloadable}
|
toggleUploadProcess={this.toggleUploadProcess}
|
||||||
downloadUrl={this.props.file.s3UrlSafe}/>);
|
areAssetsDownloadable={areAssetsDownloadable}
|
||||||
}
|
downloadUrl={file.s3UrlSafe}
|
||||||
|
showProgress={numberOfDisplayedFiles > 1} />
|
||||||
if(this.props.areAssetsEditable) {
|
);
|
||||||
removeBtn = (<div className="delete-file">
|
|
||||||
<span
|
|
||||||
className="glyphicon glyphicon-remove text-center"
|
|
||||||
aria-hidden="true"
|
|
||||||
title={getLangText('Remove file')}
|
|
||||||
onClick={this.handleDeleteFile}/>
|
|
||||||
</div>);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div style={outerStyle}>
|
||||||
className="file-drag-and-drop-position">
|
<div
|
||||||
{removeBtn}
|
style={innerStyle}
|
||||||
{previewElement}
|
className="file-drag-and-drop-position">
|
||||||
|
{this.getRemoveButton()}
|
||||||
|
{previewElement}
|
||||||
|
</div>
|
||||||
|
{this.getFileName()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -3,16 +3,21 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
||||||
|
|
||||||
|
import AclProxy from '../../acl_proxy';
|
||||||
import AscribeSpinner from '../../ascribe_spinner';
|
import AscribeSpinner from '../../ascribe_spinner';
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
import { getLangText } from '../../../utils/lang_utils';
|
||||||
|
|
||||||
let FileDragAndDropPreviewImage = React.createClass({
|
|
||||||
|
const { number, string, func, bool } = React.PropTypes;
|
||||||
|
|
||||||
|
const FileDragAndDropPreviewImage = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
progress: React.PropTypes.number,
|
progress: number,
|
||||||
url: React.PropTypes.string,
|
url: string,
|
||||||
toggleUploadProcess: React.PropTypes.func,
|
toggleUploadProcess: func,
|
||||||
downloadUrl: React.PropTypes.string,
|
downloadUrl: string,
|
||||||
areAssetsDownloadable: React.PropTypes.bool
|
areAssetsDownloadable: bool,
|
||||||
|
showProgress: bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -33,40 +38,44 @@ let FileDragAndDropPreviewImage = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let imageStyle = {
|
const { url,
|
||||||
backgroundImage: 'url("' + this.props.url + '")',
|
progress,
|
||||||
|
areAssetsDownloadable,
|
||||||
|
downloadUrl,
|
||||||
|
showProgress } = this.props;
|
||||||
|
const imageStyle = {
|
||||||
|
backgroundImage: 'url("' + url + '")',
|
||||||
backgroundSize: 'cover'
|
backgroundSize: 'cover'
|
||||||
};
|
};
|
||||||
|
|
||||||
let actionSymbol;
|
let actionSymbol;
|
||||||
|
|
||||||
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
|
// only if assets are actually downloadable, there should be a download icon if the process is already at
|
||||||
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
|
// 100%. If not, no actionSymbol should be displayed
|
||||||
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
|
if(progress === 100 && areAssetsDownloadable) {
|
||||||
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
|
actionSymbol = <a href={downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
|
||||||
} else if(this.props.progress === 100) {
|
} else if(progress >= 0 && progress < 100) {
|
||||||
|
|
||||||
// only if assets are actually downloadable, there should be a download icon if the process is already at
|
|
||||||
// 100%. If not, no actionSymbol should be displayed
|
|
||||||
if(this.props.areAssetsDownloadable) {
|
|
||||||
actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
actionSymbol = (
|
actionSymbol = (
|
||||||
<div className="spinner-file">
|
<div className="spinner-file">
|
||||||
<AscribeSpinner color='dark-blue' size='md' />
|
<AscribeSpinner color='dark-blue' size='md' />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
actionSymbol = (
|
||||||
|
<span className='ascribe-icon icon-ascribe-ok action-file'/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="file-drag-and-drop-preview-image"
|
className="file-drag-and-drop-preview-image"
|
||||||
style={imageStyle}>
|
style={imageStyle}>
|
||||||
<ProgressBar
|
<AclProxy
|
||||||
now={Math.ceil(this.props.progress)}
|
show={showProgress}>
|
||||||
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
|
<ProgressBar
|
||||||
|
now={Math.ceil(progress)}
|
||||||
|
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
|
||||||
|
</AclProxy>
|
||||||
{actionSymbol}
|
{actionSymbol}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -29,27 +29,25 @@ let FileDragAndDropPreviewIterator = React.createClass({
|
|||||||
areAssetsDownloadable,
|
areAssetsDownloadable,
|
||||||
areAssetsEditable
|
areAssetsEditable
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
files = files.filter(displayValidFilesFilter);
|
files = files.filter(displayValidFilesFilter);
|
||||||
|
|
||||||
if(files && files.length > 0) {
|
if(files && files.length > 0) {
|
||||||
return (
|
return (
|
||||||
<div className="file-drag-and-drop-preview-iterator">
|
<div>
|
||||||
<div className="file-drag-and-drop-preview-iterator-spacing">
|
{files.map((file, i) => {
|
||||||
{files.map((file, i) => {
|
return (
|
||||||
return (
|
<FileDragAndDropPreview
|
||||||
<FileDragAndDropPreview
|
key={i}
|
||||||
key={i}
|
file={file}
|
||||||
file={file}
|
handleDeleteFile={handleDeleteFile}
|
||||||
handleDeleteFile={handleDeleteFile}
|
handleCancelFile={handleCancelFile}
|
||||||
handleCancelFile={handleCancelFile}
|
handlePauseFile={handlePauseFile}
|
||||||
handlePauseFile={handlePauseFile}
|
handleResumeFile={handleResumeFile}
|
||||||
handleResumeFile={handleResumeFile}
|
areAssetsDownloadable={areAssetsDownloadable}
|
||||||
areAssetsDownloadable={areAssetsDownloadable}
|
areAssetsEditable={areAssetsEditable}
|
||||||
areAssetsEditable={areAssetsEditable}/>
|
numberOfDisplayedFiles={files.length}/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
<FileDragAndDropPreviewProgress files={files} />
|
<FileDragAndDropPreviewProgress files={files} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -3,16 +3,21 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
||||||
|
|
||||||
|
import AclProxy from '../../acl_proxy';
|
||||||
import AscribeSpinner from '../../ascribe_spinner';
|
import AscribeSpinner from '../../ascribe_spinner';
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
import { getLangText } from '../../../utils/lang_utils';
|
||||||
|
|
||||||
let FileDragAndDropPreviewOther = React.createClass({
|
|
||||||
|
const { string, number, bool, func } = React.PropTypes;
|
||||||
|
|
||||||
|
const FileDragAndDropPreviewOther = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
type: React.PropTypes.string,
|
type: string,
|
||||||
progress: React.PropTypes.number,
|
progress: number,
|
||||||
areAssetsDownloadable: React.PropTypes.bool,
|
areAssetsDownloadable: bool,
|
||||||
toggleUploadProcess: React.PropTypes.func,
|
toggleUploadProcess: func,
|
||||||
downloadUrl: React.PropTypes.string
|
downloadUrl: string,
|
||||||
|
showProgress: bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -33,39 +38,49 @@ let FileDragAndDropPreviewOther = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { progress,
|
||||||
|
areAssetsDownloadable,
|
||||||
|
downloadUrl,
|
||||||
|
type,
|
||||||
|
showProgress } = this.props;
|
||||||
|
const style = !showProgress ? { visibility: 'hidden' } : null;
|
||||||
let actionSymbol;
|
let actionSymbol;
|
||||||
|
|
||||||
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
|
|
||||||
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
|
|
||||||
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
|
|
||||||
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
|
|
||||||
} else if(this.props.progress === 100) {
|
|
||||||
|
|
||||||
// only if assets are actually downloadable, there should be a download icon if the process is already at
|
// only if assets are actually downloadable, there should be a
|
||||||
// 100%. If not, no actionSymbol should be displayed
|
// download icon if the process is already at 100%.
|
||||||
if(this.props.areAssetsDownloadable) {
|
// If not, no actionSymbol should be displayed
|
||||||
actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
|
if (progress === 100 && areAssetsDownloadable) {
|
||||||
}
|
actionSymbol = (
|
||||||
|
<a
|
||||||
} else {
|
href={downloadUrl}
|
||||||
|
target="_blank"
|
||||||
|
className="glyphicon glyphicon-download action-file"
|
||||||
|
aria-hidden="true"
|
||||||
|
title={getLangText('Download file')}/>
|
||||||
|
);
|
||||||
|
} else if(progress >= 0 && progress < 100) {
|
||||||
actionSymbol = (
|
actionSymbol = (
|
||||||
<div className="spinner-file">
|
<div className="spinner-file">
|
||||||
<AscribeSpinner color='dark-blue' size='md' />
|
<AscribeSpinner color='dark-blue' size='md' />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
actionSymbol = (
|
||||||
|
<span className='ascribe-icon icon-ascribe-ok action-file'/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="file-drag-and-drop-preview">
|
className="file-drag-and-drop-preview">
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
now={Math.ceil(this.props.progress)}
|
now={Math.ceil(progress)}
|
||||||
|
style={style}
|
||||||
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
|
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
|
||||||
<div className="file-drag-and-drop-preview-table-wrapper">
|
<div className="file-drag-and-drop-preview-table-wrapper">
|
||||||
<div className="file-drag-and-drop-preview-other">
|
<div className="file-drag-and-drop-preview-other">
|
||||||
{actionSymbol}
|
{actionSymbol}
|
||||||
<p>{'.' + this.props.type}</p>
|
<p style={style}>{'.' + type}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,10 +5,9 @@ import React from 'react';
|
|||||||
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
||||||
|
|
||||||
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
|
||||||
|
|
||||||
|
|
||||||
let FileDragAndDropPreviewProgress = React.createClass({
|
const FileDragAndDropPreviewProgress = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
files: React.PropTypes.array
|
files: React.PropTypes.array
|
||||||
},
|
},
|
||||||
@ -40,24 +39,18 @@ let FileDragAndDropPreviewProgress = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const files = this.props.files.filter(displayValidProgressFilesFilter);
|
||||||
|
const style = !files.length ? { display: 'none' } : null;
|
||||||
let overallProgress = this.calcOverallProgress();
|
let overallProgress = this.calcOverallProgress();
|
||||||
let overallFileSize = this.calcOverallFileSize();
|
|
||||||
let style = {
|
|
||||||
visibility: 'hidden'
|
|
||||||
};
|
|
||||||
|
|
||||||
// only visible if overallProgress is over zero
|
|
||||||
// or the overallFileSize is greater than 10MB
|
|
||||||
if(overallProgress !== 0 && overallFileSize > 10000000) {
|
|
||||||
style.visibility = 'visible';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ProgressBar
|
<div style={{marginTop: '1.3em'}}>
|
||||||
now={Math.ceil(overallProgress)}
|
<ProgressBar
|
||||||
label={getLangText('Overall progress%s', ': %(percent)s%')}
|
now={Math.ceil(overallProgress)}
|
||||||
className="ascribe-progress-bar"
|
label={'%(percent)s%'}
|
||||||
style={style} />
|
className="ascribe-progress-bar"
|
||||||
|
style={style} />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -2,138 +2,195 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
|
||||||
|
|
||||||
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
import { getLangText } from '../../../utils/lang_utils';
|
||||||
import { truncateTextAtCharIndex } from '../../../utils/general_utils';
|
import { truncateTextAtCharIndex } from '../../../utils/general_utils';
|
||||||
|
|
||||||
const { func, array, bool, shape, string } = React.PropTypes;
|
const { func, array, bool, shape, string } = React.PropTypes;
|
||||||
|
|
||||||
let UploadButton = React.createClass({
|
|
||||||
propTypes: {
|
|
||||||
onDrop: func.isRequired,
|
|
||||||
filesToUpload: array,
|
|
||||||
multiple: bool,
|
|
||||||
|
|
||||||
// For simplification purposes we're just going to use this prop as a
|
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
|
||||||
// label for the upload button
|
return React.createClass({
|
||||||
fileClassToUpload: shape({
|
displayName: 'UploadButton',
|
||||||
singular: string,
|
|
||||||
plural: string
|
|
||||||
}),
|
|
||||||
|
|
||||||
allowedExtensions: string,
|
propTypes: {
|
||||||
|
onDrop: func.isRequired,
|
||||||
|
filesToUpload: array,
|
||||||
|
multiple: bool,
|
||||||
|
|
||||||
handleCancelFile: func // provided by ReactS3FineUploader
|
// For simplification purposes we're just going to use this prop as a
|
||||||
},
|
// label for the upload button
|
||||||
|
fileClassToUpload: shape({
|
||||||
|
singular: string,
|
||||||
|
plural: string
|
||||||
|
}),
|
||||||
|
|
||||||
handleDrop(event) {
|
allowedExtensions: string,
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
let files = event.target.files;
|
|
||||||
|
|
||||||
if(typeof this.props.onDrop === 'function' && files) {
|
// provided by ReactS3FineUploader
|
||||||
this.props.onDrop(files);
|
handleCancelFile: func,
|
||||||
}
|
handleDeleteFile: func
|
||||||
|
},
|
||||||
|
|
||||||
},
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
disabled: this.getUploadingFiles().length !== 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getUploadingFiles() {
|
componentWillReceiveProps(nextProps) {
|
||||||
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
|
if(this.props.filesToUpload !== nextProps.filesToUpload) {
|
||||||
},
|
this.setState({
|
||||||
|
disabled: this.getUploadingFiles(nextProps.filesToUpload).length !== 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
getUploadedFile() {
|
handleDrop(event) {
|
||||||
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
|
event.preventDefault();
|
||||||
},
|
event.stopPropagation();
|
||||||
|
let files = event.target.files;
|
||||||
|
|
||||||
handleOnClick() {
|
if(typeof this.props.onDrop === 'function' && files) {
|
||||||
const uploadingFiles = this.getUploadingFiles();
|
this.props.onDrop(files);
|
||||||
const uploadedFile = this.getUploadedFile();
|
}
|
||||||
|
},
|
||||||
|
|
||||||
if(uploadedFile) {
|
getUploadingFiles(filesToUpload = this.props.filesToUpload) {
|
||||||
this.props.handleCancelFile(uploadedFile.id);
|
return filesToUpload.filter((file) => file.status === 'uploading');
|
||||||
}
|
},
|
||||||
if(uploadingFiles.length === 0) {
|
|
||||||
// We only want the button to be clickable if there are no files currently uploading
|
|
||||||
|
|
||||||
// Firefox only recognizes the simulated mouse click if bubbles is set to true,
|
getUploadedFile() {
|
||||||
// but since Google Chrome propagates the event much further than needed, we
|
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
|
||||||
// need to stop propagation as soon as the event is created
|
},
|
||||||
var evt = new MouseEvent('click', {
|
|
||||||
view: window,
|
|
||||||
bubbles: true,
|
|
||||||
cancelable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
evt.stopPropagation();
|
clearSelection() {
|
||||||
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
|
this.refs.fileSelector.getDOMNode().value = '';
|
||||||
}
|
},
|
||||||
},
|
|
||||||
|
|
||||||
getButtonLabel() {
|
handleOnClick() {
|
||||||
let { filesToUpload, fileClassToUpload } = this.props;
|
if(!this.state.disabled) {
|
||||||
|
let evt;
|
||||||
|
const uploadingFiles = this.getUploadingFiles();
|
||||||
|
const uploadedFile = this.getUploadedFile();
|
||||||
|
|
||||||
// filter invalid files that might have been deleted or canceled...
|
this.clearSelection();
|
||||||
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
if(this.getUploadingFiles().length !== 0) {
|
try {
|
||||||
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
|
evt = new MouseEvent('click', {
|
||||||
} else {
|
view: window,
|
||||||
return fileClassToUpload.singular;
|
bubbles: true,
|
||||||
}
|
cancelable: true
|
||||||
},
|
});
|
||||||
|
} catch(e) {
|
||||||
|
// For browsers that do not support the new MouseEvent syntax
|
||||||
|
evt = document.createEvent('MouseEvents');
|
||||||
|
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
||||||
|
}
|
||||||
|
evt.stopPropagation();
|
||||||
|
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
getUploadedFileLabel() {
|
onClickCancel() {
|
||||||
const uploadedFile = this.getUploadedFile();
|
this.clearSelection();
|
||||||
|
const uploadingFile = this.getUploadingFiles()[0];
|
||||||
|
this.props.handleCancelFile(uploadingFile.id);
|
||||||
|
},
|
||||||
|
|
||||||
if(uploadedFile) {
|
onClickRemove() {
|
||||||
|
this.clearSelection();
|
||||||
|
const uploadedFile = this.getUploadedFile();
|
||||||
|
this.props.handleDeleteFile(uploadedFile.id);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getButtonLabel() {
|
||||||
|
let { filesToUpload, fileClassToUpload } = this.props;
|
||||||
|
|
||||||
|
// filter invalid files that might have been deleted or canceled...
|
||||||
|
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
|
||||||
|
|
||||||
|
if(this.getUploadingFiles().length !== 0) {
|
||||||
|
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
|
||||||
|
} else {
|
||||||
|
return fileClassToUpload.singular;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getUploadedFileLabel() {
|
||||||
|
const uploadedFile = this.getUploadedFile();
|
||||||
|
const uploadingFiles = this.getUploadingFiles();
|
||||||
|
|
||||||
|
if(uploadingFiles.length) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
|
||||||
|
[<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>]
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else if(uploadedFile) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
|
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
|
||||||
|
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<span>{getLangText('No file chosen')}</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
multiple,
|
||||||
|
allowedExtensions } = this.props;
|
||||||
|
const { disabled } = this.state;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* We do not want a button that submits here.
|
||||||
|
* As UploadButton could be used in forms that want to be submitted independent
|
||||||
|
* of clicking the selector.
|
||||||
|
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
|
||||||
|
*/
|
||||||
return (
|
return (
|
||||||
<span>
|
<div className="upload-button-wrapper">
|
||||||
<Glyphicon glyph="ok" />
|
{/*
|
||||||
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
|
The button needs to be of `type="button"` as it would
|
||||||
</span>
|
otherwise submit the form its in.
|
||||||
);
|
*/}
|
||||||
} else {
|
<button
|
||||||
return (
|
type="button"
|
||||||
<span>{getLangText('No file chosen')}</span>
|
onClick={this.handleOnClick}
|
||||||
|
className={className}
|
||||||
|
disabled={disabled}>
|
||||||
|
{this.getButtonLabel()}
|
||||||
|
<input
|
||||||
|
multiple={multiple}
|
||||||
|
ref="fileSelector"
|
||||||
|
type="file"
|
||||||
|
style={{
|
||||||
|
display: 'none',
|
||||||
|
height: 0,
|
||||||
|
width: 0
|
||||||
|
}}
|
||||||
|
onChange={this.handleDrop}
|
||||||
|
accept={allowedExtensions}/>
|
||||||
|
</button>
|
||||||
|
{this.getUploadedFileLabel()}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
});
|
||||||
|
}
|
||||||
render() {
|
|
||||||
let { multiple,
|
|
||||||
allowedExtensions } = this.props;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* We do not want a button that submits here.
|
|
||||||
* As UploadButton could be used in forms that want to be submitted independent
|
|
||||||
* of clicking the selector.
|
|
||||||
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
|
|
||||||
*/
|
|
||||||
return (
|
|
||||||
<div className="upload-button-wrapper">
|
|
||||||
<a
|
|
||||||
onClick={this.handleOnClick}
|
|
||||||
className="btn btn-default btn-sm margin-left-2px"
|
|
||||||
disabled={this.getUploadingFiles().length !== 0}>
|
|
||||||
{this.getButtonLabel()}
|
|
||||||
<input
|
|
||||||
multiple={multiple}
|
|
||||||
ref="fileinput"
|
|
||||||
type="file"
|
|
||||||
style={{
|
|
||||||
display: 'none',
|
|
||||||
height: 0,
|
|
||||||
width: 0
|
|
||||||
}}
|
|
||||||
onChange={this.handleDrop}
|
|
||||||
accept={allowedExtensions}/>
|
|
||||||
</a>
|
|
||||||
{this.getUploadedFileLabel()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default UploadButton;
|
|
@ -18,88 +18,100 @@ import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp }
|
|||||||
import { getCookie } from '../../utils/fetch_api_utils';
|
import { getCookie } from '../../utils/fetch_api_utils';
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let ReactS3FineUploader = React.createClass({
|
|
||||||
|
const { shape,
|
||||||
|
string,
|
||||||
|
oneOfType,
|
||||||
|
number,
|
||||||
|
func,
|
||||||
|
bool,
|
||||||
|
any,
|
||||||
|
object,
|
||||||
|
oneOf,
|
||||||
|
element,
|
||||||
|
arrayOf } = React.PropTypes;
|
||||||
|
|
||||||
|
const ReactS3FineUploader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
keyRoutine: React.PropTypes.shape({
|
keyRoutine: shape({
|
||||||
url: React.PropTypes.string,
|
url: string,
|
||||||
fileClass: React.PropTypes.string,
|
fileClass: string,
|
||||||
pieceId: React.PropTypes.oneOfType([
|
pieceId: oneOfType([
|
||||||
React.PropTypes.string,
|
string,
|
||||||
React.PropTypes.number
|
number
|
||||||
])
|
])
|
||||||
}),
|
}),
|
||||||
createBlobRoutine: React.PropTypes.shape({
|
createBlobRoutine: shape({
|
||||||
url: React.PropTypes.string,
|
url: string,
|
||||||
pieceId: React.PropTypes.oneOfType([
|
pieceId: oneOfType([
|
||||||
React.PropTypes.string,
|
string,
|
||||||
React.PropTypes.number
|
number
|
||||||
])
|
])
|
||||||
}),
|
}),
|
||||||
submitFile: React.PropTypes.func,
|
handleChangedFile: func, // is for when a file is dropped or selected
|
||||||
autoUpload: React.PropTypes.bool,
|
submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
|
||||||
debug: React.PropTypes.bool,
|
autoUpload: bool,
|
||||||
objectProperties: React.PropTypes.shape({
|
debug: bool,
|
||||||
acl: React.PropTypes.string
|
objectProperties: shape({
|
||||||
|
acl: string
|
||||||
}),
|
}),
|
||||||
request: React.PropTypes.shape({
|
request: shape({
|
||||||
endpoint: React.PropTypes.string,
|
endpoint: string,
|
||||||
accessKey: React.PropTypes.string,
|
accessKey: string,
|
||||||
params: React.PropTypes.shape({
|
params: shape({
|
||||||
csrfmiddlewaretoken: React.PropTypes.string
|
csrfmiddlewaretoken: string
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
signature: React.PropTypes.shape({
|
signature: shape({
|
||||||
endpoint: React.PropTypes.string
|
endpoint: string
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
uploadSuccess: React.PropTypes.shape({
|
uploadSuccess: shape({
|
||||||
method: React.PropTypes.string,
|
method: string,
|
||||||
endpoint: React.PropTypes.string,
|
endpoint: string,
|
||||||
params: React.PropTypes.shape({
|
params: shape({
|
||||||
isBrowserPreviewCapable: React.PropTypes.any, // maybe fix this later
|
isBrowserPreviewCapable: any, // maybe fix this later
|
||||||
bitcoin_ID_noPrefix: React.PropTypes.string
|
bitcoin_ID_noPrefix: string
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
cors: React.PropTypes.shape({
|
cors: shape({
|
||||||
expected: React.PropTypes.bool
|
expected: bool
|
||||||
}),
|
}),
|
||||||
chunking: React.PropTypes.shape({
|
chunking: shape({
|
||||||
enabled: React.PropTypes.bool
|
enabled: bool
|
||||||
}),
|
}),
|
||||||
resume: React.PropTypes.shape({
|
resume: shape({
|
||||||
enabled: React.PropTypes.bool
|
enabled: bool
|
||||||
}),
|
}),
|
||||||
deleteFile: React.PropTypes.shape({
|
deleteFile: shape({
|
||||||
enabled: React.PropTypes.bool,
|
enabled: bool,
|
||||||
method: React.PropTypes.string,
|
method: string,
|
||||||
endpoint: React.PropTypes.string,
|
endpoint: string,
|
||||||
customHeaders: React.PropTypes.object
|
customHeaders: object
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
session: React.PropTypes.shape({
|
session: shape({
|
||||||
customHeaders: React.PropTypes.object,
|
customHeaders: object,
|
||||||
endpoint: React.PropTypes.string,
|
endpoint: string,
|
||||||
params: React.PropTypes.object,
|
params: object,
|
||||||
refreshOnRequests: React.PropTypes.bool
|
refreshOnRequests: bool
|
||||||
}),
|
}),
|
||||||
validation: React.PropTypes.shape({
|
validation: shape({
|
||||||
itemLimit: React.PropTypes.number,
|
itemLimit: number,
|
||||||
sizeLimit: React.PropTypes.string,
|
sizeLimit: string,
|
||||||
allowedExtensions: React.PropTypes.arrayOf(React.PropTypes.string)
|
allowedExtensions: arrayOf(string)
|
||||||
}),
|
}),
|
||||||
messages: React.PropTypes.shape({
|
messages: shape({
|
||||||
unsupportedBrowser: React.PropTypes.string
|
unsupportedBrowser: string
|
||||||
}),
|
}),
|
||||||
formatFileName: React.PropTypes.func,
|
formatFileName: func,
|
||||||
multiple: React.PropTypes.bool,
|
multiple: bool,
|
||||||
retry: React.PropTypes.shape({
|
retry: shape({
|
||||||
enableAuto: React.PropTypes.bool
|
enableAuto: bool
|
||||||
}),
|
}),
|
||||||
uploadStarted: React.PropTypes.func,
|
setIsUploadReady: func,
|
||||||
setIsUploadReady: React.PropTypes.func,
|
isReadyForFormSubmission: func,
|
||||||
isReadyForFormSubmission: React.PropTypes.func,
|
areAssetsDownloadable: bool,
|
||||||
areAssetsDownloadable: React.PropTypes.bool,
|
areAssetsEditable: bool,
|
||||||
areAssetsEditable: React.PropTypes.bool,
|
defaultErrorMessage: string,
|
||||||
defaultErrorMessage: React.PropTypes.string,
|
|
||||||
onInactive: React.PropTypes.func,
|
|
||||||
|
|
||||||
// We encountered some cases where people had difficulties to upload their
|
// We encountered some cases where people had difficulties to upload their
|
||||||
// works to ascribe due to a slow internet connection.
|
// works to ascribe due to a slow internet connection.
|
||||||
@ -112,22 +124,22 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
// which should be passed into 'uploadMethod':
|
// which should be passed into 'uploadMethod':
|
||||||
// 'hash': upload using the hash
|
// 'hash': upload using the hash
|
||||||
// 'upload': upload full file (default if not specified)
|
// 'upload': upload full file (default if not specified)
|
||||||
enableLocalHashing: React.PropTypes.bool,
|
enableLocalHashing: bool,
|
||||||
uploadMethod: React.PropTypes.oneOf(['hash', 'upload']),
|
uploadMethod: oneOf(['hash', 'upload']),
|
||||||
|
|
||||||
// A class of a file the user has to upload
|
// A class of a file the user has to upload
|
||||||
// Needs to be defined both in singular as well as in plural
|
// Needs to be defined both in singular as well as in plural
|
||||||
fileClassToUpload: React.PropTypes.shape({
|
fileClassToUpload: shape({
|
||||||
singular: React.PropTypes.string,
|
singular: string,
|
||||||
plural: React.PropTypes.string
|
plural: string
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// Uploading functionality of react fineuploader is disconnected from its UI
|
// Uploading functionality of react fineuploader is disconnected from its UI
|
||||||
// layer, which means that literally every (properly adjusted) react element
|
// layer, which means that literally every (properly adjusted) react element
|
||||||
// can handle the UI handling.
|
// can handle the UI handling.
|
||||||
fileInputElement: React.PropTypes.oneOfType([
|
fileInputElement: oneOfType([
|
||||||
React.PropTypes.func,
|
func,
|
||||||
React.PropTypes.element
|
element
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -273,7 +285,7 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
|
|
||||||
// Cancel uploads and clear previously selected files on the input element
|
// Cancel uploads and clear previously selected files on the input element
|
||||||
cancelUploads(id) {
|
cancelUploads(id) {
|
||||||
!!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
|
typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
|
||||||
|
|
||||||
// Reset the file input element to clear the previously selected files so that
|
// Reset the file input element to clear the previously selected files so that
|
||||||
// the user can reselect them again.
|
// the user can reselect them again.
|
||||||
@ -376,6 +388,21 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setThumbnailForFileId(fileId, url) {
|
||||||
|
const { filesToUpload } = this.state;
|
||||||
|
|
||||||
|
if(fileId < filesToUpload.length) {
|
||||||
|
const changeSet = { $set: url };
|
||||||
|
const newFilesToUpload = React.addons.update(filesToUpload, {
|
||||||
|
[fileId]: { thumbnailUrl: changeSet }
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState({ filesToUpload: newFilesToUpload });
|
||||||
|
} else {
|
||||||
|
throw new Error('Accessing an index out of range of filesToUpload');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/* FineUploader specific callback function handlers */
|
/* FineUploader specific callback function handlers */
|
||||||
|
|
||||||
onUploadChunk(id, name, chunkData) {
|
onUploadChunk(id, name, chunkData) {
|
||||||
@ -510,7 +537,12 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
|
|
||||||
onCancel(id) {
|
onCancel(id) {
|
||||||
// when a upload is canceled, we need to update this components file array
|
// when a upload is canceled, we need to update this components file array
|
||||||
this.setStatusOfFile(id, 'canceled');
|
this.setStatusOfFile(id, 'canceled')
|
||||||
|
.then(() => {
|
||||||
|
if(typeof this.props.handleChangedFile === 'function') {
|
||||||
|
this.props.handleChangedFile(this.state.filesToUpload[id]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
let notification = new GlobalNotificationModel(getLangText('File upload canceled'), 'success', 5000);
|
let notification = new GlobalNotificationModel(getLangText('File upload canceled'), 'success', 5000);
|
||||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
@ -604,7 +636,12 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
//
|
//
|
||||||
// If there is an error during the deletion, we will just change the status back to 'online'
|
// If there is an error during the deletion, we will just change the status back to 'online'
|
||||||
// and display an error message
|
// and display an error message
|
||||||
this.setStatusOfFile(fileId, 'deleted');
|
this.setStatusOfFile(fileId, 'deleted')
|
||||||
|
.then(() => {
|
||||||
|
if(typeof this.props.handleChangedFile === 'function') {
|
||||||
|
this.props.handleChangedFile(this.state.filesToUpload[fileId]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// In some instances (when the file was already uploaded and is just displayed to the user
|
// In some instances (when the file was already uploaded and is just displayed to the user
|
||||||
// - for example in the contract or additional files dialog)
|
// - for example in the contract or additional files dialog)
|
||||||
@ -672,11 +709,6 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
// override standard files list with only valid files
|
// override standard files list with only valid files
|
||||||
files = validFiles;
|
files = validFiles;
|
||||||
|
|
||||||
// Call this method to signal the outside component that an upload is in progress
|
|
||||||
if(typeof this.props.uploadStarted === 'function' && files.length > 0) {
|
|
||||||
this.props.uploadStarted();
|
|
||||||
}
|
|
||||||
|
|
||||||
// if multiple is set to false and user drops multiple files into the dropzone,
|
// if multiple is set to false and user drops multiple files into the dropzone,
|
||||||
// take the first one and notify user that only one file can be submitted
|
// take the first one and notify user that only one file can be submitted
|
||||||
if(!this.props.multiple && files.length > 1) {
|
if(!this.props.multiple && files.length > 1) {
|
||||||
@ -849,21 +881,37 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
// set the new file array
|
// set the new file array
|
||||||
let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: oldAndNewFiles });
|
let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: oldAndNewFiles });
|
||||||
|
|
||||||
this.setState({ filesToUpload });
|
this.setState({ filesToUpload }, () => {
|
||||||
|
// when files have been dropped or selected by a user, we want to propagate that
|
||||||
|
// information to the outside components, so they can act on it (in our case, because
|
||||||
|
// we want the user to define a thumbnail when the actual work is not renderable
|
||||||
|
// (like e.g. a .zip file))
|
||||||
|
if(typeof this.props.handleChangedFile === 'function') {
|
||||||
|
// its save to assume that the last file in `filesToUpload` is always
|
||||||
|
// the latest file added
|
||||||
|
this.props.handleChangedFile(this.state.filesToUpload.slice(-1)[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// This method has been made promise-based to immediately afterwards
|
||||||
|
// call a callback function (instantly after this.setState went through)
|
||||||
|
// This is e.g. needed when showing/hiding the optional thumbnail upload
|
||||||
|
// field in the registration form
|
||||||
setStatusOfFile(fileId, status) {
|
setStatusOfFile(fileId, status) {
|
||||||
let changeSet = {};
|
return Q.Promise((resolve) => {
|
||||||
|
let changeSet = {};
|
||||||
|
|
||||||
if(status === 'deleted' || status === 'canceled') {
|
if(status === 'deleted' || status === 'canceled') {
|
||||||
changeSet.progress = { $set: 0 };
|
changeSet.progress = { $set: 0 };
|
||||||
}
|
}
|
||||||
|
|
||||||
changeSet.status = { $set: status };
|
changeSet.status = { $set: status };
|
||||||
|
|
||||||
let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
|
let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
|
||||||
|
|
||||||
this.setState({ filesToUpload });
|
this.setState({ filesToUpload }, resolve);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
isDropzoneInactive() {
|
isDropzoneInactive() {
|
||||||
@ -891,7 +939,6 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
multiple,
|
multiple,
|
||||||
areAssetsDownloadable,
|
areAssetsDownloadable,
|
||||||
areAssetsEditable,
|
areAssetsEditable,
|
||||||
onInactive,
|
|
||||||
enableLocalHashing,
|
enableLocalHashing,
|
||||||
fileClassToUpload,
|
fileClassToUpload,
|
||||||
fileInputElement: FileInputElement,
|
fileInputElement: FileInputElement,
|
||||||
@ -901,7 +948,6 @@ let ReactS3FineUploader = React.createClass({
|
|||||||
multiple,
|
multiple,
|
||||||
areAssetsDownloadable,
|
areAssetsDownloadable,
|
||||||
areAssetsEditable,
|
areAssetsEditable,
|
||||||
onInactive,
|
|
||||||
enableLocalHashing,
|
enableLocalHashing,
|
||||||
uploadMethod,
|
uploadMethod,
|
||||||
fileClassToUpload,
|
fileClassToUpload,
|
||||||
|
@ -42,6 +42,15 @@ export function displayValidFilesFilter(file) {
|
|||||||
return file.status !== 'deleted' && file.status !== 'canceled';
|
return file.status !== 'deleted' && file.status !== 'canceled';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter function for filtering all files except for deleted and canceled files
|
||||||
|
* @param {object} file A file from filesToUpload that has status as a prop.
|
||||||
|
* @return {boolean}
|
||||||
|
*/
|
||||||
|
export function displayRemovedFilesFilter(file) {
|
||||||
|
return file.status === 'deleted' || file.status === 'canceled';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Filter function for which files to integrate in the progress process
|
* Filter function for which files to integrate in the progress process
|
||||||
|
@ -1,36 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import NotificationStore from '../stores/notification_store';
|
|
||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
|
||||||
|
|
||||||
let ContractNotification = React.createClass({
|
|
||||||
getInitialState() {
|
|
||||||
return mergeOptions(
|
|
||||||
NotificationStore.getState()
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
NotificationStore.listen(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
NotificationStore.unlisten(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(state) {
|
|
||||||
this.setState(state);
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
null
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default ContractNotification;
|
|
@ -6,6 +6,16 @@ import { getLangText } from '../utils/lang_utils';
|
|||||||
|
|
||||||
|
|
||||||
let ErrorNotFoundPage = React.createClass({
|
let ErrorNotFoundPage = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
message: React.PropTypes.string
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
message: getLangText("Oops, the page you are looking for doesn't exist.")
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
@ -13,7 +23,7 @@ let ErrorNotFoundPage = React.createClass({
|
|||||||
<div className="error-wrapper">
|
<div className="error-wrapper">
|
||||||
<h1>404</h1>
|
<h1>404</h1>
|
||||||
<p>
|
<p>
|
||||||
{getLangText('Ups, the page you are looking for does not exist.')}
|
{this.props.message}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import GlobalNotificationActions from '../actions/global_notification_actions';
|
||||||
import GlobalNotificationStore from '../stores/global_notification_store';
|
import GlobalNotificationStore from '../stores/global_notification_store';
|
||||||
|
|
||||||
import Row from 'react-bootstrap/lib/Row';
|
import Row from 'react-bootstrap/lib/Row';
|
||||||
@ -9,14 +11,18 @@ import Col from 'react-bootstrap/lib/Col';
|
|||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
import { mergeOptions } from '../utils/general_utils';
|
||||||
|
|
||||||
|
const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
|
||||||
|
|
||||||
let GlobalNotification = React.createClass({
|
let GlobalNotification = React.createClass({
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
|
const notificationStore = GlobalNotificationStore.getState();
|
||||||
|
|
||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
{
|
{
|
||||||
containerWidth: 0
|
containerWidth: 0
|
||||||
},
|
},
|
||||||
this.extractFirstElem(GlobalNotificationStore.getState().notificationQue)
|
notificationStore
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -36,35 +42,8 @@ let GlobalNotification = React.createClass({
|
|||||||
window.removeEventListener('resize', this.handleContainerResize);
|
window.removeEventListener('resize', this.handleContainerResize);
|
||||||
},
|
},
|
||||||
|
|
||||||
extractFirstElem(l) {
|
|
||||||
if(l.length > 0) {
|
|
||||||
return {
|
|
||||||
show: true,
|
|
||||||
message: l[0]
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
message: ''
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
let notification = this.extractFirstElem(state.notificationQue);
|
this.setState(state);
|
||||||
|
|
||||||
// error handling for notifications
|
|
||||||
if(notification.message && notification.type === 'danger') {
|
|
||||||
console.logGlobal(new Error(notification.message.message));
|
|
||||||
}
|
|
||||||
|
|
||||||
if(notification.show) {
|
|
||||||
this.setState(notification);
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
show: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleContainerResize() {
|
handleContainerResize() {
|
||||||
@ -73,32 +52,31 @@ let GlobalNotification = React.createClass({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
renderNotification() {
|
||||||
let notificationClass = 'ascribe-global-notification';
|
const {
|
||||||
let textClass;
|
notificationQueue: [notification],
|
||||||
|
notificationStatus,
|
||||||
|
notificationsPaused,
|
||||||
|
containerWidth } = this.state;
|
||||||
|
|
||||||
if(this.state.containerWidth > 768) {
|
const notificationClasses = [];
|
||||||
notificationClass = 'ascribe-global-notification-bubble';
|
|
||||||
|
|
||||||
if(this.state.show) {
|
|
||||||
notificationClass += ' ascribe-global-notification-bubble-on';
|
|
||||||
} else {
|
|
||||||
notificationClass += ' ascribe-global-notification-bubble-off';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (this.state.containerWidth > 768) {
|
||||||
|
notificationClasses.push('ascribe-global-notification-bubble');
|
||||||
|
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
|
||||||
|
: 'ascribe-global-notification-bubble-off');
|
||||||
} else {
|
} else {
|
||||||
notificationClass = 'ascribe-global-notification';
|
notificationClasses.push('ascribe-global-notification');
|
||||||
|
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-on'
|
||||||
if(this.state.show) {
|
: 'ascribe-global-notification-off');
|
||||||
notificationClass += ' ascribe-global-notification-on';
|
|
||||||
} else {
|
|
||||||
notificationClass += ' ascribe-global-notification-off';
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.state.message) {
|
let textClass;
|
||||||
switch(this.state.message.type) {
|
let message;
|
||||||
|
if (notification && !notificationsPaused) {
|
||||||
|
message = notification.message;
|
||||||
|
|
||||||
|
switch(notification.type) {
|
||||||
case 'success':
|
case 'success':
|
||||||
textClass = 'ascribe-global-notification-success';
|
textClass = 'ascribe-global-notification-success';
|
||||||
break;
|
break;
|
||||||
@ -106,18 +84,23 @@ let GlobalNotification = React.createClass({
|
|||||||
textClass = 'ascribe-global-notification-danger';
|
textClass = 'ascribe-global-notification-danger';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.warn('Could not find a matching type in global_notification.js');
|
console.warn('Could not find a matching notification type in global_notification.js');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames(...notificationClasses)}>
|
||||||
|
<div className={textClass}>{message}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
return (
|
return (
|
||||||
<div ref="notificationWrapper">
|
<div ref="notificationWrapper">
|
||||||
<Row>
|
<Row>
|
||||||
<Col>
|
<Col>
|
||||||
<div className={notificationClass}>
|
{this.renderNotification()}
|
||||||
<div className={textClass}>{this.state.message.message}</div>
|
|
||||||
</div>
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
@ -125,4 +108,4 @@ let GlobalNotification = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default GlobalNotification;
|
export default GlobalNotification;
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
|
import history from '../history';
|
||||||
|
|
||||||
import Nav from 'react-bootstrap/lib/Nav';
|
import Nav from 'react-bootstrap/lib/Nav';
|
||||||
import Navbar from 'react-bootstrap/lib/Navbar';
|
import Navbar from 'react-bootstrap/lib/Navbar';
|
||||||
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
|
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
|
||||||
@ -58,11 +59,17 @@ let Header = React.createClass({
|
|||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
WhitelabelActions.fetchWhitelabel();
|
WhitelabelActions.fetchWhitelabel();
|
||||||
WhitelabelStore.listen(this.onChange);
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
|
||||||
|
// react-bootstrap 0.25.1 has a bug in which it doesn't
|
||||||
|
// close the mobile expanded navigation after a click by itself.
|
||||||
|
// To get rid of this, we set the state of the component ourselves.
|
||||||
|
history.listen(this.onRouteChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
UserStore.unlisten(this.onChange);
|
UserStore.unlisten(this.onChange);
|
||||||
WhitelabelStore.unlisten(this.onChange);
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
//history.unlisten(this.onRouteChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
getLogo() {
|
getLogo() {
|
||||||
@ -135,6 +142,13 @@ let Header = React.createClass({
|
|||||||
this.refs.dropdownbutton.setDropdownState(false);
|
this.refs.dropdownbutton.setDropdownState(false);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// On route change, close expanded navbar again since react-bootstrap doesn't close
|
||||||
|
// the collapsibleNav by itself on click. setState() isn't available on a ref so
|
||||||
|
// doing this explicitly is the only way for now.
|
||||||
|
onRouteChange() {
|
||||||
|
this.refs.navbar.state.navExpanded = false;
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let account;
|
let account;
|
||||||
let signup;
|
let signup;
|
||||||
@ -201,8 +215,10 @@ let Header = React.createClass({
|
|||||||
<Navbar
|
<Navbar
|
||||||
brand={this.getLogo()}
|
brand={this.getLogo()}
|
||||||
toggleNavKey={0}
|
toggleNavKey={0}
|
||||||
fixedTop={true}>
|
fixedTop={true}
|
||||||
<CollapsibleNav eventKey={0}>
|
ref="navbar">
|
||||||
|
<CollapsibleNav
|
||||||
|
eventKey={0}>
|
||||||
<Nav navbar left>
|
<Nav navbar left>
|
||||||
{this.getPoweredBy()}
|
{this.getPoweredBy()}
|
||||||
</Nav>
|
</Nav>
|
||||||
|
@ -13,6 +13,9 @@ import AccordionList from './ascribe_accordion_list/accordion_list';
|
|||||||
import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
|
import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
|
||||||
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
|
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
|
||||||
|
|
||||||
|
import AclButtonList from './ascribe_buttons/acl_button_list.js';
|
||||||
|
import DeleteButton from './ascribe_buttons/delete_button';
|
||||||
|
|
||||||
import Pagination from './ascribe_pagination/pagination';
|
import Pagination from './ascribe_pagination/pagination';
|
||||||
|
|
||||||
import PieceListFilterDisplay from './piece_list_filter_display';
|
import PieceListFilterDisplay from './piece_list_filter_display';
|
||||||
@ -22,7 +25,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
|
|||||||
|
|
||||||
import AscribeSpinner from './ascribe_spinner';
|
import AscribeSpinner from './ascribe_spinner';
|
||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
import { getAvailableAcls } from '../utils/acl_utils';
|
||||||
|
import { mergeOptions, isShallowEqual } from '../utils/general_utils';
|
||||||
import { getLangText } from '../utils/lang_utils';
|
import { getLangText } from '../utils/lang_utils';
|
||||||
import { setDocumentTitle } from '../utils/dom_utils';
|
import { setDocumentTitle } from '../utils/dom_utils';
|
||||||
|
|
||||||
@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
|
|||||||
let PieceList = React.createClass({
|
let PieceList = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
accordionListItemType: React.PropTypes.func,
|
accordionListItemType: React.PropTypes.func,
|
||||||
|
bulkModalButtonListType: React.PropTypes.func,
|
||||||
|
canLoadPieceList: React.PropTypes.bool,
|
||||||
redirectTo: React.PropTypes.string,
|
redirectTo: React.PropTypes.string,
|
||||||
customSubmitButton: React.PropTypes.element,
|
customSubmitButton: React.PropTypes.element,
|
||||||
|
customThumbnailPlaceholder: React.PropTypes.func,
|
||||||
filterParams: React.PropTypes.array,
|
filterParams: React.PropTypes.array,
|
||||||
orderParams: React.PropTypes.array,
|
orderParams: React.PropTypes.array,
|
||||||
orderBy: React.PropTypes.string,
|
orderBy: React.PropTypes.string,
|
||||||
@ -43,6 +50,8 @@ let PieceList = React.createClass({
|
|||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
accordionListItemType: AccordionListItemWallet,
|
accordionListItemType: AccordionListItemWallet,
|
||||||
|
bulkModalButtonListType: AclButtonList,
|
||||||
|
canLoadPieceList: true,
|
||||||
orderParams: ['artist_name', 'title'],
|
orderParams: ['artist_name', 'title'],
|
||||||
filterParams: [{
|
filterParams: [{
|
||||||
label: getLangText('Show works I can'),
|
label: getLangText('Show works I can'),
|
||||||
@ -54,23 +63,53 @@ let PieceList = React.createClass({
|
|||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return mergeOptions(
|
const pieceListStore = PieceListStore.getState();
|
||||||
PieceListStore.getState(),
|
const stores = mergeOptions(
|
||||||
EditionListStore.getState()
|
pieceListStore,
|
||||||
|
EditionListStore.getState(),
|
||||||
|
{
|
||||||
|
isFilterDirty: false
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Use the default filters but use the pieceListStore's settings if they're available
|
||||||
|
stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
|
||||||
|
|
||||||
|
return stores;
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
let page = this.props.location.query.page || 1;
|
|
||||||
|
|
||||||
PieceListStore.listen(this.onChange);
|
PieceListStore.listen(this.onChange);
|
||||||
EditionListStore.listen(this.onChange);
|
EditionListStore.listen(this.onChange);
|
||||||
|
|
||||||
let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
|
let page = this.props.location.query.page || 1;
|
||||||
if (this.state.pieceList.length === 0 || this.state.page !== page){
|
if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
|
||||||
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
|
this.loadPieceList({ page });
|
||||||
orderBy, this.state.orderAsc, this.state.filterBy);
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
let filterBy;
|
||||||
|
let page = this.props.location.query.page || 1;
|
||||||
|
|
||||||
|
// If the user hasn't changed the filter and the new default filter is different
|
||||||
|
// than the current filter, apply the new default filter
|
||||||
|
if (!this.state.isFilterDirty) {
|
||||||
|
const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
|
||||||
|
|
||||||
|
// Only need to check shallowly since the filterBy shouldn't be nested
|
||||||
|
if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
|
||||||
|
filterBy = newDefaultFilterBy;
|
||||||
|
page = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only load if we are applying a new filter or if it's the first time we can
|
||||||
|
// load the piece list
|
||||||
|
if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
|
||||||
|
this.loadPieceList({ page, filterBy });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -90,14 +129,29 @@ let PieceList = React.createClass({
|
|||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getDefaultFilterBy(props = this.props) {
|
||||||
|
const { filterParams } = props;
|
||||||
|
const defaultFilterBy = {};
|
||||||
|
|
||||||
|
if (filterParams && typeof filterParams.forEach === 'function') {
|
||||||
|
filterParams.forEach(({ items }) => {
|
||||||
|
items.forEach((item) => {
|
||||||
|
if (typeof item === 'object' && item.defaultValue) {
|
||||||
|
defaultFilterBy[item.key] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultFilterBy;
|
||||||
|
},
|
||||||
|
|
||||||
paginationGoToPage(page) {
|
paginationGoToPage(page) {
|
||||||
return () => {
|
return () => {
|
||||||
// if the users clicks a pager of the pagination,
|
// if the users clicks a pager of the pagination,
|
||||||
// the site should go to the top
|
// the site should go to the top
|
||||||
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
||||||
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
|
this.loadPieceList({ page });
|
||||||
this.state.orderBy, this.state.orderAsc,
|
|
||||||
this.state.filterBy);
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -116,31 +170,35 @@ let PieceList = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
searchFor(searchTerm) {
|
searchFor(searchTerm) {
|
||||||
PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
|
this.loadPieceList({
|
||||||
this.state.orderAsc, this.state.filterBy);
|
page: 1,
|
||||||
this.history.pushState(null, this.props.location.pathname, {page: 1});
|
search: searchTerm
|
||||||
|
});
|
||||||
|
this.history.pushState(null, this.props.location.pathname, {page: 1});
|
||||||
},
|
},
|
||||||
|
|
||||||
applyFilterBy(filterBy){
|
applyFilterBy(filterBy){
|
||||||
|
this.setState({
|
||||||
|
isFilterDirty: true
|
||||||
|
});
|
||||||
|
|
||||||
// first we need to apply the filter on the piece list
|
// first we need to apply the filter on the piece list
|
||||||
PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
|
this
|
||||||
this.state.orderBy, this.state.orderAsc, filterBy)
|
.loadPieceList({ page: 1, filterBy })
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// but also, we need to filter all the open edition lists
|
// but also, we need to filter all the open edition lists
|
||||||
this.state.pieceList
|
this.state.pieceList
|
||||||
.forEach((piece) => {
|
.forEach((piece) => {
|
||||||
// but only if they're actually open
|
// but only if they're actually open
|
||||||
const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id];
|
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
|
||||||
|
EditionListActions.refreshEditionList({
|
||||||
|
pieceId: piece.id,
|
||||||
|
filterBy
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) {
|
});
|
||||||
EditionListActions.refreshEditionList({
|
});
|
||||||
pieceId: piece.id,
|
|
||||||
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
|
||||||
@ -152,35 +210,97 @@ let PieceList = React.createClass({
|
|||||||
orderBy, this.state.orderAsc, this.state.filterBy);
|
orderBy, this.state.orderAsc, this.state.filterBy);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
|
||||||
|
const orderBy = this.state.orderBy || this.props.orderBy;
|
||||||
|
|
||||||
|
return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
|
||||||
|
orderBy, this.state.orderAsc, filterBy);
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchSelectedPieceEditionList() {
|
||||||
|
let filteredPieceIdList = Object.keys(this.state.editionList)
|
||||||
|
.filter((pieceId) => {
|
||||||
|
return this.state.editionList[pieceId]
|
||||||
|
.filter((edition) => edition.selected).length > 0;
|
||||||
|
});
|
||||||
|
return filteredPieceIdList;
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchSelectedEditionList() {
|
||||||
|
let selectedEditionList = [];
|
||||||
|
|
||||||
|
Object
|
||||||
|
.keys(this.state.editionList)
|
||||||
|
.forEach((pieceId) => {
|
||||||
|
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
|
||||||
|
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
|
||||||
|
});
|
||||||
|
|
||||||
|
return selectedEditionList;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAclSuccess() {
|
||||||
|
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
||||||
|
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
||||||
|
|
||||||
|
this.fetchSelectedPieceEditionList()
|
||||||
|
.forEach((pieceId) => {
|
||||||
|
EditionListActions.refreshEditionList({pieceId});
|
||||||
|
});
|
||||||
|
EditionListActions.clearAllEditionSelections();
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
|
const {
|
||||||
let AccordionListItemType = this.props.accordionListItemType;
|
accordionListItemType: AccordionListItemType,
|
||||||
|
bulkModalButtonListType: BulkModalButtonListType,
|
||||||
|
customSubmitButton,
|
||||||
|
customThumbnailPlaceholder,
|
||||||
|
filterParams,
|
||||||
|
orderParams } = this.props;
|
||||||
|
|
||||||
|
const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
|
||||||
|
|
||||||
|
const selectedEditions = this.fetchSelectedEditionList();
|
||||||
|
const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
|
||||||
|
|
||||||
setDocumentTitle(getLangText('Collection'));
|
setDocumentTitle(getLangText('Collection'));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PieceListToolbar
|
<PieceListToolbar
|
||||||
className="ascribe-piece-list-toolbar"
|
className="ascribe-piece-list-toolbar"
|
||||||
searchFor={this.searchFor}
|
searchFor={this.searchFor}
|
||||||
searchQuery={this.state.search}
|
searchQuery={this.state.search}
|
||||||
filterParams={this.props.filterParams}
|
filterParams={filterParams}
|
||||||
orderParams={this.props.orderParams}
|
orderParams={orderParams}
|
||||||
filterBy={this.state.filterBy}
|
filterBy={this.state.filterBy}
|
||||||
orderBy={this.state.orderBy}
|
orderBy={this.state.orderBy}
|
||||||
applyFilterBy={this.applyFilterBy}
|
applyFilterBy={this.applyFilterBy}
|
||||||
applyOrderBy={this.applyOrderBy}>
|
applyOrderBy={this.applyOrderBy}>
|
||||||
{this.props.customSubmitButton ?
|
{customSubmitButton ?
|
||||||
this.props.customSubmitButton :
|
customSubmitButton :
|
||||||
<button className="btn btn-default btn-ascribe-add">
|
<button className="btn btn-default btn-ascribe-add">
|
||||||
<span className="icon-ascribe icon-ascribe-add" />
|
<span className="icon-ascribe icon-ascribe-add" />
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
</PieceListToolbar>
|
</PieceListToolbar>
|
||||||
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
|
<PieceListBulkModal
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
selectedEditions={selectedEditions}
|
||||||
|
className="ascribe-piece-list-bulk-modal">
|
||||||
|
<BulkModalButtonListType
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
pieceOrEditions={selectedEditions}
|
||||||
|
handleSuccess={this.handleAclSuccess}
|
||||||
|
className="text-center ascribe-button-list collapse-group">
|
||||||
|
<DeleteButton
|
||||||
|
handleSuccess={this.handleAclSuccess}
|
||||||
|
editions={selectedEditions}/>
|
||||||
|
</BulkModalButtonListType>
|
||||||
|
</PieceListBulkModal>
|
||||||
<PieceListFilterDisplay
|
<PieceListFilterDisplay
|
||||||
filterBy={this.state.filterBy}
|
filterBy={this.state.filterBy}
|
||||||
filterParams={this.props.filterParams}/>
|
filterParams={filterParams}/>
|
||||||
<AccordionList
|
<AccordionList
|
||||||
className="ascribe-accordion-list"
|
className="ascribe-accordion-list"
|
||||||
changeOrder={this.accordionChangeOrder}
|
changeOrder={this.accordionChangeOrder}
|
||||||
@ -198,6 +318,7 @@ let PieceList = React.createClass({
|
|||||||
<AccordionListItemType
|
<AccordionListItemType
|
||||||
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
|
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
|
||||||
content={piece}
|
content={piece}
|
||||||
|
thumbnailPlaceholder={customThumbnailPlaceholder}
|
||||||
key={i}>
|
key={i}>
|
||||||
<AccordionListItemTableEditions
|
<AccordionListItemTableEditions
|
||||||
className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
|
className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
|
||||||
|
@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { filterBy } = this.props;
|
let { filterBy } = this.props;
|
||||||
let filtersWithLabel = this.transformFilterParamsItemsToBools();
|
|
||||||
|
|
||||||
// do not show the FilterDisplay if there are no filters applied
|
// do not show the FilterDisplay if there are no filters applied
|
||||||
if(filterBy && Object.keys(filterBy).length === 0) {
|
if(filterBy && Object.keys(filterBy).length === 0) {
|
||||||
return null;
|
return null;
|
||||||
} else {
|
} else {
|
||||||
|
const filtersWithLabel = this.transformFilterParamsItemsToBools();
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
<div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
||||||
|
@ -17,7 +17,7 @@ import UserStore from '../stores/user_store';
|
|||||||
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';
|
||||||
|
|
||||||
import PropertyCollapsible from './ascribe_forms/property_collapsible';
|
import Property from './ascribe_forms/property';
|
||||||
import RegisterPieceForm from './ascribe_forms/form_register_piece';
|
import RegisterPieceForm from './ascribe_forms/form_register_piece';
|
||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
import { mergeOptions } from '../utils/general_utils';
|
||||||
@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
|
|||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
UserStore.getState(),
|
UserStore.getState(),
|
||||||
WhitelabelStore.getState(),
|
WhitelabelStore.getState(),
|
||||||
PieceListStore.getState(),
|
PieceListStore.getState()
|
||||||
{
|
);
|
||||||
selectedLicense: 0,
|
|
||||||
isFineUploaderActive: false
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
|
|||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
|
|
||||||
if(this.state.currentUser && this.state.currentUser.email) {
|
|
||||||
// we should also make the fineuploader component editable again
|
|
||||||
this.setState({
|
|
||||||
isFineUploaderActive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSuccess(response){
|
handleSuccess(response){
|
||||||
@ -96,15 +86,16 @@ let RegisterPiece = React.createClass( {
|
|||||||
getSpecifyEditions() {
|
getSpecifyEditions() {
|
||||||
if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
|
if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
|
||||||
return (
|
return (
|
||||||
<PropertyCollapsible
|
<Property
|
||||||
name="num_editions"
|
name="num_editions"
|
||||||
checkboxLabel={getLangText('Specify editions')}>
|
checkboxLabel={getLangText('Specify editions')}
|
||||||
|
expanded={false}>
|
||||||
<span>{getLangText('Editions')}</span>
|
<span>{getLangText('Editions')}</span>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
placeholder="(e.g. 32)"
|
placeholder="(e.g. 32)"
|
||||||
min={0}/>
|
min={0}/>
|
||||||
</PropertyCollapsible>
|
</Property>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -117,7 +108,7 @@ let RegisterPiece = React.createClass( {
|
|||||||
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
<RegisterPieceForm
|
<RegisterPieceForm
|
||||||
{...this.props}
|
{...this.props}
|
||||||
isFineUploaderActive={this.state.isFineUploaderActive}
|
isFineUploaderActive={true}
|
||||||
handleSuccess={this.handleSuccess}
|
handleSuccess={this.handleSuccess}
|
||||||
location={this.props.location}>
|
location={this.props.location}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
@ -253,7 +253,7 @@ const PRRegisterPieceForm = React.createClass({
|
|||||||
name="digitalWorkKey"
|
name="digitalWorkKey"
|
||||||
label={getLangText('Select the PDF with your work')}>
|
label={getLangText('Select the PDF with your work')}>
|
||||||
<InputFineuploader
|
<InputFineuploader
|
||||||
fileInputElement={UploadButton}
|
fileInputElement={UploadButton()}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
|
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
|
||||||
createBlobRoutine={{
|
createBlobRoutine={{
|
||||||
@ -279,7 +279,7 @@ const PRRegisterPieceForm = React.createClass({
|
|||||||
name="thumbnailKey"
|
name="thumbnailKey"
|
||||||
label={getLangText('Featured Cover photo')}>
|
label={getLangText('Featured Cover photo')}>
|
||||||
<InputFineuploader
|
<InputFineuploader
|
||||||
fileInputElement={UploadButton}
|
fileInputElement={UploadButton()}
|
||||||
createBlobRoutine={{
|
createBlobRoutine={{
|
||||||
url: ApiUrls.blob_thumbnails
|
url: ApiUrls.blob_thumbnails
|
||||||
}}
|
}}
|
||||||
@ -305,7 +305,7 @@ const PRRegisterPieceForm = React.createClass({
|
|||||||
name="supportingMaterials"
|
name="supportingMaterials"
|
||||||
label={getLangText('Supporting Materials (Optional)')}>
|
label={getLangText('Supporting Materials (Optional)')}>
|
||||||
<InputFineuploader
|
<InputFineuploader
|
||||||
fileInputElement={UploadButton}
|
fileInputElement={UploadButton()}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
|
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
|
||||||
createBlobRoutine={this.getCreateBlobRoutine()}
|
createBlobRoutine={this.getCreateBlobRoutine()}
|
||||||
@ -327,7 +327,7 @@ const PRRegisterPieceForm = React.createClass({
|
|||||||
name="proofOfPayment"
|
name="proofOfPayment"
|
||||||
label={getLangText('Proof of payment')}>
|
label={getLangText('Proof of payment')}>
|
||||||
<InputFineuploader
|
<InputFineuploader
|
||||||
fileInputElement={UploadButton}
|
fileInputElement={UploadButton()}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
|
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
|
||||||
createBlobRoutine={this.getCreateBlobRoutine()}
|
createBlobRoutine={this.getCreateBlobRoutine()}
|
||||||
|
@ -8,6 +8,7 @@ import PieceSubmitToPrizeForm from '../../../../../ascribe_forms/form_submit_to_
|
|||||||
|
|
||||||
import { getLangText } from '../../../../../../utils/lang_utils';
|
import { getLangText } from '../../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let SubmitToPrizeButton = React.createClass({
|
let SubmitToPrizeButton = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
@ -21,8 +22,8 @@ let SubmitToPrizeButton = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Submitted to prize') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -51,8 +51,7 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
|
|||||||
*/
|
*/
|
||||||
let PieceContainer = React.createClass({
|
let PieceContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
params: React.PropTypes.object,
|
params: React.PropTypes.object
|
||||||
location: React.PropTypes.object
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -111,7 +110,7 @@ let PieceContainer = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if(this.state.piece && this.state.piece.title) {
|
if(this.state.piece && this.state.piece.id) {
|
||||||
/*
|
/*
|
||||||
|
|
||||||
This really needs a refactor!
|
This really needs a refactor!
|
||||||
@ -162,7 +161,7 @@ let PieceContainer = React.createClass({
|
|||||||
piece={this.state.piece}
|
piece={this.state.piece}
|
||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
}>
|
}>
|
||||||
<PrizePieceDetails piece={this.state.piece} location={this.props.location}/>
|
<PrizePieceDetails piece={this.state.piece} />
|
||||||
</Piece>
|
</Piece>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
@ -292,8 +291,8 @@ let PrizePieceRatings = React.createClass({
|
|||||||
url={ApiUrls.ownership_loans_pieces_request}
|
url={ApiUrls.ownership_loans_pieces_request}
|
||||||
email={this.props.currentUser.email}
|
email={this.props.currentUser.email}
|
||||||
gallery={this.props.piece.prize.name}
|
gallery={this.props.piece.prize.name}
|
||||||
startdate={today}
|
startDate={today}
|
||||||
enddate={endDate}
|
endDate={endDate}
|
||||||
showPersonalMessage={true}
|
showPersonalMessage={true}
|
||||||
showPassword={false}
|
showPassword={false}
|
||||||
handleSuccess={this.handleLoanSuccess} />
|
handleSuccess={this.handleLoanSuccess} />
|
||||||
@ -426,8 +425,7 @@ let PrizePieceRatings = React.createClass({
|
|||||||
|
|
||||||
let PrizePieceDetails = React.createClass({
|
let PrizePieceDetails = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
piece: React.PropTypes.object,
|
piece: React.PropTypes.object
|
||||||
location: React.PropTypes.object
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -464,8 +462,7 @@ let PrizePieceDetails = React.createClass({
|
|||||||
overrideForm={true}
|
overrideForm={true}
|
||||||
pieceId={this.props.piece.id}
|
pieceId={this.props.piece.id}
|
||||||
otherData={this.props.piece.other_data}
|
otherData={this.props.piece.other_data}
|
||||||
multiple={true}
|
multiple={true} />
|
||||||
location={location}/>
|
|
||||||
</Form>
|
</Form>
|
||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
);
|
);
|
||||||
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
let Vivi23AccordionListItemThumbnailPlaceholder = React.createClass({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span className="ascribe-thumbnail-placeholder">
|
||||||
|
23
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Vivi23AccordionListItemThumbnailPlaceholder;
|