remove foreignkey constraint on target_page_id. toggle popups. show list of popups, if a tile link is open/close popup

1 files changed, 28 insertions, 6 deletions

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 728bc05..b33f7b8 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -76,6 +76,12 @@ const PAGE_LIST_TOP_OPTIONS = [
   { name: -99, label: '──────────', disabled: true },
 ]
 
+const NO_POPUP = 0
+const POPUP_LIST_TOP_OPTIONS = [
+  { name: NO_POPUP, label: 'Select a popup group' },
+  { name: -99, 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
 
@@ -181,6 +187,7 @@ class TileForm extends Component {
     errorFields: new Set([]),
     modified: false,
     pageList: [],
+    popupList: [],
   }
 
   constructor(props){
@@ -211,7 +218,11 @@ class TileForm extends Component {
       ...PAGE_LIST_TOP_OPTIONS,
       ...linkPages.map(page => ({ name: page.id, label: page.path }))
     ]
-    this.setState({ pageList })
+    let popupList = [
+      ...POPUP_LIST_TOP_OPTIONS,
+      ...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group }))
+    ]
+    this.setState({ pageList, popupList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -760,7 +771,7 @@ class TileForm extends Component {
 
   renderHyperlinkForm() {
     const { temporaryTile } = this.props
-    const { pageList } = this.state
+    const { pageList, popupList } = this.state
     const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
     const isPopupLink = (
       temporaryTile.target_page_id === OPEN_POPUP_LINK ||
@@ -785,8 +796,8 @@ class TileForm extends Component {
             onChange={this.handleSettingsSelect}
           />
         </div>
-        <div>
-          {isExternalLink &&
+        {isExternalLink && (
+          <div>
             <TextInput
               title=""
               placeholder='http://'
@@ -795,8 +806,19 @@ class TileForm extends Component {
               onChange={this.handleSettingsChange}
               autoComplete="off"
             />
-          }
-        </div>
+          </div>
+        )}
+        {(temporaryTile.target_page_id === OPEN_POPUP_LINK || temporaryTile.target_page_id === CLOSE_POPUP_LINK) && (
+          <div>
+            <Select
+              title="Popup"
+              name='target_popup'
+              selected={temporaryTile.settings.target_popup || NO_POPUP}
+              options={popupList}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
       </div>
     )
   }