FAST!! 72Hrs Angelos Angular Widget Implementation Challenge

Project Overview:

Welcome to the FAST!! 72Hrs Angelos Angular Widget Implementation Code Challenge! The goal of this challenge is to enhance the current application with four added features.

IMPORTANT: As per the project schedules and FAST!! challenge the review timelines are very close. Reviewers please note the review timelines for further reference.

Tips for Success: Asking questions early and getting the Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

A tarred, local GIT repo of the angular/node project is provided in the files section below. All data that would be provided by the server is mocked up in static json files and available in the /warehouse folder of the project.  Please read the submission guidelines carefully on how to submit to the challenge as well as how to provide the selected, winning submission.

Required Features:

1. Drag to Reorder Dashboard
2. Masonry Layout Implementation
3. Column Selection
4. Infinite Scroll Table

Tasks to completed on the Dashboard (http://127.0.0.1:3000/#/dashboard)

1. Drag to Reorder Dashboard

When you navigate to the app in your browser, you're brought to a page with tiles of report summary graphs.  To complete this feature, you must:

• Make these tiles to be draggable by their header bars and have the other tiles reposition. 
• Add some sort of index key:value to the /warehouse/definition/cards.json, have the page load, and display the tiles in the correct order.  Please document any additional information added to the json model for the cards to show how the sorting is implemented.
• When the tile is dropped, the resultant array of tile IDs should be written to console.log to show how you would persist the order of the tiles.  

2. Masonry Layout Implementation

On the dashboard tile page, the client would like the page configurable to where each tile may be a 1x1, 1x2, 2x1, or 2x2 size. Changing the property of each tile should cause the page to re-flow layout to compensate for the new tile's size.

For an example of what we mean by these sizes, look at this page: http://isotope.metafizzy.co/layout-modes/masonry.html

• 3 is an example of what we consider 1x1
• 1 is an example of what we consider 2x1
• 2 is an example of what we consider 1x2
• 5 is an example of what we consider 2x2

To complete this task:

1. Add a property to /warehouse/definition/cards.json to identify each cards masonry tile size
2. Change the angelosDashboard module to load the card property
3. Change the output to display the tile correctly for that tile property's value.

NOTE: An interface to change this property is not necessary.  You should be able to edit the .json file, reload the page, and see the layout change.

Tasks to completed in Report View (http://127.0.0.1:3000/#/dashboard/fruits1)

3. Column Selection

Click on report icon on dashboard items header to load Report View. Implement the settings panel to show/hide and reorder columns in the report view. To complete this module:

1. Add a button to the top right corner of the table in the blue header (move the millisecond count over to the left)
2. Add a click event to that button to pop a modal window (an html template added to /app/dashboard)
3. The modal window should list all columns in with checkboxes (in this example data: Fruit Id, Color, Expiration)
4. The user should be able to check/uncheck columns
5. The user should be able to drag the checkbox items around to put them in a new order
6. The save button should update the table according to their selections.

NOTE: Using standard and existing UI elements is encouraged here.  Layouts for the checkboxes can just be a vertical list (ul). The simpler and cleaner, the better.

4. Infinite Scroll Table

When you land on this page, the table is populated from the "database".  The client would like, instead of standard pagination, the page be changed to allow for infinite scroll within its window (it already scrolls correctly).  You will need to:

1. Add more test data to /warehouse/query/Fruit.json
2. Set up the report to only request the first 20 results of the file
3. When the user scrolls to the bottom of the table, append a loading animation (a stock gif is fine)
4. Ajax call out for the next set of data from the json file
5. When the response is returned, remove the loading graphic and append the rows to the table.

NOTE: If the user changes the display (sorts on a column or uses a filter) the user should be dropped back at page one.  Do not worry about returning them to the same result they were viewing.

Final Submission Guidelines

Steps to Submit this Project

1. Download the git repository tar file below.
2. Unpack and Clone a local working copy from that git repo
3. Branch the project to do the work on this challenge
4. When you've completed your work on the project, zip your working copy and submit it through the challenge submission process.
5. When a winner is selected, only the winning submission will need to commit/push back to their local .git repository, zip that repository back up, and provide it to complete their submission requirements.  This will alow the client to diff the changes and incorporate as they see fit into their project.

Specific Application Requirements:

• Please follow coding standards, fit in with the current application, and write clean code.
• If you want to use an additional plugin or library, as long as there are no licensing restrictions, please ask first in the forum to be sure.
• Templates may be added as external files if necessary

Browsers Requirements:

• IE8+ on PC
• Safari on MAC & PC
• Firefox on MAC & PC
• Chrome on MAC & PC

Technology Stack:

• AngularJS 1.2.x (http://angularjs.org)
• Angular UI Utils Latest (http://angular-ui.github.io/ui-utils/) except jQuery Passthrough