Skip to content
Browse files

Better display for errors in the User Form

  • Loading branch information...
1 parent f47a9b8 commit bb132bb84370ccda035cc9351abd117dc03acfd2 @tekool committed Jan 22, 2012
View
26 bin/puremvc_employeeadmin_jquerymobile-min.js
@@ -23,16 +23,16 @@ a.uname=this.uname.val();a.fname=this.fname.val();a.lname=this.lname.val();a.ema
this.setFieldError("uname",false);this.setFieldError("password",false);this.setFieldError("confirm",false);this.setFieldError("department",false);this.department.html("");this.userFormPanel.find("#department").selectmenu("refresh",true);this.roles.html("");this.userFormPanel.find("#roles").selectmenu("refresh",true)},setMode:function(a){this.mode=a;switch(a){case UserForm.MODE_ADD:this.uname.removeAttr("disabled");this.submitButton.parent().find(".ui-btn-text").text("Add");this.deleteButton.parent().hide();
break;case UserForm.MODE_EDIT:this.uname.attr("disabled","disabled");this.submitButton.parent().find(".ui-btn-text").text("Save");this.deleteButton.parent().show();break}},submitButton_clickHandler:function(){if(this.getErrors()){return}var a=this.getUser();if(a.getIsValid()){if(this.mode==UserForm.MODE_ADD){this.dispatchEvent(UserForm.ADD_USER)}else{this.dispatchEvent(UserForm.UPDATE_USER)}$.mobile.changePage("#UserList","pop",false,false)}},deleteButton_clickHandler:function(){this.dispatchEvent(UserForm.DELETE_USER);
$.mobile.changePage("#UserList","pop",false,false)},field_focusHandler:function(a){this.setFieldError(a.target.id,false)},getErrors:function(){var c=false;if(this.uname.val()==""){this.setFieldError("uname",c=true)}else{this.setFieldError("uname",false)}if(this.password.val()==""){this.setFieldError("password",c=true)}else{this.setFieldError("password",false)}if(this.password.val()!=""&&this.confirm.val()!=this.password.val()){this.setFieldError("confirm",c=true)}else{this.setFieldError("confirm",false)
-}var b=this.getSelectedDepartment();if(b.equals(DeptEnum.NONE_SELECTED)){this.setFieldError("department",c=true)}else{this.setFieldError("department",false)}var a=this.getUserRoles();if(a.length==0){this.setFieldError("roles",c=true)}else{this.setFieldError("roles",false)}return c},setFieldError:function(d,b){var a=this.userFormPanel.find('label[for="'+d+'"]');var c=this.userFormPanel.find("#"+d);if(b){c.addClass("fieldError")}else{c.removeClass("fieldError")}},isUserRole:function(b){for(var a=0;
-a<this.userRoles.length;a++){if(b.equals(this.userRoles[a])){return true}}return false},getSelectedDepartment:function(){var c=parseInt(this.department.val())+1;var b=DeptEnum.getComboList();var a=b[c];return a},getSelectedRoles:function(){var d=this.roles.val();var c=RoleEnum.getComboList();var a=[];for(var b=0;b<d.length;b++){a.push(c[parseInt(d[b])])}return a}});UserForm.ADD_USER="addUser";UserForm.UPDATE_USER="updateUser";UserForm.DELETE_USER="deleteUser";UserForm.CANCEL="cancel";UserForm.MODE_ADD="modeAdd";
-UserForm.MODE_EDIT="modeEdit";UserForm.ADD_ROLE="addRole";UserForm.REMOVE_ROLE="removeRole";var UserList=Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.UserList",UiComponent,{userListPanel:null,userList:null,newButton:null,selectedUser:null,users:null,listItemClickProxy:null,initialize:function(){UserList.$super.initialize.call(this);this.listItemClickProxy=jQuery.proxy(this,"userList_clickHandler");this.initializeChildren();this.bindListeners()},initializeChildren:function(){this.userListPanel=jQuery("#user-list-panel");
-this.userList=this.userListPanel.find("#user-list");this.newButton=this.userListPanel.find("#new-button").button()},bindListeners:function(){var a=".UserList";this.newButton.on("click"+a,jQuery.proxy(this,"newButton_clickHandler"))},unbindListeners:function(){var a=".UserList";this.newButton.off("click"+a)},setUsers:function(a){this.users=a;var d="";for(var c=0;c<this.users.length;c++){var b=this.users[c];d+='<li id="'+c+'-user-list-item"><a href="#">'+b.getGivenName()+"</a></li>"}this.userList.html(d).listview("refresh",true);
-this.userList.find("li").on("click",this.listItemClickProxy)},userList_clickHandler:function(c){var a=jQuery(c.currentTarget);var b=parseInt(a.attr("id"));jQuery.mobile.changePage("#UserForm","pop",false,false);this.dispatchEvent(UserList.SELECT,this.users[b])},newButton_clickHandler:function(){this.dispatchEvent(UserList.NEW)},deleteButton_clickHandler:function(){this.dispatchEvent(UserList.DELETE)}});UserList.NEW="new";UserList.DELETE="delete";UserList.SELECT="select";var UserFormMediator=Objs("org.puremvc.js.demos.objs.employeeadmin.view.UserFormMediator",Mediator,{roleProxy:null,userProxy:null,initialize:function(b,a){UserFormMediator.$super.initialize.call(this,b,a);
-this.registerListeners();this.userProxy=this.facade.retrieveProxy(ProxyNames.USER_PROXY);this.roleProxy=this.facade.retrieveProxy(ProxyNames.ROLE_PROXY)},getUserForm:function(){return this.viewComponent},registerListeners:function(){var a=this.getUserForm();a.addEventListener(UserForm.ADD_USER,this.onAdd,this);a.addEventListener(UserForm.UPDATE_USER,this.onUpdate,this);a.addEventListener(UserForm.DELETE_USER,this.onDelete,this)},unregisterListeners:function(){var a=this.getUserForm();a.removeEventListener(UserForm.ADD_USER,this.onAdd,this);
-a.removeEventListener(UserForm.UPDATE_USER,this.onUpdate,this);a.removeEventListener(UserForm.DELETE_USER,this.onDelete,this)},onAdd:function(c){var a=this.getUserForm().getUser();this.userProxy.addItem(a);var d=this.getUserForm().getUserRoles();for(var b=0;b<d.length;b++){var e=d[b];this.roleProxy.addItem(e)}this.sendNotification(NotificationNames.USER_ADDED,a)},onUpdate:function(){var a=this.getUserForm().getUser();this.userProxy.updateItem(a);var c=this.getUserForm().getUserRoles();for(var b=0;
-b<c.length;b++){var d=c[b];this.roleProxy.addItem(d)}this.sendNotification(NotificationNames.USER_UPDATED,a)},onDelete:function(){var a=this.getUserForm().getUser();if(a==null){return}this.sendNotification(NotificationNames.DELETE_USER,a)},listNotificationInterests:function(){return[NotificationNames.NEW_USER,NotificationNames.USER_SELECTED]},handleNotification:function(c){var d=this.getUserForm();var a;switch(c.getName()){case NotificationNames.NEW_USER:d.clearForm();d.setUser(c.getBody());d.setUserRoles([]);
-d.setMode(UserForm.MODE_ADD);break;case NotificationNames.USER_SELECTED:a=c.getBody();d.clearForm();d.setUser(a);var b=this.roleProxy.getUserRoles(a.uname);d.setUserRoles(b);d.setMode(UserForm.MODE_EDIT);break}},onRemove:function(){this.unregisterListeners();this.getUserForm().unbindListeners()}});UserFormMediator.ADD="add";UserFormMediator.UPDATE="update";UserFormMediator.CANCEL="cancel";UserFormMediator.MODE_ADD="modeAdd";UserFormMediator.MODE_EDIT="modeEdit";var UserListMediator=Objs("org.puremvc.js.demos.objs.employeeadmin.view.UserListMediator",Mediator,{userList:null,initialize:function(b,a){UserListMediator.$super.initialize.call(this,b,a);
-this.registerListeners();var c=this.facade.retrieveProxy(ProxyNames.USER_PROXY);a.setUsers(c.getUsers())},registerListeners:function(){var a=this.getUserList();a.addEventListener(UserList.NEW,this.onNew,this);a.addEventListener(UserList.SELECT,this.onSelect,this)},unregisterListeners:function(){var a=this.getUserList();a.removeEventListener(UserList.NEW,this.onNew,this);a.removeEventListener(UserList.SELECT,this.onSelect,this)},getUserList:function(){return this.viewComponent},listNotificationInterests:function(){return[NotificationNames.USER_UPDATED,NotificationNames.USER_ADDED,NotificationNames.USER_DELETED]
-},handleNotification:function(b){var a=this.getUserList();var c=this.facade.retrieveProxy(ProxyNames.USER_PROXY);switch(b.getName()){case NotificationNames.USER_UPDATED:a.setUsers(c.getUsers());break;case NotificationNames.USER_ADDED:a.setUsers(c.getUsers());break;case NotificationNames.USER_DELETED:a.setUsers(c.getUsers());break}},onNew:function(){var a=new UserVO();this.sendNotification(NotificationNames.NEW_USER,a)},onSelect:function(a){this.sendNotification(NotificationNames.USER_SELECTED,a)},onRemove:function(){this.unregisterListeners();
-this.getUserList().unbindListeners()}});var ApplicationFacade=Objs("org.puremvc.js.demos.objs.employeeadmin.ApplicationFacade",Facade,{startup:function(a){this.sendNotification(NotificationNames.STARTUP,a)},initializeController:function(){ApplicationFacade.$super.initializeController.call(this);this.registerCommand(NotificationNames.STARTUP,StartupCommand);this.registerCommand(NotificationNames.DELETE_USER,DeleteUserCommand)}});ApplicationFacade.getInstance=function(){if(!Facade.instance){Facade.instance=new ApplicationFacade()
-}return Facade.instance};
+}var b=this.getSelectedDepartment();if(!b||b.equals(DeptEnum.NONE_SELECTED)){this.setFieldError("department",c=true)}else{this.setFieldError("department",false)}var a=this.getUserRoles();if(!a||a.length==0){this.setFieldError("roles",c=true)}else{this.setFieldError("roles",false)}return c},setFieldError:function(d,b){var a=this.userFormPanel.find('label[for="'+d+'"]');var c=this.userFormPanel.find("#"+d);if(b){c.closest(".ui-field-contain").addClass("fieldError")}else{c.closest(".ui-field-contain").removeClass("fieldError")
+}},isUserRole:function(b){for(var a=0;a<this.userRoles.length;a++){if(b.equals(this.userRoles[a])){return true}}return false},getSelectedDepartment:function(){var c=parseInt(this.department.val())+1;var b=DeptEnum.getComboList();var a=b[c];return a},getSelectedRoles:function(){var a=[];var d=this.roles.val();if(!d){return a}var c=RoleEnum.getComboList();for(var b=0;b<d.length;b++){a.push(c[parseInt(d[b])])}return a}});UserForm.ADD_USER="addUser";UserForm.UPDATE_USER="updateUser";UserForm.DELETE_USER="deleteUser";
+UserForm.CANCEL="cancel";UserForm.MODE_ADD="modeAdd";UserForm.MODE_EDIT="modeEdit";UserForm.ADD_ROLE="addRole";UserForm.REMOVE_ROLE="removeRole";var UserList=Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.UserList",UiComponent,{userListPanel:null,userList:null,newButton:null,selectedUser:null,users:null,listItemClickProxy:null,initialize:function(){UserList.$super.initialize.call(this);this.listItemClickProxy=jQuery.proxy(this,"userList_clickHandler");this.initializeChildren();this.bindListeners()
+},initializeChildren:function(){this.userListPanel=jQuery("#user-list-panel");this.userList=this.userListPanel.find("#user-list");this.newButton=this.userListPanel.find("#new-button").button()},bindListeners:function(){var a=".UserList";this.newButton.on("click"+a,jQuery.proxy(this,"newButton_clickHandler"))},unbindListeners:function(){var a=".UserList";this.newButton.off("click"+a)},setUsers:function(a){this.users=a;var d="";for(var c=0;c<this.users.length;c++){var b=this.users[c];d+='<li id="'+c+'-user-list-item"><a href="#">'+b.getGivenName()+"</a></li>"
+}this.userList.html(d).listview("refresh",true);this.userList.find("li").on("click",this.listItemClickProxy)},userList_clickHandler:function(c){var a=jQuery(c.currentTarget);var b=parseInt(a.attr("id"));jQuery.mobile.changePage("#UserForm","pop",false,false);this.dispatchEvent(UserList.SELECT,this.users[b])},newButton_clickHandler:function(){jQuery.mobile.changePage("#UserForm","pop",false,false);this.dispatchEvent(UserList.NEW)},deleteButton_clickHandler:function(){this.dispatchEvent(UserList.DELETE)
+}});UserList.NEW="new";UserList.DELETE="delete";UserList.SELECT="select";var UserFormMediator=Objs("org.puremvc.js.demos.objs.employeeadmin.view.UserFormMediator",Mediator,{roleProxy:null,userProxy:null,initialize:function(b,a){UserFormMediator.$super.initialize.call(this,b,a);this.registerListeners();this.userProxy=this.facade.retrieveProxy(ProxyNames.USER_PROXY);this.roleProxy=this.facade.retrieveProxy(ProxyNames.ROLE_PROXY)},getUserForm:function(){return this.viewComponent},registerListeners:function(){var a=this.getUserForm();
+a.addEventListener(UserForm.ADD_USER,this.onAdd,this);a.addEventListener(UserForm.UPDATE_USER,this.onUpdate,this);a.addEventListener(UserForm.DELETE_USER,this.onDelete,this)},unregisterListeners:function(){var a=this.getUserForm();a.removeEventListener(UserForm.ADD_USER,this.onAdd,this);a.removeEventListener(UserForm.UPDATE_USER,this.onUpdate,this);a.removeEventListener(UserForm.DELETE_USER,this.onDelete,this)},onAdd:function(c){var a=this.getUserForm().getUser();this.userProxy.addItem(a);var d=this.getUserForm().getUserRoles();
+for(var b=0;b<d.length;b++){var e=d[b];this.roleProxy.addItem(e)}this.sendNotification(NotificationNames.USER_ADDED,a)},onUpdate:function(){var a=this.getUserForm().getUser();this.userProxy.updateItem(a);var c=this.getUserForm().getUserRoles();for(var b=0;b<c.length;b++){var d=c[b];this.roleProxy.addItem(d)}this.sendNotification(NotificationNames.USER_UPDATED,a)},onDelete:function(){var a=this.getUserForm().getUser();if(a==null){return}this.sendNotification(NotificationNames.DELETE_USER,a)},listNotificationInterests:function(){return[NotificationNames.NEW_USER,NotificationNames.USER_SELECTED]
+},handleNotification:function(c){var d=this.getUserForm();var a;switch(c.getName()){case NotificationNames.NEW_USER:d.clearForm();d.setUser(c.getBody());d.setUserRoles([]);d.setMode(UserForm.MODE_ADD);break;case NotificationNames.USER_SELECTED:a=c.getBody();d.clearForm();d.setUser(a);var b=this.roleProxy.getUserRoles(a.uname);d.setUserRoles(b);d.setMode(UserForm.MODE_EDIT);break}},onRemove:function(){this.unregisterListeners();this.getUserForm().unbindListeners()}});UserFormMediator.ADD="add";UserFormMediator.UPDATE="update";
+UserFormMediator.CANCEL="cancel";UserFormMediator.MODE_ADD="modeAdd";UserFormMediator.MODE_EDIT="modeEdit";var UserListMediator=Objs("org.puremvc.js.demos.objs.employeeadmin.view.UserListMediator",Mediator,{userList:null,initialize:function(b,a){UserListMediator.$super.initialize.call(this,b,a);this.registerListeners();var c=this.facade.retrieveProxy(ProxyNames.USER_PROXY);a.setUsers(c.getUsers())},registerListeners:function(){var a=this.getUserList();a.addEventListener(UserList.NEW,this.onNew,this);
+a.addEventListener(UserList.SELECT,this.onSelect,this)},unregisterListeners:function(){var a=this.getUserList();a.removeEventListener(UserList.NEW,this.onNew,this);a.removeEventListener(UserList.SELECT,this.onSelect,this)},getUserList:function(){return this.viewComponent},listNotificationInterests:function(){return[NotificationNames.USER_UPDATED,NotificationNames.USER_ADDED,NotificationNames.USER_DELETED]},handleNotification:function(b){var a=this.getUserList();var c=this.facade.retrieveProxy(ProxyNames.USER_PROXY);
+switch(b.getName()){case NotificationNames.USER_UPDATED:a.setUsers(c.getUsers());break;case NotificationNames.USER_ADDED:a.setUsers(c.getUsers());break;case NotificationNames.USER_DELETED:a.setUsers(c.getUsers());break}},onNew:function(){var a=new UserVO();this.sendNotification(NotificationNames.NEW_USER,a)},onSelect:function(a){this.sendNotification(NotificationNames.USER_SELECTED,a)},onRemove:function(){this.unregisterListeners();this.getUserList().unbindListeners()}});var ApplicationFacade=Objs("org.puremvc.js.demos.objs.employeeadmin.ApplicationFacade",Facade,{startup:function(a){this.sendNotification(NotificationNames.STARTUP,a)
+},initializeController:function(){ApplicationFacade.$super.initializeController.call(this);this.registerCommand(NotificationNames.STARTUP,StartupCommand);this.registerCommand(NotificationNames.DELETE_USER,DeleteUserCommand)}});ApplicationFacade.getInstance=function(){if(!Facade.instance){Facade.instance=new ApplicationFacade()}return Facade.instance};
View
19 bin/puremvc_employeeadmin_jquerymobile.js
@@ -1610,13 +1610,13 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
this.setFieldError( "confirm", false );
var department/*DeptEnum*/ = this.getSelectedDepartment();
- if( department.equals(DeptEnum.NONE_SELECTED) )
+ if( !department || department.equals(DeptEnum.NONE_SELECTED) )
this.setFieldError( "department", error = true );
else
this.setFieldError( "department", false );
var selectedRoles/*Array*/ = this.getUserRoles();
- if( selectedRoles.length == 0 )
+ if( !selectedRoles || selectedRoles.length == 0 )
this.setFieldError( "roles", error = true );
else
this.setFieldError( "roles", false );
@@ -1637,11 +1637,11 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
{
var label/*HTMLElement*/ = this.userFormPanel.find( 'label[for="' + fieldName + '"]' );
var field/*HTMLElement*/ = this.userFormPanel.find( "#" + fieldName );
-
+
if( error )
- field.addClass( "fieldError" );
+ field.closest(".ui-field-contain").addClass( "fieldError" );
else
- field.removeClass( "fieldError" );
+ field.closest(".ui-field-contain").removeClass( "fieldError" );
},
/**
@@ -1694,10 +1694,13 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
*/
getSelectedRoles: function()
{
+ var arr/*Array*/ = [];
+
var selectedIndexes/*Array*/ = this.roles.val();
- var roleEnumList/*Array*/ = RoleEnum.getComboList();
+ if( !selectedIndexes )
+ return arr;
- var arr/*Array*/ = [];
+ var roleEnumList/*Array*/ = RoleEnum.getComboList();
for( var i/*Number*/=0; i<selectedIndexes.length; i++ )
arr.push( roleEnumList[parseInt(selectedIndexes[i])] );
@@ -1877,7 +1880,6 @@ var UserList = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
//Index of the clicked list item
var entry/*Number*/ = parseInt( li.attr("id") );
jQuery.mobile.changePage("#UserForm", "pop", false, false);
-
this.dispatchEvent( UserList.SELECT, this.users[entry] );
},
@@ -1886,6 +1888,7 @@ var UserList = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
*/
newButton_clickHandler: function()
{
+ jQuery.mobile.changePage("#UserForm", "pop", false, false);
this.dispatchEvent( UserList.NEW );
},
View
23 css/application.css
@@ -1,22 +1,21 @@
-#user-form-panel label.required
+#user-form-panel label
{
- background-image:url("../img/required_field.gif");
- background-repeat:no-repeat;
- background-position:center right;
+ padding-right:1em;
}
-#user-form-panel label.fieldError
+#user-form-panel label.required
{
- background-image:url("../img/field_error.gif");
+ background-image:url("../img/required_field.gif");
+ background-repeat:no-repeat;
+ background-position:center right;
}
-
-#user-form-panel .fieldError
+#user-form-panel .fieldError label
{
- background:#FFAAAA;
+ background-image:url("../img/field_error.gif");
}
-input[type=text],
-input[type=password]
+#user-form-panel .fieldError input,
+#user-form-panel .fieldError .ui-btn
{
- border:thin #CCCCCC solid;
+ background:#FFAAAA;
}
View
2 debug.html
@@ -91,7 +91,7 @@
<ul id="user-list" data-role="listview" data-inset="true"></ul>
<!-- Add User Button -->
- <a id="new-button" data-role="button" href="#UserForm" data-icon="plus">Add</a>
+ <button id="new-button" data-role="button" data-icon="plus">Add</button>
</div>
</div>
View
17 src/org/puremvc/js/demos/objs/employeeadmin/view/components/UserForm.js
@@ -410,13 +410,13 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
this.setFieldError( "confirm", false );
var department/*DeptEnum*/ = this.getSelectedDepartment();
- if( department.equals(DeptEnum.NONE_SELECTED) )
+ if( !department || department.equals(DeptEnum.NONE_SELECTED) )
this.setFieldError( "department", error = true );
else
this.setFieldError( "department", false );
var selectedRoles/*Array*/ = this.getUserRoles();
- if( selectedRoles.length == 0 )
+ if( !selectedRoles || selectedRoles.length == 0 )
this.setFieldError( "roles", error = true );
else
this.setFieldError( "roles", false );
@@ -437,11 +437,11 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
{
var label/*HTMLElement*/ = this.userFormPanel.find( 'label[for="' + fieldName + '"]' );
var field/*HTMLElement*/ = this.userFormPanel.find( "#" + fieldName );
-
+
if( error )
- field.addClass( "fieldError" );
+ field.closest(".ui-field-contain").addClass( "fieldError" );
else
- field.removeClass( "fieldError" );
+ field.closest(".ui-field-contain").removeClass( "fieldError" );
},
/**
@@ -494,10 +494,13 @@ var UserForm = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
*/
getSelectedRoles: function()
{
+ var arr/*Array*/ = [];
+
var selectedIndexes/*Array*/ = this.roles.val();
- var roleEnumList/*Array*/ = RoleEnum.getComboList();
+ if( !selectedIndexes )
+ return arr;
- var arr/*Array*/ = [];
+ var roleEnumList/*Array*/ = RoleEnum.getComboList();
for( var i/*Number*/=0; i<selectedIndexes.length; i++ )
arr.push( roleEnumList[parseInt(selectedIndexes[i])] );
View
2 src/org/puremvc/js/demos/objs/employeeadmin/view/components/UserList.js
@@ -157,7 +157,6 @@ var UserList = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
//Index of the clicked list item
var entry/*Number*/ = parseInt( li.attr("id") );
jQuery.mobile.changePage("#UserForm", "pop", false, false);
-
this.dispatchEvent( UserList.SELECT, this.users[entry] );
},
@@ -166,6 +165,7 @@ var UserList = Objs("org.puremvc.js.demos.objs.employeeadmin.view.components.Use
*/
newButton_clickHandler: function()
{
+ jQuery.mobile.changePage("#UserForm", "pop", false, false);
this.dispatchEvent( UserList.NEW );
},

0 comments on commit bb132bb

Please sign in to comment.
Something went wrong with that request. Please try again.