From 4cf62b4805415d588687519d26cbb3d3a4c16923 Mon Sep 17 00:00:00 2001 From: Parth Shah Date: Thu, 28 Jul 2016 14:51:45 -0700 Subject: [PATCH 1/3] added devices and projecttype components :boom: --- src/projects/create/AppProjectForm.jsx | 250 ------------------ .../create/components/AppProjectForm.jsx | 136 ++++++++++ .../{ => components}/CreateProject.scss | 18 +- .../create/{ => components}/CreateView.jsx | 6 +- src/projects/create/components/Devices.jsx | 121 +++++++++ .../ProjectTypeSelector/ProjectType.jsx | 134 ++++++++++ .../{ => components}/WorkProjectForm.jsx | 2 +- src/projects/images/desktop.svg | 16 ++ src/projects/images/divider.png | Bin 0 -> 1072 bytes src/projects/images/logo-cn-web.svg | 25 ++ src/projects/images/phone.svg | 17 ++ src/projects/images/slider-bg.png | Bin 0 -> 15599 bytes src/projects/images/tablet.svg | 16 ++ src/projects/images/watch-android.svg | 18 ++ src/projects/images/watch-apple.svg | 19 ++ src/projects/images/x-mark-big.svg | 12 + src/projects/reducers/project.js | 2 +- src/projects/routes.jsx | 5 +- 18 files changed, 531 insertions(+), 266 deletions(-) delete mode 100644 src/projects/create/AppProjectForm.jsx create mode 100644 src/projects/create/components/AppProjectForm.jsx rename src/projects/create/{ => components}/CreateProject.scss (95%) rename src/projects/create/{ => components}/CreateView.jsx (93%) create mode 100644 src/projects/create/components/Devices.jsx create mode 100644 src/projects/create/components/ProjectTypeSelector/ProjectType.jsx rename src/projects/create/{ => components}/WorkProjectForm.jsx (97%) create mode 100644 src/projects/images/desktop.svg create mode 100644 src/projects/images/divider.png create mode 100644 src/projects/images/logo-cn-web.svg create mode 100644 src/projects/images/phone.svg create mode 100644 src/projects/images/slider-bg.png create mode 100644 src/projects/images/tablet.svg create mode 100644 src/projects/images/watch-android.svg create mode 100644 src/projects/images/watch-apple.svg create mode 100644 src/projects/images/x-mark-big.svg diff --git a/src/projects/create/AppProjectForm.jsx b/src/projects/create/AppProjectForm.jsx deleted file mode 100644 index 52cb9a165..000000000 --- a/src/projects/create/AppProjectForm.jsx +++ /dev/null @@ -1,250 +0,0 @@ - -import React, { Component, PropTypes } from 'react' -import { connect } from 'react-redux' -import { Form, actions as modelActions } from 'react-redux-form' -import { createProject, clearLoadedProject } from '../../actions/project' -import { withRouter } from 'react-router' -import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' -import _ from 'lodash' -import classNames from 'classnames' - -require('./CreateProject.scss') - -const devicesSet1 = [ - { - title: 'Phone', - val: 'phone', - desc: 'iOS, Android, Hybrid' - }, { - title: 'Tablet', - val: 'tablet', - desc: 'iOS, Android, Hybrid' - }, { - title: 'Desktop', - val: 'desktop', - desc: 'All OS' - } -] -const devicesSet2 = [ - { - title: 'Apple Watch', - val: 'apple-watch', - desc: 'Watch OS' - }, { - title: 'Android Watch', - val: 'android-watch', - desc: 'Android Wear' - } -] - - -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 ) - } - } - - renderDevices() { - const devices = this.props.newProject.details.devices - const deviceFunc = (item, index) => { - const itemClassnames = classNames( - item.val, { - active: _.indexOf(devices, item.val) > -1 - } - ) - return ( - this.props.toggleDevice(item.val)} - className={itemClassnames} - key={index} - > - - {item.title} - {item.desc} - - ) - } - - return ( -
-

Pick target device(s)

-
- { devicesSet1.map(deviceFunc) } -
- Or -
- { devicesSet2.map(deviceFunc) } -
-
- ) - } - - render () { - const devices = this.renderDevices() - - return ( -
this.props.submitHandler(val)}> -
-

What would you like to do?

-
-
-

Visualize an app idea

-

5-7 days, from $3,500

-
- -
-

Prototype an app

-

14+ days, from $15,000

-
- -
-

Fully develop an app

-

from $30,000

-
-
- -
- -

-
- -
- Wireframes, Visual Design - Visual or HTML prototype - Design, Front End, Back End,
Integration and API -
-
- {/* .what-you-like-to-do */} - - { devices } - - {/* .pick-target-devices */} - -
-

App Type:

- -
- - -
-
- - -
-
- - -
-
- - -
-
- {/* .pick-target-devices */} - -
-

Project info

- -
- val - }} - errorMessages={{ - required: 'Please provide a project name' - }} - formModelName="newProjectForm" - fieldModelName="newProject.name" - label="Project Name" - placeholder="Enter project name" - inputType="text" - /> -
- -
- -
- -
- -
-
- {/* .project-info */} - -
- Create Project -
- {/* .project-info */} -
- ) - } -} - -AppProjectForm.propTypes = { - submitHandler: PropTypes.func.isRequired -} - -const mapStateToProps = ({ newProject, projectState }) => ({ - newProject, - isLoading: projectState.isLoading, - project: projectState.project -}) - -function modelActionCreator(modelName, reset, val) { - return (dispatch) => { - if (reset) { - dispatch(modelActions.change(modelName, [val])) - } else { - dispatch(modelActions.xor(modelName, val)) - } - } -} -const actionCreators = { createProject, clearLoadedProject, modelActionCreator } - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const props = Object.assign({}, ownProps, stateProps, dispatchProps, { - toggleDevice: (val) => { - const modelName = 'newProject.details.devices' - // if val from set1 is selected values from set2 cannot be selected - const set1 = _.map(devicesSet1, 'val') - const set2 = _.map(devicesSet2, 'val') - let reset = false - if (_.intersection(set1, stateProps.newProject.details.devices).length) { - if (_.indexOf(set2, val) > -1) { - reset = true - } - } else if (_.intersection(set2, stateProps.newProject.details.devices).length) { - if (_.indexOf(set1, val) > -1) { - reset = true - } - } - props.modelActionCreator(modelName, reset, val) - } - }) - return props -} - -export default withRouter(connect(mapStateToProps, actionCreators, mergeProps)(AppProjectForm)) diff --git a/src/projects/create/components/AppProjectForm.jsx b/src/projects/create/components/AppProjectForm.jsx new file mode 100644 index 000000000..a83103d2a --- /dev/null +++ b/src/projects/create/components/AppProjectForm.jsx @@ -0,0 +1,136 @@ + +import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' +import { Form } from 'react-redux-form' +import { withRouter } from 'react-router' +import _ from 'lodash' +import classNames from 'classnames' + +import { createProject, clearLoadedProject } from '../../../actions/project' +import DevicesComponent from './Devices' +import ProjectTypeSelector from './ProjectTypeSelector/ProjectType' +import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' + +require('./CreateProject.scss') + + +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 ( +
this.props.submitHandler(val)}> + {/* .what-you-like-to-do */} + + + + {/* .pick-target-devices */} + + +
+

App Type:

+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ {/* .pick-target-devices */} + +
+

Project info

+ +
+ val + }} + errorMessages={{ + required: 'Please provide a project name' + }} + formModelName="newProjectForm" + fieldModelName="newProject.name" + label="Project Name" + placeholder="Enter project name" + inputType="text" + /> +
+ +
+ +
+ +
+ +
+
+ {/* .project-info */} + +
+ +
+ {/* .project-info */} + + ) + } +} + +AppProjectForm.propTypes = { + submitHandler: PropTypes.func.isRequired +} + +const mapStateToProps = ({ newProject, projectState }) => ({ + newProject, + isLoading: projectState.isLoading, + project: projectState.project +}) + +const actionCreators = { createProject, clearLoadedProject} + +export default withRouter(connect(mapStateToProps, actionCreators)(AppProjectForm)) diff --git a/src/projects/create/CreateProject.scss b/src/projects/create/components/CreateProject.scss similarity index 95% rename from src/projects/create/CreateProject.scss rename to src/projects/create/components/CreateProject.scss index b26596589..f10702f32 100644 --- a/src/projects/create/CreateProject.scss +++ b/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; } diff --git a/src/projects/create/CreateView.jsx b/src/projects/create/components/CreateView.jsx similarity index 93% rename from src/projects/create/CreateView.jsx rename to src/projects/create/components/CreateView.jsx index 5a05f3d10..533ee0346 100644 --- a/src/projects/create/CreateView.jsx +++ b/src/projects/create/components/CreateView.jsx @@ -1,11 +1,11 @@ import _ from 'lodash' import React, { Component, PropTypes } from 'react' -import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../config/constants' +import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../../config/constants' import WorkProjectForm from './WorkProjectForm' import AppProjectForm from './AppProjectForm' import { connect } from 'react-redux' -import { createProject } from '../../actions/project' +import { createProject } from '../../../actions/project' require('./CreateProject.scss') @@ -53,7 +53,7 @@ class CreateView extends Component { return (
- x + {tabs} {form}
diff --git a/src/projects/create/components/Devices.jsx b/src/projects/create/components/Devices.jsx new file mode 100644 index 000000000..a104ddd63 --- /dev/null +++ b/src/projects/create/components/Devices.jsx @@ -0,0 +1,121 @@ + +import React, { Component, PropTypes } from 'react' +import { actions as modelActions } from 'react-redux-form' +import { connect } from 'react-redux' +import _ from 'lodash' +import classNames from 'classnames' + +const devicesSet1 = [ + { + title: 'Phone', + val: 'phone', + desc: 'iOS, Android, Hybrid' + }, { + title: 'Tablet', + val: 'tablet', + desc: 'iOS, Android, Hybrid' + }, { + title: 'Desktop', + val: 'desktop', + desc: 'All OS' + } +] +const devicesSet2 = [ + { + title: 'Apple Watch', + val: 'apple-watch', + desc: 'Watch OS' + }, { + title: 'Android Watch', + val: 'android-watch', + desc: 'Android Wear' + } +] + +class DevicesComponent extends Component { + constructor(props) { + super(props) + } + + render() { + const { devices } = this.props + // creating a function to render each device item + const deviceFunc = (item, index) => { + // adding classes eg. "phone active" + const itemClassnames = classNames( + item.val, { + active: _.indexOf(devices, item.val) > -1 + } + ) + return ( + this.props.toggleDevice(item.val)} + className={itemClassnames} + key={index} + > + + {item.title} + {item.desc} + + ) + } + return ( +
+

Pick target device(s)

+
+ { devicesSet1.map(deviceFunc) } +
+ Or +
+ { devicesSet2.map(deviceFunc) } +
+
+ ) + } +} + +/* + * This is a wrapper function to update device list state. + * It uses model Actions from react-redux-form to dispatch the change + * action. + */ +function updateDeviceList(devicesBeforeAction, val) { + return (dispatch) => { + const modelName = 'newProject.details.devices' + const set1 = _.map(devicesSet1, 'val') + const set2 = _.map(devicesSet2, 'val') + + // if val from set1 is selected values from set2 cannot be selected + // and vice-versa... + const reset = + (_.intersection(set1, devicesBeforeAction).length + && _.indexOf(set2, val) > -1) + || (_.intersection(set2, devicesBeforeAction).length + && _.indexOf(set1, val) > -1) + + if (reset) { + dispatch(modelActions.change(modelName, [val])) + } else { + dispatch(modelActions.xor(modelName, val)) + } + } +} + +DevicesComponent.propTypes = { + devices: PropTypes.arrayOf(PropTypes.string).isRequired +} +const actionCreators = { updateDeviceList } +const mapStateToProps = ({newProject}) => ({ + devices: newProject.details.devices +}) + +// Merging props so that we can use determine the current +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const props = Object.assign({}, ownProps, stateProps, dispatchProps, { + toggleDevice: (val) => { + props.updateDeviceList(stateProps.devices, val) + } + }) + return props +} + +export default connect(mapStateToProps, actionCreators, mergeProps)(DevicesComponent) diff --git a/src/projects/create/components/ProjectTypeSelector/ProjectType.jsx b/src/projects/create/components/ProjectTypeSelector/ProjectType.jsx new file mode 100644 index 000000000..87d6360b7 --- /dev/null +++ b/src/projects/create/components/ProjectTypeSelector/ProjectType.jsx @@ -0,0 +1,134 @@ + +import React, { Component, PropTypes } from 'react' +import { actions as modelActions } from 'react-redux-form' +import { connect } from 'react-redux' +import _ from 'lodash' +import classNames from 'classnames' + +const projectTypes = [{ + val: 'visual_design', + numericVal: 0, + title: 'Visualize an app idea', + desc:

5-7 days, from $3,500

, + info: 'Wireframes, Visual Design' +}, { + val: 'visual_prototype', + numericVal: 1, + title: 'Prototype an app', + desc:

14+ days, from $15,000

, + info: 'Visual or HTML prototype' +}, { + val: 'app_dev', + numericVal: 2, + title: 'Fully develop an app', + desc:

from $30,000

, + info: 'Design, Front End, Back End,
Integration and API' +}] + +const getTypeIndex = (val) => _.findIndex(projectTypes, (t) => t.val === val) + +class ProjectTypeSelector extends Component { + constructor(props) { + super(props) + } + + render() { + const { type } = this.props + // creating a function to render each type title + desc + const itemFunc = (item, index) => { + // handle active class + const itemClassnames = classNames( 'selector', { + active: type === item.val + }) + const idx = getTypeIndex(item.val) + return ( +
+

{item.title}

+ {item.desc} +
+ ) + } + + // function to render item info + const itemInfoFunc = (item, index) => { + // handle active class + const itemClassnames = classNames({active: type === item.val}) + const idx = getTypeIndex(item.val) + return ( + + + ) + } + + return ( + /** + * TODO Using onInput trigger instead of onChange. + * onChange is showing some funky behavior at least in Chrome. + * This functionality should be tested in other browsers + */ +
+

What would you like to do?

+
+ {projectTypes.map(itemFunc)} +
+ +
+ +

+
+ +
+ {projectTypes.map(itemInfoFunc)} +
+
+ ) + } +} + + +ProjectTypeSelector.propTypes = { + type: PropTypes.string.isRequired, + mappedProjectType: PropTypes.number.isRequired +} +const actionCreators = { + sliderChangeCreator: (modelName, val) => { + return (dispatch) => { + // get val from index + dispatch(modelActions.change(modelName, projectTypes[val].val)) + } + } +} + +const mapStateToProps = ({newProject}) => ({ + type: newProject.type, + mappedProjectType: _.findIndex(projectTypes, (t) => newProject.type === t.val), +}) + +// Merging props so that we can use determine the current +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const props = Object.assign({}, ownProps, stateProps, dispatchProps, { + onSliderChange: (event) => { + // handling case where event is fired by clicking on range or div. + // the latter provides the index, the former an event + const idx = (typeof event !== 'number') ? parseInt(event.target.value) : event + props.sliderChangeCreator('newProject.type', idx) + } + }) + return props +} + +export default connect(mapStateToProps, actionCreators, mergeProps)(ProjectTypeSelector) diff --git a/src/projects/create/WorkProjectForm.jsx b/src/projects/create/components/WorkProjectForm.jsx similarity index 97% rename from src/projects/create/WorkProjectForm.jsx rename to src/projects/create/components/WorkProjectForm.jsx index a0fd1018a..d25d502d6 100644 --- a/src/projects/create/WorkProjectForm.jsx +++ b/src/projects/create/components/WorkProjectForm.jsx @@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import { Form, actions as modelActions} from 'react-redux-form' -import { clearLoadedProject } from '../../actions/project' +import { clearLoadedProject } from '../../../actions/project' import { withRouter } from 'react-router' import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' diff --git a/src/projects/images/desktop.svg b/src/projects/images/desktop.svg new file mode 100644 index 000000000..50e4bf352 --- /dev/null +++ b/src/projects/images/desktop.svg @@ -0,0 +1,16 @@ + + + + desktop + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects/images/divider.png b/src/projects/images/divider.png new file mode 100644 index 0000000000000000000000000000000000000000..1204e2ab41efe0b9e288deb530673e04a562347c GIT binary patch literal 1072 zcmbVLJ8aWH7`ED_s#JC8)Gj@_m00RW9LFzes>F8MNVr645E=2~nwZu;V_zCK14wL4 zhz=|aEZtC%7?>CsKu8rVEC?~f#zX3YnBbg8VW=vECHwCG{eA!Yzgyp2pP62mrYLHr zwqZ8NIY-`yQxoJn`%Y%bF^{bl-a^~B=OmCS`^bf$7CLR%fR4X^^BAsD)Z|{!Y~hxD zS@TfHIyr{T!kDlrYIQA(9d8F>;KFtg>Gb#KFK7_>I(@BV^LA{&PO#BW;8uUL>GgL! z)u-1kfz?bS211A(kcGQZs%1Jou&a@KuI6YkfZ!dS9tPF2>%c$>1SM8tJiZ_TS!D|) zNmk_*AP|}36;9w8Ue!uPjTgY^p^3M|-_{ytb>xdkI^DrI);O-$>#@Bei;^~1P*s)V z1x^qcf?(492s;@QrAuQACQQ8~h;e`-kXv+I)WteYA|0j>#N8C*}$) z&xK*0*8rX32K*Dondr2+A49GIQ`Aj7(vR(>F`3lvd`CHuM5A3v0@4&`*F;`7gb}Wp zI!*qte&B1K;`53qsf-By5+h17WL#JE7*A3~C=`os$(6@;&f*KEP*lr`A}STJP_U$m zR8h);YFNC%tCn0Cb8AtGoydb@-vRMG;>zc8H6wuzMoAN)-SHIEI|!q+gJNJ9gRTSH z@q#GVw{r{~WM}p$=Vfkx##ws$A`So-ah;X`0 zFd`e2kX1Q+ee#N|S-obKo7u-NAD+%oV9F}vU-taOh5FnA^X=KE{>l1P>v8#D`Dd&8 z_08Lt-Ku=BTsv4kesp;6ettPxd_OzT94!*@#{+7TTDZ|zxqa*6=X{52)~5NSa{bP4 DV1!b( literal 0 HcmV?d00001 diff --git a/src/projects/images/logo-cn-web.svg b/src/projects/images/logo-cn-web.svg new file mode 100644 index 000000000..aa702db3e --- /dev/null +++ b/src/projects/images/logo-cn-web.svg @@ -0,0 +1,25 @@ + + + + logo-cn-web + Created with Sketch. + + + + + + + + + + + + + + connect + + + + + + \ No newline at end of file diff --git a/src/projects/images/phone.svg b/src/projects/images/phone.svg new file mode 100644 index 000000000..8dae2420b --- /dev/null +++ b/src/projects/images/phone.svg @@ -0,0 +1,17 @@ + + + + phone + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects/images/slider-bg.png b/src/projects/images/slider-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..4403507fda2d785ff8fa8ede226c1ba67d7d917a GIT binary patch literal 15599 zcmeI3TWl0n7{?Enkh(&(!AJv9*Ciwn*qzJn>}8x?Yr1+xvph757F(w!i60uQ<(GZ}byhsco1c;Xx?Gs*r1Tg`l^~~OTcK28l9*jAg z?CyN$JKz7D^E==9W?tsy_Vv#!vMjX#02Z~ihB^S4+Xb&5uA2*g!>=7W3jZERwRY|Va@-%DB ze{2B@yb{uKjPD4w2Psk+F-0*BnyL{LiQvN$ ziK>yh(V>)9R&_wVb0nou9g40ErX>Y-UtVnrx)C0NOUfgfg;01%Ng7q9WT~i=8cfHt zpk;|t;z|OB=#ToNyCz0Mjn!abdTNF#8MQ{3>B)sN&u#|+fIAzth1A0 zco)kvp4GI6r|B}0Tu($JqRDD(q(Xz`ov21xPgDaQMOie&S*euwov9Ov@NG%m5R;P9 z77D<%J5*KXV+_Z|IIqXfc$|{mCDBg1&*u^CQ6KAzI^8Z8EsNPj&J3@R4r$V$nM!$S z8A`Ju*6C~Vx?J977sG_z&F*Gz6YC3x=^*V3dzgZ3S!kuKl2(Tlxh1V7vZp*HrggJ<+9L{auGvmsYqr+^c&JD zEbL;ujFq{A{|0jviLyyRH8@PGs>2gBQZ~N1ZnL~@QU+$W794SPmK#&t9$3_PQ8Ej6 zKo{ZW3RJex71~OZ%0-w18N4-%W;}K(CS5dz# zy!IHweM)l1ac6m!<2i5PxaVe)?NwVu*J8%7m{yv4;fa`CEz0T646HqX)F&o;6*)i^ z*cBSk5P>o`FRuO<_ilEjr()~TC6@A|%HGW=v;T{|%kAjQ<5(ymmB&|*B|fI56QU7N z6JoDIrINh@Rcb836pHt9KB&dDG`t@v0jEG!Yc7j2@8V{4f{89>k2Ean6>Vt$F0*#W z2ebV>EDb*tWB%qt%iU;bH$Jr7jfR#YHz!piz~)Con#-chM~xheP4Mwr3Aj1V$q5wN zj7GGp871BoQsM1TH;bIxTv#>;^;C`QE=4l#^1w1jJ}{RHWlzG{W1ee;&)M)1pDI4% zS5$yvb-kY#r4`*zRYZ#nf&jsr1Q(tU;w88cAb6AD!t+7A1Q!AXZxUR1K8Tm#LV(~+ zf(y?F@e*7J5WGon;rSq5f(rqHHwi90AH+*=AwcjZ!G-68cnK~92;L;P@O%(2!G!?9 zn*I{AM_`^ICYLWBg*nfcJ$PLr*NQy!gqs)ABb{6DPu7#%{-U(CY?{OxK;g@v8sV zFYXH5mQTaWF5S7h_sRVqubDUb-eCPX;o_b%mjc4$t8b5OKiRNTTh#cG_X2zCp_2=y zRynTkj(+{DXW^D(S9=zoUvY-BOdjk$l%02dGdTRN6C#_Qo(JYPoQwVV^!8Vv3EINz KLmxEvjQtJ0`~nXE literal 0 HcmV?d00001 diff --git a/src/projects/images/tablet.svg b/src/projects/images/tablet.svg new file mode 100644 index 000000000..61b8c55e5 --- /dev/null +++ b/src/projects/images/tablet.svg @@ -0,0 +1,16 @@ + + + + tablet + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects/images/watch-android.svg b/src/projects/images/watch-android.svg new file mode 100644 index 000000000..15d1bca73 --- /dev/null +++ b/src/projects/images/watch-android.svg @@ -0,0 +1,18 @@ + + + + watch-android + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects/images/watch-apple.svg b/src/projects/images/watch-apple.svg new file mode 100644 index 000000000..32bcbe7e0 --- /dev/null +++ b/src/projects/images/watch-apple.svg @@ -0,0 +1,19 @@ + + + + watch-apple + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects/images/x-mark-big.svg b/src/projects/images/x-mark-big.svg new file mode 100644 index 000000000..9ad2a3fbb --- /dev/null +++ b/src/projects/images/x-mark-big.svg @@ -0,0 +1,12 @@ + + + + x-mark-big + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js index c2605d833..99995aee9 100644 --- a/src/projects/reducers/project.js +++ b/src/projects/reducers/project.js @@ -67,7 +67,7 @@ export const newProject = modelReducer('newProject', { utm: { code: '' }, - type: '', + type: 'visual_design', details: { version: 'v2', devices: ['phone'], diff --git a/src/projects/routes.jsx b/src/projects/routes.jsx index e61540ec1..3f5f1c6e0 100644 --- a/src/projects/routes.jsx +++ b/src/projects/routes.jsx @@ -10,13 +10,14 @@ import Dashboard from './detail/components/Dashboard' import Specification from './detail/components/Specification' import ProjectsToolBar from './list/components/ProjectsToolBar/ProjectsToolBar' import ProjectToolBar from './detail/components/ProjectToolBar/ProjectToolBar' -import CreateProjectWizard from './create/CreateView' +import CreateProjectWizard from './create/components/CreateView' import { requiresAuthentication } from '../components/AuthenticatedComponent' const projectRoutes = ( - + // TOOD add auth check requiresAuthentication(ProjectLayout) + // TODO add project topbar From 816416db078d2958398348fb7198f8b7ad91aed5 Mon Sep 17 00:00:00 2001 From: Parth Shah Date: Mon, 1 Aug 2016 01:38:32 -0700 Subject: [PATCH 2/3] updating to latest forms --- package.json | 1 + .../create/components/AppProjectForm.jsx | 192 ++++++++++-------- src/projects/create/components/CreateView.jsx | 25 ++- src/projects/create/components/Devices.jsx | 168 ++++++++------- .../create/components/GenericProjectForm.jsx | 58 ++++++ .../components/old/AppProjectReduxForm.jsx | 139 +++++++++++++ .../create/components/old/AppTypeSelector.jsx | 57 ++++++ .../create/components/old/Devices.jsx | 121 +++++++++++ .../ProjectTypeSelector/ProjectType.jsx | 5 +- .../components/{ => old}/WorkProjectForm.jsx | 12 +- .../list/components/Projects/ProjectsView.jsx | 2 +- src/projects/reducers/project.js | 4 +- src/projects/routes.jsx | 3 +- 13 files changed, 612 insertions(+), 175 deletions(-) create mode 100644 src/projects/create/components/GenericProjectForm.jsx create mode 100644 src/projects/create/components/old/AppProjectReduxForm.jsx create mode 100644 src/projects/create/components/old/AppTypeSelector.jsx create mode 100644 src/projects/create/components/old/Devices.jsx rename src/projects/create/components/{ => old}/ProjectTypeSelector/ProjectType.jsx (97%) rename src/projects/create/components/{ => old}/WorkProjectForm.jsx (85%) diff --git a/package.json b/package.json index d7e139a22..0fed87c4f 100644 --- a/package.json +++ b/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", diff --git a/src/projects/create/components/AppProjectForm.jsx b/src/projects/create/components/AppProjectForm.jsx index a83103d2a..e7b614383 100644 --- a/src/projects/create/components/AppProjectForm.jsx +++ b/src/projects/create/components/AppProjectForm.jsx @@ -1,18 +1,58 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' -import { Form } from 'react-redux-form' -import { withRouter } from 'react-router' -import _ from 'lodash' -import classNames from 'classnames' - -import { createProject, clearLoadedProject } from '../../../actions/project' +import { clearLoadedProject } from '../../../actions/project' import DevicesComponent from './Devices' -import ProjectTypeSelector from './ProjectTypeSelector/ProjectType' -import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' +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:

5-7 days, from $3,500

, + info: 'Wireframes, Visual Design' + }, { + value: 'visual_prototype', + title: 'Prototype an app', + desc:

14+ days, from $15,000

, + info: 'Visual or HTML prototype' + }, { + value: 'app_dev', + title: 'Fully develop an app', + desc:

from $30,000

, + info: 'Design, Front End, Back End,
Integration and API' + } +] + + +const initalFormValue = { + newProject: { + details: { + appType: 'ios', + devices: ['phone'], + utm: { code: ''} + }, + type: 'visual_prototype' + } +} class AppProjectForm extends Component { constructor(props) { @@ -23,97 +63,79 @@ class AppProjectForm extends Component { 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 ) - } - } + // componentWillUpdate(nextProps) { + // if (!nextProps.isLoading && + // nextProps.project.id) { + // console.log('project created', nextProps.project) + // this.props.router.push('/projects/' + nextProps.project.id ) + // } + // } render () { - return ( -
this.props.submitHandler(val)}> - {/* .what-you-like-to-do */} - - + +
+

What would you like to do?

+ +
{/* .pick-target-devices */} + -
-

App Type:

- -
- - -
-
- - -
-
- - -
-
- - -
-
- {/* .pick-target-devices */} +

Project info

-
- val - }} - errorMessages={{ - required: 'Please provide a project name' - }} - formModelName="newProjectForm" - fieldModelName="newProject.name" - label="Project Name" - placeholder="Enter project name" - inputType="text" - /> -
- -
- -
- -
- -
+ + + + +
{/* .project-info */}
- + + Create Project +
{/* .project-info */} @@ -131,6 +153,6 @@ const mapStateToProps = ({ newProject, projectState }) => ({ project: projectState.project }) -const actionCreators = { createProject, clearLoadedProject} +const actionCreators = { clearLoadedProject} -export default withRouter(connect(mapStateToProps, actionCreators)(AppProjectForm)) +export default connect(mapStateToProps, actionCreators)(AppProjectForm) diff --git a/src/projects/create/components/CreateView.jsx b/src/projects/create/components/CreateView.jsx index 533ee0346..5020f68c8 100644 --- a/src/projects/create/components/CreateView.jsx +++ b/src/projects/create/components/CreateView.jsx @@ -2,9 +2,10 @@ import _ from 'lodash' import React, { Component, PropTypes } from 'react' import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../../config/constants' -import WorkProjectForm from './WorkProjectForm' import AppProjectForm from './AppProjectForm' +import GenericProjectForm from './GenericProjectForm' import { connect } from 'react-redux' +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,7 +57,9 @@ class CreateView extends Component { // Todo select based on Tab form = } else { - form = + // form = + tabs = this.renderTabs() + form = } return (
@@ -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)) diff --git a/src/projects/create/components/Devices.jsx b/src/projects/create/components/Devices.jsx index a104ddd63..bda056089 100644 --- a/src/projects/create/components/Devices.jsx +++ b/src/projects/create/components/Devices.jsx @@ -1,121 +1,137 @@ -import React, { Component, PropTypes } from 'react' -import { actions as modelActions } from 'react-redux-form' -import { connect } from 'react-redux' +import React, { PropTypes } from 'react' +import { TiledCheckboxInput, BaseInputField } from 'appirio-tech-react-components' + import _ from 'lodash' -import classNames from 'classnames' const devicesSet1 = [ { title: 'Phone', - val: 'phone', + value: 'phone', desc: 'iOS, Android, Hybrid' }, { title: 'Tablet', - val: 'tablet', + value: 'tablet', desc: 'iOS, Android, Hybrid' }, { title: 'Desktop', - val: 'desktop', + value: 'desktop', desc: 'All OS' } ] const devicesSet2 = [ { title: 'Apple Watch', - val: 'apple-watch', + value: 'apple-watch', desc: 'Watch OS' }, { title: 'Android Watch', - val: 'android-watch', + value: 'android-watch', desc: 'Android Wear' } ] -class DevicesComponent extends Component { +const set1Values = _.map(devicesSet1, 'value') +const set2Values = _.map(devicesSet2, 'value') + +class DevicesComponent extends BaseInputField { constructor(props) { super(props) + this.onChange = this.onChange.bind(this) } - render() { - const { devices } = this.props - // creating a function to render each device item - const deviceFunc = (item, index) => { - // adding classes eg. "phone active" - const itemClassnames = classNames( - item.val, { - active: _.indexOf(devices, item.val) > -1 - } - ) - return ( - this.props.toggleDevice(item.val)} - className={itemClassnames} - key={index} - > - - {item.title} - {item.desc} - - ) + componentWillMount() { + const value = this.props.value || [] + this.setState({ + dirty: false, + valid: false, + value, + set1: _.intersection(set1Values, value), + set2: _.intersection(set2Values, value) + }) + } + onChange(fieldName, newValue) { + const { onFieldChange, validateField, name, validations} = this.props + + // determine the value that was just added + let justUpdated = _.difference(newValue, this.state.value) + if (!justUpdated.length) { + justUpdated = _.difference(this.state.value, newValue) } - return ( -
-

Pick target device(s)

-
- { devicesSet1.map(deviceFunc) } -
- Or -
- { devicesSet2.map(deviceFunc) } -
-
- ) + justUpdated = justUpdated[0] + + const newDevices = this.updateDeviceList(this.state.value, justUpdated) + const results = validateField(newDevices, validations) + const isValid = results && !results.hasError || true + this.setState({ + dirty: true, + value: newDevices, + set1: _.intersection(set1Values, newDevices), + set2: _.intersection(set2Values, newDevices), + valid: isValid, + errorMessage: _.get(results, 'errorMessage', '') + }) + onFieldChange(name, newValue, isValid) } -} -/* - * This is a wrapper function to update device list state. - * It uses model Actions from react-redux-form to dispatch the change - * action. - */ -function updateDeviceList(devicesBeforeAction, val) { - return (dispatch) => { - const modelName = 'newProject.details.devices' - const set1 = _.map(devicesSet1, 'val') - const set2 = _.map(devicesSet2, 'val') + /* + * This is a wrapper function to update device list state. + * It uses model Actions from react-redux-form to dispatch the change + * action. + */ + updateDeviceList(devices, val) { // if val from set1 is selected values from set2 cannot be selected // and vice-versa... const reset = - (_.intersection(set1, devicesBeforeAction).length - && _.indexOf(set2, val) > -1) - || (_.intersection(set2, devicesBeforeAction).length - && _.indexOf(set1, val) > -1) + (_.intersection(set1Values, devices).length + && _.indexOf(set2Values, val) > -1) + || (_.intersection(set2Values, devices).length + && _.indexOf(set1Values, val) > -1) if (reset) { - dispatch(modelActions.change(modelName, [val])) + return [val] } else { - dispatch(modelActions.xor(modelName, val)) + return _.xor(devices, [val]) } } -} -DevicesComponent.propTypes = { - devices: PropTypes.arrayOf(PropTypes.string).isRequired + render() { + return ( +
+

Pick target device(s)

+
+ +
+ Or +
+ +
+
+ ) + } } -const actionCreators = { updateDeviceList } -const mapStateToProps = ({newProject}) => ({ - devices: newProject.details.devices -}) +DevicesComponent.displayName = 'DevicesInputField' +DevicesComponent.defaultProps = _.merge({}, DevicesComponent.defaultProps, {value: []}) -// Merging props so that we can use determine the current -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const props = Object.assign({}, ownProps, stateProps, dispatchProps, { - toggleDevice: (val) => { - props.updateDeviceList(stateProps.devices, val) - } - }) - return props -} +DevicesComponent.propTypes = _.assign({}, DevicesComponent.propTypes, { + value: PropTypes.arrayOf(PropTypes.string.isRequired) +}) -export default connect(mapStateToProps, actionCreators, mergeProps)(DevicesComponent) +export default DevicesComponent diff --git a/src/projects/create/components/GenericProjectForm.jsx b/src/projects/create/components/GenericProjectForm.jsx new file mode 100644 index 000000000..e24217293 --- /dev/null +++ b/src/projects/create/components/GenericProjectForm.jsx @@ -0,0 +1,58 @@ +import React, { Component } from 'react' +import { Form, TextInput, TextareaInput, SubmitButton, Validations } from 'appirio-tech-react-components' + +const initialValue = { + newProject: { + name: 'initial', + description: '', + type: 'generic' + } +} +class GenericProjectForm extends Component { + + componentWillMount() { + this.setState(initialValue) + } + + onSubmit(formValue) { + console.log(formValue) + } + + onChange(formValue) { + this.setState(formValue) + console.log(formValue) + } + + render() { + return ( +
+ + + + +
+ + Create Project + +
+ + ) + } +} + +export default GenericProjectForm diff --git a/src/projects/create/components/old/AppProjectReduxForm.jsx b/src/projects/create/components/old/AppProjectReduxForm.jsx new file mode 100644 index 000000000..a5e8acb62 --- /dev/null +++ b/src/projects/create/components/old/AppProjectReduxForm.jsx @@ -0,0 +1,139 @@ + +import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' +import { Form } from 'react-redux-form' +import { withRouter } from 'react-router' + +import { createProject, clearLoadedProject } from '../../../actions/project' +import DevicesComponent from './Devices' +import ProjectTypeSelector from './ProjectTypeSelector/ProjectType' +import AppTypeSelector from './AppTypeSelector' +import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' + +require('./CreateProject.scss') + + +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 ( +
+ {/* .what-you-like-to-do */} + + + + {/* .pick-target-devices */} + + + {/* +
+

App Type:

+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ */ } + + {/* .pick-target-devices */} + +
+

Project info

+ +
+ val + }} + errorMessages={{ + required: 'Please provide a project name' + }} + formModelName="newProjectForm" + fieldModelName="newProject.name" + label="Project Name" + placeholder="Enter project name" + inputType="text" + /> +
+ +
+ +
+ +
+ +
+
+ {/* .project-info */} + +
+ +
+ {/* .project-info */} + + ) + } +} + +AppProjectForm.propTypes = { + submitHandler: PropTypes.func.isRequired +} + +const mapStateToProps = ({ newProject, projectState }) => ({ + newProject, + isLoading: projectState.isLoading, + project: projectState.project +}) + +const actionCreators = { createProject, clearLoadedProject} + +export default withRouter(connect(mapStateToProps, actionCreators)(AppProjectForm)) diff --git a/src/projects/create/components/old/AppTypeSelector.jsx b/src/projects/create/components/old/AppTypeSelector.jsx new file mode 100644 index 000000000..2c96d7707 --- /dev/null +++ b/src/projects/create/components/old/AppTypeSelector.jsx @@ -0,0 +1,57 @@ + +import React, { Component, PropTypes } from 'react' +import { Field } from 'react-redux-form' + +const typeOptions = [{ + val: 'ios', + label: 'iOS' +}, { + val: 'android', + label: 'Android' +}, { + val: 'web', + label: 'Web' +}, { + val: 'hybrid', + label: 'Hybrid' +}] + +class AppTypeSelector extends Component { + constructor(props) { + super(props) + } + + render() { + // creating a function to render each radio button + const typeFunc = (item, index) => { + // adding classes eg. "phone active" + const id = 'radio-option-' + index + return ( +
+ + +
+ ) + } + return ( +
+

App Type:

+ + { typeOptions.map(typeFunc) } + +
+ ) + } +} + + +AppTypeSelector.propTypes = { + modelName: PropTypes.string.isRequired +} + +export default AppTypeSelector diff --git a/src/projects/create/components/old/Devices.jsx b/src/projects/create/components/old/Devices.jsx new file mode 100644 index 000000000..356e7df74 --- /dev/null +++ b/src/projects/create/components/old/Devices.jsx @@ -0,0 +1,121 @@ + +import React, { Component, PropTypes } from 'react' +import { actions as modelActions } from 'react-redux-form' +import { connect } from 'react-redux' +import _ from 'lodash' +import classNames from 'classnames' + +const devicesSet1 = [ + { + title: 'Phone', + val: 'phone', + desc: 'iOS, Android, Hybrid' + }, { + title: 'Tablet', + val: 'tablet', + desc: 'iOS, Android, Hybrid' + }, { + title: 'Desktop', + val: 'desktop', + desc: 'All OS' + } +] +const devicesSet2 = [ + { + title: 'Apple Watch', + val: 'apple-watch', + desc: 'Watch OS' + }, { + title: 'Android Watch', + val: 'android-watch', + desc: 'Android Wear' + } +] + +class DevicesComponent extends Component { + constructor(props) { + super(props) + } + + render() { + const { devices } = this.props + // creating a function to render each device item + const deviceFunc = (item, index) => { + // adding classes eg. "phone active" + const itemClassnames = classNames( + item.val, { + active: _.indexOf(devices, item.val) > -1 + } + ) + return ( + + + {item.title} + {item.desc} + + ) + } + return ( +
+

Pick target device(s)

+
+ { devicesSet1.map(deviceFunc) } +
+ Or +
+ { devicesSet2.map(deviceFunc) } +
+
+ ) + } +} + +/* + * This is a wrapper function to update device list state. + * It uses model Actions from react-redux-form to dispatch the change + * action. + */ +function updateDeviceList(devicesBeforeAction, val) { + return (dispatch) => { + const modelName = 'newProject.details.devices' + const set1 = _.map(devicesSet1, 'val') + const set2 = _.map(devicesSet2, 'val') + + // if val from set1 is selected values from set2 cannot be selected + // and vice-versa... + const reset = + (_.intersection(set1, devicesBeforeAction).length + && _.indexOf(set2, val) > -1) + || (_.intersection(set2, devicesBeforeAction).length + && _.indexOf(set1, val) > -1) + + if (reset) { + dispatch(modelActions.change(modelName, [val])) + } else { + dispatch(modelActions.xor(modelName, val)) + } + } +} + +DevicesComponent.propTypes = { + devices: PropTypes.arrayOf(PropTypes.string).isRequired +} +const actionCreators = { updateDeviceList } +const mapStateToProps = ({newProject}) => ({ + devices: newProject.details.devices +}) + +// Merging props so that we can use determine the current +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const props = Object.assign({}, ownProps, stateProps, dispatchProps, { + toggleDevice: (val) => { + props.updateDeviceList(stateProps.devices, val) + } + }) + return props +} + +export default connect(mapStateToProps, actionCreators, mergeProps)(DevicesComponent) diff --git a/src/projects/create/components/ProjectTypeSelector/ProjectType.jsx b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx similarity index 97% rename from src/projects/create/components/ProjectTypeSelector/ProjectType.jsx rename to src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx index 87d6360b7..c2bd8bc1c 100644 --- a/src/projects/create/components/ProjectTypeSelector/ProjectType.jsx +++ b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx @@ -62,7 +62,8 @@ class ProjectTypeSelector extends Component { onClick={this.props.onSliderChange.bind(this, idx)} className={itemClassnames} key={index} - dangerouslySetInnerHTML={{__html: item.info}}> + dangerouslySetInnerHTML={{__html: item.info}} + > ) } @@ -115,7 +116,7 @@ const actionCreators = { const mapStateToProps = ({newProject}) => ({ type: newProject.type, - mappedProjectType: _.findIndex(projectTypes, (t) => newProject.type === t.val), + mappedProjectType: _.findIndex(projectTypes, (t) => newProject.type === t.val) }) // Merging props so that we can use determine the current diff --git a/src/projects/create/components/WorkProjectForm.jsx b/src/projects/create/components/old/WorkProjectForm.jsx similarity index 85% rename from src/projects/create/components/WorkProjectForm.jsx rename to src/projects/create/components/old/WorkProjectForm.jsx index d25d502d6..10d7de9a8 100644 --- a/src/projects/create/components/WorkProjectForm.jsx +++ b/src/projects/create/components/old/WorkProjectForm.jsx @@ -5,7 +5,7 @@ import { connect } from 'react-redux' import { Form, actions as modelActions} from 'react-redux-form' import { clearLoadedProject } from '../../../actions/project' import { withRouter } from 'react-router' -import { InputFormField, TextareaFormField } from 'appirio-tech-react-components' +import { TextInputField, InputFormField, TextareaFormField } from 'appirio-tech-react-components' class WorkProjectForm extends Component { @@ -24,9 +24,17 @@ class WorkProjectForm extends Component { render() { return ( -
this.props.submitHandler(val)}> +

Project info

+ +
{ const { pageLoaded, loadingMore, error } = props const { projects, totalCount, moreMatchesAvailable } = props const { previousSearchTerm: searchTerm } = props - const { loadProjects } = props + // const { loadProjects } = props const projectMatches = renderProjects() const pageStatus = renderPageState() diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js index 99995aee9..b58460461 100644 --- a/src/projects/reducers/project.js +++ b/src/projects/reducers/project.js @@ -1,7 +1,7 @@ import { LOAD_PROJECT, PROJECT_LOAD_SUCCESS, PROJECT_LOAD_FAILURE, - CREATE_PROJECT, CREATING_PROJECT, CREATE_PROJECT_SUCCESS, + CREATE_PROJECT, CREATE_PROJECT_SUCCESS, CREATE_PROJECT_FAILURE, CLEAR_LOADED_PROJECT } from '../../config/constants' @@ -71,7 +71,7 @@ export const newProject = modelReducer('newProject', { details: { version: 'v2', devices: ['phone'], - appType: '' + appType: 'ios' } }) diff --git a/src/projects/routes.jsx b/src/projects/routes.jsx index 3f5f1c6e0..66425e68b 100644 --- a/src/projects/routes.jsx +++ b/src/projects/routes.jsx @@ -16,8 +16,7 @@ import { requiresAuthentication } from '../components/AuthenticatedComponent' const projectRoutes = ( - // TOOD add auth check requiresAuthentication(ProjectLayout) - + // TODO add project topbar From 48f7ca4ded976f6043259d0aa318935dd65968ae Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 1 Aug 2016 14:55:21 +0530 Subject: [PATCH 3/3] Fixed lint errors --- src/projects/create/components/old/Devices.jsx | 3 ++- .../components/old/ProjectTypeSelector/ProjectType.jsx | 9 ++++++--- src/projects/list/components/Projects/ProjectsView.jsx | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/projects/create/components/old/Devices.jsx b/src/projects/create/components/old/Devices.jsx index 356e7df74..aca5af1db 100644 --- a/src/projects/create/components/old/Devices.jsx +++ b/src/projects/create/components/old/Devices.jsx @@ -47,8 +47,9 @@ class DevicesComponent extends Component { active: _.indexOf(devices, item.val) > -1 } ) + const handleClick = this.props.toggleDevice.bind(item.val) return ( - diff --git a/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx index c2bd8bc1c..7b30fed07 100644 --- a/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx +++ b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx @@ -30,6 +30,7 @@ const getTypeIndex = (val) => _.findIndex(projectTypes, (t) => t.val === val) class ProjectTypeSelector extends Component { constructor(props) { super(props) + this.onSliderChange = this.props.onSliderChange.bind(this) } render() { @@ -41,10 +42,11 @@ class ProjectTypeSelector extends Component { active: type === item.val }) const idx = getTypeIndex(item.val) + const handleClick = this.props.onSliderChange.bind(this, idx) return (

{item.title}

{item.desc} @@ -57,9 +59,10 @@ class ProjectTypeSelector extends Component { // handle active class const itemClassnames = classNames({active: type === item.val}) const idx = getTypeIndex(item.val) + const handleClick = this.props.onSliderChange.bind(this, idx) return (

diff --git a/src/projects/list/components/Projects/ProjectsView.jsx b/src/projects/list/components/Projects/ProjectsView.jsx index 450872d42..913edfeb1 100644 --- a/src/projects/list/components/Projects/ProjectsView.jsx +++ b/src/projects/list/components/Projects/ProjectsView.jsx @@ -15,7 +15,7 @@ const ProjectsView = (props) => { const { pageLoaded, loadingMore, error } = props const { projects, totalCount, moreMatchesAvailable } = props const { previousSearchTerm: searchTerm } = props - // const { loadProjects } = props + const { loadProjects } = props const projectMatches = renderProjects() const pageStatus = renderPageState()