| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>Static Master/Detail Pattern -- Search Results example</title> |
|---|
| 6 | <script src="../../../dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: 0, isDebug: true, mvc: {debugBindings: true}"> |
|---|
| 7 | </script> |
|---|
| 8 | <style type="text/css"> |
|---|
| 9 | @import "css/app-format.css"; |
|---|
| 10 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 11 | </style> |
|---|
| 12 | <script type="text/javascript"> |
|---|
| 13 | var data = [ |
|---|
| 14 | { |
|---|
| 15 | id: "1", |
|---|
| 16 | Group: "Engineer", |
|---|
| 17 | First: "Anne", |
|---|
| 18 | Last: "Ackerman", |
|---|
| 19 | Location: "NY", |
|---|
| 20 | Office: "1S76", |
|---|
| 21 | Email: "a.a@test.com", |
|---|
| 22 | Tel: "123-764-8237", |
|---|
| 23 | Fax: "123-764-8228" |
|---|
| 24 | }, |
|---|
| 25 | { |
|---|
| 26 | id: "2", |
|---|
| 27 | Group: "Engineer", |
|---|
| 28 | First: "Ben", |
|---|
| 29 | Last : "Beckham", |
|---|
| 30 | Location: "NY", |
|---|
| 31 | Office: "5N47", |
|---|
| 32 | Email: "b.b@test.com", |
|---|
| 33 | Tel: "123-764-8599", |
|---|
| 34 | Fax: "123-764-8600" |
|---|
| 35 | }, |
|---|
| 36 | { |
|---|
| 37 | id: "3", |
|---|
| 38 | Group: "Engineer", |
|---|
| 39 | First: "Chad", |
|---|
| 40 | Last: "Chapman", |
|---|
| 41 | Location: "CA", |
|---|
| 42 | Office: "1278", |
|---|
| 43 | Email: "c.c@test.com", |
|---|
| 44 | Tel: "408-764-8237", |
|---|
| 45 | Fax: "408-764-8228" |
|---|
| 46 | }, |
|---|
| 47 | { |
|---|
| 48 | id: "4", |
|---|
| 49 | Group: "Engineer", |
|---|
| 50 | First: "David", |
|---|
| 51 | Last: "Durham", |
|---|
| 52 | Location: "NJ", |
|---|
| 53 | Office: "C12", |
|---|
| 54 | Email: "d.d@test.com", |
|---|
| 55 | Tel: "514-764-8237", |
|---|
| 56 | Fax: "514-764-8228" |
|---|
| 57 | }, |
|---|
| 58 | { |
|---|
| 59 | id: "5", |
|---|
| 60 | Group: "Engineer", |
|---|
| 61 | First: "Emma", |
|---|
| 62 | Last: "Eklof", |
|---|
| 63 | Location: "NY", |
|---|
| 64 | Office: "4N76", |
|---|
| 65 | Email: "e.e@test.com", |
|---|
| 66 | Tel: "123-764-1234", |
|---|
| 67 | Fax: "123-764-4321" |
|---|
| 68 | }, |
|---|
| 69 | { |
|---|
| 70 | id: "6", |
|---|
| 71 | Group: "Manager", |
|---|
| 72 | First: "Fred", |
|---|
| 73 | Last: "Fisher", |
|---|
| 74 | Location: "NJ", |
|---|
| 75 | Office: "V89", |
|---|
| 76 | Email: "f.f@test.com", |
|---|
| 77 | Tel: "514-764-8567", |
|---|
| 78 | Fax: "514-764-8000" |
|---|
| 79 | }, |
|---|
| 80 | { |
|---|
| 81 | id: "7", |
|---|
| 82 | Group: "Manager", |
|---|
| 83 | First: "George", |
|---|
| 84 | Last: "Garnett", |
|---|
| 85 | Location: "NY", |
|---|
| 86 | Office: "7S11", |
|---|
| 87 | Email: "gig@test.com", |
|---|
| 88 | Tel: "123-999-8599", |
|---|
| 89 | Fax: "123-999-8600" |
|---|
| 90 | }, |
|---|
| 91 | { |
|---|
| 92 | id: "8", |
|---|
| 93 | Group: "Accountant", |
|---|
| 94 | First: "Hunter", |
|---|
| 95 | Last: "Huffman", |
|---|
| 96 | Location: "CA", |
|---|
| 97 | Office: "6532", |
|---|
| 98 | Email: "h.h@test.com", |
|---|
| 99 | Tel: "408-874-8237", |
|---|
| 100 | Fax: "408-874-8228" |
|---|
| 101 | }, |
|---|
| 102 | { |
|---|
| 103 | id: "9", |
|---|
| 104 | Group: "Accountant", |
|---|
| 105 | First: "Irene", |
|---|
| 106 | Last: "Ira", |
|---|
| 107 | Location: "NJ", |
|---|
| 108 | Office: "F09", |
|---|
| 109 | Email: "i.i@test.com", |
|---|
| 110 | Tel: "514-764-6532", |
|---|
| 111 | Fax: "514-764-7300" |
|---|
| 112 | }, |
|---|
| 113 | { |
|---|
| 114 | id: "10", |
|---|
| 115 | Group: "Accountant", |
|---|
| 116 | First: "John", |
|---|
| 117 | Last: "Jacklin", |
|---|
| 118 | Location: "CA", |
|---|
| 119 | Office: "6701", |
|---|
| 120 | Email: "j.j@test.com", |
|---|
| 121 | Tel: "408-764-1234", |
|---|
| 122 | Fax: "408-764-4321" |
|---|
| 123 | } |
|---|
| 124 | ], ctrl; |
|---|
| 125 | |
|---|
| 126 | require([ |
|---|
| 127 | "dojo/_base/declare", |
|---|
| 128 | "dojo/when", |
|---|
| 129 | "dojo/parser", |
|---|
| 130 | "dijit/registry", |
|---|
| 131 | "dojo/Stateful", |
|---|
| 132 | "dojo/store/Memory", |
|---|
| 133 | "dojo/store/Observable", |
|---|
| 134 | "dojox/mvc/EditStoreRefListController", |
|---|
| 135 | "dojox/mvc/equals", |
|---|
| 136 | "dijit/form/Button", |
|---|
| 137 | "dijit/form/RadioButton", |
|---|
| 138 | "dijit/form/TextBox", |
|---|
| 139 | "dijit/form/ComboBox", |
|---|
| 140 | "dijit/Dialog", |
|---|
| 141 | "dojox/mvc/Group", |
|---|
| 142 | "dojox/mvc/Output", |
|---|
| 143 | "dojox/mvc/Repeat", |
|---|
| 144 | "dojo/domReady!" |
|---|
| 145 | ], function(declare, when, parser, registry, Stateful, Memory, Observable, |
|---|
| 146 | EditStoreRefListController, equals){ |
|---|
| 147 | |
|---|
| 148 | var inited, |
|---|
| 149 | ctrlClass = declare([EditStoreRefListController], { |
|---|
| 150 | cursorIndex: 0, |
|---|
| 151 | idProperty: "id", |
|---|
| 152 | group: "", |
|---|
| 153 | groupTyped: "", |
|---|
| 154 | _refModelProp: "model", |
|---|
| 155 | |
|---|
| 156 | addEmpty: function(idx){ |
|---|
| 157 | //this.model.push(new Stateful({id:Math.random(), Group: this.groupTyped, First: "", Last: "", Location: "", Office: "", Email: "", Tel: "", Fax: ""})); |
|---|
| 158 | this.model.splice(idx+1, 0, new Stateful({id:Math.random(), Group: this.groupTyped, First: "", Last: "", Location: "", Office: "", Email: "", Tel: "", Fax: ""})); |
|---|
| 159 | this.set("cursorIndex", idx+1); |
|---|
| 160 | //this.set("cursorIndex", this.get("length") - 1); |
|---|
| 161 | }, |
|---|
| 162 | |
|---|
| 163 | remove: function(idx){ |
|---|
| 164 | this.model.splice(idx, 1); |
|---|
| 165 | if(this.get("cursorIndex") < 0){ |
|---|
| 166 | this.set("cursorIndex", this.get("length") - 1); |
|---|
| 167 | } |
|---|
| 168 | }, |
|---|
| 169 | |
|---|
| 170 | // called when set("group",..) is called, this will query the store |
|---|
| 171 | _setGroupAttr: function(value){ |
|---|
| 172 | this.set("groupTyped", value); |
|---|
| 173 | var old = this.group; |
|---|
| 174 | if(old === value){ return; } |
|---|
| 175 | when(this.queryStore({Group: value}), function(){ |
|---|
| 176 | if(!inited){ |
|---|
| 177 | parser.parse(); |
|---|
| 178 | inited = true; |
|---|
| 179 | } |
|---|
| 180 | }); |
|---|
| 181 | this._set("group", value); |
|---|
| 182 | |
|---|
| 183 | this.sourceModel.observe(function(object, removedFrom, insertedInto){ |
|---|
| 184 | console.log("observeHandle hit"); |
|---|
| 185 | // need to check to see if the model has been updated, use mvc.equals. |
|---|
| 186 | var clean = equals(ctrl.originalModel, ctrl.model); |
|---|
| 187 | console.log("store updated, model is clean? "+clean); |
|---|
| 188 | if(!clean){ |
|---|
| 189 | // use a simple confirm dialog for this one |
|---|
| 190 | if(confirm("The store has been updated, do you want to save your changes? Select 'OK' to save your changes, select 'Cancel' to discard your changes")){ |
|---|
| 191 | ctrl.commit(); |
|---|
| 192 | } |
|---|
| 193 | } |
|---|
| 194 | var grp = ctrl.get("group"); |
|---|
| 195 | ctrl.queryStore({Group: grp}); |
|---|
| 196 | }); |
|---|
| 197 | |
|---|
| 198 | } |
|---|
| 199 | }); |
|---|
| 200 | |
|---|
| 201 | // called to show items for a different group |
|---|
| 202 | search = function() { |
|---|
| 203 | // need to check to see if the model has been updated, use mvc.equals. |
|---|
| 204 | var clean = equals(ctrl.originalModel, ctrl.model); |
|---|
| 205 | console.log("the seach is changing, model is clean? "+clean); |
|---|
| 206 | if(!clean && (ctrl.get('groupTyped') !== ctrl.get('group'))){ |
|---|
| 207 | // use a dijit.dialog for this one |
|---|
| 208 | registry.byId("myFormDialog").show(); |
|---|
| 209 | }else{ |
|---|
| 210 | ctrl.set('group', ctrl.get('groupTyped')); |
|---|
| 211 | } |
|---|
| 212 | }; |
|---|
| 213 | |
|---|
| 214 | commitAndUpdate = function(){ |
|---|
| 215 | registry.byId("myFormDialog").hide(); |
|---|
| 216 | ctrl.commit(); |
|---|
| 217 | ctrl.set('group', ctrl.get('groupTyped')); |
|---|
| 218 | }; |
|---|
| 219 | |
|---|
| 220 | justUpdate = function(){ |
|---|
| 221 | registry.byId("myFormDialog").hide(); |
|---|
| 222 | ctrl.set('group', ctrl.get('groupTyped')); |
|---|
| 223 | }; |
|---|
| 224 | |
|---|
| 225 | storeAddIndex = 0; |
|---|
| 226 | // Add an item to the store, to see the Observable fire |
|---|
| 227 | testStoreAdd = function(){ |
|---|
| 228 | storeAddIndex++; |
|---|
| 229 | var store = ctrl.store; |
|---|
| 230 | var grp = ctrl.get("group"); |
|---|
| 231 | var newdata = {Group: grp, First: "NEWfirst"+storeAddIndex, |
|---|
| 232 | Last: "NEWlast"+storeAddIndex, Location: "NEWlocation"+storeAddIndex, |
|---|
| 233 | Office: "NEWoffice"+storeAddIndex, Email: "NEWEmail"+storeAddIndex, |
|---|
| 234 | Tel: "NEWtel"+storeAddIndex, Fax: "NEWfax"+storeAddIndex}; |
|---|
| 235 | |
|---|
| 236 | store.put(newdata); |
|---|
| 237 | }; |
|---|
| 238 | |
|---|
| 239 | // using Observable allows us to listen for any changes to the store |
|---|
| 240 | ctrl = new ctrlClass({store: Observable(new dojo.store.Memory({data: data}))}); |
|---|
| 241 | ctrl.set("group", "Engineer"); |
|---|
| 242 | }); |
|---|
| 243 | </script> |
|---|
| 244 | </head> |
|---|
| 245 | <body class="claro" style="background-image: url(images/master_detail.png)"> |
|---|
| 246 | <script type="dojo/require">at: "dojox/mvc/at"</script> |
|---|
| 247 | <div id="wrapper"> |
|---|
| 248 | <div id="header"> |
|---|
| 249 | <div id="navigation"></div> |
|---|
| 250 | <div id="headerInsert"> |
|---|
| 251 | <h1>Employee Search</h1> |
|---|
| 252 | <h2>Master Detail Example - Observable Repeat with insert and delete.</h2> |
|---|
| 253 | <h4>Press the "Add New Item to Store" button to update the store with a new item, the Observable will fire and update the model if no updates are in progress. If an uncommitted change has been made an alert will ask if you want to save your change.</h4> |
|---|
| 254 | </div> |
|---|
| 255 | </div> |
|---|
| 256 | <div id="main"> |
|---|
| 257 | <div id="leftNav"></div> |
|---|
| 258 | <div id="mainContent"> |
|---|
| 259 | <div class="row"> |
|---|
| 260 | <div class="spacer"></div> |
|---|
| 261 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ testStoreAdd(); }">Add New Item to Store</button> |
|---|
| 262 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ ctrl.commit(); }">Commit All</button> |
|---|
| 263 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ ctrl.reset(); }">Reset to last saved</button> |
|---|
| 264 | </div> |
|---|
| 265 | <div class="spacer"></div> |
|---|
| 266 | <div> |
|---|
| 267 | Try "Engineer", "Manager", or "Accountant": |
|---|
| 268 | </div> |
|---|
| 269 | <div class="row"> |
|---|
| 270 | <label class="cell" for="queryInput">Search for:</label> |
|---|
| 271 | <select id="setvaluetest" data-dojo-type="dijit.form.ComboBox" data-dojo-props="value: at(ctrl, 'groupTyped')"> |
|---|
| 272 | <option value="Engineer">Engineer</option> |
|---|
| 273 | <option value="Manager">Manager</option> |
|---|
| 274 | <option value="Accountant">Accountant</option> |
|---|
| 275 | </select> |
|---|
| 276 | <button type="button" data-dojo-type="dijit.form.Button" |
|---|
| 277 | data-dojo-props="onClick: function(){ search(); }">Search</button> |
|---|
| 278 | </div> |
|---|
| 279 | <div class="spacer"></div> |
|---|
| 280 | <div id="searchBanner"> |
|---|
| 281 | Search Results for group: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(ctrl, 'group')"></span> |
|---|
| 282 | </div> |
|---|
| 283 | <div data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at(ctrl, 'model')"> |
|---|
| 284 | <div class="row" data-dojo-type="dijit._WidgetBase" data-dojo-props="target: at('rel:', ${this.index})"> |
|---|
| 285 | <label class="cell" for="nameInput${this.index}">Name:</label> |
|---|
| 286 | <input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" |
|---|
| 287 | data-dojo-props="value: at('rel:', 'First')"> |
|---|
| 288 | <button type="button" data-dojo-type="dijit.form.Button" |
|---|
| 289 | data-dojo-props="onClick: function(){ ctrl.set('cursorIndex', ${this.index}); }">Details</button> |
|---|
| 290 | <button type="button" data-dojo-type="dijit.form.Button" |
|---|
| 291 | data-dojo-props="onClick: function(){ ctrl.addEmpty(${index}); }">+</button> |
|---|
| 292 | <button type="button" data-dojo-type="dijit.form.Button" |
|---|
| 293 | data-dojo-props="onClick: function(){ ctrl.remove(${index}); }">-</button> |
|---|
| 294 | </div> |
|---|
| 295 | </div> |
|---|
| 296 | <div class="spacer"></div> |
|---|
| 297 | <div id="detailsBanner"> |
|---|
| 298 | Details for result index: |
|---|
| 299 | <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(ctrl, 'cursorIndex')"></span> |
|---|
| 300 | </div> |
|---|
| 301 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ ctrl.commitCurrent(); }">Save Item</button> |
|---|
| 302 | <div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'cursor')"> |
|---|
| 303 | <div class="row"> |
|---|
| 304 | <label class="cell" for="firstInput">First Name:</label> |
|---|
| 305 | <input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'First')"> |
|---|
| 306 | </div> |
|---|
| 307 | <div class="row"> |
|---|
| 308 | <label class="cell" for="lastInput">Last Name:</label> |
|---|
| 309 | <input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Last')"> |
|---|
| 310 | </div> |
|---|
| 311 | <div class="row"> |
|---|
| 312 | <label class="cell" for="locationInput">Location:</label> |
|---|
| 313 | <input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Location')"> |
|---|
| 314 | </div> |
|---|
| 315 | <div class="row"> |
|---|
| 316 | <label class="cell" for="officeInput">Office:</label> |
|---|
| 317 | <input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Office')"> |
|---|
| 318 | </div> |
|---|
| 319 | <div class="row"> |
|---|
| 320 | <label class="cell" for="emailInput">Email:</label> |
|---|
| 321 | <input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Email')"> |
|---|
| 322 | </div> |
|---|
| 323 | <div class="row"> |
|---|
| 324 | <label class="cell" for="telInput">Telephone:</label> |
|---|
| 325 | <input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Tel')"> |
|---|
| 326 | </div> |
|---|
| 327 | <div class="row"> |
|---|
| 328 | <label class="cell" for="faxInput">Fax:</label> |
|---|
| 329 | <input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Fax')"> |
|---|
| 330 | </div> |
|---|
| 331 | </div> |
|---|
| 332 | </div> |
|---|
| 333 | </div> |
|---|
| 334 | </div> |
|---|
| 335 | <div data-dojo-type="dijit/Dialog" id="myFormDialog" title="Changing the search will cause you to lose your updates, do you want to save your changes?"> |
|---|
| 336 | <h3>Save Updates?</h3> |
|---|
| 337 | <h5> |
|---|
| 338 | "Changing the search will cause you to lose your updates, do you want to save your changes? |
|---|
| 339 | <br /> |
|---|
| 340 | Select 'Yes' to save your changes, select 'No' to discard your changes" |
|---|
| 341 | </h5> |
|---|
| 342 | <br /> |
|---|
| 343 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:commitAndUpdate">Yes</button> |
|---|
| 344 | <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:justUpdate">No</button> |
|---|
| 345 | </div> |
|---|
| 346 | </body> |
|---|
| 347 | </html> |
|---|
