git.roojs.org Git - Pman.Builder/blob - Pman.Builder.Wizard.js

   1 /**
   2  * Code for wizards
   3  *
   4  * properties are
   5  * [Roo.grid.grid] << convert a cfg into a table.
   6  * [Roo.grid.grid-edit] << create a config from a tree.
   7  *
   8  *
   9  * My initial idea was to parse the existing nodes, to generate the cfg.
  10  * -- this is far too complicated..
  11  * -- let's go back to the idea of storing the config on the relivant nodes.
  12  * -- The downside is that if you modify the children, then the wizard will
  13  *    not know about those columns. etc..
  14  *
  15  *
  16  *
  17  */
  18
  19
  20 Pman.Builder.Wizard = {
  21
  22     typemap : {
  23         'bool' : 'boolean',
  24
  25         'date' : 'date',
  26         'datetime' : 'date',
  27         'time' : 'string', //bogus
  28
  29         'int' : 'int',
  30         'int4' : 'int',
  31         'bigint' : 'int',
  32         'tinyint' : 'int',
  33         'smallint' : 'int',
  34         'timestamp' : 'number',
  35
  36         'double' : 'float',
  37         'decimal' : 'float',
  38         'float' : 'float',
  39
  40         'char' : 'string',
  41         'varchar' : 'string',
  42         'text' : 'string',
  43         'longtext' : 'string',
  44         'tinytext' : 'string',
  45         'mediumtext' : 'string',
  46         'enum' : 'string',
  47
  48         'blob' : 'string'
  49     },
  50     /**
  51      * auto builders..
  52      * @param {Object} cfg the configuration
  53      * @param {Object} old the previous def...
  54      *  - table
  55      *  - cols_ex : [ name, name]
  56      *  - cols : [
  57      *      { column : name
  58      *        ctype : ctype,
  59      *        desc : desc
  60      *      }
  61      *   ]
  62      * // usage:
  63       - gen config - prior to editing
  64         -- builds up 'cfg'
  65      *
  66      */
  67    'Roo.GridPanel' : function(cfg, old)
  68     {
  69
  70         var _t = this;
  71         old = old || {};
  72
  73         var gi = _t['Roo.grid.Grid'](cfg);
  74         gi['*prop'] = 'grid';
  75
  76         return {
  77             '|xns' : 'Roo',
  78             xtype : "GridPanel",
  79             '.builderCfg' : Roo.encode(cfg),
  80             title : cfg.table,
  81             fitToframe : true,
  82             fitContainer : true,
  83             tableName: cfg.table,
  84             background: true,
  85             region : 'center',
  86             listeners : {
  87                 "|activate": "function() {\n    _this.panel = this;\n    if (_this.grid) {\n        _this.grid.footer.onClick('first');\n    }\n}"
  88             },
  89             items: [ gi ]
  90
  91         };
  92     },
  93
  94     'Roo.grid.Grid' : function(cfg, old)
  95     {
  96
  97         var _t = this;
  98         old = old || {};
  99
 100
 101
 102         var colmodel = []
 103         Roo.each(cfg.cols, function(cc) {
 104             colmodel.push( _t['Roo.grid.ColumnModel'](cc) );
 105         })
 106
 107         var dataSource = _t['Roo.data.Store'](cfg);
 108         dataSource['*prop'] = 'dataSource';
 109
 110         return  {
 111             "xtype": "Grid",
 112             '.builderCfg' :  Roo.encode(cfg),
 113             "autoExpandColumn": cfg.cols_ex[0],
 114             "loadMask": true,
 115             "listeners": {
 116                 "|render": "function() \n" +
 117                     "{\n" +
 118                     "    _this.grid = this; \n" +
 119                     "    //_this.dialog = Pman.Dialog.FILL_IN\n" +
 120                     "    if (_this.panel.active) {\n" +
 121                     "       this.footer.onClick('first');\n" +
 122                     "    }\n" +
 123                     "}",
 124                 "|rowdblclick": "function (_self, rowIndex, e)\n" +
 125                     "{\n" +
 126                     "    if (!_this.dialog) return;\n" +
 127                     "    _this.dialog.show( this.getDataSource().getAt(rowIndex), function() {\n" +
 128                     "        _this.grid.footer.onClick('first');\n" +
 129                     "    }); \n" +
 130                     "}\n"
 131             },
 132             "|xns": "Roo.grid",
 133
 134             "items": [
 135                 dataSource,
 136                 {
 137                     "*prop": "footer",
 138                     "xtype": "PagingToolbar",
 139                     "pageSize": 25,
 140                     "displayInfo": true,
 141                     "displayMsg": "Displaying " + cfg.table + "{0} - {1} of {2}",
 142                     "emptyMsg": "No " + cfg.table + " found",
 143                     "|xns": "Roo"
 144                 },
 145                 {
 146                     "*prop": "toolbar",
 147                     "xtype": "Toolbar",
 148                     "|xns": "Roo",
 149                     "items": [
 150                         {
 151                             "text": "Add",
 152                             "xtype": "Button",
 153                             "cls": "x-btn-text-icon",
 154                             "|icon": "Roo.rootURL + 'images/default/dd/drop-add.gif'",
 155                             "listeners": {
 156                                 "|click": "function()\n"+
 157                                     "{\n"+
 158                                     "    if (!_this.dialog) return;\n" +
 159                                     "    _this.dialog.show( { id : 0 } , function() {\n"+
 160                                     "        _this.grid.footer.onClick('first');\n"+
 161                                     "   }); \n"+
 162                                     "}\n"
 163                             },
 164                             "|xns": "Roo.Toolbar"
 165                         },
 166                         {
 167                             "text": "Edit",
 168                             "xtype": "Button",
 169                             "cls": "x-btn-text-icon",
 170                             "|icon": "Roo.rootURL + 'images/default/tree/leaf.gif'",
 171                             "listeners": {
 172                                 "|click": "function()\n"+
 173                                     "{\n"+
 174                                     "    var s = _this.grid.getSelectionModel().getSelections();\n"+
 175                                     "    if (!s.length || (s.length > 1))  {\n"+
 176                                     "        Roo.MessageBox.alert(\"Error\", s.length ? \"Select only one Row\" : \"Select a Row\");\n"+
 177                                     "        return;\n"+
 178                                     "    }\n"+
 179                                     "    if (!_this.dialog) return;\n" +
 180                                     "    _this.dialog.show(s[0].data, function() {\n"+
 181                                     "        _this.grid.footer.onClick('first');\n"+
 182                                     "    }); \n"+
 183                                     "    \n"+
 184                                     "}\n"
 185
 186                             },
 187                             "|xns": "Roo.Toolbar"
 188                         },
 189                         {
 190                             "text": "Delete",
 191                             "cls": "x-btn-text-icon",
 192                             "|icon": "rootURL + '/Pman/templates/images/trash.gif'",
 193                             "xtype": "Button",
 194                             "listeners": {
 195                                 "|click": "function()\n"+
 196                                     "{\n"+
 197                                     "     Pman.genericDelete(_this, '" + cfg.table + "'); \n"+
 198                                     "}\n"+
 199                                     "        "
 200                             },
 201                             "|xns": "Roo.Toolbar"
 202                         }
 203                     ]
 204                 }, // end toolbar
 205             ].concat( colmodel)
 206         };
 207     },
 208
 209
 210     'Roo.data.Store' : function(cfg, old)
 211     {
 212         var _t = this;
 213         old = old || false;
 214
 215
 216
 217         var jreader = _t['Roo.data.JsonReader'](cfg);
 218         return  {
 219
 220             "xtype": "Store",
 221             "|xns": "Roo.data",
 222              '.builderCfg' :  Roo.encode(cfg),
 223              remoteSort : true,
 224             '|sortInfo' : "{ field : '" +  cfg.cols_ex[0]  +  "', direction: 'ASC' }",
 225             "items": [
 226                 {
 227                     "*prop": "proxy",
 228                     "xtype": "HttpProxy",
 229                     "method": "GET",
 230                     "|url": "baseURL + '/Roo/" +cfg.table + ".php'",
 231                     "|xns": "Roo.data"
 232                 },
 233                 jreader
 234             ]
 235         };
 236
 237     },
 238
 239
 240     'Roo.data.JsonReader' : function(cfg, old)
 241     {
 242         // simple version to start with..
 243
 244
 245
 246
 247         var _t = this;
 248         old = old || false;
 249
 250         var fields = [];
 251
 252         Roo.each(cfg.cols, function(cc) {
 253             var ty = typeof(_t.typemap[cc.ctype]) == 'undefined' ? 'string' : _t.typemap[cc.ctype];
 254             if (cc.ctype == 'string' ) {
 255                 fields.push(cc.column);
 256                 return;
 257             }
 258             fields.push({ name : cc.column, type : _t.typemap[cc.ctype]} );
 259         });
 260
 261
 262        return {
 263
 264             '|xns' : 'Roo.data',
 265             xtype : "JsonReader",
 266             totalProperty : "total",
 267             root : "data",
 268             '.builderCfg' :  Roo.encode(cfg),
 269             '*prop' : "reader",
 270             id : 'id', // maybe no..
 271
 272             '|fields' :  JSON.stringify(fields, null,4).replace(/"/g,"'")
 273         };
 274     },
 275
 276
 277     'Roo.grid.ColumnModel' : function(rcfg, old)
 278     {
 279         // simple version to start with..
 280         var ty = typeof(this.typemap[rcfg.ctype]) == 'undefined' ? 'string' : this.typemap[rcfg.ctype];
 281
 282         // some special kludges..
 283         // remove table prefix..
 284
 285         var desc = rcfg.columnshort;
 286         if (desc.substring(0, rcfg.table.length+1) == rcfg.table+'_') {
 287             desc = desc.substring(rcfg.table.length+1);
 288         }
 289         desc = desc.replace(/_id$/, '');
 290
 291         if (!desc.length) {
 292             desc = rcfg.column;
 293         }
 294
 295
 296
 297         return {
 298             "xtype": "ColumnModel",
 299             '.builderCfg' : Roo.encode(rcfg),
 300             "header": rcfg.desc.length ? rcfg.desc : desc,
 301             "width":  ty == 'string' ? 200 : 75,
 302             "dataIndex": rcfg.column,
 303             "|renderer": ty != 'date' ?
 304                     "function(v) { return String.format('{0}', v); }" :
 305                     "function(v) { return String.format('{0}', v ? v.format('d/M/Y') : ''); }" , // special for date
 306             "|xns": "Roo.grid",
 307             "*prop": "colModel[]"
 308         };
 309     },
 310
 311
 312
 313     'Roo.LayoutDialog' : function(rcfg, old)
 314     {
 315         // simple version to start with..
 316         var _t = this;
 317
 318         var frmCfg =    _t['Roo.form.Form'](cfg, old);
 319
 320         // loop through the cols..
 321         // we need a 'display column' for each of these.
 322         // we could also have a 'renderer'...
 323
 324
 325
 326
 327         var formHeight = (frmCfg.items.length * 40) + 40; // work out from number of form ites..
 328
 329         return {
 330             xtype : 'LayoutDialog',
 331             "|xns": "Roo.grid",
 332             '.builderCfg' : Roo.encode(rcfg),
 333
 334             closable : false,
 335             collapsible: false,
 336             modal : true,
 337             height : formHeight,
 338             resizable: false,
 339             title: "Edit / Create " + rcfg.table,
 340             width: 400,
 341
 342
 343             items  : [
 344                 {
 345                     "|xns": "Roo",
 346                     "xtype": "LayoutRegion",
 347                     "*prop": "center"
 348                 },
 349                 {
 350                     "region": "center",
 351                     "xtype": "ContentPanel",
 352                     "|xns": "Roo",
 353                     "items": [
 354                         frmCfg
 355                     ]
 356                 },
 357                  {
 358                     "listeners": {
 359                         "click": "function (_self, e)\n{\n    _this.dialog.hide();\n}"
 360                     },
 361                     "*prop": "buttons[]",
 362                     "text": "Cancel",
 363                     "xtype": "Button",
 364                     "|xns": "Roo"
 365                 },
 366                 {
 367                     "listeners": {
 368                         "click": "function (_self, e)\n{\n    // do some checks?\n     \n    \n    _this.dialog.el.mask(\"Saving\");\n    _this.form.doAction(\"submit\");\n\n}"
 369                     },
 370                     "*prop": "buttons[]",
 371                     "text": "Save",
 372                     "xtype": "Button",
 373                     "|xns": "Roo"
 374                 }
 375             ]
 376         };
 377     },
 378     'Roo.form.Form' : function(rcfg, old)
 379     {
 380         // simple version to start with..
 381         var _t = this;
 382
 383         var formElements = [];
 384
 385         var fcombo = function(cn) {
 386             var cret = '';
 387             Roo.each(rcfg.cols_ux, function(n) {
 388                 if (n.substring(0,cn.length) == cn) {
 389                     cret = n;
 390                     return true;
 391                 }
 392                 return false;
 393             });
 394             return cret;
 395         }
 396
 397         Roo.each(rcfg.cols, function(cc) {
 398
 399             var ty = typeof(_t.typemap[cc.ctype]) == 'undefined' ? 'string' : _t.typemap[cc.ctype];
 400
 401             if (ty == 'string' ) {
 402                 formElements.push( _t['Roo.form.TextField'](cc, {}));
 403                 return;
 404             }
 405             if (ty  == 'date' ) {
 406                 formElements.push( _t['Roo.form.DateField'](cc, {}));
 407                 return;
 408             }
 409             if (ty  == 'float' ) {
 410                 formElements.push( _t['Roo.form.NumberField'](cc, {}));
 411                 return;
 412             }
 413             if (ty  == 'int' ) {
 414                 cc.display = fcombo(cc.column);
 415                 if (cc.length) {
 416                     formElements.push( _t['Roo.form.ComboBox'](cc, {}));
 417                     return;
 418                 }
 419                 formElements.push( _t['Roo.form.NumberField'](cc, {}));
 420                 return;
 421             }
 422
 423
 424         });
 425
 426
 427
 428         return {
 429             xtype : "Form",
 430             '|xns' : 'Roo.form',
 431             listeners : {
 432                 "|actioncomplete" : "function(_self,action)\n"+
 433                     "{\n"+
 434                     "    if (action.type == 'setdata') {\n"+
 435                     "       //this.load({ method: 'GET', params: { '_id' : _this.data.id }});\n"+
 436                     "       return;\n"+
 437                     "    }\n"+
 438                     "    if (action.type == 'load') {\n"+
 439                     "        return;\n"+
 440                     "    }\n"+
 441                     "    if (action.type =='submit') {\n"+
 442                     "    \n"+
 443                     "        _this.dialog.hide();\n"+
 444                     "    \n"+
 445                     "         if (_this.callback) {\n"+
 446                     "            _this.callback.call(_this, _this.form.getValues());\n"+
 447                     "         }\n"+
 448                     "         _this.form.reset();\n"+
 449                     "         return;\n"+
 450                     "    }\n"+
 451                     "}\n",
 452
 453                 "|rendered" : "function (form)\n"+
 454                     "{\n"+
 455                     "    _this.form= form;\n"+
 456                     "}\n"
 457             },
 458             method : "POST",
 459             style : "margin:10px;",
 460             "|url" : "baseURL + '/Roo/" + rcfg.table + ".php'",
 461             items : formElements
 462         };
 463
 464     },
 465     'Roo.form.TextField' : function(rcfg, old)
 466     {
 467         var desc = rcfg.columnshort;
 468         if (desc.substring(0, rcfg.table.length+1) == rcfg.table+'_') {
 469             desc = desc.substring(rcfg.table.length+1);
 470         }
 471         desc = desc.replace(/_id$/, '');
 472
 473         if (!desc.length) {
 474             desc = rcfg.column;
 475         }
 476
 477         return {
 478             xtype : 'TextField',
 479             '|xns' : 'Roo.form',
 480             fieldLabel : desc,
 481             name : rcfg.column,
 482             width : 200
 483         };
 484
 485
 486     },
 487
 488     'Roo.form.NumberField' : function(rcfg, old)
 489     {
 490         var desc = rcfg.columnshort;
 491         if (desc.substring(0, rcfg.table.length+1) == rcfg.table+'_') {
 492             desc = desc.substring(rcfg.table.length+1);
 493         }
 494         desc = desc.replace(/_id$/, '');
 495
 496         if (!desc.length) {
 497             desc = rcfg.column;
 498         }
 499
 500         return {
 501             xtype : 'NumberField',
 502             '|xns' : 'Roo.form',
 503             fieldLabel : desc,
 504             name : rcfg.column,
 505             width : 200
 506         };
 507
 508     },
 509
 510      'Roo.form.DateField' : function(rcfg, old)
 511     {
 512         var desc = rcfg.columnshort;
 513         if (desc.substring(0, rcfg.table.length+1) == rcfg.table+'_') {
 514             desc = desc.substring(rcfg.table.length+1);
 515         }
 516         desc = desc.replace(/_id$/, '');
 517
 518         if (!desc.length) {
 519             desc = rcfg.column;
 520         }
 521
 522         return {
 523             xtype : 'NumberField',
 524             '|xns' : 'Roo.form',
 525             fieldLabel : desc,
 526             name : rcfg.column,
 527             width : 100,
 528             format : 'Y-m-d'
 529         };
 530
 531     },
 532
 533     'Roo.form.Combobox' : function(rcfg, old)
 534     {
 535         /*
 536          * We need:
 537          *   localtable:
 538          *      the column
 539          *      table name.
 540          *   remote table:
 541          *      table name
 542          *      column 'it maps to'
 543          *      title column
 544          *
 545          *
 546          *
 547          */
 548
 549
 550
 551
 552         var desc = rcfg.columnshort;
 553         if (desc.substring(0, rcfg.table.length+1) == rcfg.table+'_') {
 554             desc = desc.substring(rcfg.table.length+1);
 555         }
 556         desc = desc.replace(/_id$/, '');
 557
 558         if (!desc.length) {
 559             desc = rcfg.column;
 560         }
 561
 562         var remote_id = '';    // eg. comp_id_id
 563         var remote_display = ''; // (eg. 'name'
 564         var local_display= '';  // eg. company_id_name
 565
 566
 567         // a reader...
 568
 569
 570         return {
 571             '|xns' : 'Roo.form',
 572             xtype: 'ComboBox',
 573
 574             allowBlank : false,
 575             editable : false,
 576             emptyText : 'Select ' + table,
 577             forceSelection : true,
 578             listWidth : 400,
 579             loadingText: 'Searching...',
 580             minChars : 2,
 581             pageSize : 20,
 582             qtip: 'Select ' + table,
 583             selectOnFocus: true,
 584             triggerAction : 'all',
 585             typeAhead: true,
 586
 587             width: 300,
 588
 589             tpl : '<div class="x-grid-cell-text x-btn button"><b>{'+display + '}</b> </div>',
 590             queryParam : 'query['+display+']',
 591             fieldLabel : desc,
 592             valueField : 'id',
 593             displayField : name,
 594             hiddenName : rcfg.column,
 595             name : rcfg.colunn + '_' + display,
 596             items : [
 597                 {
 598                     '*prop' : 'store',
 599                     '|xns' : 'Roo.data',
 600                     '|sortInfo' : '{ direction : \'ASC\', field: \'id\' }',
 601                     xtype : 'Store',
 602
 603                     remoteSort : true,
 604
 605                     listeners : {
 606                         '|beforeload' : 'function (_self, o)' +
 607                         "{\n" +
 608                         "    o.params = o.params || {};\n" +
 609                         "    // set more here\n" +
 610                         "}\n"
 611                     },
 612                     items : [
 613                         {
 614                             '*prop' : 'proxy',
 615                             'xtype' : 'HttpProxy',
 616                             'method' : 'GET',
 617                             '|xns' : 'Roo.data',
 618                             '|url' : "baseURL + '/Roo/" + table + ".php'"
 619                         },
 620
 621                         {
 622                             '*prop' : 'reader',
 623                             'xtype' : 'JsonReader',
 624                             '|xns' : 'Roo.data',
 625                             'id' : 'id',
 626                             'root' : 'data',
 627                             'totalProperty' : 'total',
 628                             '|fields' : JSON.stringify(combofields)
 629
 630                         }
 631                     ]
 632                 }
 633             ]
 634
 635     }
 636
 637
 638 }