ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

edition detail updated with forms

Browse Source
This commit is contained in:
ddejongh 2015-06-22 23:32:41 +02:00
parent 02f8193743
commit 89884ced1f
12 changed files with 224 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

@ -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;
}
}
});

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

@ -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;

55
js/components/ascribe_forms/form_piece_extradata.js
View File

@ -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],
url() {
return requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id});
propTypes: {
edition: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
name: React.PropTypes.string,
title: React.PropTypes.string,
editable: React.PropTypes.bool
},
getFormData() {
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
};
},
renderForm() {
let defaultValue = this.props.editions[0].extra_data[this.props.name] || '';
render() {
let defaultValue = this.props.edition.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}>
<h5>{this.props.title}</h5>
<Form
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=""
onSubmit={this.submit}
/>
</form>
defaultValue={defaultValue}
placeholder={'Fill in ' + this.props.title}
required/>
</Property>
<Property hidden={true} name='bitcoin_id'>
<input defaultValue={this.props.edition.bitcoin_id}/>
</Property>
<hr />
</Form>
);
}
});
export default PieceExtraDataForm;

46
js/components/ascribe_forms/input_textarea_toggable.js
View File

@ -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,
edited: false,
alerts: null // needed in AlertMixin
value: this.props.defaultValue
};
},
handleChange(event) {
this.setState({
value: event.target.value,
edited: true
});
},
reset(){
this.setState(this.getInitialState());
},
submit(){
this.props.onSubmit();
this.setState({edited: false});
this.setState({value: event.target.value});
this.props.onChange(event);
},
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 (
<div className="form-group">
{alerts}
{textarea}
{buttons}
</div>
);
return textarea;
}
});
export default InputTextAreaToggable;

16
js/components/ascribe_forms/property.js
View File

@ -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';
}

224
js/components/edition.js
View File

@ -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 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 CollapsibleParagraph from './ascribe_collapsible/collapsible_paragraph';
import PersonalNoteForm from './ascribe_forms/form_note_personal';
import EditionNoteForm from './ascribe_forms/form_note_edition';
import Form from './ascribe_forms/form';
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
title="Personal Note (private)"
show={this.state.currentUser.username && true || false}>
<CollapsibleParagraph
title="Notes"
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} />
<EditionDetailProperty
editable={false}>
<pre className="ascribe-pre">{bitcoinIdValue}</pre>
</Property>
<Property
name='hash_of_artwork'
label="Hash of Artwork, title, etc"
value={hashOfArtwork} />
<EditionDetailProperty
editable={false}>
<pre className="ascribe-pre">{hashOfArtwork}</pre>
</Property>
<Property
name='owner_address'
label="Owned by SPOOL address"
value={ownerAddress} />
</CollapsibleEditionDetails>
editable={false}>
<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>
<Col md={12} className="ascribe-edition-personal-note">
<PersonalNoteForm
<Form
url={apiUrls.note_notes}
handleSuccess={this.showNotification}>
<Property
name='note'
label='Personal note (private)'
editable={true}>
<InputTextAreaToggable
rows={3}
editable={true}
handleSuccess={this.showNotification}
editions={[this.props.edition]} />
</Col>
</Row>
defaultValue={this.props.edition.note_from_user}
placeholder='Enter a personal note...'
required/>
</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>
<Col md={12} className="ascribe-edition-personal-note">
<EditionNoteForm
editable={this.props.edition.acl.indexOf('edit') > -1}
handleSuccess={this.showNotification}
editions={[this.props.edition]} />
</Col>
</Row>
<Form
url={apiUrls.note_edition}
handleSuccess={this.showNotification}>
<Property
name='note'
label='Edition note (public)'
editable={isEditable}>
<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>
);

2
js/components/header.js
View File

@ -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}

3
js/components/settings_container.js
View File

@ -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

4
js/routes.js
View File

@ -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="pieces" />
<Redirect from={baseUrl} to="login" />
<Redirect from={baseUrl + '/'} to="login" />
</Route>
);

16
sass/ascribe_edition.scss
View File

@ -1,6 +1,3 @@
.ascribe-edition-details hr {
border-top: 1px solid #616161;
}
.ascribe-edition-personal-note > textarea {
margin-bottom: 1em;
@ -12,16 +9,23 @@
}
.ascribe-edition-collapsible-wrapper > div:first-child {
width:100%;
cursor:pointer;
}
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;
}

26
sass/ascribe_settings.scss
View File

@ -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;
}
}

3
sass/ascribe_textarea.scss
View File

@ -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;