edition detail updated with forms

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -18,6 +18,12 @@ const CollapsibleParagraph = React.createClass({
         iconName: React.PropTypes.string
     },
 
+    getDefaultProps() {
+        return {
+            show: true
+        };
+    },
+
     mixins: [CollapsibleMixin],
 
     getCollapsibleDOMNode(){
@@ -35,12 +41,13 @@ const CollapsibleParagraph = React.createClass({
 
     render() {
         let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? '-' : '+';
+        let text = this.isExpanded() ? '[hide]' : '[show]';
+        if(this.props.show) {
             return (
                 <div className="ascribe-detail-header">
                     <div className="ascribe-edition-collapsible-wrapper">
                         <div onClick={this.handleToggle}>
-                        <span>{text} {this.props.title} </span>
+                            <span>{this.props.title}</span><span className="pull-right">{text}</span>
                         </div>
                         <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
                             {this.props.children}
@@ -48,6 +55,9 @@ const CollapsibleParagraph = React.createClass({
                     </div>
                 </div>
             );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/ascribe_forms/form.js

@@ -47,6 +47,9 @@ let Form = React.createClass({
     },
 
     getFormData(){
+        if ('getFormData' in this.props){
+            return this.props.getFormData();
+        }
         let data = {};
         for (let ref in this.refs){
             data[this.refs[ref].props.name] = this.refs[ref].state.value;

js/components/ascribe_forms/form_piece_extradata.js

@@ -5,47 +5,58 @@ import React from 'react';
 import requests from '../../utils/requests';
 
 import apiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
 
+import Form from './form';
+import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-
 let PieceExtraDataForm = React.createClass({
-    mixins: [FormMixin],
+    propTypes: {
-
+        edition: React.PropTypes.object,
-    url() {
+        handleSuccess: React.PropTypes.func,
-        return requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id});
+        name: React.PropTypes.string,
+        title: React.PropTypes.string,
+        editable: React.PropTypes.bool
     },
-
     getFormData(){
         let extradata = {};
-        extradata[this.props.name] = this.refs[this.props.name].state.value;
+        extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
         return {
-            bitcoin_id: this.getBitcoinIds().join(),
+            bitcoin_id: this.props.edition.bitcoin_id,
             extradata: extradata
         };
     },
-
+    render() {
-    renderForm() {
+        let defaultValue = this.props.edition.extra_data[this.props.name] || '';
-        let defaultValue = this.props.editions[0].extra_data[this.props.name] || '';
         if (defaultValue.length === 0 && !this.props.editable){
             return null;
         }
+        let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.edition.bitcoin_id});
         return (
-            <form role="form" key={this.props.name}>
+            <Form
-                <h5>{this.props.title}</h5>
+                ref='form'
+                url={url}
+                handleSuccess={this.props.handleSuccess}
+                getFormData={this.getFormData}>
+                <Property
+                    name={this.props.name}
+                    label={this.props.title}
+                    editable={this.props.editable}>
                     <InputTextAreaToggable
-                    ref={this.props.name}
-                    className="form-control"
-                    defaultValue={defaultValue}
                         rows={3}
                         editable={this.props.editable}
-                    required=""
+                        defaultValue={defaultValue}
-                    onSubmit={this.submit}
+                        placeholder={'Fill in ' + this.props.title}
-                />
+                        required/>
-            </form>
+                </Property>
+                <Property hidden={true} name='bitcoin_id'>
+                    <input defaultValue={this.props.edition.bitcoin_id}/>
+                </Property>
+                <hr />
+            </Form>
         );
     }
 });
 
+
 export default PieceExtraDataForm;

js/components/ascribe_forms/input_textarea_toggable.js

@@ -2,56 +2,29 @@
 
 import React from 'react';
 
-import AlertMixin from '../../mixins/alert_mixin';
 import TextareaAutosize from 'react-textarea-autosize';
-import Button from 'react-bootstrap/lib/Button';
 
 let InputTextAreaToggable = React.createClass({
 
     propTypes: {
         editable: React.PropTypes.bool.isRequired,
-        submitted: React.PropTypes.bool,
         rows: React.PropTypes.number.isRequired,
-        onSubmit: React.PropTypes.func.isRequired,
         required: React.PropTypes.string,
         defaultValue: React.PropTypes.string
     },
 
-    mixins: [AlertMixin],
-
     getInitialState() {
         return {
-            value: this.props.defaultValue,
+            value: this.props.defaultValue
-            edited: false,
-            alerts: null // needed in AlertMixin
         };
     },
     handleChange(event) {
-        this.setState({
+        this.setState({value: event.target.value});
-            value: event.target.value,
+        this.props.onChange(event);
-            edited: true
-        });
-    },
-    reset(){
-        this.setState(this.getInitialState());
-    },
-    submit(){
-        this.props.onSubmit();
-        this.setState({edited: false});
     },
     render() {
         let className = 'form-control ascribe-textarea';
-        let buttons = null;
         let textarea = null;
-        if (this.props.editable && this.state.edited){
-            buttons = (
-                <div className="pull-right">
-                    <Button className="ascribe-btn" onClick={this.submit}>Save</Button>
-                    <Button className="ascribe-btn" onClick={this.reset}>Cancel</Button>
-                </div>
-            );
-
-        }
         if (this.props.editable){
             className = className + ' ascribe-textarea-editable';
             textarea = (
@@ -61,21 +34,16 @@ let InputTextAreaToggable = React.createClass({
                     rows={this.props.rows}
                     required={this.props.required}
                     onChange={this.handleChange}
-                    placeholder='Write something...' />
+                    onBlur={this.props.onBlur}
+                    placeholder={this.props.placeholder} />
             );
         }
         else{
             textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
         }
-        let alerts = (this.props.submitted) ? null : this.state.alerts;
+        return textarea;
-        return (
-            <div className="form-group">
-                {alerts}
-                {textarea}
-                {buttons}
-            </div>
-        );
     }
 });
 
+
 export default InputTextAreaToggable;

js/components/ascribe_forms/property.js

@@ -8,7 +8,9 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 let Property = React.createClass({
     propTypes: {
+        hidden: React.PropTypes.bool,
         editable: React.PropTypes.bool,
+        tooltip: React.PropTypes.element,
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
             React.PropTypes.string,
@@ -19,7 +21,8 @@ let Property = React.createClass({
 
     getDefaultProps() {
         return {
-            editable: true
+            editable: true,
+            hidden: false
         };
     },
 
@@ -38,8 +41,16 @@ let Property = React.createClass({
         });
     },
     reset(){
+        // maybe do reset by reload instead of frontend state?
         this.setState({value: this.state.initialValue});
+        if (this.refs.input.state){
+            // This is probably not the right way but easy fix
+            this.refs.input.state.value = this.state.initialValue;
+        }
+        else{
             this.refs.input.getDOMNode().value = this.state.initialValue;
+        }
+
     },
 
     handleChange(event) {
@@ -74,6 +85,9 @@ let Property = React.createClass({
         this.setState({errors: null});
     },
     getClassName() {
+        if(this.props.hidden){
+            return 'is-hidden';
+        }
         if(!this.props.editable){
             return 'is-fixed';
         }

js/components/edition.js

@@ -2,19 +2,21 @@
 
 import React from 'react';
 
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Button from 'react-bootstrap/lib/Button';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
 import MediaPlayer from './ascribe_media/media_player';
 
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
+import CollapsibleParagraph from './ascribe_collapsible/collapsible_paragraph';
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
-import Button from 'react-bootstrap/lib/Button';
-import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
-import PersonalNoteForm from './ascribe_forms/form_note_personal';
+import Form from './ascribe_forms/form';
-import EditionNoteForm from './ascribe_forms/form_note_edition';
+import Property from './ascribe_forms/property';
+import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
 
 import PieceExtraDataForm from './ascribe_forms/form_piece_extradata';
 import RequestActionForm from './ascribe_forms/form_request_action';
@@ -25,7 +27,8 @@ import AclButtonList from './ascribe_buttons/acl_button_list';
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
-import classNames from 'classnames';
+import requests from '../utils/requests';
+import apiUrls from '../constants/api_urls';
 
 /**
  * This is the component that implements display-specific functionality
@@ -92,64 +95,72 @@ let Edition = React.createClass({
                     <EditionSummary
                         edition={this.props.edition} />
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
-                        title="Personal Note (private)"
+                        title="Notes"
-                        show={this.state.currentUser.username && true || false}>
+                        show={(this.state.currentUser.username && true || false) ||
+                                (this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note)}>
                         <EditionPersonalNote
                             currentUser={this.state.currentUser}
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
-                    </CollapsibleEditionDetails>
-
-                    <CollapsibleEditionDetails
-                        title="Edition Note (public)"
-                        show={this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note}>
                         <EditionPublicEditionNote
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
-                    </CollapsibleEditionDetails>
+                    </CollapsibleParagraph>
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
                         title="Further Details (all editions)"
                         show={this.props.edition.acl.indexOf('edit') > -1 || Object.keys(this.props.edition.extra_data).length > 0}>
                         <EditionFurtherDetails
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
-                    </CollapsibleEditionDetails>
+                    </CollapsibleParagraph>
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
                         title="Provenance/Ownership History"
                         show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.ownership_history} />
-                    </CollapsibleEditionDetails>
+                    </CollapsibleParagraph>
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
                         title="Consignment History"
                         show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.consign_history} />
-                    </CollapsibleEditionDetails>
+                    </CollapsibleParagraph>
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
                         title="Loan History"
                         show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.loan_history} />
-                    </CollapsibleEditionDetails>
+                    </CollapsibleParagraph>
 
-                    <CollapsibleEditionDetails
+                    <CollapsibleParagraph
                         title="SPOOL Details">
-                        <EditionDetailProperty
+                        <Form >
+                            <Property
+                                name='artwork_id'
                                 label="Artwork ID"
-                            value={bitcoinIdValue} />
+                                editable={false}>
-                        <EditionDetailProperty
+                                <pre className="ascribe-pre">{bitcoinIdValue}</pre>
+                            </Property>
+                            <Property
+                                name='hash_of_artwork'
                                 label="Hash of Artwork, title, etc"
-                            value={hashOfArtwork} />
+                                editable={false}>
-                        <EditionDetailProperty
+                                <pre className="ascribe-pre">{hashOfArtwork}</pre>
+                            </Property>
+                            <Property
+                                name='owner_address'
                                 label="Owned by SPOOL address"
-                            value={ownerAddress} />
+                                editable={false}>
-                    </CollapsibleEditionDetails>
+                                <pre className="ascribe-pre">{ownerAddress}</pre>
+                            </Property>
+                            <hr />
+                        </Form>
+                    </CollapsibleParagraph>
                 </Col>
             </Row>
         );
@@ -229,85 +240,6 @@ let EditionSummary = React.createClass({
     }
 });
 
-let CollapsibleEditionDetails = React.createClass({
-    propTypes: {
-        title: React.PropTypes.string,
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.object,
-            React.PropTypes.array
-        ]),
-        show: React.PropTypes.bool,
-        iconName: React.PropTypes.string
-    },
-
-    getDefaultProps() {
-        return {
-            show: true
-        };
-    },
-
-    render() {
-        if(this.props.show) {
-            return (
-                <div className="ascribe-detail-header">
-                    <CollapsibleParagraph
-                        title={this.props.title}
-                        iconName={this.props.iconName}>
-                        {this.props.children}
-                    </CollapsibleParagraph>
-                </div>
-            );
-        } else {
-            return null;
-        }
-    }
-});
-
-const CollapsibleParagraph = React.createClass({
-
-    propTypes: {
-        title: React.PropTypes.string,
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.object,
-            React.PropTypes.array
-        ]),
-        iconName: React.PropTypes.string
-    },
-
-    mixins: [CollapsibleMixin],
-
-    getCollapsibleDOMNode(){
-        return React.findDOMNode(this.refs.panel);
-    },
-
-    getCollapsibleDimensionValue(){
-        return React.findDOMNode(this.refs.panel).scrollHeight;
-    },
-
-    onHandleToggle(e){
-        e.preventDefault();
-        this.setState({expanded: !this.state.expanded});
-    },
-
-    render() {
-        let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? '-' : '+';
-
-        let icon = this.props.iconName ? (<Glyphicon style={{fontSize: '.75em'}} glyph={this.props.iconName} />) : null;
-
-        return (
-            <div className="ascribe-edition-collapsible-wrapper">
-                <div onClick={this.onHandleToggle}>
-                    <span>{text} {icon} {this.props.title} </span>
-                </div>
-                <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
-                    {this.props.children}
-                </div>
-            </div>
-        );
-    }
-});
-
 
 let EditionDetailProperty = React.createClass({
     propTypes: {
@@ -372,6 +304,7 @@ let EditionDetailHistoryIterator = React.createClass({
 let EditionPersonalNote = React.createClass({
     propTypes: {
         edition: React.PropTypes.object,
+        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
     showNotification(){
@@ -379,21 +312,35 @@ let EditionPersonalNote = React.createClass({
         let notification = new GlobalNotificationModel('Private note saved', 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
+
     render() {
+        if (this.props.currentUser.username && true || false) {
             return (
-            <Row>
+                <Form
-                <Col md={12} className="ascribe-edition-personal-note">
+                    url={apiUrls.note_notes}
-                    <PersonalNoteForm
+                    handleSuccess={this.showNotification}>
+                    <Property
+                        name='note'
+                        label='Personal note (private)'
+                        editable={true}>
+                        <InputTextAreaToggable
+                            rows={3}
                             editable={true}
-                        handleSuccess={this.showNotification}
+                            defaultValue={this.props.edition.note_from_user}
-                        editions={[this.props.edition]} />
+                            placeholder='Enter a personal note...'
-                </Col>
+                            required/>
-            </Row>
+                    </Property>
+                    <Property hidden={true} name='bitcoin_id'>
+                        <input defaultValue={this.props.edition.bitcoin_id}/>
+                    </Property>
+                    <hr />
+                </Form>
             );
         }
+        return null;
+    }
 });
 
-
 let EditionPublicEditionNote = React.createClass({
     propTypes: {
         edition: React.PropTypes.object,
@@ -405,17 +352,32 @@ let EditionPublicEditionNote = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
     render() {
+        let isEditable = this.props.edition.acl.indexOf('edit') > -1;
+        if (this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note){
             return (
-            <Row>
+                <Form
-                <Col md={12} className="ascribe-edition-personal-note">
+                    url={apiUrls.note_edition}
-                    <EditionNoteForm
+                    handleSuccess={this.showNotification}>
-                        editable={this.props.edition.acl.indexOf('edit') > -1}
+                    <Property
-                        handleSuccess={this.showNotification}
+                        name='note'
-                        editions={[this.props.edition]} />
+                        label='Edition note (public)'
-                </Col>
+                        editable={isEditable}>
-            </Row>
+                        <InputTextAreaToggable
+                            rows={3}
+                            editable={isEditable}
+                            defaultValue={this.props.edition.public_note}
+                            placeholder='Enter a public note for this edition...'
+                            required/>
+                    </Property>
+                    <Property hidden={true} name='bitcoin_id'>
+                        <input defaultValue={this.props.edition.bitcoin_id}/>
+                    </Property>
+                    <hr />
+                </Form>
             );
         }
+        return null;
+    }
 });
 
 
@@ -440,19 +402,19 @@ let EditionFurtherDetails = React.createClass({
                         title='Artist Contact Info'
                         handleSuccess={this.showNotification}
                         editable={editable}
-                        editions={[this.props.edition]} />
+                        edition={this.props.edition} />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
                         handleSuccess={this.showNotification}
                         editable={editable}
-                        editions={[this.props.edition]} />
+                        edition={this.props.edition} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
                         handleSuccess={this.showNotification}
                         editable={editable}
-                        editions={[this.props.edition]} />
+                        edition={this.props.edition} />
                 </Col>
             </Row>
         );

js/components/header.js

@@ -39,6 +39,7 @@ let Header = React.createClass({
     handleLogout(){
         UserActions.logoutCurrentUser();
         Alt.flush();
+        this.transitionTo('login');
     },
     onChange(state) {
         this.setState(state);
@@ -71,7 +72,6 @@ let Header = React.createClass({
 
             <Navbar brand={brand} toggleNavKey={0}>
                 <CollapsibleNav eventKey={0}>
-                    <Nav navbar />
                     <Nav navbar right>
                         {account}
                         {signup}

js/components/settings_container.js

@@ -97,7 +97,6 @@ let AccountSettings = React.createClass({
                 show={true}
                 defaultExpanded={true}>
                 {content}
-
             </CollapsibleParagraph>
         );
     }
@@ -215,7 +214,7 @@ let APISettings = React.createClass({
                             </div>
                             <div className="col-xs-6 col-xs-height">
                                 <button
-                                    className="btn btn-default btn-sm"
+                                    className="pull-right btn btn-default btn-sm"
                                     onClick={this.handleTokenRefresh}
                                     data-id={app.name}>
                                     REFRESH

js/routes.js

@@ -30,8 +30,8 @@ let routes = (
         <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
 
-        <Redirect from={baseUrl} to="pieces" />
+        <Redirect from={baseUrl} to="login" />
-        <Redirect from={baseUrl + '/'} to="pieces" />
+        <Redirect from={baseUrl + '/'} to="login" />
     </Route>
 );
 

sass/ascribe_edition.scss

@@ -1,6 +1,3 @@
-.ascribe-edition-details hr {
-    border-top: 1px solid #616161;
-}
 
 .ascribe-edition-personal-note > textarea {
     margin-bottom: 1em;
@@ -14,14 +11,21 @@
 .ascribe-edition-collapsible-wrapper > div:first-child {
     width: 100%;
     cursor: pointer;
-}
+    background-color: #EEE;
+    padding: 10px;
+    border: 1px solid #CCC;
 
+}
 .ascribe-edition-collapsible-wrapper > div > span {
   font-size:1.3em;
   margin-right: .5em;
 }
+.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
+  font-size: 0.9em;
+}
 
 .ascribe-edition-collapible-content {
   width:100%;
   margin-top: 1em;
+
 }

sass/ascribe_settings.scss

@@ -1,3 +1,4 @@
+
 .ascribe-settings-wrapper {
     width: 100%;
     text-align: center;
@@ -10,11 +11,18 @@
     &div:last-of-type {
         border-bottom: 1px solid rgba(0,0,0,.2);
     }
+    &:hover{
+      border-left: 3px solid rgba(2, 182, 163, 0.4);
+    }
+}
+
+.is-hidden{
+  display: none;
 }
 
 .is-focused {
     background-color: rgba(2, 182, 163, 0.05);
-    border-left: 3px solid rgba(2, 182, 163, 1);
+    border-left: 3px solid rgba(2, 182, 163, 1)!important;
 }
 
 .is-error {
@@ -26,7 +34,7 @@
             font-size: 0.9em;
             margin-right: 1em;
         }
-        input {
+        input, textarea {
             color: #666;
         }
     }
@@ -39,13 +47,15 @@
         span {
             cursor: default;
         }
-        input, div, pre {
+        input, div, pre, textarea {
             cursor: default;
             color: #666;
         }
     }
 }
 
+
+
 .ascribe-settings-property {
     display: inline-block;
     width: 100%;
@@ -57,7 +67,7 @@
 
     cursor:pointer;
 
-    input, div, span, pre {
+    input, div, span, pre, textarea {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
     span {
@@ -78,7 +88,7 @@
         }
     }
 
-    input, pre {
+    input, pre, textarea {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-weight: 400;
         font-size: 1.1em;
@@ -91,6 +101,7 @@
         &:focus {
             border:0;
             outline:0;
+            box-shadow: none;
         }
 
         &::selection {
@@ -100,4 +111,9 @@
 
     }
 
+    textarea{
+        color: #666;
+        margin-top: 1em;
+        padding: 0;
+    }
 }

sass/ascribe_textarea.scss

@@ -10,11 +10,10 @@
 
 .ascribe-pre{
     word-break: break-word;
-    /* white-space: pre-wrap; */
+    white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
-    /* word-wrap: break-word; */
     font-family: inherit;
     text-align: justify;
     background-color: white;