Feature/create project

package.json

@@ -40,6 +40,7 @@
     "react-addons-css-transition-group": "^0.14.8",
     "react-dom": "^0.14.8",
     "react-dotdotdot": "^1.0.4",
+    "react-forms": "^2.0.0-beta33",
     "react-layout-pane": "^0.1.16",
     "react-redux": "^4.0.6",
     "react-redux-form": "^0.14.3",

src/projects/create/components/AppProjectForm.jsx

@@ -0,0 +1,158 @@
+
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { clearLoadedProject } from '../../../actions/project'
+import DevicesComponent from './Devices'
+import { Form, SubmitButton, TextInput, RadioGroupInput, TextareaInput, SliderRadioGroupInput, Validations } from 'appirio-tech-react-components'
+
+require('./CreateProject.scss')
+
+const appTypeOptions = [
+  {
+    value: 'ios',
+    label: 'iOS'
+  }, {
+    value: 'android',
+    label: 'Android'
+  }, {
+    value: 'web',
+    label: 'Web'
+  }, {
+    value: 'hybrid',
+    label: 'Hybrid'
+  }
+]
+
+const projectTypes = [
+  {
+    value: 'visual_design',
+    title: 'Visualize an app idea',
+    desc: <p><strong>5-7 days,</strong> from <strong>$3,500</strong></p>,
+    info: 'Wireframes, Visual Design'
+  }, {
+    value: 'visual_prototype',
+    title: 'Prototype an app',
+    desc: <p><strong>14+ days,</strong> from <strong>$15,000</strong></p>,
+    info: 'Visual or HTML prototype'
+  }, {
+    value: 'app_dev',
+    title: 'Fully develop an app',
+    desc: <p>from <strong>$30,000 </strong></p>,
+    info: 'Design, Front End, Back End, <br/>Integration and API'
+  }
+]
+
+
+const initalFormValue = {
+  newProject: {
+    details: {
+      appType: 'ios',
+      devices: ['phone'],
+      utm: { code: ''}
+    },
+    type: 'visual_prototype'
+  }
+}
+
+class AppProjectForm extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    this.props.clearLoadedProject()
+  }
+
+  // componentWillUpdate(nextProps) {
+  //   if (!nextProps.isLoading &&
+  //       nextProps.project.id) {
+  //     console.log('project created', nextProps.project)
+  //     this.props.router.push('/projects/' + nextProps.project.id )
+  //   }
+  // }
+
+  render () {
+    return (
+      <Form initialValue={initalFormValue} onSubmit={this.props.submitHandler}>
+        <div className="what-you-like-to-do">
+          <h2>What would you like to do?</h2>
+          <SliderRadioGroupInput
+            name="newProject.type"
+            label="na"
+            min={0}
+            max={2}
+            step={1}
+            options={projectTypes}
+          />
+        </div>
+
+        {/* .pick-target-devices */}
+
+        <DevicesComponent
+          name="newProject.details.devices"
+        />
+
+        <RadioGroupInput
+          name="newProject.details.appType"
+          label="App Type"
+          disabled={false}
+          wrapperClass="app-type1"
+          options={appTypeOptions}
+        />
+
+        <div className="project-info">
+          <h2>Project info</h2>
+
+          <TextInput
+            name="newProject.name"
+            type="text"
+            validations={{
+              required: [Validations.isRequired, 'project name is required']
+            }}
+            label="Project Name"
+            placeholder="enter project name"
+            disabled={false}
+            wrapperClass="row"
+          />
+
+          <TextareaInput
+            name="newProject.description"
+            label="Description"
+            disabled={false}
+            wrapperClass="row"
+          />
+
+          <TextInput
+            name="details.utm.code"
+            label="Invite code (optional)"
+            type="text"
+            disabled={false}
+            wrapperClass="row center"
+          />
+        </div>
+        {/* .project-info */}
+
+        <div className="button-area">
+          <SubmitButton className="tc-btn tc-btn-primary tc-btn-md">
+            Create Project
+          </SubmitButton>
+        </div>
+        {/* .project-info */}
+      </Form>
+    )
+  }
+}
+
+AppProjectForm.propTypes = {
+  submitHandler: PropTypes.func.isRequired
+}
+
+const mapStateToProps = ({ newProject, projectState }) => ({
+  newProject,
+  isLoading: projectState.isLoading,
+  project: projectState.project
+})
+
+const actionCreators = { clearLoadedProject}
+
+export default connect(mapStateToProps, actionCreators)(AppProjectForm)

src/projects/create/CreateProject.scss → src/projects/create/components/CreateProject.scss

@@ -76,7 +76,7 @@
             position:absolute;
             right: 20px;
             top: 20px;
-            // background: url('../images/x-mark-big.svg') no-repeat 0 0;
+            background: url('../../images/x-mark-big.svg') no-repeat 0 0;
             width: 14px;
             height: 14px;
             background-size: 14px 14px;
@@ -219,35 +219,35 @@
                     }
                     &.phone{
                         span.icon{
-                            // background: url('../images/phone.svg') no-repeat 0 0;
+                            background: url('../../images/phone.svg') no-repeat 0 0;
                             width: 33px;
                             background-size: 33px 50px;
                         }
                     }
                     &.tablet{
                         span.icon{
-                            // background: url('../images/tablet.svg') no-repeat 0 0;
+                            background: url('../../images/tablet.svg') no-repeat 0 0;
                             width: 43px;
                             background-size: 43px 50px;
                         }
                     }
                     &.desktop{
                         span.icon{
-                            // background: url('../images/desktop.svg') no-repeat 0 0;
+                            background: url('../../images/desktop.svg') no-repeat 0 0;
                             width: 55px;
                             background-size: 55px 50px;
                         }
                     }
                     &.apple-watch{
                         span.icon{
-                            // background: url('../images/watch-apple.svg') no-repeat 0 0;
+                            background: url('../../images/watch-apple.svg') no-repeat 0 0;
                             width: 38px;
                             background-size: 38px 50px;
                         }
                     }
                     &.android-watch{
                         span.icon{
-                            // background: url('../images/watch-android.svg') no-repeat 0 0;
+                            background: url('../../images/watch-android.svg') no-repeat 0 0;
                             width: 38px;
                             background-size: 38px 50px;
                         }
@@ -261,7 +261,7 @@
                     color: $tc-gray-40;
                     font-size:12px;
                     line-height: 155px;
-                    // background: url('../images/divider.png') no-repeat 50% 0;
+                    background: url('../../images/divider.png') no-repeat 50% 0;
                 }
             }
         }
@@ -395,7 +395,7 @@
             height: 16px;
             border: none!important;
             box-shadow: none!important;
-            // background: url('../images/slider-bg.png') no-repeat 0 0;
+            background: url('../../images/slider-bg.png') no-repeat 0 0;
         }
         &::-webkit-slider-thumb {
             -webkit-appearance: none;
@@ -413,7 +413,7 @@
         &::-moz-range-track {
             width: 600px;
             height: 16px;
-            // background: url('../images/slider-bg.png') no-repeat 0 0;
+            background: url('../../images/slider-bg.png') no-repeat 0 0;
             border: none;
 
         }

src/projects/create/CreateView.jsx → src/projects/create/components/CreateView.jsx

@@ -1,11 +1,12 @@
 import _ from 'lodash'
 
 import React, { Component, PropTypes } from 'react'
-import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../config/constants'
-import WorkProjectForm from './WorkProjectForm'
+import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../../config/constants'
 import AppProjectForm from './AppProjectForm'
+import GenericProjectForm from './GenericProjectForm'
 import { connect } from 'react-redux'
-import { createProject } from '../../actions/project'
+import { withRouter } from 'react-router'
+import { createProject } from '../../../actions/project'
 
 require('./CreateProject.scss')
 
@@ -15,13 +16,21 @@ class CreateView extends Component {
     super(props)
   }
 
+  componentWillUpdate(nextProps) {
+    if (!nextProps.isLoading &&
+        nextProps.project.id) {
+      console.log('project created', nextProps.project)
+      this.props.router.push('/projects/' + nextProps.project.id )
+    }
+  }
+
   handleSelect(index, last) {
     console.log('SelectedTab: ' + index, ', LastTab: ' + last)
   }
 
   createProject(val) {
     console.log('creating project', val)
-    this.props.createProject(val)
+    createProject(val.newProject)
   }
 
   switchTab(val) {
@@ -48,12 +57,14 @@ class CreateView extends Component {
       // Todo select based on Tab
       form = <AppProjectForm submitHandler={this.createProject}/>
     } else {
-      form = <WorkProjectForm submitHandler={this.createProject}/>
+      // form = <WorkProjectForm submitHandler={this.createProject}/>
+      tabs = this.renderTabs()
+      form = <GenericProjectForm onSubmit={this.createProject} />
     }
     return (
       <section className="content">
         <div className="container">
-          <a href="#" className="btn-close">x</a>
+          <a href="#" className="btn-close"></a>
           {tabs}
           {form}
         </div>
@@ -72,5 +83,9 @@ CreateView.defaultProps = {
   currentTab: 0
 }
 
-const mapDispatchToProps = { createProject }
-export default connect(null, mapDispatchToProps)(CreateView)
+const mapStateToProps = ({projectState }) => ({
+  isLoading: projectState.isLoading,
+  project: projectState.project
+})
+const actionCreators = { createProject }
+export default withRouter(connect(mapStateToProps, actionCreators)(CreateView))