Category Mapping Project

Author: John Himics

Test server available at: 
	http://johntestarea.x10.mx/otw/kuta/index.html

Instructions.txt
Category Mapping App Instructions
-----------------------------------

YOU MUST READ AND UNDERSTAND THIS ENTIRE DOCUMENT BEFORE BEGINNING

Summary:

This single-page application is responsible for helping our customers
create mappings from their own category trees to category trees from
major CSEs. In order to make the process of mapping the two trees
together as painless as possible for our customers we must implement
the mapping interface entirely in the browser using javascript and a
RESTful data API. We are asking YOU, the client-side developer, to
handle the layout and javascripting required for the browser. We will
provide everything you need to develop and test the app and we will
integrate your solution into our admin.


Layout and Functionality:

The app itself will show a select input called "Select CSE".  This
input must be filled with a list of CSEs that you retrieve from the
REST API. When the user selects a CSE from the list the app will then
fill two tree widgets with category data from the REST API as well as
a table of existing mappings. The first tree, which is located on the
left, must show the company's categories while the second tree on the
right shows the CSE's categories. You will add a button between the
two trees titled "Map Categories". The user will first select a node
from each tree and then click this button. The button will then create
a mapping record and send it to the REST API. Directly under the two
category tree widgets there will be a table for displaying all
existing mappings. This table should have three columns "Your
Category", "CSE Category" and "Delete". Each row should contain the
existing mapping data as well as a delete button that when clicked
will cause the app to use the REST API to delete the mapping as well
as update the UI to show it has been deleted.

Some CSE's allow mappings to any of the nodes in their tree. Others
only allow mappings to leaf nodes while others further complicate the
problem by allowing or disallowing mappings on a node by node
basis. The REST API will indicate what to do in its response data but
your application must be able to handle any combination of these
rules.

The app is going to require a tree widget that allows lazy-loading and
node selection. There are many widgets available for jQuery and
bootstrap. You are responsible for finding the one suited best to this
task. Do not write your own tree widget from scratch if at all
possible.

Constraints and Recommendations:

- The layout must use the provided Kuta template with bootstrap.

- The app must not allow duplicate mappings.

- The app must prevent a user from mapping a yourcategory to more than
  one CSE Category. (no many-to-many mappings). The app must allow a
  user to map more than one yourcategory to the same CSE category.

- The app must hide yourcategories that are already mapped and at the time they are mapped.

- The app must always show a spinner animation when it is loading data.

- The app must never become unresponsive or cause the browser to crash.

- The app must obey the logic specified at the CSE and Node level
  (specifically, whether non-leaf node mapping is allowed or not).

- The app must use bootstrap compatible HTML.

- Use the categorystats REST API entry to determine whether
  lazy-loading and paging should be used.

- Use the mappingstats REST API entry to determine whether the
  existing mappings table should be paged and lazy-loaded.

- The developer should consider using Backbone.js to handle
  interactions with the REST API and to handle the views and UI events
  however this is not strictly required.

- spin.js is an excellent library for showing a busy spinner.

- if you do use backbone, consider using underscore.js's template
  function since underscore.js is a dependency of backbone.js anyway.

http://mbraak.github.io/jqTree/ as the tree widget


Data Type Definitions:

     cse
       - id :: integer
       - name :: string
       - enforce_leaf_mappings :: boolean

     categorystats (used for both yourcategory and csecategory)
       - total_nodes :: integer (total number of nodes in tree)
       - max_child_nodes :: integer (maximum number of child nodes in a level)

     mappingstats
       - total_mappings :: integer (count of existing mappings for CSE)

     yourcategory
       - id :: integer
       - name :: string
       - parent_id :: integer

     csecategory
       - id :: integer
       - name :: string
       - parent_id :: integer
       - is_mappable :: boolean

     mapping
       - cse_id :: integer
       - yourcategory_id :: integer
       - csecategory_id :: integer


User Work Flow:

To create a mapping -
  1) User selects a cse from the drop down list
  2) User selects a node in each category tree
  3) User clicks the map button

To delete mapping -
  1) User finds the mapping they want to delete from the mappings table
  2) User clicks the delete button in that row


REST API Documentation:

Although you may use any library for handling the REST API
interactions, we highly recommend that you use backbone.js to do this
for you. Your implementation must communicate with the REST API in
order to retrieve the data for the form, as well as to add and remove
mappings. Please configure your script accordingly.

Sample JSON query and response files are provided in api for
you to use to test the app.

Lazy-loading is a method of loading category data on an as-needed
basis. Some category trees may contains thousands and thousands of
nodes. As such, it is not always practical to retrieve the entire
category tree all at once. In these cases you should start by
retrieving all of the root nodes of the tree, and then each set of
child nodes as required for the form. It is possible for a single node
to have upwards of a thousand children. The API allows child nodes to
be paged in alphabetical order to deal with this situation.

A special access point will return statistics about the size of the
category trees that you can use in order to decide if you need to
enable lazy-loading for the existing mapping table or either of the
category trees. A good rule of thumb is that if the REST API is going
to return more than 50 records then you should probably use
lazy-loading and or paging. Please refer the tables below for a
complete listing of the REST API and a description of each access
point.



-- CSE ---

ACCESS POINT: api/v1.0/cse

  - Retrieves an array of CSE data for binding to the CSE selector.

          METHOD: GET
             URL: api/v1.0/cse


--- your categories ---

ACCESS POINT: api/v1.0/categorystats

  - Retrieves statistics about the company category tree

          METHOD: GET
             URL: api/v1.0/categorystats


ACCESS POINT: api/v1.0/category

  - Retrieves an array of categories for the "your categories" tree.

          METHOD: GET
             URL: api/v1.0/categories
          PARAMS: page_number, page_size, parent_id


--- cse categories ---

ACCESS POINT: api/v1.0/csecategorystats/<parent_id::integer>

  - Retrieves statistics about a particular csecategory

          METHOD: GET
             URL: api/v1.0/csecategorystats/<parent_id::integer>


ACCESS POINT: api/v1.0/csecategory/<cse_id::integer>

  - Retrieves an array of child categories for a csecategory.

          METHOD: GET
             URL: api/v1.0/csecategories/<cse_id::integer>
          PARAMS: page_number, page_size, parent_id


--- mappings ---

ACCESS POINT: api/v1.0/mappingstats/<cse_id::integer>

  - Retrieves statistics about existing mappings

          METHOD: GET
             URL: api/v1.0/mappingstats/<cse_id::integer>


ACCESS POINT: api/v1.0/mapping/<cse_id::integer>

  - Retrieves an array of mappings for a cse.

          METHOD: GET
             URL: api/v1.0/mapping
          PARAMS: page_number, page_size


ACCESS POINT: api/v1.0/mapping/<cse_id::integer>

  - Creates a new mapping

          METHOD: POST
             URL: api/v1.0/mapping


ACCESS POINT: api/v1.0/mapping/<cse_id::integer>

  - Deletes a mapping

          METHOD: DELETE
             URL: api/v1.0/mapping