-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstructions.txt
262 lines (172 loc) · 8.37 KB
/
instructions.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
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
ACCESS POINT: api/v1.0/category/<parent_id::integer>
- Retrieves an array of child categories for the "your categories" tree.
METHOD: GET
URL: api/v1.0/category/<parent_id::integer>
PARAMS: page_number, page_size
--- 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/csecategories/<cse_id::integer>
- Retrieves an array of categories for a cse.
METHOD: GET
URL: api/v1.0/csecategory
PARAMS: page_number, page_size
ACCESS POINT: api/v1.0/csecategory/<cse_id::integer>/<parent_id::integer>
- Retrieves an array of child categories for a csecategory.
METHOD: GET
URL: api/v1.0/csecategory/<parent_id::integer>
PARAMS: page_number, page_size
--- 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