481 lines
17 KiB
JavaScript
481 lines
17 KiB
JavaScript
//navigate the picture
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var profilePictureImage = document.getElementById("profilePictureImage");
|
|
var profilePictureInput = document.getElementById("profilePictureInput");
|
|
|
|
// Set a default image source for the profile picture
|
|
profilePictureImage.src = "/Content/Images/404userImage.jpg";
|
|
|
|
// Add a click event listener to the profile picture to trigger the file input
|
|
profilePictureImage.addEventListener("click", function () {
|
|
profilePictureInput.click();
|
|
});
|
|
|
|
// Add a change event listener to the file input
|
|
profilePictureInput.addEventListener("change", function () {
|
|
var ProfilePicture = profilePictureInput.files[0];
|
|
|
|
if (ProfilePicture) {
|
|
// Display the selected image
|
|
var imageURL = URL.createObjectURL(ProfilePicture);
|
|
profilePictureImage.src = imageURL;
|
|
} else {
|
|
// No file selected, revert to the default image
|
|
console.log("No file selected, using default image");
|
|
profilePictureImage.src = "/Content/Images/404userImage.jpg";
|
|
}
|
|
});
|
|
});
|
|
|
|
let jsonObj = {};
|
|
|
|
function renderAccessDetailbtn(data, row) {
|
|
var jsonData = JSON.stringify(row).replace(/"/g, """);
|
|
var buttonsHtml = '';
|
|
|
|
buttonsHtml += '<button onclick="viewUserAccess(' + jsonData + ')" class="btn btn-default">' +
|
|
'<i class="fa-brands fa-elementor fa-xl" style="color: #008080;" aria-hidden="true"></i>' +
|
|
'</button > ';
|
|
|
|
return buttonsHtml;
|
|
}
|
|
function viewUserAccessNotExist() {
|
|
loader = $('#overlay, #loader');
|
|
$('#viewUserAccessNotExist').modal('show');
|
|
$('#viewUserAccessNotExist').css('z-index', 1060);
|
|
tableElement = $('#NotAccessDataTable');
|
|
tableDestroy(tableElement);
|
|
var submitButton = $('#btnNotAccess');
|
|
var totalSelectedLabel = $('#totalSelNotAccess');
|
|
let IsNotExist = true;
|
|
notAccessDataTable = tableElement.DataTable({
|
|
ajax: $.extend({
|
|
url: '/Account/GetUserRights',
|
|
type: 'POST',
|
|
data: { UserId, IsNotExist },
|
|
}, beforeComplete(loader)),
|
|
language: {
|
|
emptyTable: "No record available"
|
|
},
|
|
initComplete: function () {
|
|
var api = this.api();
|
|
var data = api.ajax.json();
|
|
if (!data || !data.data || data.data === "No Data") {
|
|
$('.dataTables_empty').html("No record available");
|
|
}
|
|
updateSubmitBtnVisib();
|
|
updateSelectedCount();
|
|
},
|
|
columns: colAccountDetailNot,
|
|
responsive: true,
|
|
error: errorHandler
|
|
});
|
|
function updateSubmitBtnVisib() {
|
|
var isEmpty = notAccessDataTable.data().length === 0;
|
|
submitButton.toggle(!isEmpty);
|
|
}
|
|
$('#NotAccessDataTable').on('change', '.select-NotAccess-checkbox', function () {
|
|
var row = $(this).closest('tr');
|
|
if ($(this).prop('checked')) {
|
|
row.addClass('selected-row');
|
|
} else {
|
|
row.removeClass('selected-row');
|
|
}
|
|
updateSelectedCount();
|
|
});
|
|
|
|
$('#selectAllCheckboxNotAccess').on('change', function () {
|
|
var isChecked = $(this).prop('checked');
|
|
$('.select-NotAccess-checkbox').prop('checked', isChecked);
|
|
if (isChecked) {
|
|
$('#NotAccessDataTable tbody tr').addClass('selected-row');
|
|
} else {
|
|
$('#NotAccessDataTable tbody tr').removeClass('selected-row');
|
|
}
|
|
updateSelectedCount();
|
|
});
|
|
function updateSelectedCount() {
|
|
var totalSelected = $('.select-NotAccess-checkbox:checked').length;
|
|
totalSelectedLabel.text(totalSelected);
|
|
}
|
|
}
|
|
function viewUserAccess(data) {
|
|
loader = $('#overlay, #loader');
|
|
$('#viewUserAccess').modal('show');
|
|
$('#viewUserAccess').css('z-index', 1050);
|
|
tableElement = $('#AccessDataTable');
|
|
tableDestroy(tableElement);
|
|
var submitButton = $('#btnAccess');
|
|
var totalSelectedLabel = $('#totalSelAccess');
|
|
UserId = data.id;
|
|
//CanvassId = data.canvassId;
|
|
$('#ua-EmailAddress').val(data.email);
|
|
$('#ua-FullName').val(data.fullName);
|
|
$('#uan-EmailAddress').val(data.email);
|
|
$('#uan-FullName').val(data.fullName);
|
|
accessDataTable = tableElement.DataTable({
|
|
ajax: $.extend({
|
|
url: '/Account/GetUserRights',
|
|
type: 'POST',
|
|
data: { UserId },
|
|
}, beforeComplete(loader)),
|
|
language: {
|
|
emptyTable: "No record available"
|
|
},
|
|
initComplete: function () {
|
|
var api = this.api();
|
|
var data = api.ajax.json();
|
|
if (!data || !data.data || data.data === "No Data") {
|
|
$('.dataTables_empty').html("No record available");
|
|
}
|
|
updateSubmitBtnVisib();
|
|
updateSelectedCount();
|
|
},
|
|
columns: colAccountDetail,
|
|
responsive: true,
|
|
error: errorHandler
|
|
});
|
|
function updateSubmitBtnVisib() {
|
|
var isEmpty = accessDataTable.data().length === 0;
|
|
submitButton.toggle(!isEmpty);
|
|
}
|
|
$('#AccessDataTable').on('change', '.select-Access-checkbox', function () {
|
|
var row = $(this).closest('tr');
|
|
if ($(this).prop('checked')) {
|
|
row.addClass('selected-row');
|
|
} else {
|
|
row.removeClass('selected-row');
|
|
}
|
|
updateSelectedCount();
|
|
});
|
|
|
|
$('#selectAllCheckboxAccess').on('change', function () {
|
|
var isChecked = $(this).prop('checked');
|
|
$('.select-Access-checkbox').prop('checked', isChecked);
|
|
if (isChecked) {
|
|
$('#AccessDataTable tbody tr').addClass('selected-row');
|
|
} else {
|
|
$('#AccessDataTable tbody tr').removeClass('selected-row');
|
|
}
|
|
updateSelectedCount();
|
|
});
|
|
function updateSelectedCount() {
|
|
var totalSelected = $('.select-Access-checkbox:checked').length;
|
|
totalSelectedLabel.text(totalSelected);
|
|
}
|
|
}
|
|
function ShowNewAccess() {
|
|
viewUserAccessNotExist();
|
|
}
|
|
function showUpdateUserProfile(jsonData) {
|
|
jsonObj = jsonData;
|
|
|
|
// jsonData.lockoutEnabled is a boolean value (true or false)
|
|
var lockoutEnabled = jsonData.lockoutEnabled;
|
|
|
|
// Get the checkbox element by its ID
|
|
var lockoutEnabledCheckbox = document.getElementById("LockoutEnabled");
|
|
|
|
// Set the checkbox state based on the boolean value
|
|
lockoutEnabledCheckbox.checked = lockoutEnabled;
|
|
|
|
$("#Id").val(jsonData.Id);
|
|
$("#UserName").val(jsonData.userName);
|
|
$("#Company").val(jsonData.company);
|
|
$("#UserRole").val(jsonData.role);
|
|
$("#PUserRole").val(jsonData.role);
|
|
|
|
$("#FullName").val(jsonData.fullName);
|
|
$("#PFullName").val(jsonData.fullName);
|
|
|
|
$("#Email").val(jsonData.email);
|
|
$("#PhoneNumber").val(jsonData.phoneNumber);
|
|
$("#TwoFactorEnabled").val(jsonData.twoFactorEnabled);
|
|
$("#LockoutEnd").val(jsonData.lockoutEnd);
|
|
$("#Address").val(jsonData.address);
|
|
|
|
$("#CreatedBy").val(jsonData.createdBy);
|
|
$("#UpdatedBy").val(jsonData.updatedBy);
|
|
$("#UpdatedDate").val(jsonData.updatedDate);
|
|
$("#CreatedDate").val(jsonData.createdDate);
|
|
|
|
// Assuming jsonData.profilePicture contains the base64-encoded image
|
|
var urlContent = jsonData.url;
|
|
|
|
// Get the img element by its ID
|
|
var imgElement = document.getElementById("profilePictureImage");
|
|
|
|
// Check if urlContent is not null, undefined, or an empty string
|
|
if (urlContent && urlContent.trim() !== "") {
|
|
// If not null or empty, set the src attribute of the img element to display the image
|
|
imgElement.src = urlContent;
|
|
} else {
|
|
// If null or empty, set the src to the default image
|
|
imgElement.src = "/Content/Images/404userImage.jpg";
|
|
}
|
|
|
|
// Get the input element and label element
|
|
var inputFieldUserRole = document.getElementById("PUserRole");
|
|
var labelUserRole = document.getElementById("PUserRoleLabel");
|
|
|
|
// Initialize the label text with the initial input value
|
|
labelUserRole.textContent = inputFieldUserRole.value;
|
|
|
|
// Listen for changes in the input field
|
|
inputFieldUserRole.addEventListener("input", function () {
|
|
labelUserRole.textContent = inputFieldUserRole.value;
|
|
|
|
});
|
|
|
|
var inputField = document.getElementById("PFullName");
|
|
var label = document.getElementById("PFullNameLabel");
|
|
|
|
// Initialize the label text with the initial input value
|
|
label.textContent = inputField.value;
|
|
|
|
// Listen for changes in the input field
|
|
inputField.addEventListener("input", function () {
|
|
label.textContent = inputField.value;
|
|
|
|
});
|
|
|
|
$('#updateUserProfile').modal('show');
|
|
}
|
|
|
|
//update profile
|
|
function updateUserProfile() {
|
|
var loader = $('#overlay, #loader');
|
|
var userId = jsonObj.id;
|
|
|
|
// Get the file input element for the profile picture
|
|
var profilePictureInput = document.getElementById("profilePictureInput");
|
|
|
|
if (profilePictureInput && profilePictureInput.files.length > 0) {
|
|
var ProfilePicture = profilePictureInput.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
var base64Image = event.target.result;
|
|
|
|
// Include the base64Image in your JSON object
|
|
var data = {
|
|
// Other properties...
|
|
ProfilePictureStr: base64Image
|
|
};
|
|
// Send the AJAX request
|
|
sendUpdateRequest(data, loader, userId);
|
|
};
|
|
// Read the file as data URL
|
|
reader.readAsDataURL(ProfilePicture);
|
|
} else {
|
|
// No file selected, send the request with an empty ProfilePictureStr
|
|
var data = {
|
|
ProfilePictureStr: ''
|
|
// Other properties...
|
|
};
|
|
sendUpdateRequest(data, loader, userId);
|
|
}
|
|
}
|
|
function sendUpdateRequest(data, loader, userId) {
|
|
|
|
var ProfilePictureStr = data.ProfilePictureStr;
|
|
var UserName = document.getElementById("UserName").value;
|
|
var FullName = document.getElementById("FullName").value;
|
|
var Company = document.getElementById("Company").value;
|
|
var Role = document.getElementById("UserRole").value;
|
|
var Email = document.getElementById("Email").value;
|
|
var Address = document.getElementById("Address").value;
|
|
var PhoneNumber = document.getElementById("PhoneNumber").value;
|
|
var NewPassword = document.getElementById("Password").value;
|
|
|
|
// Get the checkbox element by its ID
|
|
var lockoutEnabledCheckbox = document.getElementById("LockoutEnabled");
|
|
|
|
// Get the current value of the checkbox
|
|
var LockoutEnabled = lockoutEnabledCheckbox.checked;
|
|
|
|
const confirmition = confirm('Are you sure you want to proceed?');
|
|
if (confirmition) {
|
|
$.ajax({
|
|
url: '/Account/UpdateUserProfile',
|
|
type: 'POST',
|
|
data: { ProfilePictureStr, userId, UserName, FullName, Company, Role, Email, PhoneNumber, NewPassword, LockoutEnabled, Address }, // Send form data including the profile picture
|
|
success: function (response) {
|
|
if (response.success) {
|
|
$('#updateUserProfile').modal('hide');
|
|
|
|
refreshTable();
|
|
// Close the modal after 5 seconds
|
|
$('#UpdateMessage').modal('show');
|
|
setTimeout(function () {
|
|
$('#UpdateMessage').modal('hide');
|
|
}, 5000); // 5000 milliseconds (5 seconds)
|
|
refreshTable();
|
|
clearTextModal();
|
|
} else {
|
|
// User update was not successful, display the error message
|
|
alert('User update failed: ' + response.response);
|
|
}
|
|
},
|
|
beforeSend: function () {
|
|
// Show the loader before making the AJAX request
|
|
loader.show();
|
|
},
|
|
complete: function () {
|
|
// Hide the loader after the AJAX request is complete (success or error)
|
|
loader.hide();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function populateDepartment() {
|
|
$.ajax({
|
|
url: "/Account/GetDepartment",
|
|
success: function (response) {
|
|
if (response && response.success && Array.isArray(response.data)) {
|
|
var $department = $('#department');
|
|
$department.empty();
|
|
response.data.forEach(function (item) {
|
|
var option = $('<option></option>')
|
|
.attr('value', item.departmentId)
|
|
.text(item.department);
|
|
$department.append(option);
|
|
});
|
|
if (response.data.length > 0) {
|
|
var firstItem = response.data[0];
|
|
$department.val(firstItem.departmentId);
|
|
$('#departmentId').val(firstItem.departmentId);
|
|
}
|
|
$department.on('change', function () {
|
|
var selectedDepartmentId = $(this).val();
|
|
$('#departmentId').val(selectedDepartmentId);
|
|
});
|
|
} else {
|
|
console.error('Invalid data format received:', response);
|
|
}
|
|
},
|
|
error: function (error) {
|
|
console.error('Error fetching payment terms:', error);
|
|
}
|
|
});
|
|
}
|
|
function ShowModal() {
|
|
populateDepartment();
|
|
$('#createNewUser').modal('show');
|
|
clearTextModal();
|
|
}
|
|
// Function to refresh the DataTable
|
|
function refreshTable() {
|
|
userListTable.ajax.reload();
|
|
}
|
|
//clear textModal
|
|
function clearTextModal() {
|
|
document.getElementById("fullName").value = "";
|
|
document.getElementById("userName").value = "";
|
|
document.getElementById("email").value = "";
|
|
document.getElementById("password").value = "";
|
|
// Reset the select fields to their default options
|
|
document.getElementById("company").selectedIndex = 0;
|
|
document.getElementById("role").selectedIndex = 0;
|
|
}
|
|
// Function to create a new user
|
|
function addNewUser() {
|
|
var loader = $('#overlay, #loader');
|
|
var formData = $("#userRegistrationForm").serialize();
|
|
$.ajax({
|
|
url: '/Account/CreateAccount',
|
|
type: 'POST',
|
|
data: formData, // Send the form data
|
|
success: function (response) {
|
|
if (response.success) {
|
|
$('#createNewUser').modal('hide');
|
|
$('#Message').modal('show');
|
|
// Close the modal after 5 seconds
|
|
setTimeout(function () {
|
|
$('#Message').modal('hide');
|
|
}, 2000);
|
|
refreshTable();
|
|
clearTextModal();
|
|
} else {
|
|
// User creation was not successful, display the error message
|
|
console.log('User creation failed:', response.response);
|
|
$('#createNewUser').modal('hide');
|
|
alert('User creation failed: ' + response.response);
|
|
}
|
|
},
|
|
|
|
beforeSend: function () {
|
|
// Show the loader before making the AJAX request
|
|
loader.show();
|
|
},
|
|
complete: function () {
|
|
// Hide the loader after the AJAX request is complete (success or error)
|
|
loader.hide();
|
|
}
|
|
});
|
|
}
|
|
// Use this function to populate roles
|
|
function renderUserBtns(data, row) {
|
|
var jsonData = JSON.stringify(row).replace(/"/g, """);
|
|
var buttonsHtml = '';
|
|
|
|
buttonsHtml += '<button onclick="showUpdateUserProfile(' + jsonData + ')" class="btn btn-default">' +
|
|
'<i class="fa fa-pen-to-square fa-xl" style="color: #FFA500;" aria-hidden="true"></i>' +
|
|
'</button>';
|
|
|
|
buttonsHtml += '<button onclick="viewUserAccess(' + jsonData + ')" class="btn btn-default">' +
|
|
'<i class="fa-brands fa-elementor fa-xl" style="color: #008080;" aria-hidden="true"></i>' +
|
|
'</button > ';
|
|
|
|
return buttonsHtml;
|
|
}
|
|
function populateRoles() {
|
|
$.ajax({
|
|
url: "/Account/GetRoles", // Update this with your actual controller and action
|
|
success: function (data) {
|
|
//console.log('Received data:', data);
|
|
|
|
// Assuming data is an object with a property 'data' that contains the array of roles
|
|
var roles = data.data;
|
|
|
|
// Ensure roles is an array before processing
|
|
if (Array.isArray(roles)) {
|
|
// Clear existing options in the select element
|
|
$('#role').empty();
|
|
|
|
// Populate the select element with options
|
|
roles.forEach(function (role) {
|
|
$('#role').append($('<option>', {
|
|
value: role,
|
|
text: role
|
|
}));
|
|
});
|
|
}
|
|
},
|
|
error: function (error) {
|
|
console.error('Error fetching roles:', error);
|
|
}
|
|
});
|
|
}
|
|
$(document).ready(function () {
|
|
loader = $('#overlay, #loader');
|
|
UserRights = document.getElementById("roleRights").value;
|
|
populateRoles();
|
|
userListTable = $('#UserListTable').DataTable({
|
|
ajax: $.extend({
|
|
url: '/Account/GetAllUsers',
|
|
type: 'GET',
|
|
}, beforeComplete(loader)),
|
|
initComplete: initCompleteCallback,
|
|
columns: colOnUserList,
|
|
columnDefs: colOnColDef,
|
|
language: {
|
|
emptyTable: "No record available"
|
|
},
|
|
rowCallback: rowAccountCallback,
|
|
responsive: true,
|
|
error: errorHandler
|
|
});
|
|
})
|
|
|
|
|