From 7569ac8bd58174095f3f897548e26d0ba905236c Mon Sep 17 00:00:00 2001
From: elijah <elijah@riseup.net>
Date: Wed, 21 Sep 2016 15:39:03 -0700
Subject: [feat] the setup wizard for the new ui

---
 ui/app/components/wizard/provider_select_stage.js | 168 +++++++++++++++++-----
 1 file changed, 130 insertions(+), 38 deletions(-)

(limited to 'ui/app/components/wizard/provider_select_stage.js')

diff --git a/ui/app/components/wizard/provider_select_stage.js b/ui/app/components/wizard/provider_select_stage.js
index 20674be..19799f8 100644
--- a/ui/app/components/wizard/provider_select_stage.js
+++ b/ui/app/components/wizard/provider_select_stage.js
@@ -2,7 +2,11 @@ import React from 'react'
 import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
 
 import App from 'app'
-import ListEdit from 'components/list_edit'
+import Provider from 'models/provider'
+
+import ListEditor from 'components/list_editor'
+import {HorizontalLayout, Column} from 'components/layout'
+
 import StageLayout from './stage_layout'
 import AddProviderModal from './add_provider_modal'
 
@@ -10,75 +14,163 @@ export default class ProviderSelectStage extends React.Component {
 
   static get defaultProps() {return{
     title: "Choose a provider",
-    subtitle: "This doesn't work yet"
+    initialProvider: null
   }}
 
   constructor(props) {
     super(props)
-    let domains = this.currentDomains()
     this.state = {
-      domains: domains,
-      showModal: false
+      domains: [],        // array of domains, as strings
+      showModal: false,
+      selected: null,     // domain of selected item
+      provider: null,     // Provider object, if selected
+      error: null         // error message
     }
-    this.add = this.add.bind(this)
-    this.remove = this.remove.bind(this)
-    this.close = this.close.bind(this)
-    this.previous = this.previous.bind(this)
+    this.add      = this.add.bind(this)
+    this.remove   = this.remove.bind(this)
+    this.select   = this.select.bind(this)
+    this.close    = this.close.bind(this)
+    this.cancel   = this.cancel.bind(this)
+    this.next     = this.next.bind(this)
+  }
+
+  componentWillMount() {
+    this.refreshList({
+      provider: this.props.initialProvider,
+      selected: (this.props.initialProvider ? this.props.initialProvider.domain : null)
+    })
   }
 
-  currentDomains() {
-    // return(App.providers.domains().slice() || [])
-    return ['domain1', 'domain2', 'domain3']
+  //
+  // newState is the state to apply after
+  // domains are refreshed
+  //
+  refreshList(newState=null) {
+    Provider.list(true).then(domains => {
+      this.setState(Object.assign({domains: domains}, newState))
+      if (domains.length > 0) {
+        let domain = this.state.selected
+        if (domains.includes(domain)) {
+          this.select(domain)
+        } else {
+          this.select(domains[0])
+        }
+      } else {
+        this.select(null)
+      }
+    })
   }
 
   add() {
     this.setState({showModal: true})
   }
 
-  remove(provider) {
-    // App.providers.remove(provider)
-    this.setState({domains: this.currentDomains()})
+  remove(domain, newactive) {
+    Provider.delete(domain).then(
+      response => {
+        this.refreshList({selected: newactive})
+      },
+      error => {
+        console.log(error)
+      }
+    )
   }
 
-  close() {
-    let domains = this.currentDomains()
-    if (domains.length != this.state.domains.length) {
-      // this is ugly, but i could not get selection working
-      // by passing it as a property
-      this.refs.list.setSelected(0)
-    }
+  select(domain) {
     this.setState({
-      domains: domains,
-      showModal: false
+      selected: domain
     })
+    if (domain) {
+      Provider.get(domain).then(
+        provider => {
+          this.setState({
+            provider: provider
+          })
+        },
+        error => {
+          this.setState({
+            provider: null,
+            error: error
+          })
+        }
+      )
+    } else {
+      this.setState({
+        provider: null,
+        error: null
+      })
+    }
+  }
+
+  close(provider=null) {
+    if (provider) {
+      this.refreshList({
+        showModal: false,
+        provider: provider,
+        selected: provider.domain
+      })
+    } else {
+      this.setState({
+        showModal: false
+      })
+    }
   }
 
-  previous() {
+  cancel() {
     App.start()
   }
 
+  next() {
+    App.show('wizard', {
+      stage: 'register',
+      provider: this.state.provider
+    })
+  }
+
   render() {
     let modal = null
+    let info = null
+    if (this.state.provider) {
+      info = (
+        <div>
+          <h1 className="first">{this.state.provider.name}</h1>
+          <h3>{this.state.provider.domain}</h3>
+          <p>{this.state.provider.description}</p>
+          <p><b>Enrollment Policy:</b> {this.state.provider.enrollment_policy}</p>
+          <p><b>Services</b>: {this.state.provider.services}</p>
+          <p><b>Languages</b>: {this.state.provider.languages.join(', ')}</p>
+        </div>
+      )
+    } else if (this.state.error) {
+      info = <div>{this.state.error}</div>
+    }
     if (this.state.showModal) {
       modal = <AddProviderModal onClose={this.close} />
     }
     let buttons = (
-      <ButtonToolbar className="pull-right">
-        <Button onClick={this.previous}>
-          <Glyphicon glyph="chevron-left" />
-          Previous
-        </Button>
-        <Button>
-          Next
-          <Glyphicon glyph="chevron-right" />
-        </Button>
-      </ButtonToolbar>
+      <div>
+        <ButtonToolbar className="pull-left">
+          <Button onClick={this.cancel}>
+            Cancel
+          </Button>
+        </ButtonToolbar>
+        <ButtonToolbar className="pull-right">
+          <Button onClick={this.next}>
+            Next
+            <Glyphicon glyph="chevron-right" />
+          </Button>
+        </ButtonToolbar>
+      </div>
     )
-    let select = <ListEdit ref="list" items={this.state.domains}
-      onRemove={this.remove} onAdd={this.add} />
+    let editlist = <ListEditor ref="list" items={this.state.domains}
+      selected={this.state.selected} onRemove={this.remove} onAdd={this.add}
+      onSelect={this.select} />
     return(
       <StageLayout title={this.props.title} subtitle={this.props.subtitle} buttons={buttons}>
-        {select}
+        <HorizontalLayout equalWidths={true}>
+          <Column>{editlist}</Column>
+          <Column>{info}</Column>
+        </HorizontalLayout>
         {modal}
       </StageLayout>
     )
-- 
cgit v1.2.3