Module Assembly - member profile badges section refactor - Angular

Welcome to Module Assembly - topcoder member profile badges section refactor - angularJS challenge. This challenge is serial of recent Assembly Challenges to refactor member profile page using angular.

The goal of this challenge is to refactor badges section (rendered by content-badges.php) such that backend API requests are moved to an angular service instead from PHP.

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:

1. Badges icons section should be generated by angular instead of PHP template.
   API source http://api.topcoder.com/v2/users/fireice?data=achievements
2. Mouse hover tooltips for each badges, see http://tcdev1.topcoder.com/member-profile/fireice/?tab=develop
   Tooltips also need to call non-API source : http://community.topcoder.com/tc?module=MemberAchievementCurrent&cr={handle}&ruleId={badgeId}.
   See also moved tcapi_get_member_achievements_current() function here
3. Add appropiate padding and margin, currently margin is missing which cause badges is so close to border. see http://screencast.com/t/OHL5383O

Refactor Requirements:

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

1. Use attached patch (for data-science) as starting point. it contains refactored develop tab too. that patch also has been applied to https://gitlab.com/topcoderinc/tc-site/tree/S-216713-Member-Profile-Refactor-data-science-tab . you would see badges section is empty, please see this screencast
2. Update all js code related to angular refactoring under js/app/member-profile

Additional Notes:

1. We're moving repo from gitHub to gitlab. so please pull latest master branch from https://gitlab.com/groups/topcoderinc. more guidance can be found on https://gitlab.com/topcoderinc/tc-site/blob/master/README.md#recommend-workflow-for-working-on-a-challenge
2. Testing for attached patch file to ensure ensure refactored (to angular) develop and data science tabs work fine as provided. If there are existing issues, lets report and it will be out of scope
    
   • http://local.topcoder.com/member-profile/flytoj2ee/develop
   • http://local.topcoder.com/member-profile/wata/algorithm
   • http://local.topcoder.com/member-profile/wata/marathon
   • http://local.topcoder.com/member-profile/tomek/marathon
3. If you get 404 eror, maybe you need to set "Member profile using AngularJS" as template of "Member profile page"

Final Submission Guidelines

Please follow this https://gitlab.com/topcoderinc/tc-site/blob/master/README.md

Check out latest code from git hub from branch https://gitlab.com/topcoderinc/tc-site/tree/master and submit your code as zip files or as a merge request.

Look at the page template page_angular_example (https://gitlab.com/topcoderinc/tc-site/blob/master/wp-content/themes/tcs-responsive/page-angular-example.php) for integration into Wordpress page template. To try out this page in your dev instance of wpengine, you will want to create a new page using the template “angular example” and navigate to that page. If you are having issues, purge caches and reset JS/CSS registry under “Appearance->Theme Options”

Read Me: https://gitlab.com/topcoderinc/tc-site/blob/master/README.md#angularjs

Here are some general rules to follow

• root angular directory at tcs-responsive/js/app (https://gitlab.com/topcoderinc/tc-site/tree/master/wp-content/themes/tcs-responsive/js/app)

• Main application file: app.js (https://gitlab.com/topcoderinc/tc-site/blob/dev/wp-content/themes/tcs-responsive/js/app/app.js)

  • Global level configuration

  • setup main tc application

• Organize code into logical directories

  • All challenge related code should be under the challenges folder

  • Create new folders as needed (i.e members)

  • Separate code into correct folders by type (controllers, services, filters, directives)

• Use directives or templates to hold all html, preferable templates.

• Controllers should be implemented by using the controller function on the main app object (the tc variable).  example : https://github.com/topcoderinc/tc-site/blob/dev/wp-content/themes/tcs-responsive/js/app/challenges/controllers/challengeListingCtrl.js#L3)

• Services, filters and directives should all be their own modules https://gitlab.com/topcoderinc/tc-site/blob/master/wp-content/themes/tcs-responsive/js/app/challenges/services/challengeService.js#L3

• Services should use Restangular (https://github.com/mgonto/restangular)

• Tables should use ngGrid: http://angular-ui.github.io/ng-grid/