Side Bar Component:

• A react component of side bar.

Acceptance Criteria:

• Go to Github demo url to check the result.
• Github demo Address: https://jacobway.github.io/HRMP/src/pages/main.html
• Go to Github source code address to check the code quality.
• Github source code address: https://github.com/JacobWay/HRMP
• Install from source code.

git clone https://github.com/JacobWay/HRMP.git
cd HRMP
sudo npm install
npm run dev
open http://127.0.0.1:9999/src/pages/main.html
npm run test

• No bug by self-tested
• Full implementation of the requirements and extra requirements

Time Tracking of Implementation of Task Requirements:

• Read document: ~6 hours
• Build development environment: ~3 hours
• Coding: ~5 hours
• Total: ~14 hours

Address:

• Github demo Address: https://jacobway.github.io/HRMP/src/pages/main.html
• Github source code address: https://github.com/JacobWay/HRMP

Developing:

git clone https://github.com/JacobWay/HRMP.git
cd HRMP
sudo npm install
npm run dev
npm run test:watch

Development Environment:

• OS: Mac OS X Yosemite
• Tools Stack: webpack + es6 babel.js + react.js + jest + AJAX + git + vim + ...

Requirements:

Interactive Logic:

1. Clicking "Clear All": Clear all the checkbox mark (All of the checkboxes are unchecked).
2. Clicking the checkbox of department on the left: toggle the checkboxes of sub directory and department.
3. Clicking the checkbox of position: toggle the checkbox.

Task Requirements:

1. Code maintainable.
2. Pixel perfect, mockup closer, points up.
3. Use JSX of React.js.
4. React.js state vs props.
5. Use git effectively.
6. Write idiomatic code.
7. Code style guide: simple, standard, modular, consistent.
8. No need of the libarary of data layer, like flux, or redux.
9. ES6 if you like.

My Extra Requirements:

1. Expand & Collapse menu.
2. Add Readme UI component
3. Test react component