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 };
  30
  31
  32 CXGN.Page.Form.JSFormPage.prototype = {
  33
  34     render: function(action) {
  35        //render the form here
  36         if (!action) action  = "view";
  37         if (!this.getObjectId()) action = "new";
  38         this.printForm( action);
  39     },
  40
  41
  42
  43     /**
  44      * store
  45      * store the information from the form into the database
  46      * -checks privileges
  47      * -form fields are validated
  48      * (if fails- form shows again with an appropriate error message)
  49      * args: server_side_script name, and %args
  50      * -calls the appropriate server side script that calls the store function
  51      * in the relevant perl object.
  52      * onSuccess - the innerHTML div is updated, else, a JSON alert is issued.
  53      */
  54     store: function() {
  55         //var action = 'store';
  56         var form = this;
  57         var editableForm = $(this.getEditableFormId());
  58         MochiKit.Logging.log("Store function found editableFormId", this.getEditableFormId());
  59
  60         new Ajax.Request(this.getAjaxScript(), {
  61                 parameters: $(editableForm).serialize(true) ,
  62                     onSuccess: function(response) {
  63                     var json = response.responseText;
  64                     var x = eval ("("+json+")");
  65                     if (x.error) {
  66                         alert(x.error);
  67                     } else if (x.referring_page) { window.location = x.referring_page ; }
  68                     else if (x.html) { $(form.getFormId() ).innerHTML = x.html + form.getFormButtons(); }
  69                     else { form.printForm("view"); }
  70                 },
  71                     onFailure: function(response) {
  72                     alert("Script " + form.getAjaxScript() + " failed!!!" ) ;
  73                 },
  74                     });
  75     },
  76
  77     printForm: function( action) {
  78         var form = this; //'this' cannot be used inside the inner onSuccess function
  79         if (!action) action = 'view';
  80         MochiKit.Logging.log("printForm: action = " , action);
  81         if (!action || !this.getObjectName() || !this.getAjaxScript() )  {
  82             alert("Cannot print from without a objectName, action, and ajaxScript name ! ");
  83         } else if  (action == 'delete') {
  84             this.printDeleteDialog();
  85         }else {
  86             new Ajax.Request(this.getAjaxScript(), {
  87                     parameters: {  object_id: this.getObjectId() , action: action },
  88                     onSuccess: function(response) {
  89                         var json = response.responseText;
  90                         var x = eval ("("+json+")");
  91                         if (x.login) {
  92                             window.location =  '/solpeople/login.pl' ;
  93                             x.error = undef;
  94                         }
  95                         if (x.error) { alert("error: " +x.error); }
  96                         else if (x.reload) { MochiKit.Logging.log("deleted locus...", x.reload); window.location.reload(); }
  97                         else {
  98                             form.setUserType(x.user_type);
  99                             form.setIsOwner(x.is_owner);
 100                             form.setEditableFormId(x.editable_form_id);
 101                             form.printEditLinks(action);
 102                             form.printFormButtons();
 103                             MochiKit.Logging.log("this editable_form_id is ... " , form.getEditableFormId() );
 104
 105                             $(form.getFormId() ).innerHTML = x.html + form.getFormButtons();
 106                         }
 107                     },
 108                         onFailure: function(response) {
 109                         alert("Script " + form.getAjaxScript() + " failed!!!" ) ;
 110                     },
 111                         });
 112         }
 113     },
 114
 115     printDeleteDialog: function() {
 116         var deleteDialog =
 117         '<b>Delete this ' + this.getObjectName()  + '?</b> ';
 118         deleteDialog += '<input type =\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.printForm(\'confirm_delete\')\" value=\"Confirm delete\"/><br><br>';
 119         this.printEditLinks('delete');
 120         $(this.getFormId() ).innerHTML = deleteDialog;
 121
 122     },
 123
 124     printFormButtons: function() {
 125         var action = this.getAction();
 126         var buttons='';
 127         //if ((this.getUserType() == "curator") || this.getIsOwner() == 1 ) {
 128         if (action == 'edit' ||  action == 'new' ) {
 129             buttons = '<input type=\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.store()\" value=\"Store\"/>';
 130             buttons +='<input type=\"button\" onClick=\"javascript:' + this.getJsObjectName() + '.render( \'edit\' )\" value=\"Reset form\"/>';
 131
 132             //}
 133         }
 134         this.setFormButtons(buttons);
 135     },
 136
 137
 138     printEditLinks: function(action, newButton, editButton, deleteButton) {
 139         this.setAction(action);
 140         MochiKit.Logging.log("printEditLinks action = " , action );
 141
 142         if (!newButton)   this.printNewButton();
 143         else this.setNewButton(newButton);
 144
 145         if (!editButton)    this.printEditButton();
 146         else this.setEditButton(editButton);
 147
 148         if (!deleteButton)   this.printDeleteButton();
 149         else this.setDeleteButton(deleteButton);
 150
 151
 152         $(this.formId+ "_buttons").innerHTML = this.getNewButton() + this.getEditButton() + this.getDeleteButton();
 153
 154         this.setEditLinks(this.getNewButton() + this.getEditButton() + this.getDeleteButton() );
 155
 156     },
 157
 158
 159     printNewButton: function() {
 160         //new link
 161         var action = this.getAction();
 162
 163         //var newLink =  ' <span class="ghosted">[New]</span> ' ;
 164         var newLink = '<a href= \"javascript:onClick=' +  this.getJsObjectName() + '.reloadNewPage()  \">[New]</a>';
 165
 166         if (action == "edit" || action == "delete") {
 167             newLink = ' <span class="ghosted">[New]</span> ';
 168         }
 169         if (action == "new"   && (( this.getUserType() == "curator") || this.getIsOwner() ==1 )) {
 170             newLink = '<a href= \"javascript:history.back(1) \">[Cancel]</a> ';
 171         }
 172         this.setNewButton(newLink);
 173
 174     },
 175
 176     printEditButton: function() {
 177         //edit link
 178         var action = this.getAction();
 179         var editLink;
 180         if ((this.getUserType() == "curator") || this.getIsOwner() ==1 ) {
 181             editLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'edit\')\">[Edit]</a>' ;
 182
 183         }else {
 184             editLink = ' <span class=\"ghosted\">[Edit]</span> ';
 185         }
 186
 187
 188         if (action == "edit") {
 189             editLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm( \'view\')\">[Cancel edit]</a> ';
 190         }
 191
 192         if (action ==  "new" || action == "delete") {
 193             editLink = ' <span class=\"ghosted\">[Edit]</span> ';
 194         }
 195         this.setEditButton(editLink);
 196
 197     },
 198
 199     printDeleteButton: function() {
 200         //delete link
 201         var action = this.getAction();
 202         var deleteLink;
 203         // if ((this.getUserType() ==  "curator") || this.getIsOwner() ) {
 204         if ((this.getUserType() == "curator") || this.getIsOwner() ==1 ) {
 205             deleteLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.printForm(\'delete\')\">[Delete]</a>' ;
 206
 207         }else {
 208             deleteLink = ' <span class=\"ghosted\">[Delete]</span> ';
 209         }
 210
 211         if (action ==  "edit" || action == "new" ) {
 212             deleteLink = ' <span class=\"ghosted\">[Delete]</span> ';
 213         }
 214         if (action == "delete" )
 215             deleteLink = ' <a href=\"javascript:onClick=' + this.getJsObjectName() + '.render()\">[Cancel Delete]</a>';
 216         //      ////////////////////
 217         this.setDeleteButton(deleteLink);
 218
 219     },
 220
 221
 222     reloadNewPage: function() {
 223         MochiKit.Logging.log("reloadNewPage found page: " , this.getPageName());
 224         window.location =  this.getPageName() + '?action=new' ;
 225
 226     },
 227
 228     //////////////////////////////////////////////////////
 229     //accessors for object_id and object_name
 230     //every form object should first set the object_name and object_id.
 231     //These 2 vars will be used in every server side script called
 232     setObjectId: function(objectId) {
 233         this.objectId = objectId;
 234     },
 235
 236     getObjectId: function() {
 237         return this.objectId;
 238     },
 239
 240     setObjectName: function(objectName) {
 241         this.objectName = objectName;
 242     },
 243
 244     getObjectName: function() {
 245         return this.objectName;
 246     },
 247     //
 248     ////////////////////////////////////////////////
 249     //accessors for the server side script with will handle the form components
 250     //and return these as a JSON object
 251     getAjaxScript: function() {
 252         return this.ajaxScript;
 253     },
 254
 255     setAjaxScript: function(ajaxScript) {
 256         this.ajaxScript = ajaxScript;
 257     },
 258     //////////////////////////
 259
 260     getPageName: function() {
 261         return this.pageName;
 262     },
 263
 264     setPageName: function(pageName) {
 265         this.page_name = pageName;
 266     },
 267
 268     ///
 269     getFormName: function() {
 270         return this.formName;
 271     },
 272
 273     setFormName: function(formName) {
 274         this.form_name = formName;
 275     },
 276
 277     ///
 278
 279     getFormId: function() {
 280         return this.formId;
 281     },
 282
 283     setFormId: function(formId) {
 284         this.formId = formId;
 285     },
 286     ////
 287     getJsObjectName: function() {
 288         return this.jsObjectName;
 289     },
 290
 291     setJsObjectName: function(jsObjectName) {
 292         this.jsObjectName = jsObjectName;
 293     },
 294
 295     ///
 296     getAction: function() {
 297         return this.action;
 298     },
 299
 300     setAction: function(action) {
 301         this.action = action;
 302     },
 303     ///
 304      getIsOwner: function() {
 305         return this.isOwner;
 306     },
 307
 308     setIsOwner: function(isOwner) {
 309         this.isOwner = isOwner;
 310     },
 311     ///
 312     getUserType: function() {
 313         return this.userType;
 314     },
 315
 316     setUserType: function(userType) {
 317         this.userType = userType;
 318     },
 319     ///
 320
 321     getPrimaryKey: function() {
 322         return this.primaryKey;
 323     },
 324
 325     setPrimaryKey: function(primaryKey) {
 326         this.primaryKey = primaryKey;
 327     },
 328     ///
 329
 330     getEditLinks: function() {
 331         return this.editLinks;
 332     },
 333
 334     setEditLinks: function(editLinks) {
 335         this.editLinks = editLinks;
 336     },
 337     ////
 338     getNewButton: function() {
 339         return this.newButton;
 340     },
 341
 342     setNewButton: function(newButton) {
 343         this.newButton = newButton;
 344     },
 345     ////
 346
 347     getEditButton: function() {
 348         return this.editButton;
 349     },
 350
 351     setEditButton: function(editButton) {
 352         this.editButton = editButton;
 353     },
 354     ////
 355
 356     getDeleteButton: function() {
 357         return this.deleteButton;
 358     },
 359
 360     setDeleteButton: function(deleteButton) {
 361         this.deleteButton = deleteButton;
 362     },
 363     ////
 364      getPageName: function() {
 365         return this.pageName;
 366     },
 367
 368     setPageName: function(pageName) {
 369         this.pageName = pageName;
 370     },
 371     ////
 372
 373     getFormButtons: function() {
 374         return this.formButtons;
 375     },
 376
 377     setFormButtons: function(formButtons) {
 378         this.formButtons = formButtons;
 379     },
 380     ////
 381      getEditableFormId: function() {
 382         return this.editableFormId;
 383     },
 384
 385     setEditableFormId: function(editableFormId) {
 386         this.editableFormId = editableFormId;
 387     },
 388     ////
 389 }