[$60] - Refactoring of buttons on Challenge Details page

[birdofpreyru]

This ticket relates to REGISTER, UNREGISTER, SUBMIT, etc. buttons on the Challenge Details page. Related code is hosted in https://github.com/appirio-tech/tc-site

Here is the context: we have just added new VIEW SCORECARDS and COMPLETE APPEALS buttons to the Challenge Details page (#1004, some bugs are possible, but the assumed behavior is that during Appeals phase, if you have submitted, they replace the usual REGISTER/UNREGISTER/SUBMIT buttons, all you are familiar with). Also, now we load user roles into controller of the Challenge Details page (#1002), and we are ready to fancy customise the buttons shown in the page depending on the user's role (there is no sense to show REGISTER/UNREGISTER/SUBMIT buttons for reviewer, but he would like to have VIEW SCORECARDS button when Review phase is going on, etc. - we have more roles, and sure we can come with more convenient customizations).

The problem is that current code controlling the buttons is messy, and I'd love to refactor it before adding new buttons and even more complex logic to when we show them (check lines ##14-40 in /src/js/app/challenge-details/index.html - these take care about buttons in case of Development Challenges, let's only touch them for now. Once we get a good solution, we'll take care about buttons for Design Challenges):

We should move all logic into the controller. Controller should check everything necessary (challenge type, user role, whether user is registered, has submitted, etc.) and generate an array of button objects. Each object in that array should have all fields necessary to describe that button: text, color, disabled, href, onClick, etc. Inside the HTML template we should use that array together with ng-repeat to generate those buttons based on the array provided by the controller, using the same general button template. The index in array will be used to show the number in the corner of button.

To make adding/removing of buttons simple don't combine logic for different buttons, keep it as simple as:

const buttons = [];
...
// This is ... button for a regular contestant.
if (...) buttons.push(newButton(...));
...

So that adding/removing an if block allows to add/remove a button, without any side effects. newButton() method should generate a new button object in a convenient way, setting reasonable defaults (e.g. it may check whether the challenge is design or develop and set either blue or green background color as default, when the color has not been suggested by the caller). Be sure to comment the arguments supported by your newButton(), so that adding new buttons is easy if future.

With all this said, you goal is keep current buttons with their style and functionality, but refactor underlying code in the specified way.