CXGN/Page/Form/JSFormPage.js

   1
   2 /**
   3 * @class JSFormPage
   4 * A Javascript SimpleFormPage for generating Ajax forms
   5 * @author Naama Menda <nm249@cornell.edu>
   6 *
   7 *This javascript object deals with dynamic printing
   8 *of static/editable forms
   9 *
  10 *JSFormPage.js object is instantiated from CXGN::Page::Form::JSFormPage.pm
  11 */
  12
  13 //JSAN.use('jQuery');
  14 JSAN.use('Prototype');
  15
  16 if (!CXGN) CXGN = function() {};
  17 if (!CXGN.Page) CXGN.Page = function() {};
  18 if (!CXGN.Page.Form) CXGN.Page.Form = function() {};
  19
  20 CXGN.Page.Form.JSFormPage = function(id,  name,  script, formId, jsObjectName, pageName) {
  21     //alert('In constructor.');
  22
  23     this.setObjectName(name);
  24     this.setObjectId(id);
  25     this.setAjaxScript(script);
  26     this.setFormId(formId);
  27     this.setJsObjectName(jsObjectName);
  28     this.setPageName(pageName);
  29     this.defineButtons();
  30 };
  31
  32
  33 CXGN.Page.Form.JSFormPage.prototype = {
  34
  35     render: function(action) {
  36        //render the form here
  37         if (!action) action  = "view";
  38         if (!this.getObjectId()) action = "new";
  39         //      MochiKit.Logging.log("FormId = " + this.formId);
  40         this.printForm( action);
  41     },
  42
  43
  44
  45     /**
  46      * store
  47      * store the information from the form into the database
  48      * -checks privileges
  49      * -form fields are validated
  50      * (if fails- form shows again with an appropriate error message)
  51      * args: server_side_script name, and %args
  52      * -calls the appropriate server side script that calls the store function
  53      * in the relevant perl object.
  54      * onSuccess - the innerHTML div is updated, else, a JSON alert is issued.
  55      */
  56     store: function() {
  57         //var action = 'store';
  58         var form = this;
  59         var editableForm = $(this.getEditableFormId());
  60         MochiKit.Logging.log("Store function found editableFormId", this.getEditableFormId());
  61
  62         new Ajax.Request(this.getAjaxScript(), {
  63                 parameters: $(editableForm).serialize(true) ,
  64                     onSuccess: function(response) {
  65                     var json = response.responseText;
  66                     var x = eval ("("+json+")");
  67                     if (x.error) {
  68                         alert(x.error);
  69                     } else if (x.refering_page) { window.location = x.refering_page ; }
  70                     else if (x.html) { $(form.getFormId() ).innerHTML = x.html + form.getFormButtons(); }
  71                     else { form.printForm("view"); }
  72                 },
  73                     onFailure: function(response) {
  74                     alert("Script " + form.getAjaxScript() + " failed!!!" ) ;
  75                 },
  76                     });
  77     },
  78
  79     printForm: function( action) {
  80         var form = this; //'this' cannot be used inside the inner onSuccess function
  81         if (!action) action = 'view';
  82         MochiKit.Logging.log("printForm: action = " , action);
  83         if (!action || !this.getObjectName() || !this.getAjaxScript() )  {
  84             alert("Cannot print from without a objectName, action, and ajaxScript name ! ");
  85         } else if  (action == 'delete') {
  86             this.printDeleteDialog();
  87         }else {
  88
  89             new Ajax.Request(this.getAjaxScript(), {
  90
  91                     parameters: {  object_id: this.getObjectId() , action: action },
  92                     onSuccess: function(response) {
  93                         var json = response.responseText;
  94                         var x = eval ("("+json+")");
  95                         if (x.login) {
  96                             window.location =  '/solpeople/login.pl' ;
  97                             x.error = undef;
  98                         }
  99                         if (x.error) { alert("error: " +x.error); }
 100                         else if (x.reload) { MochiKit.Logging.log("deleted locus...", x.reload); window.location.reload(); }
 101                         else {
 102                             form.setUserType(x.user_type);
 103                             form.setIsOwner(x.is_owner);
 104                             form.setEditableFormId(x.editable_form_id);
 105                             //alert('Editable form: '+x.editable_form_id);
 106                             form.printEditLinks(action);
 107                             form.printFormButtons();
 108                             MochiKit.Logging.log("this editable_form_id is ... " , form.getEditableFormId() );
 109
 110                             $(form.getFormId() ).innerHTML = x.html + form.getFormButtons();
 111                         }
 112                     },
 113                         onFailure: function(response) {
 114                         alert("Script " + form.getAjaxScript() + " failed!!!" ) ;
 115                     },
 116                         });
 117         }
 118     },
 119
 120     printDeleteDialog: function() {
 121         var deleteDialog =
 122         '<b>Delete this ' + this.getObjectName()  + '?</b> ';
 123         deleteDialog += '<input type =\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.printForm(\'confirm_delete\')\" value=\"Confirm delete\"/><br><br>';
 124         this.printEditLinks('delete');
 125         $(this.getFormId() ).innerHTML = deleteDialog;
 126
 127     },
 128
 129     defineButtons: function() {
 130         this.setNewButton('<a href= \"javascript:onClick=' +  this.getJsObjectName() + '.reloadNewPage()  \">[New]</a> ');
 131
 132         this.setGhostedNewButton(' <span class="ghosted">[New]</span> ');
 133
 134         this.setEditButton(' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'edit\')\">[Edit]</a> ');
 135
 136         this.setGhostedEditButton(' <span class=\"ghosted\">[Edit]</span> ');
 137
 138         this.setCancelEditButton(' <a href= \"javascript:onClick='+this.getJsObjectName()+'.render() \">[Cancel]</a> ');
 139
 140         this.setDeleteButton(' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'delete\')\">[Delete]</a> ');
 141
 142         this.setCancelDeleteButton(' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.render()\">[Cancel Delete]</a> ');
 143
 144         this.setGhostedDeleteButton(' <span class=\"ghosted\">[Delete]</span> ');
 145     },
 146
 147     printFormButtons: function() {
 148         var action = this.getAction();
 149         var buttons='';
 150         //if ((this.getUserType() == "curator") || this.getIsOwner() == 1 ) {
 151         if (action == 'edit' ||  action == 'new' ) {
 152             buttons = '<input type=\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.store()\" value=\"Store\"/>';
 153             buttons +='<input type=\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.render( \'edit\' )\" value=\"Reset form\"/>';
 154
 155             //}
 156         }
 157         this.setFormButtons(buttons);
 158     },
 159
 160
 161     printEditLinks: function(action, newButton, editButton, deleteButton) {
 162         this.setAction(action);
 163         MochiKit.Logging.log("printEditLinks action = " , action );
 164
 165         buttonHTML = '';
 166
 167         if (action == 'edit') {
 168             buttonHTML = this.getGhostedNewButton() + this.getCancelEditButton() + this.getGhostedDeleteButton();
 169         }
 170
 171         if (action == 'new' || action == 'view') {
 172             buttonHTML = this.getGhostedNewButton() + this.getGhostedEditButton() + this.getGhostedDeleteButton();
 173         }
 174
 175
 176         if (action == 'view' &&  ((this.getUserType() == 'curator') || (this.getIsOwner == 1))) {
 177             buttonHTML = this.getNewButton() + this.getEditButton() + this.getDeleteButton();
 178         }
 179
 180         if (action == 'delete') {
 181             buttonHTML = this.getGhostedNewButton() + this.getGhostedEditButton() + this.getCancelDeleteButton();
 182
 183         }
 184
 185         //if (!newButton)   this.printNewButton();
 186         //else this.setNewButton(newButton);
 187
 188         //if (!editButton)    this.printEditButton();
 189         //else this.setEditButton(editButton);
 190
 191         //if (!deleteButton)   this.printDeleteButton();
 192         //else this.setDeleteButton(deleteButton);
 193
 194
 195         $(this.formId+ "_buttons").innerHTML = buttonHTML;
 196
 197         this.setEditLinks(buttonHTML);
 198
 199     },
 200
 201
 202     printNewButton: function() {
 203         //new link
 204         var action = this.getAction();
 205
 206
 207         //var newLink =  ' <span class="ghosted">[New]</span> ' ;
 208         var newLink = '<a href= \"javascript:onClick=' +  this.getJsObjectName() + '.reloadNewPage()  \">[New]</a>';
 209
 210         if (action == "edit" || action == "delete") {
 211             newLink = ' <span class="ghosted">[New]</span> ';
 212         }
 213         if (action == "new"   && (( this.getUserType() == "curator") || this.getIsOwner() ==1 )) {
 214             newLink = '<a href= \"javascript:history.back(1) \">[Cancel]</a> ';
 215         }
 216         this.setNewButton(newLink);
 217
 218     },
 219
 220     printEditButton: function() {
 221         //edit link
 222         var action = this.getAction();
 223         var editLink;
 224         if ((this.getUserType() == "curator") || this.getIsOwner() ==1 ) {
 225             editLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'edit\')\">[Edit]</a>' ;
 226
 227         }else {
 228             editLink = ' <span class=\"ghosted\">[Edit]</span> ';
 229         }
 230
 231
 232         if (action == "edit") {
 233             editLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm( \'view\')\">[Cancel edit]</a> ';
 234         }
 235
 236         if (action ==  "new" || action == "delete") {
 237             editLink = ' <span class=\"ghosted\">[Edit]</span> ';
 238         }
 239         this.setEditButton(editLink);
 240
 241     },
 242
 243     printDeleteButton: function() {
 244         //delete link
 245         var action = this.getAction();
 246         var deleteLink;
 247         // if ((this.getUserType() ==  "curator") || this.getIsOwner() ) {
 248         if ((this.getUserType() == "curator") || this.getIsOwner() ==1 ) {
 249             deleteLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'delete\')\">[Delete]</a>' ;
 250
 251         }else {
 252             deleteLink = ' <span class=\"ghosted\">[Delete]</span> ';
 253         }
 254
 255         if (action ==  "edit" || action == "new" ) {
 256             deleteLink = ' <span class=\"ghosted\">[Delete]</span> ';
 257         }
 258         if (action == "delete" )
 259             deleteLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.render()\">[Cancel Delete]</a>';
 260         //      ////////////////////
 261         this.setDeleteButton(deleteLink);
 262
 263     },
 264
 265
 266     reloadNewPage: function() {
 267         MochiKit.Logging.log("reloadNewPage found page: " , this.getPageName());
 268         window.location =  this.getPageName() + '?action=new' ;
 269
 270     },
 271
 272     //////////////////////////////////////////////////////
 273     //accessors for object_id and object_name
 274     //every form object should first set the object_name and object_id.
 275     //These 2 vars will be used in every server side script called
 276     setObjectId: function(objectId) {
 277         this.objectId = objectId;
 278     },
 279
 280     getObjectId: function() {
 281         return this.objectId;
 282     },
 283
 284     setObjectName: function(objectName) {
 285         this.objectName = objectName;
 286     },
 287
 288     getObjectName: function() {
 289         return this.objectName;
 290     },
 291     //
 292     ////////////////////////////////////////////////
 293     //accessors for the server side script with will handle the form components
 294     //and return these as a JSON object
 295     getAjaxScript: function() {
 296         return this.ajaxScript;
 297     },
 298
 299     setAjaxScript: function(ajaxScript) {
 300         this.ajaxScript = ajaxScript;
 301     },
 302     //////////////////////////
 303
 304     getPageName: function() {
 305         return this.pageName;
 306     },
 307
 308     setPageName: function(pageName) {
 309         this.page_name = pageName;
 310     },
 311
 312     ///
 313     getFormName: function() {
 314         return this.formName;
 315     },
 316
 317     setFormName: function(formName) {
 318         this.form_name = formName;
 319     },
 320
 321     ///
 322
 323     getFormId: function() {
 324         return this.formId;
 325     },
 326
 327     setFormId: function(formId) {
 328         this.formId = formId;
 329     },
 330     ////
 331     getJsObjectName: function() {
 332         return this.jsObjectName;
 333     },
 334
 335     setJsObjectName: function(jsObjectName) {
 336         this.jsObjectName = jsObjectName;
 337     },
 338
 339     ///
 340     getAction: function() {
 341         return this.action;
 342     },
 343
 344     setAction: function(action) {
 345         this.action = action;
 346     },
 347     ///
 348      getIsOwner: function() {
 349         return this.isOwner;
 350     },
 351
 352     setIsOwner: function(isOwner) {
 353         this.isOwner = isOwner;
 354     },
 355     ///
 356     getUserType: function() {
 357         return this.userType;
 358     },
 359
 360     setUserType: function(userType) {
 361         this.userType = userType;
 362     },
 363     ///
 364
 365     getPrimaryKey: function() {
 366         return this.primaryKey;
 367     },
 368
 369     setPrimaryKey: function(primaryKey) {
 370         this.primaryKey = primaryKey;
 371     },
 372     ///
 373
 374     getEditLinks: function() {
 375         return this.editLinks;
 376     },
 377
 378     setEditLinks: function(editLinks) {
 379         this.editLinks = editLinks;
 380     },
 381     ////
 382     getNewButton: function() {
 383         return this.newButton;
 384     },
 385
 386     setNewButton: function(newButton) {
 387         this.newButton = newButton;
 388     },
 389
 390     setGhostedNewButton: function(ghostedNewButton) {
 391         this.ghostedNewButton = ghostedNewButton;
 392     },
 393
 394     getGhostedNewButton: function() {
 395         return this.ghostedNewButton;
 396     },
 397
 398     ////
 399     setCancelEditButton: function(cancelEditButton) {
 400         this.cancelEditButton = cancelEditButton;
 401     },
 402
 403     getCancelEditButton: function() {
 404         return this.cancelEditButton;
 405     },
 406
 407     setGhostedEditButton: function(ghostedEditButton) {
 408         this.ghostedEditButton = ghostedEditButton;
 409     },
 410
 411     getGhostedEditButton: function() {
 412         return this.ghostedEditButton;
 413     },
 414
 415     getEditButton: function() {
 416         return this.editButton;
 417     },
 418
 419     setEditButton: function(editButton) {
 420         this.editButton = editButton;
 421     },
 422     ////
 423
 424     getDeleteButton: function() {
 425         return this.deleteButton;
 426     },
 427
 428     setDeleteButton: function(deleteButton) {
 429         this.deleteButton = deleteButton;
 430     },
 431
 432     setGhostedDeleteButton: function(ghostedDeleteButton) {
 433         this.ghostedDeleteButton = ghostedDeleteButton;
 434     },
 435
 436     getGhostedDeleteButton: function() {
 437         return this.ghostedDeleteButton;
 438     },
 439
 440
 441     setCancelDeleteButton: function(cancelDeleteButton) {
 442         this.cancelDeleteButton = cancelDeleteButton;
 443     },
 444
 445     getCancelDeleteButton: function() {
 446         return this.cancelDeleteButton;
 447     },
 448
 449
 450     ////
 451     getPageName: function() {
 452         return this.pageName;
 453     },
 454
 455     setPageName: function(pageName) {
 456         this.pageName = pageName;
 457     },
 458     ////
 459
 460     getFormButtons: function() {
 461         return this.formButtons;
 462     },
 463
 464     setFormButtons: function(formButtons) {
 465         this.formButtons = formButtons;
 466     },
 467     ////
 468      getEditableFormId: function() {
 469         return this.editableFormId;
 470     },
 471
 472     setEditableFormId: function(editableFormId) {
 473         this.editableFormId = editableFormId;
 474     }
 475     ////
 476 }