Topcoder Admin App - Device management

Implement a section to manage devices (list, filter, create and edit) similar to existent sections.

Project Background

Topcoder Admin is an AngularJS application that lets Topcoder admins perform various admin operations. It already has several sections to manage users, groups, clients and so on.

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/device-management` commit `22e104f43c35f3fbfba68b16bbc3a1d45b9e49aa` or later.

- A brief setup guide with credentials to access Lookups API are provided on the challenge forum.

Individual requirements

We would like to implement a new section to manage devices similar to other sections like "Billing Accounts -> Clients", see a screenshot and link when deployed locally. Note, with the credentials we provide you cannot see data at the Clients section.

• The main features to implement are list devices with the ability to filter, create and edit devices.

• Devices are represented by the device model and could be managed using Lookups API. See swagger file which describes Lookups API. You may open it via Online Swagger Editor.

• Add a new section "Devices" to the left sidebar. Please, choose some appropriate icon.

• On the "list" page implement filters for devices by "Type", "Manufacturer", "Model", "Operating System" and "Operating System Version".
  For the "type" and "manufacturer" fields implement the input field with the autocomplete (suggestions). Please, use some appropriate library for this purpose. Something like this https://jqueryui.com/autocomplete/ but for AngularJS.
  - to get suggestions, we have endpoints in Lookups API to get all types ("/lookups/devices/types") and manufacturers with a particular type ("/lookups/devices/manufacturers?type=<type>'"), see swagger file referred above.
  - when we type in the fields, we should show the list with suggestions but only the ones which include entered string
  - we should be able to select any suggestion using mouse or keyboard
  - input should allow any value, not only listed in the suggestion list
  - note, that we can only show suggestions for the "manufacturer" field if we already entered something to the "type" field due to API requirements.

• In the table of devices show all the possible columns, see devices model.
  - Device "Id" should be a link that opens a device editing form.
  - Initially, devices should be shown without any filters applied and with pagination as it's done for Clients.
  - Don't add sorting to the columns, as Lookup API doesn't support it.

• On the device listing page add a "+ Add Device" button which would open a form for creating a device. The same as it's done for the Clients section.

• In create/edit form we should be able to edit all the model fields.
  - all the fields except "Operating System Version" are required - please, implement client-side validation for this
  - for the "type" and "manufacturer" fields implement autocomplete the same way as for filters

General requirements

• Add a new constant for Lookup API base URL "LOOKUP_V5_API_URL" with values for "prod" => "https://api.topcoder.com/v5", "dev" => "https://api.topcoder-dev.com/v5", "local" and "qa" => "http://localhost:3000/v5". Value by default the same as for "dev".

• Show errors from the server if they happen during any of the requests (except requests for suggestions lists, ignore errors in such case).

• Use UI State router best practices - separate states for list / detail / new and other best practices of Angular.js.

• Please, follow existent code structure and practices.

• Make sure the newly added pages have consistent look and feel with the admin-app (use similar style as the Client page)

• Don't delete or edit any existing device records using Lookup API which we share with you.
  - You may still add new devices and edit the devices you've added for testing.
  - Prefix all the devices that you add with your Topcoder username so you don't collide with other participants.

Deployment guide and validation document

Please, provide an additional document that describes how to setup the app for testing locally, including how to patch the admin app using provided credentials. You may use the guide we share with you on the forum, but make sure it's complete and reviewers could use it to fully test your submission.

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.

• Deployment guide that describes how to set up the app for testing, including how to patch the admin app using provided credentials. 

Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.