forked from USStateDept/State-TalentMAP
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1006 from MetaPhase-Consulting/feature/bureau-lan…
…ding-page Bureau landing page and Menu TM-1855
- Loading branch information
Showing
28 changed files
with
852 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Route, Switch } from 'react-router-dom'; | ||
import Dashboard from './Dashboard'; | ||
import Stats from './Stats'; | ||
import PositionLists from './PositionLists'; | ||
import PositionManager from './PositionManager'; | ||
|
||
const BureauPage = (props) => { | ||
const { | ||
// eslint-disable-next-line no-unused-vars | ||
isLoading, | ||
} = props; | ||
|
||
const dashboardProps = { | ||
placeholderText: 'I am the Bureau Dashboard', | ||
}; | ||
|
||
const statsProps = { | ||
placeholderText: 'I am the Bureau Stats', | ||
}; | ||
|
||
const posListsProps = { | ||
placeholderText: 'I am the Bureau Position Lists', | ||
}; | ||
|
||
const posManagerProps = { | ||
placeholderText: 'I am the Bureau Position Manager', | ||
}; | ||
|
||
return ( | ||
<div className="usa-grid-full profile-content-container"> | ||
<Switch> | ||
<Route path="/profile/bureau/dashboard" render={() => <Dashboard {...dashboardProps} />} /> | ||
<Route path="/profile/bureau/stats" render={() => <Stats {...statsProps} />} /> | ||
<Route path="/profile/bureau/positionlists" render={() => <PositionLists {...posListsProps} />} /> | ||
<Route path="/profile/bureau/positionmanager" render={() => <PositionManager {...posManagerProps} />} /> | ||
</Switch> | ||
</div> | ||
); | ||
}; | ||
|
||
BureauPage.propTypes = { | ||
isLoading: PropTypes.bool, | ||
}; | ||
|
||
BureauPage.defaultProps = { | ||
isLoading: false, | ||
}; | ||
|
||
export default BureauPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import TestUtils from 'react-dom/test-utils'; | ||
import { Provider } from 'react-redux'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
import configureStore from 'redux-mock-store'; | ||
import thunk from 'redux-thunk'; | ||
import BureauPage from './BureauPage'; | ||
|
||
const middlewares = [thunk]; | ||
const mockStore = configureStore(middlewares); | ||
|
||
describe('BureauPage', () => { | ||
it('mounts', () => { | ||
const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter> | ||
<BureauPage /> | ||
</MemoryRouter></Provider>); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
|
||
it('is defined', () => { | ||
const wrapper = shallow(<BureauPage />); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react'; | ||
import createLoader from '../Loadable'; | ||
|
||
export const path = () => import('./BureauPage'); | ||
|
||
const BureauPage = createLoader({ path, shouldPreload: false }); | ||
|
||
const BureauPageLoadable = ({ ...rest }) => ( | ||
<BureauPage {...rest} /> | ||
); | ||
|
||
export default BureauPageLoadable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import FA from 'react-fontawesome'; | ||
import { includes } from 'lodash'; | ||
import { PieChart, Pie, Cell } from 'recharts'; | ||
import ProfileSectionTitle from '../../ProfileSectionTitle'; | ||
import Spinner from '../../Spinner'; | ||
import SelectForm from '../../SelectForm'; | ||
import { Row, Column } from '../../Layout'; | ||
|
||
|
||
const BureauPage = (props) => { | ||
const { | ||
placeholderText, | ||
} = props; | ||
const data = [ | ||
{ name: 'Group A', value: 400 }, | ||
{ name: 'Group B', value: 300 }, | ||
{ name: 'Group C', value: 300 }, | ||
{ name: 'Group D', value: 200 }, | ||
]; | ||
|
||
const COLORS = ['#102f51', '#cc3334', '#c49208', '#2970bc']; | ||
|
||
const RADIAN = Math.PI / 180; | ||
const renderCustomizedLabel = ({ | ||
// eslint-disable-next-line react/prop-types | ||
cx, cy, midAngle, innerRadius, outerRadius, percent, | ||
}) => { | ||
const radius = (innerRadius + (outerRadius - innerRadius)) * 0.5; | ||
const x = cx + (radius * Math.cos(-midAngle * RADIAN)); | ||
const y = cy + (radius * Math.sin(-midAngle * RADIAN)); | ||
|
||
return ( | ||
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central"> | ||
{`${(percent * 100).toFixed(0)}%`} | ||
</text> | ||
); | ||
}; | ||
|
||
const bidCycles = [ | ||
{ value: null, text: 'Select Cycle' }, | ||
{ value: 'Fall 2020', text: 'Fall 2020' }, | ||
{ value: 'Winter 2020', text: 'Winter 2020' }, | ||
{ value: 'Spring 2021', text: 'Spring 2021' }, | ||
{ value: 'Summer 2021', text: 'Summer 2021' }, | ||
{ value: 'Fall 2021', text: 'Fall 2021' }, | ||
{ value: 'Winter 2021', text: 'Winter 2021' }, | ||
]; | ||
|
||
const countries = [ | ||
'Bahamas', 'Andorra', 'Vanuatu', 'Malawi', 'Equatorial Guinea', 'Sierra Leone', 'Mozambique', | ||
'France', 'Sudan', 'Iran', 'Malta', 'Papua New Guinea', 'Congo', 'Nauru', 'Guatemala', | ||
'Wallis and Futuna', 'Madagascar', 'Virgin Islands', 'Saint Pierre and Miquelon', 'Tajikistan', | ||
'Trinidad and Tobago', 'Iceland', 'Italy', 'Panama', 'Lithuania']; | ||
|
||
return ( | ||
<div | ||
className={'usa-grid-full profile-content-inner-container bureau-page'} | ||
> | ||
{ | ||
!placeholderText && | ||
<Spinner type="homepage-position-results" size="big" /> | ||
} | ||
<div className="usa-grid-full"> | ||
<ProfileSectionTitle title="Bureau Dashboard" icon="tachometer" /> | ||
</div> | ||
<div className="usa-grid-full"> | ||
<Row className="usa-grid-full"> | ||
<div className="usa-width-one-whole section"> | ||
<h3>Positions Filled</h3> | ||
{placeholderText} | ||
<div className="all-inline"> | ||
<SelectForm | ||
id="bid-cycle" | ||
options={bidCycles} | ||
label="Bid Cycle" | ||
// onSelectOption={myFunction} | ||
/> | ||
</div> | ||
<div className="usa-width-one-whole"> | ||
<div className="usa-width-one-fourth align-middle"> | ||
<PieChart width={400} height={400}> | ||
<Pie | ||
data={data} | ||
cx={200} | ||
cy={200} | ||
labelLine={false} | ||
label={renderCustomizedLabel} | ||
outerRadius={180} | ||
fill="#8884d8" | ||
dataKey="value" | ||
> | ||
{ | ||
// eslint-disable-next-line react/no-array-index-key | ||
data.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />) | ||
} | ||
</Pie> | ||
</PieChart> | ||
<div>All: 130/150</div> | ||
</div> | ||
<div className="usa-width-three-fourths"> | ||
<div className="mainSelector"> | ||
<FA name={'dot-circle-o'} /> | ||
<span>WHA (All positions)</span> | ||
</div> | ||
{countries.map((m) => { | ||
const isSelected = includes(['Nauru', 'Malawi', 'Sudan', 'Guatemala', 'Italy'], m); | ||
return ( | ||
<Column columns={2}> | ||
<FA name={isSelected ? 'dot-circle-o' : 'circle-o'} /> | ||
<span>{m}</span> | ||
</Column> | ||
); | ||
})} | ||
</div> | ||
</div> | ||
</div> | ||
<div className="usa-width-one-whole section"> | ||
<h3>Notifications</h3> | ||
</div> | ||
</Row> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
BureauPage.propTypes = { | ||
placeholderText: PropTypes.string, | ||
}; | ||
|
||
BureauPage.defaultProps = { | ||
placeholderText: '', | ||
}; | ||
|
||
export default BureauPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import TestUtils from 'react-dom/test-utils'; | ||
import { Provider } from 'react-redux'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
import configureStore from 'redux-mock-store'; | ||
import thunk from 'redux-thunk'; | ||
import BureauPage from './Dashboard'; | ||
|
||
const middlewares = [thunk]; | ||
const mockStore = configureStore(middlewares); | ||
|
||
describe('BureauPage', () => { | ||
const props = { | ||
placeholderText: '', | ||
}; | ||
|
||
it('mounts', () => { | ||
const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter> | ||
<BureauPage /> | ||
</MemoryRouter></Provider>); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
|
||
it('is defined', () => { | ||
const wrapper = shallow(<BureauPage {...props} />); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './Dashboard'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import ProfileSectionTitle from '../../ProfileSectionTitle'; | ||
import Spinner from '../../Spinner'; | ||
|
||
const PositionsList = (props) => { | ||
const { | ||
placeholderText, | ||
} = props; | ||
|
||
return ( | ||
<div | ||
className={'usa-grid-full profile-content-inner-container bureau-page'} | ||
> | ||
{ | ||
!placeholderText && | ||
<Spinner type="homepage-position-results" size="big" /> | ||
} | ||
<div className="usa-grid-full"> | ||
<ProfileSectionTitle title="Positions Lists" icon="list-ol" /> | ||
</div> | ||
<div className="usa-grid-full bureau-page"> | ||
{placeholderText} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
PositionsList.propTypes = { | ||
placeholderText: PropTypes.string, | ||
}; | ||
|
||
PositionsList.defaultProps = { | ||
placeholderText: '', | ||
}; | ||
|
||
export default PositionsList; |
25 changes: 25 additions & 0 deletions
25
src/Components/BureauPage/PositionLists/PositionLists.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import TestUtils from 'react-dom/test-utils'; | ||
import { Provider } from 'react-redux'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
import configureStore from 'redux-mock-store'; | ||
import thunk from 'redux-thunk'; | ||
import PositionLists from './PositionLists'; | ||
|
||
const middlewares = [thunk]; | ||
const mockStore = configureStore(middlewares); | ||
|
||
describe('BureauPage', () => { | ||
it('mounts', () => { | ||
const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter> | ||
<PositionLists /> | ||
</MemoryRouter></Provider>); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
|
||
it('is defined', () => { | ||
const wrapper = shallow(<PositionLists />); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './PositionLists'; |
37 changes: 37 additions & 0 deletions
37
src/Components/BureauPage/PositionManager/PositionManager.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import ProfileSectionTitle from '../../ProfileSectionTitle'; | ||
import Spinner from '../../Spinner'; | ||
|
||
const PositionManager = (props) => { | ||
const { | ||
placeholderText, | ||
} = props; | ||
|
||
return ( | ||
<div | ||
className={'usa-grid-full profile-content-inner-container bureau-page'} | ||
> | ||
{ | ||
!placeholderText && | ||
<Spinner type="homepage-position-results" size="big" /> | ||
} | ||
<div className="usa-grid-full"> | ||
<ProfileSectionTitle title="Positions Manager" icon="map" /> | ||
</div> | ||
<div className="usa-grid-full bureau-page"> | ||
{placeholderText} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
PositionManager.propTypes = { | ||
placeholderText: PropTypes.string, | ||
}; | ||
|
||
PositionManager.defaultProps = { | ||
placeholderText: '', | ||
}; | ||
|
||
export default PositionManager; |
25 changes: 25 additions & 0 deletions
25
src/Components/BureauPage/PositionManager/PositionManager.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import TestUtils from 'react-dom/test-utils'; | ||
import { Provider } from 'react-redux'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
import configureStore from 'redux-mock-store'; | ||
import thunk from 'redux-thunk'; | ||
import PositionManager from './PositionManager'; | ||
|
||
const middlewares = [thunk]; | ||
const mockStore = configureStore(middlewares); | ||
|
||
describe('BureauPage', () => { | ||
it('mounts', () => { | ||
const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter> | ||
<PositionManager /> | ||
</MemoryRouter></Provider>); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
|
||
it('is defined', () => { | ||
const wrapper = shallow(<PositionManager />); | ||
expect(wrapper).toBeDefined(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './PositionManager'; |
Oops, something went wrong.