Skip to content

Commit d6d8c49

Browse files
author
samsep
committed
resolve merge conflict
2 parents d035715 + 8eb225f commit d6d8c49

15 files changed

+528
-26
lines changed

‎components/ExampleApp/ExampleApp.cjsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
require './ExampleApp.scss'
22

3-
React = require 'react'
4-
ExampleNav = require '../ExampleNav/ExampleNav.cjsx'
3+
React = require 'react'
4+
ExampleNavContainer = require '../ExampleNav/ExampleNavContainer'
55

66
component =
77
render: ->
88
<div className="ExampleApp">
99
<main>{this.props.children}</main>
1010

11-
<ExampleNav />
11+
<ExampleNavContainer />
1212
</div>
1313

1414

‎components/ExampleNav/ExampleNav.cjsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
'use strict'
22

3-
require './ExampleNav.scss'
3+
require './ExampleNavStyle'
44

55
React = require 'react'
66
classNames = require 'classnames'
77

88
{ Link } = require 'react-router'
99

10-
component = ({data, state}) ->
10+
component = ({ links, onClick, onBack }) ->
1111
<ul className="ExampleNav">
12-
<li>
13-
<Link to="/">Avatar</Link>
14-
15-
<Link to="/FileUploaderContainerExamples">FileUploaderContainer</Link>
16-
17-
<Link to="/FileUploaderExamples">FileUploader</Link>
18-
19-
<Link to="/UploadedFileExamples">UploadedFile</Link>
20-
21-
<Link to="/UploadedFilesExamples">UploadedFiles</Link>
22-
23-
<Link to="/CheckboxExamples">Checkbox</Link>
24-
25-
<Link to="/ImageViewerHeaderExamples">ImageViewerHeader</Link>
26-
27-
<Link to="/ImageViewerExamples">ImageViewer</Link>
28-
29-
<Link to="/LoaderExamples">Loader</Link>
30-
</li>
12+
{
13+
if onBack
14+
<li>
15+
<a onClick={onBack} className="back">&#8604; back</a>
16+
</li>
17+
}
18+
{
19+
links?.map (link, i) ->
20+
<li key={i}>
21+
{
22+
if onClick
23+
<a onClick={-> onClick(link)}>{link}</a>
24+
else
25+
<Link to={link}>{link}</Link>
26+
}
27+
</li>
28+
}
3129
</ul>
3230

33-
module.exports = component
31+
module.exports = component
32+

‎components/ExampleNav/ExampleNavContainer.coffee‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict'
2+
3+
{ createElement, createClass } = require 'react'
4+
ExampleNav = require './ExampleNav'
5+
6+
navs =
7+
FileUploader: [
8+
'FileUploaderContainerExamples'
9+
'FileUploaderExamples'
10+
'UploadedFileExamples'
11+
'UploadedFilesExamples'
12+
]
13+
Misc: [
14+
'CheckboxExamples'
15+
'ImageViewerHeaderExamples'
16+
'ImageViewerExamples'
17+
'LoaderExamples'
18+
]
19+
ManageSteps: [
20+
'ManageStepsExamples'
21+
'StepRowExamples'
22+
]
23+
24+
25+
container =
26+
getInitialState: ->
27+
root: true
28+
links: Object.keys(navs)
29+
30+
onClick: (link) ->
31+
this.setState
32+
root : false
33+
links: navs[link]
34+
35+
onBack: ->
36+
this.setState this.getInitialState()
37+
38+
render: ->
39+
{ links, root } = this.state
40+
41+
{ onClick, onBack } = this
42+
43+
if root
44+
createElement ExampleNav, { links, onClick }
45+
else
46+
createElement ExampleNav, { links, onBack }
47+
48+
module.exports = createClass(container)

components/ExampleNav/ExampleNav.scss renamed to components/ExampleNav/ExampleNavStyle.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "work/work-includes";
2+
13
.ExampleNav {
24
position: fixed;
35
bottom: 0;
@@ -12,4 +14,8 @@
1214
margin: 10px;
1315
display: inline-block;
1416
}
17+
18+
.back {
19+
color: $grey-dark;
20+
}
1521
}

‎components/ManageSteps/ManageSteps.coffee‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use strict'
2+
3+
React = require 'react'
4+
ManageStepsView = require './ManageStepsView'
5+
{ connect } = require 'react-redux'
6+
{ loadStepsByProject } = require 'appirio-tech-client-app-layer'
7+
8+
ManageSteps = React.createClass
9+
propTypes:
10+
projectId: React.PropTypes.string.isRequired
11+
12+
componentWillMount: ->
13+
{ loadStepsByProject, projectId } = this.props
14+
15+
loadStepsByProject projectId
16+
17+
render: ->
18+
{ projectId, stepsByProject } = this.props
19+
20+
props =
21+
projectId: projectId
22+
stepIds: stepsByProject?.items || []
23+
fetching: stepsByProject?.isFetching
24+
25+
React.createElement ManageStepsView, props
26+
27+
mapStateToProps = (state, ownProps) ->
28+
id = ownProps.projectId
29+
30+
projectId: id
31+
stepsByProject: state.stepsByProject[id]
32+
33+
actionsToBind = {
34+
loadStepsByProject
35+
}
36+
37+
module.exports = connect(mapStateToProps, actionsToBind)(ManageSteps)

‎components/ManageSteps/ManageSteps.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import "work/work-includes";
2+
3+
.ManageSteps {
4+
h5 {
5+
font-weight: bold;
6+
}
7+
8+
.StepRow {
9+
@include justify-content(center);
10+
}
11+
12+
hr {
13+
height: 10px;
14+
margin: 20px 0 30px 0;
15+
}
16+
17+
.project-Steps {
18+
margin-top: 60px;
19+
20+
> header {
21+
button {
22+
padding: 4px 40px;
23+
}
24+
}
25+
26+
.column-headers {
27+
margin-top: 15px;
28+
font-weight: normal;
29+
30+
li {
31+
&:nth-child(1) {
32+
min-width: 162px;
33+
}
34+
35+
&:nth-child(2), &:nth-child(3), &:nth-child(4) {
36+
min-width: 135px;
37+
margin-left: 20px;
38+
}
39+
40+
&:nth-child(5) {
41+
min-width: 162px;
42+
margin: 0px 10px 0px 30px;
43+
}
44+
45+
&:nth-child(6) {
46+
min-width: 162px;
47+
margin-right: 35px;
48+
}
49+
}
50+
}
51+
52+
.Steps {
53+
> li {
54+
margin-top: 25px;
55+
}
56+
}
57+
}
58+
}

‎components/ManageSteps/ManageStepsExamples.cjsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use strict'
2+
3+
require './ManageStepsExamples.scss'
4+
5+
React = require 'react'
6+
ManageSteps = require './ManageSteps.coffee'
7+
Provider = require('react-redux').Provider
8+
store = require('appirio-tech-client-app-layer').default
9+
10+
initialData =
11+
stepsByProject:
12+
abc:
13+
items: []
14+
15+
storeInstance = store(initialData)
16+
17+
component = ->
18+
<Provider store={storeInstance}>
19+
<div className="ManageStepsExamples light-bg">
20+
<h1>Example with data</h1>
21+
22+
<ManageSteps projectId="1435677908878-f5e91b34-9ea1-407d-b882-0022ea2de0da" />
23+
24+
<h1>Example with no data</h1>
25+
26+
<ManageSteps projectId="abc" />
27+
</div>
28+
</Provider>
29+
30+
31+
module.exports = component

‎components/ManageSteps/ManageStepsExamples.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "work/work-includes";
2+
3+
.ManageStepsExamples {
4+
padding: 40px;
5+
}

‎components/ManageSteps/ManageStepsView.cjsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
'use strict'
2+
3+
require './ManageSteps.scss'
4+
5+
React = require 'react'
6+
classNames = require 'classnames'
7+
StepRow = require '../StepRow/StepRow.coffee'
8+
9+
component = ({projectId, stepIds, fetching}) ->
10+
<div className="ManageSteps">
11+
<div className="add-a-Step">
12+
<h5>add a Step</h5>
13+
14+
<hr />
15+
16+
<StepRow projectId={projectId} formKey="new" isNew={true} />
17+
</div>
18+
19+
<div className="project-Steps">
20+
<header className="flex space-between middle">
21+
<h5>project Steps</h5>
22+
</header>
23+
24+
<hr />
25+
26+
{
27+
headers = ['Step Name', 'Start Date', 'Due Date', 'End Date', 'Step Type', 'Step Status']
28+
29+
if stepIds.length
30+
<div>
31+
<ul className="column-headers flex center">
32+
{
33+
headers.map (item, index) ->
34+
<li key={index}>{item}</li>
35+
}
36+
</ul>
37+
38+
<ul className="Steps">
39+
{
40+
stepIds.map (stepId, index) ->
41+
<li key={index}>
42+
<StepRow
43+
formKey={stepId.toString()}
44+
projectId={projectId}
45+
stepId={stepId} />
46+
</li>
47+
}
48+
</ul>
49+
</div>
50+
51+
else if fetching
52+
<p>Getting steps</p>
53+
54+
else
55+
<p>Add Steps above to layout your project schedule.</p>
56+
}
57+
</div>
58+
</div>
59+
60+
component.propTypes =
61+
projectId: React.PropTypes.string.isRequired
62+
stepIds: React.PropTypes.array.isRequired
63+
fetching: React.PropTypes.bool
64+
65+
module.exports = component

‎components/Router/Router.cjsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ CheckboxExamples = require '../Checkbox/CheckboxExamples.cjsx'
1515
ImageViewerHeaderExamples = require '../ImageViewerHeader/ImageViewerHeaderExamples.cjsx'
1616
ImageViewerExamples = require '../ImageViewer/ImageViewerExamples.cjsx'
1717
LoaderExamples = require '../Loader/LoaderExamples.cjsx'
18+
ManageStepsExamples = require '../ManageSteps/ManageStepsExamples.cjsx'
19+
StepRowExamples = require '../StepRow/StepRowExamples.cjsx'
1820

1921
{ Router, Route, Link, IndexRoute, browserHistory } = require 'react-router'
2022

@@ -39,6 +41,10 @@ component = ->
3941
<Route path="/ImageViewerExamples" component={ImageViewerExamples} />
4042

4143
<Route path="/LoaderExamples" component={LoaderExamples} />
44+
45+
<Route path="/ManageStepsExamples" component={ManageStepsExamples}/>
46+
47+
<Route path="/StepRowExamples" component={StepRowExamples} />
4248
</Route>
4349
</Router>
4450
</Provider>

0 commit comments

Comments
 (0)