Module Assembly - topcoder member profile data science tab refactor - angularJS

Welcome to Module Assembly - topcoder member profile Data Science tab refactor - angularJS challenge. This challenge is similar to Module Assembly - topcoder member profile Develop tab refactor - angular.

The goal of this challenge is to refactor content-member-algo.php and content-member-marathon.php such that backend API requests are moved to an angular service instead from PHP.
Currently http://www.topcoder.com/member-profile/{handle} - which is using Wordpress - render tabs content by PHP code (wordpress template) which cause performance issues.

We've already refactored member profile (member information,photo,quote,country,etc) section, and now we will advance to Develop tab of this member profile page. and develop tabs refactored is almost ready, patch is attached.

Big picture: What are we trying to do?

There will be series of challenges to refactor all of member profile pages. We want to remove all API calls to use angular/javascript instead of some calls happening in PHP and some in javascript in the current implementation. To check how the current page works: http://www.topcoder.com/member-profile/{handle}

Scope:
- Algorithm tabs, API endpoint example : http://api.topcoder.com/v2/users/tomek/statistics/data/srm
- Marathon tabs, API endpoint example : http://api.topcoder.com/v2/users/tomek/statistics/data/marathon
- Graph view (rating History and Distribution) for both algorithm and marathon tab. API endpoint example :http://api.topcoder.com/v2/users/tomek/statistics/data/srm and http://api.topcoder.com/v2/users/tomek/statistics/data/marathon see History and Distribution fields
- Badges on right sidebar is out of scope

Expected Results :
Performance can be improved by the following results :
- Switching to data science tab should be by angularJS. currently it is by jquery which load HTML content  to construct tab content
- Direct URL (e.g : http://tcdev1.topcoder.com/member-profile/psyho/?tab=algo ) would also load content by angularJS
- Circle charts (divisions achievement) should work properly
- Graph view (History and Distribution should work properly
- Please exclude badges section for now because it will be improved later. Currently AJAX will also load badges section at right side, which cause performance issue.
- Please be sure your submission and this https://github.com/topcoderinc/tc-site/pull/318/files would have the same pattern
- Winner will be asked to clean up unused PHP functions on final fix phase

Refactor Requirements:

Modify the submitted code to the following structure and coding guidelines.

1. We've almost ready Angular patch for develop tab. Keep it your mind if we'll merge it with output of this challenge later.
2. Update all js code related to angular refactoring under js/app/member-profile
3. Organize html/js/css files under js/app/member- profile structure as below (adding files as necessary).     

• • member-profile

    • js/

      • module-member-profile.js

      • controllers-member-profile.js

      • directives-member-profile.js

      • filters-member-profile.js

      • services-member-profile.js

      • controllers/

        • {reallybigcontroller}-member-profile.js

      • directive/

        • {reallybigdirective}--member-profile.js

    • lib/ (if using any libs referred by profile pages)

      • {libname}/

        • files related to the {libname}

    • partials/

      • *.html (any template files)

    • demo/index.html (if you want to demonstrate use of the new services)

 

3. Refactor the code create a proper single page angular app for member-profile, splitting the model/view/services accordingly. All view code in html should be under partials/ as templates as much as possible.  Create logical controllers, services (for sharing data across controllers), directives to capture reusable ui behaviour. API calls should be under new angular service you will create called  MemberProfileService

4. For this challenge, badges section, design tabs will be out of scope because they will be enchanced in paralel. But please ensure Develop tabs which has been using Angular work fine as is. so develop tab should be merged into your submission.

5. Please follow this instruction about AngularJS integration, e.g : using Angular Loading Bar

Resources Provided:
- Latest theme and plugin available on dev branch
- Latest xml is available on https://github.com/topcoderinc/tc-site-data
- API doc : http://docs.tcapi.apiary.io/#get-%2Fv2%2Fuser%2Fprofile
- Patch for Angular version of Develop tab is attached in forum, please learn it.


Quick Installation guide:
1. Activate theme and plugin
2. Import provided XML file
3. Set "home" as front page
4. Set permalink to %post_name%
5. Please install site on local.topcoder.com (add to hosts file), so your local site can read tcsso and tcjwt cookie
6. Please set "Member Profile Using AngularJS" as template of "Member Profile" Page, maybe provided XML file is out of date

Final Submission Guidelines