Skip to content

Commit a8e4c68

Browse files
aselbieaselbie
committed
Moved status and stepType selects into subcomponents
1 parent 87e7d86 commit a8e4c68

File tree

4 files changed

+129
-92
lines changed

4 files changed

+129
-92
lines changed

‎components/StepRow/StatusSelect.cjsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict'
2+
3+
require 'react-select/dist/react-select.css'
4+
5+
React = require 'react'
6+
PropTypes = React.PropTypes
7+
Select = require 'react-select'
8+
find = require 'lodash/find'
9+
10+
statuses = [
11+
label: 'Project Launched'
12+
value: 'PROJECT_LAUNCHED'
13+
,
14+
label: 'Scheduled'
15+
value: 'SCHEDULED'
16+
,
17+
label: 'In Progress'
18+
value: 'OPEN'
19+
,
20+
label: 'Closed'
21+
value: 'CLOSED'
22+
]
23+
24+
StepRow = ({
25+
formProps
26+
editable
27+
isNew
28+
}) ->
29+
label = find(statuses, (t) -> t.value == formProps.value)?.label
30+
31+
if editable
32+
<Select
33+
{...status}
34+
className = "statuses"
35+
options = {statuses}
36+
clearable = false
37+
placeholder = "Status"
38+
onBlur = { (event) ->
39+
status.onBlur(status.value) }
40+
/>
41+
else
42+
if isNew
43+
<Select className="status" placeholder="Status disabled" disabled />
44+
else
45+
<p>{label}</p>
46+
47+
StepRow.propTypes =
48+
formProps : PropTypes.object.isRequired
49+
editable : PropTypes.bool.isRequired
50+
isNew : PropTypes.bool.isRequired
51+
52+
module.exports = StepRow

‎components/StepRow/StepRowExamples.cjsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,21 @@ storeInstance = store(initialData)
2626
component = ->
2727
<Provider store={storeInstance}>
2828
<div className="StepRowExample">
29-
<h1>Example with state edit</h1>
29+
<h1>Existing step in editable state</h1>
3030

31-
<StepRow formKey="abc" projectId="abc" stepId="abc" permissions="['UPDATE']"/>
31+
<StepRow formKey="abc" projectId="abc" stepId="abc" permissions={['UPDATE']} />
3232

33-
<h1> Example with no data or state</h1>
33+
<h1>Existing step in view-only mode</h1>
3434

35-
<StepRow projectId="def" formKey="new" isNew={true} permissions="['UPDATE']"/>
35+
<StepRow formKey="abc" projectId="abc" stepId="abc" permissions={['READ']} />
3636

37-
<h1>Disabled with Data</h1>
37+
<h1>New step in editable state</h1>
3838

39-
<StepRow formKey="abc" projectId="abc" stepId="abc" permissions="['READ']"/>
39+
<StepRow projectId="def" formKey="new" isNew={true} permissions={['UPDATE']} />
4040

41-
<h1>Disabled Without Data</h1>
41+
<h1>New step in view-only mode</h1>
4242

43-
<StepRow projectId="def" formKey="new" isNew={true} permissions="['READ']"/>
43+
<StepRow projectId="def" formKey="new" isNew={true} permissions={['READ']} />
4444
</div>
4545
</Provider>
4646

‎components/StepRow/StepRowView.cjsx‎

Lines changed: 17 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,13 @@
22

33
require './StepRow.scss'
44
require 'react-datetime/css/react-datetime.css'
5-
require 'react-select/dist/react-select.css'
6-
7-
React = require 'react'
8-
PropTypes = React.PropTypes
9-
DateTime = require 'react-datetime'
10-
Select = require 'react-select'
11-
classNames = require 'classnames'
12-
find = require 'lodash/find'
13-
14-
types = [
15-
label: 'Design Concepts'
16-
value: 'designConcepts'
17-
,
18-
label: 'Complete Designs'
19-
value: 'completeDesigns'
20-
,
21-
label: 'Final Fixes'
22-
value: 'finalFixes'
23-
,
24-
label: 'Development'
25-
value: 'code'
26-
]
27-
28-
statuses = [
29-
label: 'Project Launched'
30-
value: 'PROJECT_LAUNCHED'
31-
,
32-
label: 'Scheduled'
33-
value: 'SCHEDULED'
34-
,
35-
label: 'In Progress'
36-
value: 'OPEN'
37-
,
38-
label: 'Closed'
39-
value: 'CLOSED'
40-
]
5+
6+
React = require 'react'
7+
PropTypes = React.PropTypes
8+
DateTime = require 'react-datetime'
9+
classNames = require 'classnames'
10+
StepTypeSelect = require './StepTypeSelect'
11+
StatusSelect = require './StatusSelect'
4112

4213
StepRow = ({
4314
fields: { name, startsAt, details, endsAt, stepType, status }
@@ -47,10 +18,8 @@ StepRow = ({
4718
isNew
4819
permissions
4920
}) ->
50-
loader = <loader />
51-
showPicker = null
52-
typeLabel = find(types, (t) -> t.value == stepType.value)?.label
53-
statusLabel = find(statuses, (s) -> s.value == status.value)?.label
21+
editable = permissions.indexOf('UPDATE') > -1
22+
isNew = isNew || false
5423

5524
submitClassNames = classNames
5625
'icon' : true
@@ -59,40 +28,9 @@ StepRow = ({
5928
'plus' : isNew
6029
'checkmark' : !isNew
6130

62-
if isNew
63-
if permissions.indexOf('UPDATE') > -1
64-
StepType = <Select
65-
{...stepType}
66-
className = "types"
67-
options = {types}
68-
clearable = false
69-
placeholder = "Step Type"
70-
onBlur = { (event) ->
71-
status.onBlur(status.value) }
72-
/>
73-
74-
Status = <Select
75-
{...status}
76-
className = "statuses"
77-
options = {statuses}
78-
clearable = false
79-
placeholder = "Status"
80-
onBlur = { (event) ->
81-
status.onBlur(status.value) }
82-
/>
83-
else
84-
StepType = <Select className="types" placeholder="Type disabled" disabled />
85-
86-
Status = <Select className="status" placeholder="Status disabled" disabled />
87-
else
88-
StepType = <p className="types">{typeLabel}</p>
89-
90-
Status = <p className="status">{statusLabel}</p>
91-
9231
<form className="StepRow flex middle" onSubmit={handleSubmit}>
93-
{# loader }
9432
{
95-
if permissions.indexOf('UPDATE') > -1
33+
if editable
9634
<div className="flex middle">
9735
<input type="text" className="name" {...name} />
9836

@@ -115,7 +53,7 @@ StepRow = ({
11553
</div>
11654
else
11755
<div className="flex middle">
118-
<input type="text" className="name" disabled=true {...name} />
56+
<p className="name">{name.value}</p>
11957

12058
<p className="DateTime disabled">{startsAt.value}</p>
12159

@@ -125,20 +63,15 @@ StepRow = ({
12563
</div>
12664
}
12765

128-
{StepType}
66+
<StepTypeSelect isNew={isNew} formProps={stepType} editable={editable} />
12967

130-
{Status}
68+
<StatusSelect isNew={isNew} formProps={status} editable={editable} />
13169

13270
{
133-
if dirty || isNew
134-
if permissions.indexOf('UPDATE') > -1
135-
<button className="clean addButton" type="submit">
136-
<div className={submitClassNames} />
137-
</button>
138-
else
139-
<button className="clean addButton" disabled=true>
140-
<div className={submitClassNames} />
141-
</button>
71+
if editable && (dirty || isNew)
72+
<button className="clean addButton" type="submit">
73+
<div className={submitClassNames} />
74+
</button>
14275
}
14376
</form>
14477

‎components/StepRow/StepTypeSelect.cjsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict'
2+
3+
require 'react-select/dist/react-select.css'
4+
5+
React = require 'react'
6+
PropTypes = React.PropTypes
7+
Select = require 'react-select'
8+
find = require 'lodash/find'
9+
10+
types = [
11+
label: 'Design Concepts'
12+
value: 'designConcepts'
13+
,
14+
label: 'Complete Designs'
15+
value: 'completeDesigns'
16+
,
17+
label: 'Final Fixes'
18+
value: 'finalFixes'
19+
,
20+
label: 'Development'
21+
value: 'code'
22+
]
23+
24+
StepRow = ({
25+
formProps
26+
isNew
27+
editable
28+
}) ->
29+
typeLabel = find(types, (t) -> t.value == formProps.value)?.label
30+
31+
if isNew
32+
if editable
33+
<Select
34+
{...formProps}
35+
className = "types"
36+
options = {types}
37+
clearable = false
38+
placeholder = "Step Type"
39+
onBlur = { (event) ->
40+
status.onBlur(status.value) }
41+
/>
42+
else
43+
<Select className="types" placeholder="Type disabled" disabled />
44+
else
45+
<p className="types">{typeLabel}</p>
46+
47+
StepRow.propTypes =
48+
formProps : PropTypes.object.isRequired
49+
editable : PropTypes.bool.isRequired
50+
isNew : PropTypes.bool
51+
52+
module.exports = StepRow

0 commit comments

Comments
 (0)