set link on tile form

2 files changed, 48 insertions, 7 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index c3d509d..d4913fe 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -42,6 +42,14 @@ const TEXT_FONT_STYLES = [
   'normal', 'bold', 'italic', 'bold-italic',
 ].map(style => ({ name: style, label: style }))
 
+const NO_LINK = 0
+const EXTERNAL_LINK = -1
+const PAGE_LIST_TOP_OPTIONS = [
+  { name: NO_LINK, label: 'No link' },
+  { name: EXTERNAL_LINK, label: 'External link' },
+  { name: -2, label: '──────────', disabled: true },
+]
+
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
 // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
 
@@ -93,6 +101,7 @@ class TileForm extends Component {
     submitTitle: "",
     errorFields: new Set([]),
     modified: false,
+    pageList: [],
   }
 
   componentDidMount() {
@@ -104,6 +113,12 @@ class TileForm extends Component {
       submitTitle,
       errorFields: new Set([]),
     })
+    const { pages } = graph.show.res
+    let pageList = [
+      ...PAGE_LIST_TOP_OPTIONS,
+      ...pages.map(page => ({ name: page.id, label: page.title }))
+    ]
+    this.setState({ pageList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -172,6 +187,9 @@ class TileForm extends Component {
     if (name === 'type') {
       return this.handleTypeChange(value)
     }
+    if (name === 'target_page_id') {
+      value = parseInt(value)
+    }
     this.props.tileActions.updateTemporaryTile({
       ...this.props.temporaryTile,
       [name]: value,
@@ -305,6 +323,8 @@ class TileForm extends Component {
             ? this.renderTextForm()
           : ""}
 
+          {this.renderLinkForm()}
+
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
@@ -343,6 +363,33 @@ class TileForm extends Component {
     )
   }
 
+  renderLinkForm() {
+    const { temporaryTile } = this.props
+    const { pageList } = this.state
+    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    return (
+      <div className={isExternalLink ? 'row selects' : 'row'}>
+        <Select
+          title=''
+          name='target_page_id'
+          selected={temporaryTile.target_page_id || NO_LINK}
+          options={pageList}
+          onChange={this.handleSelect.bind(this)}
+        />
+        {isExternalLink &&
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="external_link_url"
+            data={temporaryTile.settings}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+        }
+      </div>
+    )
+  }
+
   renderImageForm() {
     // const { isNew } = this.props
     const { temporaryTile } = this.props
@@ -469,12 +516,6 @@ class TileForm extends Component {
     )
   }
 }
-    // font_family: 'sans-serif',
-    // font_size: 16,
-    // font_style: 'normal',
-    // font_color: '#ffffff',
-    // background_color: '#333333',
-
 
 const mapStateToProps = state => ({
   graph: state.graph,
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 4bc98f4..7747ddf 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -79,7 +79,7 @@
   justify-content: center;
   align-items: center;
   height: 1.5rem;
-  width: 2rem;
+  width: 1.9475rem;
   margin-right: 0.5rem;
 }
 .row.imageUrl img {