From 5c6b753acbea0523f42628a5268326db9a3315d2 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Thu, 20 Aug 2015 15:50:30 +0200
Subject: [PATCH] piece loan history

---
 js/components/ascribe_detail/edition.js       | 34 +++----------------
 .../ascribe_detail/history_iterator.js        | 33 ++++++++++++++++++
 .../ascribe_detail/piece_container.js         |  9 +++++
 .../ascribe_detail/cyland_piece_container.js  | 10 ++++++
 4 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100644 js/components/ascribe_detail/history_iterator.js

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 89f10bde..7b89c339 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -16,6 +16,7 @@ import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
+import HistoryIterator from './history_iterator';
 
 import MediaContainer from './media_container';
 
@@ -108,8 +109,8 @@ let Edition = React.createClass({
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <div className="ascribe-detail-header">
-                        <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
                         <hr/>
+                        <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
                         <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
                         <EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />
                         <hr/>
@@ -130,21 +131,21 @@ let Edition = React.createClass({
                     <CollapsibleParagraph
                         title={getLangText('Provenance/Ownership History')}
                         show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
-                        <EditionDetailHistoryIterator
+                        <HistoryIterator
                             history={this.props.edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Consignment History')}
                         show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
-                        <EditionDetailHistoryIterator
+                        <HistoryIterator
                             history={this.props.edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
-                        <EditionDetailHistoryIterator
+                        <HistoryIterator
                             history={this.props.edition.loan_history} />
                     </CollapsibleParagraph>
 
@@ -295,31 +296,6 @@ let EditionSummary = React.createClass({
 });
 
 
-let EditionDetailHistoryIterator = React.createClass({
-    propTypes: {
-        history: React.PropTypes.array
-    },
-
-    render() {
-        return (
-            <Form>
-                {this.props.history.map((historicalEvent, i) => {
-                    return (
-                        <Property
-                                name={i}
-                                key={i}
-                                label={ historicalEvent[0] }
-                                editable={false}>
-                            <pre className="ascribe-pre">{ historicalEvent[1] }</pre>
-                        </Property>
-                    );
-                })}
-                <hr />
-            </Form>
-        );
-    }
-});
-
 let EditionPersonalNote = React.createClass({
     propTypes: {
         edition: React.PropTypes.object,
diff --git a/js/components/ascribe_detail/history_iterator.js b/js/components/ascribe_detail/history_iterator.js
new file mode 100644
index 00000000..54d11a5b
--- /dev/null
+++ b/js/components/ascribe_detail/history_iterator.js
@@ -0,0 +1,33 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+let HistoryIterator = React.createClass({
+    propTypes: {
+        history: React.PropTypes.array
+    },
+
+    render() {
+        return (
+            <Form>
+                {this.props.history.map((historicalEvent, i) => {
+                    return (
+                        <Property
+                                name={i}
+                                key={i}
+                                label={ historicalEvent[0] }
+                                editable={false}>
+                            <pre className="ascribe-pre">{ historicalEvent[1] }</pre>
+                        </Property>
+                    );
+                })}
+                <hr />
+            </Form>
+        );
+    }
+});
+
+export default HistoryIterator;
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 2c36035b..dd638366 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -19,6 +19,7 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
 import FurtherDetails from './further_details';
 
 import DetailProperty from './detail_property';
+import HistoryIterator from './history_iterator';
 
 import AclButtonList from './../ascribe_buttons/acl_button_list';
 import CreateEditionsForm from '../ascribe_forms/create_editions_form';
@@ -185,6 +186,14 @@ let PieceContainer = React.createClass({
                         </AclButtonList>
                     }>
                     {this.getCreateEditionsDialog()}
+
+                    <CollapsibleParagraph
+                        title={getLangText('Loan History')}
+                        show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
+                        <HistoryIterator
+                            history={this.state.piece.loan_history} />
+                    </CollapsibleParagraph>
+
                     <CollapsibleParagraph
                         title="Further Details"
                         show={this.state.piece.acl.acl_edit
diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
index b8877894..2da39a72 100644
--- a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
@@ -16,6 +16,8 @@ import Property from '../../../../../../components/ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../../components/ascribe_forms/input_textarea_toggable';
 import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
+import HistoryIterator from '../../../../../ascribe_detail/history_iterator';
+
 import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
 import DetailProperty from '../../../../../ascribe_detail/detail_property';
 
@@ -84,6 +86,14 @@ let CylandPieceContainer = React.createClass({
                             <hr/>
                         </div>
                     }>
+
+                    <CollapsibleParagraph
+                        title={getLangText('Loan History')}
+                        show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
+                        <HistoryIterator
+                            history={this.state.piece.loan_history} />
+                    </CollapsibleParagraph>
+
                     <CylandPieceDetails piece={this.state.piece}/>
                 </Piece>
             );