Challenge Overview
Welcome to the Topcoder challenge. You may implement this task and submit your solution until the deadline. Reviewers would score it and 2 people with higher scores (not less than minimal) would get the prizes. Learn "How to compete" and read the task below.
Context
Project Context
Topcoder Admin is an internal Topcoder tool that helps Topcoder admins perform various operations like managing users, groups, clients, devices, and so on.
Challenge Context
Topcoder runs various challenges like this one. Sometimes admins need to check the challenge details or manage users manually.
We already have a section for managing challenges called "Challenge Management" but it uses an old API V3 which doesn't have all the features we need. So we want to create a new section which would use the new API V5.
Expected Outcome
We should have a new section where admins could be able to search for challenges, view details and manage challenge users.
Challenge Details
Technology Stack
-
AngularJS 1.4
-
Bootstrap
-
CSS
Code access
The work for this challenge has to be done in one repository:
- Admin App repo https://github.com/topcoder-platform/admin-app branch `feature/v5-challenge-management` commit `aabbf48954dc7eae9916f76d0e21b1828b475c0a` or later.
- To start the application locally, please use Node v6 with npm v3 and follow Start the Application section in the README.
- Demo user is provided on the forum.
Individual requirements
Add a new menu item called "v5 Challenge Management" under the "Challenge Management". You can use the same icon, see screenshot. When we click it, show "List view".
1. List view
This page would be done similar to Terms List, see screenshot.
-
Show a table with a list of challenges 'GET https://api.topcoder-dev.com/v5/challenges'.
- Don't populate the list until the user clicks "Search".
- Table should have 5 columns: "Title", "Status", "# Registrants", "# Submissions" and column without name with button "Manage Users". -
We should be able to search (filter) challenges by:
- "Challenge ID" - `?id=<id>`
- "Legacy ID" - `?legacyId=<legacyId>`
- "Type" - `?types[]=<challengeType.abbreviation>`. Show select dropdown with options from 'GET https://api.topcoder-dev.com/v5/challenge-types'.
- "Track" - `?tracks[]=<challengeTrack.abbreviation>. Show select dropdown with options from 'GET https://api.topcoder-dev.com/v5/challenge-tracks'
- "Status" - `?status=<status>`. Show select dropdown with predefined options: "New", "Draft", "Active", "Completed".
- "Status: Active" should be selected by default. -
Use pagination like it's done for Terms, see screenshot. Show 25 records per page.
2. Details View
Clicking on the "Title" of a challenge in the list should show a Details View page. No edit functionality for now, only "view".
-
This page should contain: challenge title, formatted JSON data of the challenge and button "Manage Users" in the top right corner like on the screenshot.
-
Output row JSON in a format which is easy to read, in particular: format the JSON properly with paddings and make property names bold.
3. Manage Users
When we click the "Manage Users" button on the "List View" or "Details View" page we should show a page with a list of users. Show it similar to the users of Terms, see screenshot, but no filter and no batch deleting.
-
Show the table with the users registered to the challenge 'GET https://api.topcoder-dev.com/v5/resources?challengeId=<id>'.
- use server-side pagination with 100 records per page. -
Table should have 4 columns: "Handle", "Role", "Registered" and column without name with button "Delete".
- "Registered" date should be from the 'created' property.
- "Role" should be shown as role name instead of role id. Get mapping of ids and roles names from 'GET https://api.topcoder-dev.com/v5/resource-roles'. -
When we click the "Delete" button show "window.confirm()" popup with question "Are you Sure?". So the admin has to confirm the removal of the user. During delete API call show a loading indicator for the row which is being removed and disable the "Delete" button in this row so we cannot click it.
-
In the top right corner add button "+ Add User".
-
When we click it, show the modal, similar like we have for Terms, see screenshot. It should have 2 fields "Handle" and "Role":
- "Handle" with autocomplete. To get suggestions call 'GET https://api.topcoder.com/v3/members/_suggest/<handle_or_part_of_handle>'. We should be able to choose the user handle from suggestions or just enter it manually. Make autocomplete similar to the Devices page, see screenshot. If the list of users is too big, then add a scrollbar to the dropdown list.
- "Role" - select dropdown.
Below show buttons "Close" and "Add User".
- When we click "Add User" show loading indicator and call 'POST https://api.topcoder-dev.com/v5/resources', with the next body.
- If during this request error happens, show it like in the screenshot.
- If a user is added successfully, show a success message "User has been added." same like for error, but using green color. Also, make sure that added user is displayed in the list.
General requirements
-
Show errors from the server if they happen during any of the requests.
-
Use UI State router best practices - separate states for list / detail / new and other best practices of Angular.js.
-
Follow the existing code structure and practices.
-
Make sure the newly added pages have a consistent look and feel with the admin-app. Reuse existent styles for inputs, buttons and so on.
-
Use different base API URLs for production and development environments.
Scorecard Aid
-
This challenge would be scored using the Basic Code Challenge 0.0.5 scorecard.
-
The major requirement here is that we can search for challenges, view details and add/remove challenge users.
If you have any questions or concerns, feel free to raise a question on the forum.
Final Submission Guidelines
Submit a zip file which would include:
-
Git patch with changes you’ve made to the code in our repository.
Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.