From 281f20ef1e9ac33a7e210ba562eb2914f6d187e6 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 19 Jul 2016 16:13:26 +0200
Subject: added flow_content update

---
 web/src/js/components/ContentView.jsx              | 54 ++++++++++++++++------
 .../js/components/FlowView/FlowEditorButton.jsx    | 49 ++++++++------------
 web/src/js/components/FlowView/Messages.jsx        |  2 +-
 3 files changed, 60 insertions(+), 45 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 0b93d3f0..766de26f 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -5,9 +5,8 @@ import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
-import { setContentView, setDisplayLarge } from '../ducks/ui'
+import { setContentView, setDisplayLarge, setModifiedFlowContent } from '../ducks/ui'
 import CodeEditor from './common/CodeEditor'
-import {setModifiedFlowContent} from '../ducks/flows'
 
 ContentView.propTypes = {
     // It may seem a bit weird at the first glance:
@@ -20,7 +19,7 @@ ContentView.propTypes = {
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
-    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props
 
     if (message.contentLength === 0) {
         return <MetaViews.ContentEmpty {...props}/>
@@ -38,20 +37,43 @@ function ContentView(props) {
 
     return (
         <div>
-            {View.textView ? (
+            {isFlowEditorOpen ? (
                 <ContentLoader flow={flow} message={message}>
-                    <View content="" />
-                </ContentLoader>
-            ) : (
-                <View flow={flow} message={message} />
+                        <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
+                    </ContentLoader>
+            ): (
+                <div>
+                    {View.textView ? (
+                        <ContentLoader flow={flow} message={message}>
+                            <View content="" />
+                        </ContentLoader>
+                    ) : (
+                        <View flow={flow} message={message} />
+                    )}
+                    <div className="view-options text-center">
+                        <ViewSelector onSelectView={selectView} active={View} message={message}/>
+                        &nbsp;
+                        <a className="btn btn-default btn-xs"
+                           href={MessageUtils.getContentURL(flow, message)}
+                           title="Download the content of the flow.">
+                            <i className="fa fa-download"/>
+                        </a>
+                        &nbsp;
+                        <a  className="btn btn-default btn-xs"
+                            onClick={() => ContentView.fileInput.click()}
+                            title="Upload a file to replace the content."
+                        >
+                            <i className="fa fa-upload"/>
+                        </a>
+                        <input
+                            ref={ref => ContentView.fileInput = ref}
+                            className="hidden"
+                            type="file"
+                            onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}}
+                        />
+                    </div>
+                </div>
             )}
-            <div className="view-options text-center">
-                <ViewSelector onSelectView={selectView} active={View} message={message}/>
-                &nbsp;
-                <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
-                    <i className="fa fa-download"/>
-                </a>
-            </div>
         </div>
     )
 }
@@ -60,9 +82,11 @@ export default connect(
     state => ({
         contentView: state.ui.contentView,
         displayLarge: state.ui.displayLarge,
+        isFlowEditorOpen : state.ui.isFlowEditorOpen
     }),
     {
         selectView: setContentView,
         setDisplayLarge,
+        setModifiedFlowContent
     }
 )(ContentView)
diff --git a/web/src/js/components/FlowView/FlowEditorButton.jsx b/web/src/js/components/FlowView/FlowEditorButton.jsx
index e9c75535..3d0d1d16 100644
--- a/web/src/js/components/FlowView/FlowEditorButton.jsx
+++ b/web/src/js/components/FlowView/FlowEditorButton.jsx
@@ -4,41 +4,32 @@ import { connect } from 'react-redux'
 import {closeFlowEditor} from '../../ducks/ui.js'
 import {openFlowEditor} from '../../ducks/ui.js'
 
-// FlowEditorButton.propTypes = {
-//     isFlowEditorOpen: PropTypes.bool.isRequired,
-//     content: PropTypes.string.isRequired,
-//     onContentChange: PropTypes.func.isRequired
-// }
-
-class FlowEditorButton extends Component{
-     static propTypes = {
-        isFlowEditorOpen: PropTypes.bool.isRequired,
-        content: PropTypes.string.isRequired,
-        onContentChange: PropTypes.func.isRequired
-     }
+FlowEditorButton.propTypes = {
+    isFlowEditorOpen: PropTypes.bool.isRequired,
+    content: PropTypes.string.isRequired,
+    onContentChange: PropTypes.func.isRequired
+}
 
-    render(){
-        let { isFlowEditorOpen, closeFlowEditor, openFlowEditor,  onContentChange, content } = this.props
-        return (
-            <div className="edit-flow-container">
-                {isFlowEditorOpen ?
-                    <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}>
-                        <i className="fa fa-check"/>
-                    </a>
-                    :
-                    <a  className="edit-flow" onClick={() => openFlowEditor()}>
-                        <i className="fa fa-pencil"/>
-                    </a>
-                }
-            </div>
-        )
-    }
+function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor,  onContentChange, content }) {
+    return (
+        <div className="edit-flow-container">
+            {isFlowEditorOpen ?
+                <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}>
+                    <i className="fa fa-check"/>
+                </a>
+                :
+                <a  className="edit-flow" onClick={() => openFlowEditor()}>
+                    <i className="fa fa-pencil"/>
+                </a>
+            }
+        </div>
+    )
 }
 
 export default connect(
     state => ({
         isFlowEditorOpen: state.ui.isFlowEditorOpen,
-        content: state.flows.modifiedFlow.content
+        content: state.ui.modifiedFlow.content
     }),
     {
         closeFlowEditor,
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 8cb918a8..2f03c712 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -7,7 +7,7 @@ import ContentView from '../ContentView'
 import ValueEditor from '../ValueEditor'
 import Headers from './Headers'
 import * as flowActions  from '../../ducks/flows'
-import FlowEditorButton from './FlowEditorButton.jsx'
+import FlowEditorButton from './FlowEditorButton'
 
 
 class RequestLine extends Component {
-- 
cgit v1.2.3