Skip to content

Commit 0e4bab0

Browse files
samsepsamsep
committed
Merge pull request #2 from appirio-tech/admin-permissions
Disable Write Functionality for Admin
2 parents 24ff016 + a8e4c68 commit 0e4bab0

File tree

9 files changed

+181
-81
lines changed

9 files changed

+181
-81
lines changed

‎components/ManageSteps/ManageSteps.coffee‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ ManageSteps = React.createClass
1515
loadStepsByProject projectId
1616

1717
render: ->
18-
{ projectId, stepsByProject } = this.props
18+
{ projectId, stepsByProject, permissions } = this.props
1919

2020
props =
2121
projectId: projectId
2222
stepIds: stepsByProject?.items || []
2323
fetching: stepsByProject?.isFetching
24+
permissions: permissions || []
2425

2526
React.createElement ManageStepsView, props
2627

‎components/ManageSteps/ManageStepsExamples.cjsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,18 @@ initialData =
1414

1515
storeInstance = store(initialData)
1616

17+
permissions = ['UPDATE']
18+
1719
component = ->
1820
<Provider store={storeInstance}>
1921
<div className="ManageStepsExamples light-bg">
2022
<h1>Example with data</h1>
2123

22-
<ManageSteps projectId="1435677908878-f5e91b34-9ea1-407d-b882-0022ea2de0da" />
24+
<ManageSteps projectId="1435677908878-f5e91b34-9ea1-407d-b882-0022ea2de0da" permissions={permissions}/>
2325

2426
<h1>Example with no data</h1>
2527

26-
<ManageSteps projectId="abc" />
28+
<ManageSteps projectId="abc" permissions={permissions} />
2729
</div>
2830
</Provider>
2931

‎components/ManageSteps/ManageStepsView.cjsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ React = require 'react'
66
classNames = require 'classnames'
77
StepRow = require '../StepRow/StepRow.coffee'
88

9-
component = ({projectId, stepIds, fetching}) ->
9+
component = ({projectId, stepIds, fetching, permissions}) ->
1010
<div className="ManageSteps">
1111
<div className="add-a-Step">
1212
<h5>add a Step</h5>
1313

1414
<hr />
1515

16-
<StepRow projectId={projectId} formKey="new" isNew={true} />
16+
<StepRow projectId={projectId} formKey="new" isNew={true} permissions={permissions} />
1717
</div>
1818

1919
<div className="project-Steps">
@@ -42,7 +42,8 @@ component = ({projectId, stepIds, fetching}) ->
4242
<StepRow
4343
formKey={stepId.toString()}
4444
projectId={projectId}
45-
stepId={stepId} />
45+
stepId={stepId}
46+
permissions={permissions} />
4647
</li>
4748
}
4849
</ul>
@@ -60,6 +61,7 @@ component = ({projectId, stepIds, fetching}) ->
6061
component.propTypes =
6162
projectId: React.PropTypes.string.isRequired
6263
stepIds: React.PropTypes.array.isRequired
64+
permissions: React.PropTypes.array.isRequired
6365
fetching: React.PropTypes.bool
6466

6567
module.exports = component

‎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/StepRow.coffee‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ fields = [
2020
StepRow = React.createClass
2121
propTypes:
2222
fields : PropTypes.object.isRequired
23+
permissions : PropTypes.array.isRequired
2324
handleSubmit : PropTypes.func.isRequired
2425
submitting : PropTypes.bool.isRequired
2526
projectId : PropTypes.string.isRequired

‎components/StepRow/StepRow.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
.DateTime {
99
margin-left: 20px;
1010
width: 135px;
11+
12+
&.disabled {
13+
width: 138px;
14+
}
1115
}
1216

1317
.Select {
@@ -24,7 +28,10 @@
2428
width : 162px;
2529
}
2630

27-
button[type="submit"] {
28-
margin-left: 15px;
31+
button {
32+
33+
&.addButton {
34+
margin-left: 15px;
35+
}
2936
}
3037
}

‎components/StepRow/StepRowExamples.cjsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +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" />
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} />
35+
<StepRow formKey="abc" projectId="abc" stepId="abc" permissions={['READ']} />
36+
37+
<h1>New step in editable state</h1>
38+
39+
<StepRow projectId="def" formKey="new" isNew={true} permissions={['UPDATE']} />
40+
41+
<h1>New step in view-only mode</h1>
42+
43+
<StepRow projectId="def" formKey="new" isNew={true} permissions={['READ']} />
3644
</div>
3745
</Provider>
3846

‎components/StepRow/StepRowView.cjsx‎

Lines changed: 44 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,24 @@
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 }
4415
handleSubmit
4516
submitting
4617
dirty
4718
isNew
19+
permissions
4820
}) ->
49-
loader = <loader />
50-
showPicker = null
51-
typeLabel = find(types, (t) -> t.value == stepType.value)?.label
21+
editable = permissions.indexOf('UPDATE') > -1
22+
isNew = isNew || false
5223

5324
submitClassNames = classNames
5425
'icon' : true
@@ -57,45 +28,48 @@ StepRow = ({
5728
'plus' : isNew
5829
'checkmark' : !isNew
5930

60-
if isNew
61-
StepType = <Select
62-
{...stepType}
63-
className = "types"
64-
options = {types}
65-
clearable = false
66-
placeholder = "Step Type"
67-
onBlur = { (event) ->
68-
status.onBlur(status.value) }
69-
/>
70-
else
71-
StepType = <p className="types">{typeLabel}</p>
72-
7331
<form className="StepRow flex middle" onSubmit={handleSubmit}>
74-
{# loader }
32+
{
33+
if editable
34+
<div className="flex middle">
35+
<input type="text" className="name" {...name} />
36+
37+
<DateTime className="DateTime" {...startsAt} />
38+
39+
<DateTime className="DateTime" {...details.submissionsDueBy} />
7540

76-
<input type="text" className="name" {...name} />
41+
<DateTime className="DateTime" {...endsAt} />
42+
</div>
43+
else
44+
if isNew
45+
<div className="flex middle">
46+
<input type="text" className="name" disabled=true placeholder="Name edit disabled" />
7747

78-
<DateTime className="DateTime" {...startsAt} />
48+
<input type="text" className="DateTime disabled" disabled=true placeholder="Date edit disabled"/>
7949

80-
<DateTime className="DateTime" {...details.submissionsDueBy} />
50+
<input type="text" className="DateTime disabled" disabled=true placeholder="Date edit disabled"/>
8151

82-
<DateTime className="DateTime" {...endsAt} />
52+
<input type="text" className="DateTime disabled" disabled=true placeholder="Date edit disabled"/>
53+
</div>
54+
else
55+
<div className="flex middle">
56+
<p className="name">{name.value}</p>
57+
58+
<p className="DateTime disabled">{startsAt.value}</p>
59+
60+
<p className="DateTime disabled">{details.submissionsDueBy.value}</p>
61+
62+
<p className="DateTime disabled">{endsAt.value}</p>
63+
</div>
64+
}
8365

84-
{StepType}
66+
<StepTypeSelect isNew={isNew} formProps={stepType} editable={editable} />
8567

86-
<Select
87-
{...status}
88-
className = "statuses"
89-
options = {statuses}
90-
clearable = false
91-
placeholder = "Status"
92-
onBlur = { (event) ->
93-
status.onBlur(status.value) }
94-
/>
68+
<StatusSelect isNew={isNew} formProps={status} editable={editable} />
9569

9670
{
97-
if dirty || isNew
98-
<button className="clean" type="submit">
71+
if editable && (dirty || isNew)
72+
<button className="clean addButton" type="submit">
9973
<div className={submitClassNames} />
10074
</button>
10175
}
@@ -105,6 +79,7 @@ StepRow.propTypes =
10579
fields : PropTypes.object.isRequired
10680
handleSubmit : PropTypes.func.isRequired
10781
submitting : PropTypes.bool.isRequired
82+
permissions : PropTypes.array.isRequired
10883
dirty : PropTypes.bool
10984
isNew : PropTypes.bool
11085

‎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)