custom ikonotv piece page

js/components/ascribe_detail/piece_container.js

@@ -205,6 +205,7 @@ let PieceContainer = React.createClass({
             );
         }
     },
+
     render() {
         if('title' in this.state.piece) {
             return (

js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js

@@ -65,7 +65,7 @@ let IkonotvAccordionListItem = React.createClass({
     getSubmitButtons() {
         return (
             <IkonotvSubmitButton
-                className="pull-right"
+                className="btn-xs pull-right"
                 handleSuccess={this.handleSubmitSuccess}
                 piece={this.props.content}/>
         );

js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js

@@ -25,7 +25,7 @@ let IkonotvSubmitButton = React.createClass({
     getSubmitButton() {
         return (
             <button
-                className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
+                className={classNames('btn', 'btn-default', this.props.className)}>
                 {getLangText('Loan to IkonoTV')}
             </button>
         );

js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js

@@ -0,0 +1,165 @@
+'use strict';
+
+import React from 'react';
+
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
+import PieceListActions from '../../../../../../actions/piece_list_actions';
+import UserStore from '../../../../../../stores/user_store';
+
+import Piece from '../../../../../../components/ascribe_detail/piece';
+
+import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
+import AclButtonList from '../../../../../ascribe_buttons/acl_button_list';
+import DeleteButton from '../../../../../ascribe_buttons/delete_button';
+
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
+
+import IkonotvSubmitButton from '../ascribe_buttons/ikonotv_submit_button';
+
+import HistoryIterator from '../../../../../ascribe_detail/history_iterator';
+
+import DetailProperty from '../../../../../ascribe_detail/detail_property';
+
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+
+import AppConstants from '../../../../../../constants/application_constants';
+
+import { getLangText } from '../../../../../../utils/lang_utils';
+import { mergeOptions } from '../../../../../../utils/general_utils';
+
+
+let IkonotvPieceContainer = React.createClass({
+    getInitialState() {
+        return mergeOptions(
+            PieceStore.getState(),
+            UserStore.getState()
+        );
+    },
+
+    componentDidMount() {
+        PieceStore.listen(this.onChange);
+        PieceActions.fetchOne(this.props.params.pieceId);
+        UserStore.listen(this.onChange);
+    },
+
+    componentWillReceiveProps(nextProps) {
+        if(this.props.params.pieceId !== nextProps.params.pieceId) {
+            PieceActions.updatePiece({});
+            PieceActions.fetchOne(nextProps.params.pieceId);
+        }
+    },
+
+    componentWillUnmount() {
+        // Every time we're leaving the piece detail page,
+        // just reset the piece that is saved in the piece store
+        // as it will otherwise display wrong/old data once the user loads
+        // the piece detail a second time
+        PieceActions.updatePiece({});
+        PieceStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    loadPiece() {
+        PieceActions.fetchOne(this.props.params.pieceId);
+    },
+
+    handleSubmitSuccess(response) {
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getActions(){
+        if (this.state.piece &&
+            this.state.piece.request_action &&
+            this.state.piece.request_action.length > 0) {
+            return (
+                <ListRequestActions
+                    pieceOrEditions={this.state.piece}
+                    currentUser={this.state.currentUser}
+                    handleSuccess={this.loadPiece}
+                    requestActions={this.state.piece.request_action}/>
+                );
+        }
+        else {
+
+            // This is just because we're inserting a custom acl_loan button
+            let availableAcls;
+
+            if(this.state.piece && this.state.piece.acl && typeof this.state.piece.acl.acl_loan !== 'undefined') {
+                // make a copy to not have side effects
+                availableAcls = mergeOptions({}, this.state.piece.acl);
+                availableAcls.acl_loan = false;
+            }
+
+            return (
+                <AclButtonList
+                    className="text-center ascribe-button-list"
+                    availableAcls={availableAcls}
+                    editions={this.state.piece}
+                    handleSuccess={this.loadPiece}>
+                        <IkonotvSubmitButton
+                            className="btn-sm"
+                            handleSuccess={this.handleSubmitSuccess}
+                            piece={this.state.piece}/>
+                        <DeleteButton
+                            handleSuccess={this.handleDeleteSuccess}
+                            piece={this.state.piece}/>
+                </AclButtonList>
+            );
+        }
+    },
+
+    render() {
+        if('title' in this.state.piece) {
+            return (
+                <Piece
+                    piece={this.state.piece}
+                    loadPiece={this.loadPiece}
+                    header={
+                        <div className="ascribe-detail-header">
+                            <hr style={{marginTop: 0}}/>
+                            <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
+                            <DetailProperty label="BY" value={this.state.piece.artist_name} />
+                            <DetailProperty label="DATE" value={ this.state.piece.date_created.slice(0, 4) } />
+                            <hr/>
+                        </div>
+                        }
+                    subheader={
+                        <div className="ascribe-detail-header">
+                            <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } />
+                            <DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
+                            <hr/>
+                        </div>
+                    }
+                    buttons={this.getActions()}>
+
+                    <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>
+                </Piece>
+            );
+        } else {
+            return (
+                <div className="fullpage-spinner">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        }
+    }
+});
+
+export default IkonotvPieceContainer;

js/components/whitelabel/wallet/wallet_routes.js

@@ -19,9 +19,9 @@ import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piec
 import CylandRegisterPiece from './components/cyland/cyland_register_piece';
 import CylandPieceList from './components/cyland/cyland_piece_list';
 
-import IkonotvLanding from './components/ikonotv/ikonotv_landing';
 import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
 import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan';
+import IkonotvPieceContainer from './components/ikonotv/ascribe_detail/ikonotv_piece_container';
 
 import CCRegisterPiece from './components/cc/cc_register_piece';
 
@@ -74,7 +74,7 @@ let ROUTES = {
             <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan}/>
             <Route name="register_piece" path="register_piece" handler={RegisterPiece} headerTitle="+ NEW WORK"/>
             <Route name="pieces" path="collection" handler={IkonotvPieceList} headerTitle="COLLECTION"/>
-            <Route name="piece" path="pieces/:pieceId" handler={PieceContainer} />
+            <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
         </Route>