Skip to content

Commit ed14fbf

Browse files
tekooltekool
committed
Added support for top right panels indicators.
1 parent 36238ba commit ed14fbf

File tree

6 files changed

+146
-106
lines changed

6 files changed

+146
-106
lines changed

‎bin/puremvc-typescript-employeeadmin-1.0-min.js

Lines changed: 22 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bin/puremvc-typescript-employeeadmin-1.0.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -826,14 +826,15 @@ if( typeof define === "function" )
826826
this.userRoleList = null;
827827
this.addRoleButton = null;
828828
this.removeRoleButton = null;
829+
this.selectedFullname = null;
829830
this.rolePanel = jQuery(selector);
830831
this.initializeChildren();
831832
this.bindListeners();
832833
this.fillRoleList();
833834
this.setEnabled(false);
834835
}
835836
RolePanel.prototype.initializeChildren = function () {
836-
this.userRoleList = this.rolePanel.find("#user-role-list");
837+
this.userRoleList = this.rolePanel.find(".user-role-list");
837838
this.userRoleList.jqGrid({
838839
datatype: "local",
839840
width: 280,
@@ -848,6 +849,7 @@ if( typeof define === "function" )
848849
}
849850
]
850851
});
852+
this.selectedFullname = this.rolePanel.find(".selected-fullname");
851853
this.roleList = this.rolePanel.find(".role-list");
852854
this.addRoleButton = this.rolePanel.find(".add-role-button").button();
853855
this.removeRoleButton = this.rolePanel.find(".remove-role-button").button();
@@ -898,7 +900,7 @@ if( typeof define === "function" )
898900
};
899901
RolePanel.prototype.setUser = function (user) {
900902
this.user = user;
901-
; ;
903+
this.selectedFullname.text(user.lname + ", " + user.fname);
902904
};
903905
RolePanel.prototype.getSelectedRole = function () {
904906
return this.selectedRole;
@@ -912,12 +914,10 @@ if( typeof define === "function" )
912914
} else {
913915
this.userRoleList.attr("disabled", "disabled");
914916
this.roleList.attr("disabled", "disabled");
917+
this.roleList.prop("selectedIndex", 0);
915918
this.addRoleButton.button("disable");
916919
this.removeRoleButton.button("disable");
917920
}
918-
if(!isEnabled) {
919-
this.roleList.prop("selectedIndex", 0);
920-
}
921921
};
922922
RolePanel.prototype.setMode = function (mode) {
923923
switch(mode) {
@@ -944,6 +944,7 @@ if( typeof define === "function" )
944944
RolePanel.prototype.clearForm = function () {
945945
this.user = null;
946946
this.setUserRoles(null);
947+
this.selectedFullname.text("");
947948
this.roleList.prop("selectedIndex", 0);
948949
this.userRoleList.jqGrid('resetSelection');
949950
};
@@ -1006,6 +1007,7 @@ if( typeof define === "function" )
10061007
this.department = null;
10071008
this.cancelButton = null;
10081009
this.submitButton = null;
1010+
this.selectedUname = null;
10091011
this.user = null;
10101012
this.userRoles = null;
10111013
this.mode = null;
@@ -1016,15 +1018,16 @@ if( typeof define === "function" )
10161018
this.setEnabled(false);
10171019
}
10181020
UserForm.prototype.initializeChildren = function () {
1019-
this.uname = this.userFormPanel.find("#uname");
1020-
this.fname = this.userFormPanel.find("#fname");
1021-
this.lname = this.userFormPanel.find("#lname");
1022-
this.email = this.userFormPanel.find("#email");
1023-
this.password = this.userFormPanel.find("#password");
1024-
this.confirm = this.userFormPanel.find("#confirm");
1021+
this.selectedUname = this.userFormPanel.find(".selected-uname");
1022+
this.uname = this.userFormPanel.find(".uname");
1023+
this.fname = this.userFormPanel.find(".fname");
1024+
this.lname = this.userFormPanel.find(".lname");
1025+
this.email = this.userFormPanel.find(".email");
1026+
this.password = this.userFormPanel.find(".password");
1027+
this.confirm = this.userFormPanel.find(".confirm");
10251028
this.department = this.userFormPanel.find(".department");
1026-
this.submitButton = this.userFormPanel.find("#submit-button").button();
1027-
this.cancelButton = this.userFormPanel.find("#cancel-button").button();
1029+
this.submitButton = this.userFormPanel.find(".submit-button").button();
1030+
this.cancelButton = this.userFormPanel.find(".cancel-button").button();
10281031
};
10291032
UserForm.prototype.bindListeners = function () {
10301033
var namespace = ".UserForm";
@@ -1069,6 +1072,7 @@ if( typeof define === "function" )
10691072
if(!user) {
10701073
this.clearForm();
10711074
} else {
1075+
this.selectedUname.text(user.uname);
10721076
this.uname.val(user.uname);
10731077
this.fname.val(user.fname);
10741078
this.lname.val(user.lname);
@@ -1093,6 +1097,7 @@ if( typeof define === "function" )
10931097
this.user.department = deptEnumList[selected];
10941098
};
10951099
UserForm.prototype.clearForm = function () {
1100+
this.selectedUname.text("");
10961101
this.uname.val("");
10971102
this.fname.val("");
10981103
this.lname.val("");
@@ -1236,13 +1241,15 @@ if( typeof define === "function" )
12361241
this.newButton = null;
12371242
this.deleteButton = null;
12381243
this.selectedUser = null;
1244+
this.userTotal = null;
12391245
this.users = null;
12401246
this.userListPanel = jQuery(selector);
12411247
this.initializeChildren();
12421248
this.bindListeners();
12431249
}
12441250
UserList.prototype.initializeChildren = function () {
1245-
this.userList = this.userListPanel.find("#user-list");
1251+
this.userList = this.userListPanel.find(".user-list");
1252+
this.userTotal = this.userListPanel.find(".user-total");
12461253
this.userList.jqGrid({
12471254
datatype: "local",
12481255
width: 630,
@@ -1308,6 +1315,7 @@ if( typeof define === "function" )
13081315
};
13091316
UserList.prototype.setUsers = function (userList) {
13101317
this.users = userList;
1318+
this.userTotal.text(userList.length);
13111319
this.userList.jqGrid("clearGridData");
13121320
for(var i = 0; i < userList.length; i++) {
13131321
var user = userList[i];

‎index.html

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838

3939
<div class="user-list-panel">
4040
<div class="panel-title">Users</div>
41+
<div class="user-total"></div>
42+
4143
<div class="user-list-panel-content">
4244

4345
<!-- User List DataGrid -->
@@ -67,64 +69,69 @@
6769
<div class="user-form-panel">
6870

6971
<div class="panel-title">User Profile</div>
70-
72+
<div class="selected-uname"></div>
73+
7174
<div class="user-form-panel-content">
72-
73-
<!-- First Name-->
74-
<div class="field">
75-
<label for="fname">First Name</label>
76-
<input id="fname" type="text" class="fname ui-corner-all" value="" />
77-
</div>
78-
79-
<!-- Last Name -->
80-
<div class="field">
81-
<label for="lname">Last Name</label>
82-
<input id="lname" type="text" class="lname ui-corner-all" value="" />
83-
</div>
84-
85-
<!-- Email -->
86-
<div class="field">
87-
<label for="email">Email</label>
88-
<input id="email" type="text" class="email ui-corner-all" value="" />
89-
</div>
90-
91-
<!-- Username -->
92-
<div class="field">
93-
<label for="uname" class="required">Username</label>
94-
<input id="uname" type="text" class="uname ui-corner-all" value="" />
95-
</div>
96-
97-
<!-- Password -->
98-
<div class="field">
99-
<label for="password" class="required">Password</label>
100-
<input id="password" type="password" class="password ui-corner-all" value=""/>
101-
</div>
102-
103-
<!-- Confirm Password -->
104-
<div class="field">
105-
<label for="confirm" class="required">Confirm Password</label>
106-
<input id="confirm" type="password" class="confirm ui-corner-all" value="" />
75+
76+
<form action="#">
77+
78+
<!-- First Name-->
79+
<div class="field">
80+
<label for="fname">First Name</label>
81+
<input id="fname" type="text" class="fname ui-corner-all" value="" />
82+
</div>
83+
84+
<!-- Last Name -->
85+
<div class="field">
86+
<label for="lname">Last Name</label>
87+
<input id="lname" type="text" class="lname ui-corner-all" value="" />
88+
</div>
89+
90+
<!-- Email -->
91+
<div class="field">
92+
<label for="email">Email</label>
93+
<input type="email" id="email" class="email ui-corner-all" value="" />
94+
</div>
95+
96+
<!-- Username -->
97+
<div class="field">
98+
<label for="uname" class="required">Username</label>
99+
<input id="uname" type="text" class="uname ui-corner-all" value="" required/>
100+
</div>
101+
102+
<!-- Password -->
103+
<div class="field">
104+
<label for="password" class="required">Password</label>
105+
<input id="password" type="password" class="password ui-corner-all" value="" required />
106+
</div>
107+
108+
<!-- Confirm Password -->
109+
<div class="field">
110+
<label for="confirm" class="required">Confirm Password</label>
111+
<input id="confirm" type="password" class="confirm ui-corner-all" value="" required />
112+
</div>
113+
114+
<!-- Department Combo -->
115+
<div class="field">
116+
<label for="department" class="required">Department</label>
117+
<select id="department" class="department"><option></option></select>
118+
</div>
119+
107120
</div>
108-
109-
<!-- Department Combo -->
110-
<div class="field">
111-
<label for="department" class="required">Department</label>
112-
<select id="department" class="department"><option></option></select>
121+
122+
<!-- User Profile Controls -->
123+
<div class="controlBar">
124+
125+
<!-- Update/Add User Button -->
126+
<button type="submit" class="submit-button">Add User</button>
127+
128+
<!-- Cancel Button -->
129+
<button class="cancel-button">Cancel</button>
130+
113131
</div>
114132

115-
</div>
116-
117-
<!-- User Profile Controls -->
118-
<div class="controlBar">
119-
120-
<!-- Update/Add User Button -->
121-
<button id="submit-button">Add User</button>
122-
123-
<!-- Cancel Button -->
124-
<button id="cancel-button">Cancel</button>
125-
126-
</div>
127-
133+
</form>
134+
128135
</div>
129136

130137

@@ -136,7 +143,8 @@
136143
<div class="role-panel">
137144

138145
<div class="panel-title">User Roles</div>
139-
146+
<div class="selected-fullname"></div>
147+
140148
<!-- User Role List -->
141149
<div class="role-panel-content">
142150

‎src/view/components/RolePanel.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ module EmployeeAdmin
5858
*/
5959
private removeRoleButton:JQuery = null;
6060

61+
/**
62+
* The selected fullname HTML element.
63+
*/
64+
private selectedFullname:JQuery = null;
65+
6166
/**
6267
* Constructs a <code>RolePanel</code> instance.
6368
*
@@ -82,7 +87,7 @@ module EmployeeAdmin
8287
*/
8388
private initializeChildren():void
8489
{
85-
this.userRoleList = this.rolePanel.find("#user-role-list");
90+
this.userRoleList = this.rolePanel.find(".user-role-list");
8691
this.userRoleList.jqGrid
8792
(
8893
{
@@ -97,6 +102,7 @@ module EmployeeAdmin
97102
}
98103
);
99104

105+
this.selectedFullname = this.rolePanel.find(".selected-fullname");
100106
this.roleList = this.rolePanel.find(".role-list");
101107
this.addRoleButton = this.rolePanel.find(".add-role-button").button();
102108
this.removeRoleButton = this.rolePanel.find(".remove-role-button").button();
@@ -172,7 +178,7 @@ module EmployeeAdmin
172178
this.userRoles = userRoles;
173179

174180
// Fill the data-grid
175-
for(var i:number=0; i<userRoles.length; i++)
181+
for( var i:number=0; i<userRoles.length; i++ )
176182
{
177183
var role:RoleEnum = userRoles[i];
178184
this.userRoleList.jqGrid('addRowData', i+1, role );
@@ -198,7 +204,9 @@ module EmployeeAdmin
198204
*/
199205
setUser( user:UserVO ):void
200206
{
201-
this.user = user;;
207+
this.user = user;
208+
209+
this.selectedFullname.text( user.lname + ", " + user.fname );
202210
}
203211

204212
/**
@@ -231,12 +239,10 @@ module EmployeeAdmin
231239
{
232240
this.userRoleList.attr( "disabled", "disabled" );
233241
this.roleList.attr( "disabled", "disabled" );
242+
this.roleList.prop( "selectedIndex", 0 );
234243
this.addRoleButton.button( "disable" );
235244
this.removeRoleButton.button( "disable" );
236245
}
237-
238-
if( !isEnabled )
239-
this.roleList.prop("selectedIndex",0);
240246
}
241247

242248
/**
@@ -273,6 +279,7 @@ module EmployeeAdmin
273279
{
274280
this.user = null;
275281
this.setUserRoles(null);
282+
this.selectedFullname.text("");
276283
this.roleList.prop("selectedIndex",0);
277284
this.userRoleList.jqGrid('resetSelection');
278285
}

‎src/view/components/UserForm.ts

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ module EmployeeAdmin
6666
*/
6767
private submitButton:JQuery = null;
6868

69+
/**
70+
* The selected uname HTML element.
71+
*/
72+
private selectedUname:JQuery = null;
73+
6974
/**
7075
* The selected user.
7176
*/
@@ -106,16 +111,17 @@ module EmployeeAdmin
106111
*/
107112
private initializeChildren():void
108113
{
109-
this.uname = this.userFormPanel.find("#uname");
110-
this.fname = this.userFormPanel.find("#fname");
111-
this.lname = this.userFormPanel.find("#lname");
112-
this.email = this.userFormPanel.find("#email");
113-
this.password = this.userFormPanel.find("#password");
114-
this.confirm = this.userFormPanel.find("#confirm");
114+
this.selectedUname = this.userFormPanel.find(".selected-uname");
115+
this.uname = this.userFormPanel.find(".uname");
116+
this.fname = this.userFormPanel.find(".fname");
117+
this.lname = this.userFormPanel.find(".lname");
118+
this.email = this.userFormPanel.find(".email");
119+
this.password = this.userFormPanel.find(".password");
120+
this.confirm = this.userFormPanel.find(".confirm");
115121
this.department = this.userFormPanel.find(".department");
116122

117-
this.submitButton = this.userFormPanel.find("#submit-button").button();
118-
this.cancelButton = this.userFormPanel.find("#cancel-button").button();
123+
this.submitButton = this.userFormPanel.find(".submit-button").button();
124+
this.cancelButton = this.userFormPanel.find(".cancel-button").button();
119125
}
120126

121127
/**
@@ -204,6 +210,7 @@ module EmployeeAdmin
204210
this.clearForm();
205211
else
206212
{
213+
this.selectedUname.text(user.uname);
207214
this.uname.val(user.uname);
208215
this.fname.val(user.fname);
209216
this.lname.val(user.lname);
@@ -242,6 +249,7 @@ module EmployeeAdmin
242249
*/
243250
clearForm():void
244251
{
252+
this.selectedUname.text("");
245253
this.uname.val("");
246254
this.fname.val("");
247255
this.lname.val("");

0 commit comments

Comments
 (0)