Open-ILS/web/reports/oils_rpt_widget.js

   1 /*
   2 oilsRptSetSubClass('oilsRptWidget', 'oilsRptObject');
   3 oilsRptWidget.OILS_RPT_TRANSFORM_WIDGET = 0;
   4 oilsRptWidget.OILS_RPT_OPERATION_WIDGET = 1;
   5
   6 function oilsRptWidget(args) {
   7         this.initWidget(args);
   8         this.dest = elem('input',{type:'text'});
   9 }
  10
  11 oilsRptWidget.prototype.initWidget = function(args) {
  12         if(!args) return;
  13         this.init();
  14         this.node       = args.node;
  15         this.type       = args.type;
  16         this.action = args.action;
  17         this.column     = args.column;
  18 }
  19
  20 oilsRptWidget.prototype.getValue = function() {
  21         return this.dest.value ;
  22 }
  23
  24 oilsRptWidget.prototype.draw = function() {
  25         appendClear(this.node, this.dest);
  26 }
  27
  28 oilsRptSetSubClass('oilsRptMultiInputWidget', 'oilsRptWidget');
  29 function oilsRptMultiInputWidget(args) {
  30         this.initInputWidget(args);
  31 }
  32
  33 oilsRptMultiInputWidget.prototype.initInputWidget = function(args) {
  34         if(!args) return;
  35         this.initWidget(args);
  36         this.count = (args.count) ? args.count : 2;
  37         this.dest = [];
  38         for( var i = 0; i < this.count; i++ )
  39                 this.dest.push(elem('input',{type:'text',size:10}));
  40 }
  41
  42 oilsRptMultiInputWidget.prototype.getValue = function() {
  43         var vals = [];
  44         for( var i = 0; i < this.dest.length; i++ )
  45                 vals.push(this.dest[i].value);
  46         return vals;
  47 }
  48
  49 oilsRptMultiInputWidget.prototype.draw = function() {
  50         removeChildren(this.node);
  51         for( var i = 0; i < this.dest.length; i++ ) {
  52                 if( this.label )
  53                         this.node.appendChild(this.label[i]);
  54                 this.node.appendChild(this.dest[i]);
  55         }
  56 }
  57
  58 oilsRptMultiInputWidget.prototype.setLabels = function(labels) {
  59         this.labels = labels;
  60 }
  61
  62
  63
  64
  65 oilsRptSetSubClass('oilsRptMultiWidget', 'oilsRptWidget');
  66 function oilsRptMultiWidget(args) {
  67         this.initMultiWidget(args);
  68 }
  69
  70 oilsRptMultiWidget.prototype.initMultiWidget = function(args) {
  71         if(!args) return;
  72         this.initWidget(args);
  73         this.dest = elem('select',
  74                 {multiple:'multiple','class':'oils_rpt_small_info_selector'});
  75
  76         var obj = this;
  77
  78         this.addButton = elem('input',{type:'submit',value:"Add"})
  79         this.addButton.onclick = this.getSourceCollector();
  80         this.delButton = elem('input',{type:'submit',value:"Del"})
  81         this.delButton.onclick = function(){obj.removeSelected()};
  82 }
  83
  84 oilsRptMultiWidget.prototype.getValue = function() {
  85         var vals = [];
  86         for( var i = 0; i < this.dest.options.length; i++ )
  87                 vals.push(this.dest.options[i].value);
  88         return vals;
  89 }
  90
  91 oilsRptMultiWidget.prototype.removeSelected = function() {
  92         oilsDelSelectedItems(this.dest);
  93 }
  94
  95 oilsRptMultiWidget.prototype.addItem = function(name, val) {
  96         for( var i = 0; i < this.dest.options.length; i++ ) {
  97                 if( this.dest.options[i].value == val )
  98                         return;
  99         }
 100         insertSelectorVal(this.dest, -1, name, val);
 101 }
 102
 103 oilsRptMultiWidget.prototype.setSource = function(src) {
 104         this.source = src;
 105 }
 106
 107 oilsRptMultiWidget.prototype.drawMultiWidget = function() {
 108         appendClear(this.node, this.source);
 109         this.node.appendChild(elem('br'))
 110         this.node.appendChild(this.addButton);
 111         this.node.appendChild(this.delButton);
 112         this.node.appendChild(elem('br'))
 113         this.node.appendChild(this.dest);
 114 }
 115
 116 oilsRptSetSubClass('oilsRptInputMultiWidget', 'oilsRptMultiWidget');
 117 function oilsRptInputMultiWidget(args) {
 118         this.initInputMultiWidget(args);
 119 }
 120 oilsRptInputMultiWidget.prototype.initInputMultiWidget = function(args) {
 121         if(!args) return;
 122         this.initMultiWidget(args);
 123         this.setSource(elem('input',{type:'text'}));
 124 }
 125
 126 oilsRptInputMultiWidget.prototype.draw = function() {
 127         this.drawMultiWidget();
 128 }
 129
 130 oilsRptInputMultiWidget.prototype.getSourceCollector = function() {
 131         var obj = this;
 132         return function() {
 133                 obj.addItem(obj.source.value, obj.source.value);
 134         }
 135 }
 136
 137
 138
 139 oilsRptSetSubClass('oilsRptSelectorMultiWidget', 'oilsRptMultiWidget');
 140 function oilsRptSelectorMultiWidget(args) {
 141         this.initSelectorMultiWidget(args);
 142 }
 143 oilsRptSelectorMultiWidget.prototype.initSelectorMultiWidget = function(args) {
 144         if(!args) return;
 145         this.initMultiWidget(args);
 146         this.setSource(
 147                 elem('select',{multiple:'multiple', 'class':'oils_rpt_small_info_selector'}));
 148 }
 149
 150 oilsRptSelectorMultiWidget.prototype.getSourceCollector = function() {
 151         var obj = this;
 152         return function() {
 153                 for( var i = 0; i < obj.source.options.length; i++ ) {
 154                         if( obj.source.options[i].selected )
 155                                 obj.addItem(obj.source.options[i].innerHTML,
 156                                         obj.source.options[i].value);
 157                 }
 158         }
 159 }
 160 */
 161
 162 /* ----------------------------------------------------------- */
 163
 164 /*
 165 oilsRptSetSubClass('oilsRptRemoteWidget', 'oilsRptSelectorMultiWidget');
 166 function oilsRptRemoteWidget(args) {
 167         this.initRemoteWidget(args);
 168 }
 169 oilsRptRemoteWidget.prototype.initRemoteWidget = function(args) {
 170         if(!args) return;
 171         this.initSelectorMultiWidget(args);
 172         this.selector = args.selector;
 173 }
 174
 175 oilsRptRemoteWidget.prototype.draw = function() {
 176         this.fetch();
 177         //this.draw();
 178 }
 179
 180 oilsRptRemoteWidget.prototype.setFetch = function(func) {
 181         this.fetch = func;
 182 }
 183 */
 184
 185
 186
 187
 188 /* --------------------------------------------------------------------- */
 189 /*
 190 oilsRptSetSubClass('oilsRptOrgMultiSelect','oilsRptSelectorMultiWidget');
 191 function oilsRptOrgMultiSelect(args) {
 192         this.initSelectorMultiWidget(args);
 193 }
 194 oilsRptOrgMultiSelect.prototype.draw = function(org) {
 195         if(!org) org = globalOrgTree;
 196         var opt = insertSelectorVal( this.source, -1,
 197                 org.shortname(), org.id(), null, findOrgDepth(org) );
 198         if( org.id() == oilsRptCurrentOrg )
 199                 opt.selected = true;
 200         if( org.children() ) {
 201                 for( var c = 0; c < org.children().length; c++ )
 202                         this.draw(org.children()[c]);
 203         }
 204         this.drawMultiWidget();
 205 }
 206 */
 207
 208
 209
 210 /* --------------------------------------------------------------------- */
 211 function oilsRptRelDatePicker(args) {
 212         this.node = args.node;
 213         this.relative = args.relative;
 214         this.div = DOM.oils_rpt_relative_date_picker.cloneNode(true);
 215 }
 216
 217 oilsRptRelDatePicker.prototype.draw = function() {
 218         this.node.appendChild(this.div);
 219         unHideMe(this.div);
 220 }
 221
 222 oilsRptRelDatePicker.prototype.getValue = function() {
 223         var str =
 224                 getSelectorVal($n(this.div, 'count')) +
 225                 getSelectorVal($n(this.div,'type'));
 226         if( this.relative ) str = '-'+str;
 227         return str;
 228 }
 229 /* --------------------------------------------------------------------- */
 230
 231
 232
 233
 234
 235
 236
 237
 238 /* --------------------------------------------------------------------- */
 239 /* --------------------------------------------------------------------- */
 240
 241
 242
 243
 244 /* ---------------------------------------------------------------------
 245         Represents a set of value, an inputWidget collects data and a
 246         multi-select displays the data and allows the user to remove items
 247         --------------------------------------------------------------------- */
 248 function oilsRptSetWidget(args) {
 249         this.node = args.node;
 250         this.inputWidget = new args.inputWidget(args);
 251         this.dest = elem('select',
 252                 {multiple:'multiple','class':'oils_rpt_small_info_selector'});
 253 }
 254
 255 oilsRptSetWidget.prototype.draw = function() {
 256
 257         this.addButton = elem('input',{type:'submit',value:"Add"})
 258         this.delButton = elem('input',{type:'submit',value:"Del"})
 259
 260         var obj = this;
 261         this.addButton.onclick = function() {
 262                 obj.addDisplayItems(obj.inputWidget.getDisplayValue());
 263         }
 264
 265         this.delButton.onclick = function(){obj.removeSelected()};
 266
 267         removeChildren(this.node);
 268         this.inputWidget.draw();
 269         this.node.appendChild(elem('br'))
 270         this.node.appendChild(this.addButton);
 271         this.node.appendChild(this.delButton);
 272         this.node.appendChild(elem('br'))
 273         this.node.appendChild(this.dest);
 274 }
 275
 276 oilsRptSetWidget.prototype.addDisplayItems = function(list) {
 277         if( list.constructor != Array ) list = [list];
 278         for(var i = 0; i < list.length; i++) {
 279                 var item = list[i];
 280
 281                 /* no dupes */
 282                 var exists = false;
 283                 iterate(this.dest.options,
 284                         function(o){if(o.getAttribute('value') == item.value) {exists = true; return;}});
 285                 if(exists) continue;
 286
 287                 _debug('Inserting SetWidget values ' + js2JSON(item));
 288                 insertSelectorVal(this.dest, -1, item.label, item.value);
 289         }
 290 }
 291
 292 oilsRptSetWidget.prototype.removeSelected = function() {
 293         oilsDelSelectedItems(this.dest);
 294 }
 295
 296 oilsRptSetWidget.prototype.getValue = function() {
 297         var vals = [];
 298         iterate(this.dest, function(i){vals.push(i.getAttribute('value'))});
 299         return vals;
 300 }
 301
 302
 303 /* ---------------------------------------------------------------------
 304         represents a widget that has start and end values.  start and end
 305         are gather from start/end widgets
 306         --------------------------------------------------------------------- */
 307 function oilsRptBetweenWidget(args) {
 308         this.node = args.node;
 309         this.startWidget = new args.startWidget(args);
 310         this.endWidget = new args.endWidget(args);
 311 }
 312 oilsRptBetweenWidget.prototype.draw = function() {
 313         removeChildren(this.node);
 314         this.node.appendChild(text('Between '));
 315         this.startWidget.draw();
 316         this.node.appendChild(text(' and '));
 317         this.endWidget.draw();
 318 }
 319 oilsRptBetweenWidget.prototype.getValue = function() {
 320         return [
 321                 this.startWidget.getValue(),
 322                 this.endWidget.getValue()
 323         ];
 324 }
 325
 326
 327
 328
 329 /* ---------------------------------------------------------------------
 330         ATOMIC WIDGETS
 331         --------------------------------------------------------------------- */
 332
 333
 334 /* ---------------------------------------------------------------------
 335         Atomic text input widget
 336         --------------------------------------------------------------------- */
 337 function oilsRptTextWidget(args) {
 338         this.node = args.node;
 339         this.dest = elem('input',{type:'text',size:12});
 340 }
 341 oilsRptTextWidget.prototype.draw = function() {
 342         this.node.appendChild(this.dest);
 343 }
 344
 345 /* returns the "real" value for the widget */
 346 oilsRptTextWidget.prototype.getValue = function() {
 347         return this.dest.value;
 348 }
 349
 350 /* returns the label and "real" value for the widget */
 351 oilsRptTextWidget.prototype.getDisplayValue = function() {
 352         return { label : this.getValue(), value : this.getValue() };
 353 }
 354
 355
 356
 357 /* ---------------------------------------------------------------------
 358         Atomic calendar widget
 359         --------------------------------------------------------------------- */
 360 function oilsRptCalWidget(args) {
 361         this.node = args.node;
 362         this.calFormat = args.calFormat;
 363         this.input = elem('input',{type:'text',size:12});
 364
 365         if( args.inputSize ) {
 366                 this.input.setAttribute('size',args.inputSize);
 367                 this.input.setAttribute('maxlength',args.inputSize);
 368         }
 369 }
 370
 371 oilsRptCalWidget.prototype.draw = function() {
 372         this.button = DOM.generic_calendar_button.cloneNode(true);
 373         this.button.id = oilsNextId();
 374         this.input.id = oilsNextId();
 375
 376         this.node.appendChild(this.button);
 377         this.node.appendChild(this.input);
 378         unHideMe(this.button);
 379
 380         _debug('making calendar widget with format ' + this.calFormat);
 381
 382         Calendar.setup({
 383                 inputField      : this.input.id,
 384                 ifFormat                : this.calFormat,
 385                 button          : this.button.id,
 386                 align                   : "Tl",
 387                 singleClick     : true
 388         });
 389 }
 390
 391 oilsRptCalWidget.prototype.getValue = function() {
 392         return this.input.value;
 393 }
 394
 395 oilsRptCalWidget.prototype.getDisplayValue = function() {
 396         return { label : this.getValue(), value : this.getValue() };
 397 }
 398
 399
 400 /* ---------------------------------------------------------------------
 401         Atomic org widget
 402         --------------------------------------------------------------------- */
 403 function oilsRptOrgSelector(args) {
 404         this.node = args.node;
 405         this.selector = elem('select',
 406                 {multiple:'multiple','class':'oils_rpt_small_info_selector'});
 407 }
 408
 409 oilsRptOrgSelector.prototype.draw = function(org) {
 410         if(!org) org = globalOrgTree;
 411         var opt = insertSelectorVal( this.selector, -1,
 412                 org.shortname(), org.id(), null, findOrgDepth(org) );
 413         if( org.id() == oilsRptCurrentOrg )
 414                 opt.selected = true;
 415         if( org.children() ) {
 416                 for( var c = 0; c < org.children().length; c++ )
 417                         this.draw(org.children()[c]);
 418         }
 419         this.node.appendChild(this.selector);
 420 }
 421
 422 oilsRptOrgSelector.prototype.getValue = function() {
 423         var vals = [];
 424         iterate(this.selector,
 425                 function(o){
 426                         if( o.selected )
 427                                 vals.push(o.getAttribute('value'))
 428                 }
 429         );
 430         return vals;
 431 }
 432
 433 oilsRptOrgSelector.prototype.getDisplayValue = function() {
 434         var vals = [];
 435         iterate(this.selector,
 436                 function(o){
 437                         if( o.selected )
 438                                 vals.push({ label : o.innerHTML, value : o.getAttribute('value')});
 439                 }
 440         );
 441         return vals;
 442 }
 443
 444
 445 /* ---------------------------------------------------------------------
 446         Atomic age widget
 447         --------------------------------------------------------------------- */
 448 function oilsRptAgeWidget(args) {
 449         this.node = args.node;
 450         this.count = elem('select');
 451         this.type = elem('select');
 452 }
 453
 454 oilsRptAgeWidget.prototype.draw = function() {
 455         for( var i = 1; i < 25; i++ )
 456                 insertSelectorVal(this.count, -1, i, i);
 457         insertSelectorVal(this.type, -1, 'Day(s)', 'days');
 458         insertSelectorVal(this.type, -1, 'Month(s)', 'months');
 459         insertSelectorVal(this.type, -1, 'Year(s)', 'years');
 460         this.node.appendChild(this.count);
 461         this.node.appendChild(this.type);
 462 }
 463
 464 oilsRptAgeWidget.prototype.getValue = function() {
 465         var count = getSelectorVal(this.count);
 466         var type = getSelectorVal(this.type);
 467         return count+''+type;
 468 }
 469
 470 oilsRptAgeWidget.prototype.getDisplayValue = function() {
 471         var val = { value : this.getValue() };
 472         var label = getSelectorVal(this.count) + ' ';
 473         for( var i = 0; i < this.type.options.length; i++ ) {
 474                 var opt = this.type.options[i];
 475                 if( opt.selected )
 476                         label += opt.innerHTML;
 477         }
 478         val.label = label;
 479         return val;
 480 }
 481
 482
 483
 484 /* ---------------------------------------------------------------------
 485         Atomic number picker
 486         --------------------------------------------------------------------- */
 487 function oilsRptNumberWidget(args) {
 488         this.node = args.node;
 489         this.size = args.size || 24;
 490         this.start = args.start;
 491         var len = new String(this.size).length;
 492         _debug('length = ' + len);
 493         this.input = elem('input',{type:'text',size: len});
 494         this.selector = elem('select');
 495 }
 496 oilsRptNumberWidget.prototype.draw = function() {
 497         for( var i = this.start; i < (this.size + this.start); i++ )
 498                 insertSelectorVal(this.selector, -1, i, i);
 499         this.node.appendChild(this.selector);
 500         this.node.appendChild(this.input);
 501         var obj = this;
 502         this.selector.onchange = function() {
 503                 obj.input.value = getSelectorVal(obj.selector);
 504         }
 505         this.input.value = getSelectorVal(this.selector);
 506 }
 507
 508 oilsRptNumberWidget.prototype.getValue = function() {
 509         return this.input.value;
 510 }
 511
 512 oilsRptNumberWidget.prototype.getDisplayValue = function() {
 513         return { label : this.getValue(), value : this.getValue() };
 514 }
 515
 516
 517 /* ---------------------------------------------------------------------
 518         CUSTOM WIDGETS
 519         --------------------------------------------------------------------- */
 520
 521 /* ---------------------------------------------------------------------
 522         custom my-orgs picker
 523         --------------------------------------------------------------------- */
 524 function oilsRptMyOrgsWidget(node, orgid) {
 525         this.node = node;
 526         this.orgid = orgid;
 527 }
 528
 529 oilsRptMyOrgsWidget.prototype.draw = function() {
 530         var req = new Request(OILS_RPT_FETCH_ORG_FULL_PATH, this.orgid);
 531         var obj = this;
 532         req.callback(
 533                 function(r) { obj.drawWidget(r.getResultObject()); }
 534         );
 535         req.send();
 536 }
 537
 538 oilsRptMyOrgsWidget.prototype.drawWidget = function(orglist) {
 539         var sel = this.node;
 540         for( var i = 0; i < orglist.length; i++ ) {
 541                 var org = orglist[i];
 542                 var opt = insertSelectorVal( this.node, -1,
 543                         org.name(), org.id(), null, findOrgDepth(org) );
 544                 if( org.id() == this.orgid )
 545                         opt.selected = true;
 546         }
 547 }
 548
 549 oilsRptMyOrgsWidget.prototype.getValue = function() {
 550         return getSelectorVal(this.node);
 551 }
 552
 553