format html templates: it looks I found how to do that in idea :-)

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1421475 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Olivier Lamy 2012-12-13 20:05:14 +00:00
parent 76a7f60653
commit 9eaa2cc553
9 changed files with 2276 additions and 2029 deletions

View File

@ -18,20 +18,20 @@
-->
<script id="rest_docs" type="text/html">
<div id="rest-doc-header">
<div class="page-header">
<h3><b>${$.i18n.prop('docs.rest.header')}</b></h3>
</div>
<div id="docs_rest_choice">
<ul>
<li><a class="cursor-hand" onclick="displayArchivaRestDocs();">Archiva Rest Api Docs</a></li>
<li><a class="cursor-hand" onclick="displayArchivaRestUIDocs();">Archiva Rest Api UI Docs</a></li>
<li><a class="cursor-hand" onclick="displayRedbackRestDocs();">Redback Rest Api UI Docs</a></li>
</ul>
</div>
<div id="rest-doc-header">
<div class="page-header">
<h3><b>${$.i18n.prop('docs.rest.header')}</b></h3>
</div>
<div id="rest_docs_content">
<div id="docs_rest_choice">
<ul>
<li><a class="cursor-hand" onclick="displayArchivaRestDocs();">Archiva Rest Api Docs</a></li>
<li><a class="cursor-hand" onclick="displayArchivaRestUIDocs();">Archiva Rest Api UI Docs</a></li>
<li><a class="cursor-hand" onclick="displayRedbackRestDocs();">Redback Rest Api UI Docs</a></li>
</ul>
</div>
</div>
<div id="rest_docs_content">
</div>
</script>
<script id="users_docs" type="text/html">

View File

@ -925,7 +925,7 @@
<div class="tab-pane" id="redback-runtime-ldap-content">
<div class="well">
<form class="form-horizontal" id="redback-runtime-ldap-form-id">
<fieldset id="redback-runtime-ldap-form">
<div class="control-group">
<label for="ldap-host" class="control-label">
${$.i18n.prop('redback.runtime.ldap.host.label')}
@ -990,7 +990,7 @@
</div>
</div>
<!-- TODO extraPropertiesEntries -->
</fieldset>
</form>
<button data-bind="click: checkChangedLdapConfiguration,css:{ 'btn-warning': archivaRuntimeConfiguration().ldapConfiguration().modified() },

View File

@ -46,21 +46,22 @@
<a target="_blank" href="http://archiva.apache.org/">Apache Archiva&nbsp;-&nbsp;${version}</a>
</div>
<div class="pull-right">
Copyright &#169; ${copyrightRange} <a target="_blank" href="http://www.apache.org/">The Apache Software Foundation</a>
Copyright &#169; ${copyrightRange} <a target="_blank" href="http://www.apache.org/">The Apache Software
Foundation</a>
</div>
</script>
<script id="ko_simpleGrid_pageLinks" type="text/html">
<div class="pagination">
<ul>
<ul>
{{each(i) ko.utils.range(1, maxPageIndex)}}
<li data-bind="css: { active: i == currentPageIndex() }">
<a href="#" data-bind="click: function() { currentPageIndex(i) }">
${ i + 1 }
</a>
</li>
<li data-bind="css: { active: i == currentPageIndex() }">
<a href="#" data-bind="click: function() { currentPageIndex(i) }">
${ i + 1 }
</a>
</li>
{{/each}}
</ul>
</ul>
</div>
</script>

View File

@ -20,17 +20,6 @@
<div id="main-menu">
<ul class="nav nav-list" data-bind="foreach: artifactMenuItems">
<!-- ko ifnot: id -->
<li class="nav-header archiva-nav-header" data-bind="text: text"></li>
<!-- /ko -->
<!-- ko if: id -->
<li data-bind='redbackP: $data.redback, css: { active: $data.href == "#"+$root.activeMenuId() }'>
<a data-bind="text: text, attr: { id: id, href: href}"></a>
</li>
<!-- /ko -->
</ul>
<ul class="nav nav-list" redback-permissions="{permissions: ['archiva-manage-configuration']}" data-bind="foreach: administrationMenuItems">
<!-- ko ifnot: id -->
<li class="nav-header archiva-nav-header" data-bind="text: text"></li>
<!-- /ko -->
@ -41,7 +30,20 @@
<!-- /ko -->
</ul>
<ul class="nav nav-list" redback-permissions="{permissions: ['archiva-manage-users']}" data-bind="foreach: usersMenuItems">
<ul class="nav nav-list" redback-permissions="{permissions: ['archiva-manage-configuration']}"
data-bind="foreach: administrationMenuItems">
<!-- ko ifnot: id -->
<li class="nav-header archiva-nav-header" data-bind="text: text"></li>
<!-- /ko -->
<!-- ko if: id -->
<li data-bind='redbackP: $data.redback, css: { active: $data.href == "#"+$root.activeMenuId() }'>
<a data-bind="text: text, attr: { id: id, href: href}"></a>
</li>
<!-- /ko -->
</ul>
<ul class="nav nav-list" redback-permissions="{permissions: ['archiva-manage-users']}"
data-bind="foreach: usersMenuItems">
<!-- ko ifnot: id -->
<li class="nav-header archiva-nav-header" data-bind="text: text"></li>
<!-- /ko -->
@ -67,7 +69,7 @@
</script>
<script id="topbar_menu_tmpl" type="text/html">
<div id="topbar-menu">
<div id="topbar-menu">
<div class="navbar navbar-fixed-top"><!-- navbar-inverse for black topbar olamy: prefer non black :-) -->
<div style="max-height: 40px" class="navbar-inner">
@ -102,7 +104,7 @@
<li>
<div class="ui-widget navbar-search">
<input type="text" class="ui-autocomplete-input search-query" id="quick-search-autocomplete"
placeholder="${$.i18n.prop('menu.topbar.quicksearch')}" />
placeholder="${$.i18n.prop('menu.topbar.quicksearch')}"/>
</div>
</li>
</ul>
@ -110,5 +112,5 @@
</div>
</div>
</div>
</div>
</script>

View File

@ -19,10 +19,11 @@
<div id="dialog-confirm-modal" class="modal hide fade" style="display: block;">
<div class="modal-header">
<a class="close" href="#" data-dismiss="modal">&#215;</a>
<h3 id="dialog-confirm-modal-header-title"></h3>
</div>
<div class="modal-body">
<p id="dialog-confirm-modal-body-text"></p>
<p id="dialog-confirm-modal-body-text"></p>
</div>
<div class="modal-footer">
<a class="btn btn-secondary" id="dialog-confirm-modal-cancel" data-loading-text="${$.i18n.prop('common.loading')}">${$.i18n.prop('cancel')}</a>
@ -31,10 +32,11 @@
</div>
<div id="dialog-modal-merge-repo" class="modal hide fade" style="display: block;">
<div class="modal-header">
<a class="close" href="#" data-dismiss="modal">&#215;</a>
<h3 id="dialog-modal-merge-repo-header-title">${$.i18n.prop('managedrepository.repomerge.dialog.header')}</h3>
</div>
<div class="modal-body" id="dialog-modal-merge-repo-body-text">>
</div>
<div class="modal-header">
<a class="close" href="#" data-dismiss="modal">&#215;</a>
<h3 id="dialog-modal-merge-repo-header-title">${$.i18n.prop('managedrepository.repomerge.dialog.header')}</h3>
</div>
<div class="modal-body" id="dialog-modal-merge-repo-body-text">>
</div>
</div>

View File

@ -19,26 +19,31 @@
<div id="modal-login" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h3>${$.i18n.prop('login.section.title')}</h3>
</div>
<div class="modal-body" id="modal-login-content">
<form id="user-login-form" class="form-horizontal">
<div id="modal-login-err-message" class="alert alert-error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="user-login-form-username">${$.i18n.prop('username')}</label>
<div class="controls">
<input type="text" id="user-login-form-username" name="user-login-form-username" class="required" placeholder="${$.i18n.prop('login.username.placehoder')}"/>
</div>
<form id="user-login-form" class="form-horizontal">
<div id="modal-login-err-message" class="alert alert-error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="user-login-form-username">${$.i18n.prop('username')}</label>
<div class="controls">
<input type="text" id="user-login-form-username" name="user-login-form-username" class="required"
placeholder="${$.i18n.prop('login.username.placehoder')}"/>
</div>
<div class="control-group">
<label class="control-label" for="user-login-form-password">${$.i18n.prop('password')}</label>
<div class="controls">
<input type="password" id="user-login-form-password" name="user-login-form-password" class="required" placeholder="${$.i18n.prop('login.password.placehoder')}"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user-login-form-password">${$.i18n.prop('password')}</label>
<div class="controls">
<input type="password" id="user-login-form-password" name="user-login-form-password" class="required"
placeholder="${$.i18n.prop('login.password.placehoder')}"/>
</div>
</fieldset>
</form>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer" id="modal-login-footer">
<div class="pull-left">
@ -46,7 +51,9 @@
<input type="checkbox" id="user-login-form-rememberme">${$.i18n.prop('rememberme')}
</label>
</div>
<button class="btn btn-primary" id="modal-login-ok" data-loading-text="${$.i18n.prop('common.loading')}">${$.i18n.prop('login')}</button>
<button class="btn btn-primary" id="modal-login-ok" data-loading-text="${$.i18n.prop('common.loading')}">
${$.i18n.prop('login')}
</button>
<button class="btn btn-info" id="modal-login-password-reset">${$.i18n.prop('password.reset')}</button>
</div>
</div>
@ -54,71 +61,84 @@
<div id="modal-register" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h3>${$.i18n.prop('register.section.title')}</h3>
</div>
<div class="modal-body" id="modal-register-content">
<form id="user-register-form" class="form-horizontal">
<div id="modal-register-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="user-register-form-username">${$.i18n.prop('username')}</label>
<div class="controls">
<input type="text" id="user-register-form-username" name="user-register-form-username" class="required" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user-register-form-fullname">${$.i18n.prop('full.name')}</label>
<div class="controls">
<input type="text" id="user-register-form-fullname" name="user-register-form-fullname" class="required" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user-register-form-email">${$.i18n.prop('email')}</label>
<div class="controls">
<input type="text" id="user-register-form-email" name="user-register-form-email" class="required email" />
</div>
</div>
<form id="user-register-form" class="form-horizontal">
<div id="modal-register-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="user-register-form-username">${$.i18n.prop('username')}</label>
</fieldset>
</form>
<div class="controls">
<input type="text" id="user-register-form-username" name="user-register-form-username" class="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user-register-form-fullname">${$.i18n.prop('full.name')}</label>
<div class="controls">
<input type="text" id="user-register-form-fullname" name="user-register-form-fullname" class="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user-register-form-email">${$.i18n.prop('email')}</label>
<div class="controls">
<input type="text" id="user-register-form-email" name="user-register-form-email" class="required email"/>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer" id="modal-register-footer">
<button class="btn btn-primary" id="modal-register-ok">${$.i18n.prop('register')}</button>
<button class="btn btn-primary" id="modal-register-ok">${$.i18n.prop('register')}</button>
</div>
</div>
<div id="modal-password-change" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h3>${$.i18n.prop('password.section.title')}</h3>
</div>
<div class="modal-body" id="modal-password-change-content">
<form id="password-change-form" class="form-horizontal">
<div id="modal-password-change-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<!-- part displayed only when a logged user want to change password will be hide when validate user registration -->
<div class="control-group" id="password-change-form-current-password-div">
<label class="control-label" for="password-change-form-current-password">${$.i18n.prop('password.existing')}</label>
<div class="controls">
<input type="password" id="password-change-form-current-password" name="password-change-form-current-password" class="required" value=""/>
</div>
</div>
<form id="password-change-form" class="form-horizontal">
<div id="modal-password-change-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<!-- part displayed only when a logged user want to change password will be hide when validate user registration -->
<div class="control-group" id="password-change-form-current-password-div">
<label class="control-label"
for="password-change-form-current-password">${$.i18n.prop('password.existing')}</label>
<div class="control-group">
<label class="control-label" for="passwordChangeFormNewPassword">${$.i18n.prop('password.new')}</label>
<div class="controls">
<input type="password" id="passwordChangeFormNewPassword" name="passwordChangeFormNewPassword" class="required" value=""/>
</div>
<div class="controls">
<input type="password" id="password-change-form-current-password"
name="password-change-form-current-password" class="required" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordChangeFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
<div class="controls">
<input type="password" id="passwordChangeFormNewPasswordConfirm" name="passwordChangeFormNewPasswordConfirm" class="required" value=""/>
</div>
<div class="control-group">
<label class="control-label" for="passwordChangeFormNewPassword">${$.i18n.prop('password.new')}</label>
<div class="controls">
<input type="password" id="passwordChangeFormNewPassword" name="passwordChangeFormNewPassword"
class="required" value=""/>
</div>
</fieldset>
</form>
</div>
<div class="control-group">
<label class="control-label"
for="passwordChangeFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
<div class="controls">
<input type="password" id="passwordChangeFormNewPasswordConfirm" name="passwordChangeFormNewPasswordConfirm"
class="required" value=""/>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer" id="modal-password-change-footer">
<button class="btn btn-primary" onclick="return" id="modal-change-password-ok">${$.i18n.prop('ok')}</button>
@ -128,6 +148,7 @@
<div id="modal-user-edit" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h3>${$.i18n.prop('password.section.title')}</h3>
</div>
<div class="modal-body" id="modal-user-edit-content">

View File

@ -17,89 +17,103 @@
~ under the License.
-->
<script id='redback/user-edit-tmpl' type='text/html'>
<div id="edit-user-details-pills">
<ul id="edit_user_details_pills_headers" class="nav nav-pills" data-target="#edit-user-details-pills-content">
<li class="active" id="user-view-detail-li">
<a data-toggle="tab" href="#user-create-div">${$.i18n.prop('edit')}</a>
</li>
<li id="user-edit-roles-edit-li">
<a data-toggle="tab" href="#user-edit-roles-edit">${$.i18n.prop('effective.roles.edit')}</a>
</li>
</ul>
<div class="pill-content" id="edit-user-details-pills-content">
<div id="user-create-div" class="active pill-pane">
<div class="row-fluid">
<div class="span8 columns">
<form id="user-create" class="well form-horizontal" data-bind="submit: save">
<fieldset id="user-create-fieldset">
<div class="control-group">
<label class="control-label" for="username">${$.i18n.prop('username')}</label>
<div class="controls" id="username-div">
{{if $data.username.length>0}}
<div id="edit-user-details-pills">
<ul id="edit_user_details_pills_headers" class="nav nav-pills" data-target="#edit-user-details-pills-content">
<li class="active" id="user-view-detail-li">
<a data-toggle="tab" href="#user-create-div">${$.i18n.prop('edit')}</a>
</li>
<li id="user-edit-roles-edit-li">
<a data-toggle="tab" href="#user-edit-roles-edit">${$.i18n.prop('effective.roles.edit')}</a>
</li>
</ul>
<div class="pill-content" id="edit-user-details-pills-content">
<div id="user-create-div" class="active pill-pane">
<div class="row-fluid">
<div class="span8 columns">
<form id="user-create" class="well form-horizontal" data-bind="submit: save">
<fieldset id="user-create-fieldset">
<div class="control-group">
<label class="control-label" for="username">${$.i18n.prop('username')}</label>
<div class="controls" id="username-div">
{{if $data.username.length>0}}
<span class="uneditable-input">${$data.username}</span>
{{else}}
<input type="text" id="username" name="username" size="30" class="required" data-bind="value: username"/>
{{/if}}
{{else}}
<input type="text" id="username" name="username" size="30" class="required"
data-bind="value: username"/>
{{/if}}
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
<div class="controls">
<input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: fullName"/>
<div class="control-group">
<label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
<div class="controls">
<input type="text" id="fullname" name="fullname" size="30" class="required"
data-bind="value: fullName"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">${$.i18n.prop('password')}</label>
<div class="controls">
<input type="password" id="password" name="password" class="required" data-bind="value: password"/>
<div class="control-group">
<label class="control-label" for="password">${$.i18n.prop('password')}</label>
<div class="controls">
<input type="password" id="password" name="password" class="required" data-bind="value: password"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="confirmPassword">${$.i18n.prop('confirm.password')}</label>
<div class="controls">
<input type="password" id="confirmPassword" name="confirmPassword" data-bind="value: confirmPassword"/>
<div class="control-group">
<label class="control-label" for="confirmPassword">${$.i18n.prop('confirm.password')}</label>
<div class="controls">
<input type="password" id="confirmPassword" name="confirmPassword"
data-bind="value: confirmPassword"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
<div class="controls">
<input type="text" id="email" name="email" class="required email" data-bind="value: email"/>
<div class="control-group">
<label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
<div class="controls">
<input type="text" id="email" name="email" class="required email" data-bind="value: email"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="validated">${$.i18n.prop('validated')}</label>
<div class="controls">
<input type="checkbox" id="validated" name="validated" data-bind="checked: validated"/>
<div class="control-group">
<label class="control-label" for="validated">${$.i18n.prop('validated')}</label>
<div class="controls">
<input type="checkbox" id="validated" name="validated" data-bind="checked: validated"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="locked">${$.i18n.prop('locked')}</label>
<div class="controls">
<input type="checkbox" id="locked" name="locked" data-bind="checked: locked"/>
<div class="control-group">
<label class="control-label" for="locked">${$.i18n.prop('locked')}</label>
<div class="controls">
<input type="checkbox" id="locked" name="locked" data-bind="checked: locked"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordChangeRequired">${$.i18n.prop('user.change.password.required')}</label>
<div class="controls">
<input type="checkbox" id="passwordChangeRequired" name="passwordChangeRequired" data-bind="checked: passwordChangeRequired"/>
<div class="control-group">
<label class="control-label" for="passwordChangeRequired">${$.i18n.prop('user.change.password.required')}</label>
<div class="controls">
<input type="checkbox" id="passwordChangeRequired" name="passwordChangeRequired"
data-bind="checked: passwordChangeRequired"/>
</div>
</div>
</div>
</fieldset>
<button data-bind="click: saveUser" class="btn" id="user-create-form-register-button">${$.i18n.prop('save')}</button>
<button class="btn" id="user-create-form-cancel-button">${$.i18n.prop('cancel')}</button>
</form>
</div>
<div class="span4 columns" id="user-edit-roles">
<div id="user-edit-roles-view"></div>
</fieldset>
<button data-bind="click: saveUser" class="btn" id="user-create-form-register-button">
${$.i18n.prop('save')}
</button>
<button class="btn" id="user-create-form-cancel-button">${$.i18n.prop('cancel')}</button>
</form>
</div>
<div class="span4 columns" id="user-edit-roles">
<div id="user-edit-roles-view"></div>
</div>
</div>
</div>
</div>
<div id="user-edit-roles-edit" class="pill-pane">
roles edit
<div id="user-edit-roles-edit" class="pill-pane">
roles edit
</div>
</div>
</div>
</div>
</script>
<script id="user_view_roles_list_tmpl" type="text/html">
@ -109,7 +123,7 @@
<div>
<ul>
{{each $data.user.assignedRoles}}
<li>${$value}</li>
<li>${$value}</li>
{{/each}}
</ul>
</div>
@ -119,41 +133,42 @@
<div>
{{each $data.applicationRoles}}
<div class="page-header">
<h3>${$value.name}</h3>
</div>
<blockquote>
<p>${$value.description}</p>
</blockquote>
<ul>
<div class="page-header">
<h3>${$value.name}</h3>
</div>
<blockquote>
<p>${$value.description}</p>
</blockquote>
<ul>
{{each $value.globalRoles}}
<li><input type="checkbox" value="${$value}" data-bind="checked: user.assignedRoles">&nbsp;${$value}</input></li>
<li><input type="checkbox" value="${$value}" data-bind="checked: user.assignedRoles">&nbsp;${$value}</input></li>
{{/each}}
</ul>
</ul>
{{if roleTemplates}}
<table class="bordered-table">
<thead>
<tr>
<th>&nbsp;</th>
{{each roleTemplates}}
<th>${$value.namePrefix}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{each resources}}
{{var curResource = $value}}
<tr>
<td>${curResource}</td>
{{each roleTemplates}}
<td><input type="checkbox" value="${$value.namePrefix}${$value.delimiter}${curResource}" data-bind="checked: user.assignedRoles"/></td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
{{if roleTemplates}}
<table class="bordered-table">
<thead>
<tr>
<th>&nbsp;</th>
{{each roleTemplates}}
<th>${$value.namePrefix}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{each resources}}
{{var curResource = $value}}
<tr>
<td>${curResource}</td>
{{each roleTemplates}}
<td><input type="checkbox" value="${$value.namePrefix}${$value.delimiter}${curResource}"
data-bind="checked: user.assignedRoles"/></td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
{{/each}}
@ -164,104 +179,106 @@
<script id='ko_usersGrid_grid' type='text/html'>
<thead>
<tr>
{{each(i, columnDefinition) columns}}
<th>${ columnDefinition.headerText }</th>
{{/each}}
<th>${$.i18n.prop('edit')}</th>
<th>${$.i18n.prop('delete')}</th>
<th>${$.i18n.prop('user.list.locked')}</th>
<th>${$.i18n.prop('user.change.password.required')}</th>
</tr>
<tr>
{{each(i, columnDefinition) columns}}
<th>${ columnDefinition.headerText }</th>
{{/each}}
<th>${$.i18n.prop('edit')}</th>
<th>${$.i18n.prop('delete')}</th>
<th>${$.i18n.prop('user.list.locked')}</th>
<th>${$.i18n.prop('user.change.password.required')}</th>
</tr>
</thead>
<tbody>
{{each(i, row) itemsOnCurrentPage()}}
<tr data-bind="css:{ 'modified': row.modified()}">
{{each(j, columnDefinition) columns}}
<td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
{{/each}}
<td id="users-grid-user-id-${row.username()}">
<a href="#" data-bind="click: function(){ editUserBox(row) }">
{{each(i, row) itemsOnCurrentPage()}}
<tr data-bind="css:{ 'modified': row.modified()}">
{{each(j, columnDefinition) columns}}
<td>
${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }
</td>
{{/each}}
<td id="users-grid-user-id-${row.username()}">
<a href="#" data-bind="click: function(){ editUserBox(row) }">
<span class="btn btn-primary">
<i class="icon-pencil icon-white"/>
</span>
</a>
</td>
{{if row.username()=="admin" || row.username()=="guest"}}
<td></td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ deleteUser(row) }" id="users-grid-delete-${row.username()}">
</a>
</td>
{{if row.username()=="admin" || row.username()=="guest"}}
<td></td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ deleteUser(row) }" id="users-grid-delete-${row.username()}">
<span class="btn btn-danger">
<i class="icon-trash icon-white"/>
</span>
</a>
</td>
{{/if}}
</a>
</td>
{{/if}}
{{if row.locked()==true}}
<td>
<a href="#" data-bind="click: function(){ unlock(row) }"><img src="images/system-lock-screen-22-22.png"/></a>
</td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ lock(row) }"><img src="images/weather-clear-22-22.png"/></a>
</td>
{{/if}}
{{if row.locked()==true}}
<td>
<a href="#" data-bind="click: function(){ unlock(row) }"><img src="images/system-lock-screen-22-22.png"/></a>
</td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ lock(row) }"><img src="images/weather-clear-22-22.png"/></a>
</td>
{{/if}}
{{if row.username()=="admin"}}
<td></td>
{{else}}
{{if row.passwordChangeRequired()==true}}
<td>
<a href="#" data-bind="click: function(){ passwordChangeRequire(row,false) }">
<img src="images/dialog-error-22-22.png"/>
</a>
</td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ passwordChangeRequire(row,true) }">
<img src="images/weather-clear-22-22.png"/>
</a>
</td>
{{/if}}
{{/if}}
</tr>
{{/each}}
{{if row.username()=="admin"}}
<td></td>
{{else}}
{{if row.passwordChangeRequired()==true}}
<td>
<a href="#" data-bind="click: function(){ passwordChangeRequire(row,false) }">
<img src="images/dialog-error-22-22.png"/>
</a>
</td>
{{else}}
<td>
<a href="#" data-bind="click: function(){ passwordChangeRequire(row,true) }">
<img src="images/weather-clear-22-22.png"/>
</a>
</td>
{{/if}}
{{/if}}
</tr>
{{/each}}
</tbody>
</script>
<script id="usersGrid" type="text/html">
<div class="page-header">
<h3><img src="images/system-users-32-32.png"/>${$.i18n.prop('users.list')}</h3>
</div>
<ul id="users-view-tabs" class="nav nav-tabs" data-target="#users-view-tabs-content">
<li class="active" id="users-view-tabs-li-users-grid">
<a data-toggle="tab" href="#users-view">${$.i18n.prop('users.grid.tab.title')}</a>
</li>
<li id="users-view-tabs-li-user-edit">
<a data-toggle="tab" href="#createUserForm" id="users-view-tabs-li-user-edit-a">${$.i18n.prop('add')}</a>
</li>
</ul>
<div id="users-view-tabs-content" class="tab-content">
<div id="users-view" class="tab-pane">
<button data-bind='click: sortByName' class="btn">
${$.i18n.prop('users.sort.byname')}
</button>
<table class="table table-striped table-bordered" id="usersTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',pageLinksId:'usersPagination'">
</table>
<div id="usersPagination"></div>
</div>
<div id="createUserForm" class="tab-pane"></div>
<script id="usersGrid" type="text/html">
<div class="page-header">
<h3><img src="images/system-users-32-32.png"/>${$.i18n.prop('users.list')}</h3>
</div>
<ul id="users-view-tabs" class="nav nav-tabs" data-target="#users-view-tabs-content">
<li class="active" id="users-view-tabs-li-users-grid">
<a data-toggle="tab" href="#users-view">${$.i18n.prop('users.grid.tab.title')}</a>
</li>
<li id="users-view-tabs-li-user-edit">
<a data-toggle="tab" href="#createUserForm" id="users-view-tabs-li-user-edit-a">${$.i18n.prop('add')}</a>
</li>
</ul>
<div id="users-view-tabs-content" class="tab-content">
<div id="users-view" class="tab-pane">
<button data-bind='click: sortByName' class="btn">
${$.i18n.prop('users.sort.byname')}
</button>
<table class="table table-striped table-bordered" id="usersTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',pageLinksId:'usersPagination'">
</table>
<div id="usersPagination"></div>
</div>
<div id="createUserForm" class="tab-pane"></div>
</div>
</script>
<script id="user-delete-warning-tmpl" type='text/html'>
<div>
<span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
</div>
<div>
<span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
</div>
</script>
<script id="rolesTabs" type="text/html">
@ -271,7 +288,8 @@
<ul id="roles-view-tabs" class="nav nav-tabs" data-target="roles-view-tabs-content">
<li class="active" id="roles-view-tabs-li-roles-grid">
<a data-toggle="tab" href="#roles-view" id="roles-view-tabs-a-roles-grid">${$.i18n.prop('roles.grid.tab.title')}</a>
<a data-toggle="tab" href="#roles-view"
id="roles-view-tabs-a-roles-grid">${$.i18n.prop('roles.grid.tab.title')}</a>
</li>
<li id="roles-view-tabs-li-roles-edit">
<a data-toggle="tab" href="#role-edit">${$.i18n.prop('edit')}</a>
@ -279,14 +297,14 @@
</ul>
<div id="roles-view-tabs-content" class="tab-content">
<div id="roles-view" class="tab-pane">
<div data-bind="style: { display: bulkSave() ? '' : 'none' }">
<a data-bind="click: updateModifiedRoles" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
<br/>
</div>
<table class="table table-striped table-bordered" id="rolesTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
</table>
<div id="rolesPagination"></div>
<div data-bind="style: { display: bulkSave() ? '' : 'none' }">
<a data-bind="click: updateModifiedRoles" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
<br/>
</div>
<table class="table table-striped table-bordered" id="rolesTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
</table>
<div id="rolesPagination"></div>
</div>
<div id="role-edit" class="tab-pane" data-bind="template: {name:'editRoleTab',data: currentRole}"></div>
</div>
@ -304,21 +322,23 @@
<div id="role-collapse" class="accordion-body collapse in">
<table class="table table-bordered" id="editRoleTable">
<tbody>
<tr>
<td>${$.i18n.prop('name')}:</td>
<td id="role-edit-name">${$data.name}</td>
</tr>
<tr>
<td>${$.i18n.prop('description')}:</td>
<td><input type="text" id="role-edit-description" data-bind="value: description"></td>
</tr>
<tr>
<td colspan="2">
<div class="pull-left">
<button class="btn" id="role-edit-description-save" data-bind="click: saveRoleDescription">${$.i18n.prop('save')}</button>
</div>
</td>
</tr>
<tr>
<td>${$.i18n.prop('name')}:</td>
<td id="role-edit-name">${$data.name}</td>
</tr>
<tr>
<td>${$.i18n.prop('description')}:</td>
<td><input type="text" id="role-edit-description" data-bind="value: description"></td>
</tr>
<tr>
<td colspan="2">
<div class="pull-left">
<button class="btn" id="role-edit-description-save" data-bind="click: saveRoleDescription">
${$.i18n.prop('save')}
</button>
</div>
</td>
</tr>
</tbody>
</table>
@ -328,7 +348,7 @@
{{if $data.parentRoleNames}}
<ul>
{{each $data.parentRoleNames}}
<li>${$value}</li>
<li>${$value}</li>
{{/each}}
</ul>
{{/if}}
@ -339,7 +359,7 @@
{{if $data.childRoleNames}}
<ul>
{{each $data.childRoleNames}}
<li>${$value}</li>
<li>${$value}</li>
{{/each}}
</ul>
{{/if}}
@ -348,39 +368,40 @@
<h3>${$.i18n.prop('permissions')}</h3>
</div>
{{if $data.permissions}}
<table class="table table-striped table-bordered" id="rolePermissionsTable">
<thead>
<tr>
<th>${$.i18n.prop('name')}</th>
<th>${$.i18n.prop('role.operation')}</th>
<th>${$.i18n.prop('role.resource')}</th>
</tr>
</thead>
<tbody>
{{each permissions}}
<tr>
<td>${$value.name}</td>
{{if $value.operation }}
<td>${$value.operation().name}</td>
{{else}}
<td></td>
{{/if}}
{{if $value.resource }}
<td>${$value.resource().identifier}</td>
{{else}}
<td></td>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
<table class="table table-striped table-bordered" id="rolePermissionsTable">
<thead>
<tr>
<th>${$.i18n.prop('name')}</th>
<th>${$.i18n.prop('role.operation')}</th>
<th>${$.i18n.prop('role.resource')}</th>
</tr>
</thead>
<tbody>
{{each permissions}}
<tr>
<td>${$value.name}</td>
{{if $value.operation }}
<td>${$value.operation().name}</td>
{{else}}
<td></td>
{{/if}}
{{if $value.resource }}
<td>${$value.resource().identifier}</td>
{{else}}
<td></td>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</div>
</div>
<div class="accordion-group>">
<div class="accordion-heading">
<h3>
<a class="accordion-toggle" href="#role-users-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role.edit.section.users')}</a>
<a class="accordion-toggle" href="#role-users-collapse" data-parent="#edit-role-accordion"
data-toggle="collapse">${$.i18n.prop('role.edit.section.users')}</a>
</h3>
</div>
<div id="role-users-collapse" class="accordion-body collapse">
@ -389,9 +410,9 @@
<h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
</div>
<ul>
{{each $data.parentsRolesUsers}}
<li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
{{/each}}
{{each $data.parentsRolesUsers}}
<li>${$value.fullName} - ( ${$value.username} - ${$value.email} )</li>
{{/each}}
</ul>
{{/if}}
@ -413,11 +434,11 @@
{{if users().length>0}}
<ul>
{{each(j, user) users()}}
<li>${user.fullName()} - ( ${user.username()} - ${user.email()} ) </li>
<li>${user.fullName()} - ( ${user.username()} - ${user.email()} )</li>
{{/each}}
</ul>
{{else}}
${$.i18n.prop('role.edit.no.user.defined')}
${$.i18n.prop('role.edit.no.user.defined')}
{{/if}}
</div>
</div>
@ -425,16 +446,20 @@
<div id="role-edit-users" class="clearfix ar-multiselect pill-pane">
<div class="ar-multiselect-column ar-multiselect-left">
<select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
<select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers"
multiple="true" id="role-edit-available-users"></select>
</div>
<div class="ar-multiselect-column ar-multiselect-center">
<ul style="list-style: none">
<li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser" value="&gt;"/></li>
<li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser" value="&lt;"/></li>
<li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser"
value="&gt;"/></li>
<li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser"
value="&lt;"/></li>
</ul>
</div>
<div class="ar-multiselect-column ar-multiselect-right">
<select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
<select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true"
id="role-edit-affected-users"></select>
</div>
<button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
</div>
@ -446,93 +471,102 @@
<script id='ko_rolesGrid' type='text/html'>
<thead>
<tr>
{{each(i, columnDefinition) columns}}
<th>${ columnDefinition.headerText }</th>
{{/each}}
<th>${$.i18n.prop('edit')}</th>
<th>${$.i18n.prop('save')}</th>
</tr>
<tr>
{{each(i, columnDefinition) columns}}
<th>${ columnDefinition.headerText }</th>
{{/each}}
<th>${$.i18n.prop('edit')}</th>
<th>${$.i18n.prop('save')}</th>
</tr>
</thead>
<tbody>
{{each(i, row) itemsOnCurrentPage()}}
<tr data-bind="css:{ 'modified': row.modified()||row.usersModified()}">
{{each(j, columnDefinition) columns}}
{{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText])}}
<td id="role-${columnDefinition.rowText}-${row.name()}">
${val}
</td>
{{/each}}
<td>
<a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">
{{each(i, row) itemsOnCurrentPage()}}
<tr data-bind="css:{ 'modified': row.modified()||row.usersModified()}">
{{each(j, columnDefinition) columns}}
{{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) :
row[columnDefinition.rowText])}}
<td id="role-${columnDefinition.rowText}-${row.name()}">
${val}
</td>
{{/each}}
<td>
<a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">
<span class="btn btn-primary">
<i class="icon-pencil icon-white"/>
</span>
</a>
</td>
<td>
{{if row.modified()}}
<a href="#" class="btn btn-warning" data-bind="click: function(){ updateRole(row) }">${$.i18n.prop('save')}</a>
{{/if}}
</td>
</tr>
{{/each}}
</a>
</td>
<td>
{{if row.modified()}}
<a href="#" class="btn btn-warning" data-bind="click: function(){ updateRole(row) }">${$.i18n.prop('save')}</a>
{{/if}}
</td>
</tr>
{{/each}}
</script>
<script type="text/html" id="modal-user-edit-tmpl">
<form id="user-edit-form" class="form-horizontal">
<div id="modal-user-edit-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="username">${$.i18n.prop('username')}</label>
<div class="controls" id="username-div">
<span class="uneditable-input" data-bind="text: user.username"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
<div class="controls">
{{if user.readOnly}}
<span class="uneditable-input" data-bind="text: user.fullName"></span>
{{else}}
<input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: user.fullName"/>
{{/if}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
<div class="controls">
{{if user.readOnly}}
<span class="uneditable-input" data-bind="text: user.email"></span>
{{else}}
<input type="text" id="email" name="email" size="30" class="required email" data-bind="value: user.email"/>
{{/if}}
</div>
</div>
<div class="control-group" id="user-edit-form-current-password-div">
<label class="control-label" for="userEditFormCurrentPassword">${$.i18n.prop('password.existing')}</label>
<div class="controls">
<input type="password" id="userEditFormCurrentPassword" name="userEditFormCurrentPassword" class="required" value=""/>
</div>
</div>
<form id="user-edit-form" class="form-horizontal">
<div id="modal-user-edit-err-message" class="alert-message error" style="display:none"></div>
<fieldset>
<div class="control-group">
<label class="control-label" for="username">${$.i18n.prop('username')}</label>
<div class="control-group">
<label class="control-label" for="userEditFormNewPassword">${$.i18n.prop('password.new')}</label>
<div class="controls">
<input type="password" id="userEditFormNewPassword" name="userEditFormNewPassword" class="" value=""/>
</div>
<div class="controls" id="username-div">
<span class="uneditable-input" data-bind="text: user.username"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
<div class="control-group">
<label class="control-label" for="userEditFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
<div class="controls">
<input type="password" id="userEditFormNewPasswordConfirm" name="userEditFormNewPasswordConfirm" class="" value=""/>
</div>
<div class="controls">
{{if user.readOnly}}
<span class="uneditable-input" data-bind="text: user.fullName"></span>
{{else}}
<input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: user.fullName"/>
{{/if}}
</div>
</fieldset>
</form>
</div>
<div class="control-group">
<label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
<div class="controls">
{{if user.readOnly}}
<span class="uneditable-input" data-bind="text: user.email"></span>
{{else}}
<input type="text" id="email" name="email" size="30" class="required email" data-bind="value: user.email"/>
{{/if}}
</div>
</div>
<div class="control-group" id="user-edit-form-current-password-div">
<label class="control-label" for="userEditFormCurrentPassword">${$.i18n.prop('password.existing')}</label>
<div class="controls">
<input type="password" id="userEditFormCurrentPassword" name="userEditFormCurrentPassword" class="required"
value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="userEditFormNewPassword">${$.i18n.prop('password.new')}</label>
<div class="controls">
<input type="password" id="userEditFormNewPassword" name="userEditFormNewPassword" class="" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="userEditFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
<div class="controls">
<input type="password" id="userEditFormNewPasswordConfirm" name="userEditFormNewPasswordConfirm" class=""
value=""/>
</div>
</div>
</fieldset>
</form>
</script>