waruni
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sample implimentation using the new cdmf.ui.modal unit

Browse Source
revert-70aa11f8
kamidu 8 years ago
parent 2ea21a6fdc
commit ed70cb02b6
2 changed files with 80 additions and 280 deletions
Show Stats Download Patch File Download Diff File

123
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/js/listing.js
Unescape View File

@ -39,9 +39,6 @@ $(function () {
}); });
var apiBasePath = "/api/device-mgt/v1.0"; var apiBasePath = "/api/device-mgt/v1.0";
var modalPopup = ".modal";
var modalPopupContainer = modalPopup + " .modal-content";
var modalPopupContent = modalPopup + " .modal-content";
var body = "body"; var body = "body";
/** /**
@ -54,31 +51,6 @@ $(document).on('draw.dt', function () {
$(".icon .text").res_text(0.2); $(".icon .text").res_text(0.2);
}); });
/*
* set popup maximum height function.
*/
function setPopupMaxHeight() {
$(modalPopupContent).css('max-height', ($(body).height() - ($(body).height() / 100 * 30)));
$(modalPopupContainer).css('margin-top', (-($(modalPopupContainer).height() / 2)));
}
/*
* show popup function.
*/
function showPopup() {
$(modalPopup).modal('show');
}
/*
* hide popup function.
*/
function hidePopup() {
$(modalPopupContent).html('');
$(modalPopup).modal('hide');
$('body').removeClass('modal-open').css('padding-right', '0px');
$('.modal-backdrop').remove();
}
/** /**
* Following click function would execute * Following click function would execute
* when a user clicks on "Invite" link * when a user clicks on "Invite" link
@ -89,34 +61,48 @@ $("a#invite-user-link").click(function () {
var inviteUserAPI = apiBasePath + "/users/send-invitation"; var inviteUserAPI = apiBasePath + "/users/send-invitation";
if (usernameList.length == 0) { if (usernameList.length == 0) {
$(modalPopupContent).html($("#errorUsers").html()); modalDialog.header("Operation cannot be performed !");
modalDialog.content("Please select a user or a list of users to send invitation emails.");
modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" class="btn-operations">Ok' +
'</a> </div>');
modalDialog.showAsError();
} else { } else {
$(modalPopupContent).html($('#invite-user-modal-content').html()); modalDialog.header("");
} modalDialog.content("An invitation mail will be sent to the selected user(s) to initiate an enrolment process." +
" Do you wish to continue ?");
modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-yes-link" class="btn-operations">yes</a>' +
'<a href="#" id="invite-user-cancel-link" class="btn-operations btn-default">No</a> </div>');
modalDialog.show();
showPopup(); }
$("a#invite-user-yes-link").click(function () { $("a#invite-user-yes-link").click(function () {
invokerUtil.post( invokerUtil.post(
inviteUserAPI, inviteUserAPI,
usernameList, usernameList,
function () { function () {
$(modalPopupContent).html($('#invite-user-success-content').html()); modalDialog.header("User invitation email for enrollment was successfully sent.");
modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-success-link" ' +
'class="btn-operations">Ok </a> </div>');
$("a#invite-user-success-link").click(function () { $("a#invite-user-success-link").click(function () {
hidePopup(); modalPopup.hide();
}); });
}, },
function () { function () {
$(modalPopupContent).html($('#invite-user-error-content').html()); modalDialog.header('<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw ' +
'fw-error fw-stack-1x"></i> </span> Unexpected Error !');
modalDialog.content('An unexpected error occurred. Try again later.');
modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-error-link" ' +
'class="btn-operations">Ok </a> </div>');
$("a#invite-user-error-link").click(function () { $("a#invite-user-error-link").click(function () {
hidePopup(); modalPopup.hide();
}); });
} }
); );
}); });
$("a#invite-user-cancel-link").click(function () { $("a#invite-user-cancel-link").click(function () {
hidePopup(); modalPopup.hide();
}); });
}); });
@ -138,13 +124,16 @@ function getSelectedUsernames() {
* on User Listing page in WSO2 MDM Console. * on User Listing page in WSO2 MDM Console.
*/ */
function resetPassword(username) { function resetPassword(username) {
$(modalPopupContent).html($('#reset-password-window').html()); modalDialog.header('<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-key ' +
showPopup(); 'fw-stack-1x"></i> </span> Reset Password');
modalDialog.content($("#modal-content-reset-password").html());
modalDialog.footer('<div class="buttons"> <a href="#" id="reset-password-yes-link" class="btn-operations"> Save ' +
'</a> <a href="#" id="reset-password-cancel-link" class="btn-operations btn-default"> Cancel </a> </div>');
modalDialog.show();
$("a#reset-password-yes-link").click(function () { $("a#reset-password-yes-link").click(function () {
var newPassword = $("#new-password").val(); var newPassword = $("#basic-modal-view .new-password").val();
var confirmedPassword = $("#confirmed-password").val(); var confirmedPassword = $("#basic-modal-view .confirmed-password").val();
var errorMsgWrapper = "#notification-error-msg"; var errorMsgWrapper = "#notification-error-msg";
var errorMsg = "#notification-error-msg span"; var errorMsg = "#notification-error-msg span";
if (!newPassword) { if (!newPassword) {
@ -177,10 +166,10 @@ function resetPassword(username) {
// The success callback // The success callback
function (data, textStatus, jqXHR) { function (data, textStatus, jqXHR) {
if (jqXHR.status == 200) { if (jqXHR.status == 200) {
$(modalPopupContent).html($('#reset-password-success-content').html()); modalDialog.header("Password reset is successful.");
$("a#reset-password-success-link").click(function () { modalDialog.content("");
hidePopup(); modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
}); 'class="btn-operations">Ok</a> </div>');
} }
}, },
// The error callback // The error callback
@ -194,7 +183,7 @@ function resetPassword(username) {
}); });
$("a#reset-password-cancel-link").click(function () { $("a#reset-password-cancel-link").click(function () {
hidePopup(); modalDialog.hide();
}); });
} }
@ -213,8 +202,16 @@ function removeUser(username) {
if (domain) { if (domain) {
removeUserAPI += '?domain=' + domain; removeUserAPI += '?domain=' + domain;
} }
$(modalPopupContent).html($('#remove-user-modal-content').html());
showPopup(); modalDialog.header("Remove User");
modalDialog.content("Do you really want to remove this user ?");
modalDialog.footer('<div class="buttons"> <a href="#" id="remove-user-yes-link" class="btn-operations">Remove</a> ' +
'<a href="#" id="remove-user-cancel-link" class="btn-operations btn-default">Cancel</a> </div>');
modalDialog.showAsAWarning();
$("a#remove-user-cancel-link").click(function () {
modalDialog.hide();
});
$("a#remove-user-yes-link").click(function () { $("a#remove-user-yes-link").click(function () {
invokerUtil.delete( invokerUtil.delete(
@ -227,24 +224,24 @@ function removeUser(username) {
$("#user-" + username).remove(); $("#user-" + username).remove();
} }
// update modal-content with success message // update modal-content with success message
$(modalPopupContent).html($('#remove-user-success-content').html()); modalDialog.header("User Removed.");
$("a#remove-user-success-link").click(function () { modalDialog.content("Done. User was successfully removed.");
hidePopup(); modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
}); 'class="btn-operations">Ok</a> </div>');
} }
}, },
function () { function () {
$(modalPopupContent).html($('#remove-user-error-content').html()); modalDialog.hide();
$("a#remove-user-error-link").click(function () { modalDialog.header("Operation cannot be performed !");
hidePopup(); modalDialog.content("An unexpected error occurred. Please try again later.");
}); modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
'class="btn-operations">Ok</a> </div>');
modalDialog.showAsError();
} }
); );
}); });
$("a#remove-user-cancel-link").click(function () {
hidePopup();
});
} }
/** /**
@ -256,8 +253,10 @@ function InitiateViewOption() {
if ($("#can-view").val()) { if ($("#can-view").val()) {
$(location).attr('href', $(this).data("url")); $(location).attr('href', $(this).data("url"));
} else { } else {
$(modalPopupContent).html($('#errorUserView').html()); modalDialog.header("Unauthorized action!");
showPopup(); modalDialog.content("You don't have permissions to view users");
modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" class="btn-operations">Ok</a> </div>');
modalDialog.showAsError();
} }
} }

237
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs
Unescape View File

@ -18,6 +18,7 @@
{{unit "cdmf.unit.ui.title" pageTitle="User Management"}} {{unit "cdmf.unit.ui.title" pageTitle="User Management"}}
{{unit "cdmf.unit.data-tables-extended"}} {{unit "cdmf.unit.data-tables-extended"}}
{{unit "cdmf.unit.ui.modal"}}
{{#zone "breadcrumbs"}} {{#zone "breadcrumbs"}}
<li> <li>
@ -47,7 +48,7 @@
{{/zone}} {{/zone}}
{{#zone "content"}} {{#zone "content"}}
<input type="hidden" id="user" value="{{user.username}}">
<!-- content --> <!-- content -->
<div id="loading-content" class="col-centered"> <div id="loading-content" class="col-centered">
{{#if canManage}} {{#if canManage}}
@ -99,226 +100,26 @@
</div> </div>
</div> </div>
<div id="invite-user-modal-content" class="hide"> <div id="modal-content-reset-password" class="hide">
<div class="modal-header"> <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i> <i class="icon fw fw-error"></i><span></span>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
An invitation mail will be sent to the selected user(s) to initiate an enrolment process.
Do you wish to continue ?
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="invite-user-yes-link" class="btn-operations">yes</a>
<a href="#" id="invite-user-cancel-link" class="btn-operations btn-default">No</a>
</div>
</div>
</div>
<div id="invite-user-success-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">User invitation email for enrollment was successfully sent.</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="invite-user-success-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div>
<div id="invite-user-error-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-error fw-stack-1x"></i>
</span>
Unexpected Error
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
An unexpected error occurred. Try again later.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="invite-user-error-link" class="btn-operations">Ok</a>
</div>
</div>
</div>
<div id="remove-user-modal-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
Remove User
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Do you really want to remove this user ?
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="remove-user-yes-link" class="btn-operations">Remove</a>
<a href="#" id="remove-user-cancel-link" class="btn-operations btn-default">Cancel</a>
</div>
</div>
</div>
<div id="remove-user-success-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
User Removed.
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Done. User was successfully removed.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="remove-user-success-link" class="btn-operations">Ok</a>
</div>
</div>
</div>
<div id="remove-user-error-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-error fw-stack-1x"></i>
</span>
Unexpected Error
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div> </div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x"> <h4>
<h4> Enter new password
An unexpected error occurred. Please try again later. <br><br>
</h4> <div>
</div> <input type="password" class="form-control modal-input operationDataKeys new-password"
<div class="modal-footer"> data-key="message"/>
<div class="buttons">
<a href="#" id="remove-user-error-link" class="btn-operations">Ok</a>
</div> </div>
</div> <br>
</div> Retype new password
<br><br>
<div id="errorUsers" class="hide"> <div>
<div class="modal-header"> <input type="password" class="form-control modal-input operationDataKeys confirmed-password"
<h3 class="pull-left modal-title"> data-key="message"/>
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-error fw-stack-1x"></i>
</span>
Operation cannot be performed !
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<h4>
Please select a user or a list of users to send invitation emails.
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="javascript:hidePopup()" class="btn-operations">Ok</a>
</div> </div>
</div> <br>
</div> </h4>
<div id="errorUserView" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
Unauthorized action!
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
</div>
<div id="reset-password-window" class="hide">
<input type="hidden" id="user" value="{{user.username}}">
<div class="modal-header">
<h3 class="pull-left modal-title">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-key fw-stack-1x"></i>
</span>
Reset Password
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<h4>
Enter new password
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="new-password"
data-key="message"/>
</div>
<br>
Retype new password
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password"
data-key="message"/>
</div>
<br>
</h4>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="reset-password-yes-link" class="btn-operations">
Save
</a>
<a href="#" id="reset-password-cancel-link" class="btn-operations btn-default">
Cancel
</a>
</div>
</div>
</div>
<div id="reset-password-success-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
Password reset is successful.
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
</button>
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="reset-password-success-link" class="btn-operations">
Ok
</a>
</div>
</div>
</div> </div>
{{/zone}} {{/zone}}

Write Preview
Loading…
Cancel
Save