Files
Backend-Api/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalEditRole.js
2025-01-04 18:00:04 +03:30

315 lines
13 KiB
JavaScript

$(document).ready(function () {
ajaxPermissionsList();
$('#search-input').on('keyup', function () {
var searchText = $(this).val().toLowerCase();
if (searchText === '') {
$('#tree li').show();
$('#tree li ul').hide();
} else {
$('#tree li').each(function () {
var itemText = $(this).find('.node-label').text().toLowerCase();
if (itemText.includes(searchText)) {
$(this).show();
$(this).parents('ul').show();
} else {
$(this).hide();
}
});
}
});
$(document).on('click', '.togglePermission > span', function () {
$(this).siblings('ul').toggle();
});
});
$('#MainModal').on('show.bs.modal', function () {
$(document).off('click', '#tree .togglePermission').on('click', '#tree .togglePermission', function (e) {
e.stopPropagation();
let parentLi = $(this).closest('li');
parentLi.children('ul').slideToggle();
$(this).toggleClass('open');
});
$(document).off('change', '#tree .node-checkbox').on('change', '#tree .node-checkbox', function () {
let isChecked = $(this).is(':checked');
$(this).closest('li').find('.node-checkbox').prop('checked', isChecked).prop('indeterminate', false);
updateParentCheckbox($(this));
});
$(document).off('input', '#search-input').on('input', '#search-input', function () {
let searchText = $(this).val().toLowerCase();
if (searchText !== "") {
$('#tree .node-label').each(function () {
let label = $(this).text().toLowerCase();
let parentLi = $(this).closest('li');
if (label.includes(searchText)) {
$(this).addClass('highlight');
parentLi.parents('ul').show();
parentLi.parents('li').children('.li-tree').children('.togglePermission').addClass('open');
} else {
$(this).removeClass('highlight');
}
});
}
$('#tree li').each(function () {
if ($(this).find('.highlight').length === 0) {
$(this).children('ul').hide();
$(this).children('.li-tree').children('.togglePermission').removeClass('open');
}
});
});
});
function updateParentCheckbox(childCheckbox) {
let parentLi = childCheckbox.closest('li').parent().closest('li');
while (parentLi.length) {
let parentCheckbox = parentLi.find('> .li-tree > div > .node-checkbox');
let allChildren = parentLi.find('li .node-checkbox');
let checkedChildren = parentLi.find('li .node-checkbox:checked');
let allChecked = allChildren.length === checkedChildren.length;
let anyChecked = checkedChildren.length > 0;
parentCheckbox.prop('checked', allChecked);
parentCheckbox.prop('indeterminate', !allChecked && anyChecked);
parentLi = parentLi.parent().closest('li');
}
}
function ajaxPermissionsList() {
var permissionListHtml = '';
$.ajax({
url: permissionListAjax,
type: 'GET',
success: function (response) {
if (response.success) {
var listPermission = response.data;
if (listPermission.length > 0) {
permissionListHtml += `<ul>`;
listPermission.forEach(function (sub1Item) {
permissionListHtml += `<li>
<div class="li-tree-main li-tree">
<div>
<input value="${sub1Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
<span class="node-label">${sub1Item.title}</span>
</div>`;
if (sub1Item.children.length > 0) {
permissionListHtml += `<span class="togglePermission">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
</svg>
</span>`;
}
permissionListHtml += `</div>`;
if (sub1Item.children.length > 0) {
permissionListHtml += `<ul>`;
sub1Item.children.forEach(function (sub2Item) {
permissionListHtml += `<li>
<div class="li-tree li-tree-main-second">
<div>
<input value="${sub2Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
<span class="node-label">${sub2Item.title}</span>
</div>`;
if (sub2Item.children.length > 0) {
permissionListHtml += `<span class="togglePermission">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
</svg>
</span>`;
}
permissionListHtml += `</div>`;
if (sub2Item.children.length > 0) {
permissionListHtml += `<ul>`;
sub2Item.children.forEach(function (sub3Item) {
permissionListHtml += `<li>
<div class="li-tree">
<div>
<input value="${sub3Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
<span class="node-label">${sub3Item.title}</span>
</div>`;
if (sub3Item.children.length > 0) {
permissionListHtml += `<span class="togglePermission">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
</svg>
</span>`;
}
permissionListHtml += `</div>`;
if (sub3Item.children.length > 0) {
permissionListHtml += `<ul>`;
sub3Item.children.forEach(function (sub4Item) {
permissionListHtml += `<li>
<div class="li-tree">
<div>
<input value="${sub4Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
<span class="node-label">${sub4Item.title}</span>
</div>
</div>
</li>`;
});
permissionListHtml += `</ul>`;
}
permissionListHtml += `</li>`;
});
permissionListHtml += `</ul>`;
}
permissionListHtml += `</li>`;
});
permissionListHtml += `</ul>`;
}
permissionListHtml += `</li>`;
});
permissionListHtml += `</ul>`;
}
$('#tree').html(permissionListHtml);
initializeCheckboxStates();
} else {
$('.alert-msg').show();
$('.alert-msg p').text(response.message);
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 3500);
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
}
});
}
function initializeCheckboxStates() {
$('#tree .node-checkbox').each(function () {
let checkbox = $(this);
let permissionCode = Number(checkbox.val());
checkbox.prop('checked', itemsPermission.includes(permissionCode));
});
$('#tree .node-checkbox').each(function () {
updateParentCheckbox($(this));
});
}
function updateParentCheckbox(childCheckbox) {
let parentLi = childCheckbox.closest('li').parent().closest('li');
while (parentLi.length) {
let parentCheckbox = parentLi.find('> .li-tree > div > .node-checkbox');
let childCheckboxes = parentLi.find('ul .node-checkbox');
let checkedChildren = childCheckboxes.filter(':checked');
let allChecked = childCheckboxes.length === checkedChildren.length;
let anyChecked = checkedChildren.length > 0;
parentCheckbox.prop('checked', allChecked);
parentCheckbox.prop('indeterminate', !allChecked && anyChecked);
parentLi = parentLi.parent().closest('li');
}
}
$('#createData').on('click', SaveDataAjax);
function SaveDataAjax() {
var loading = $('#createData .spinner-loading');
var Id = $('#Id ');
var Title = $('#Title ');
if (!Title.val()) {
Title.addClass('errored');
$('.alert-msg').show();
$('.alert-msg p').text('لطفا عنوان را وارد نمائید');
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
Title.removeClass('errored');
}, 3500);
return;
}
var selectedPermissions = [];
$('input[name="Permissions"]').each(function () {
if (this.checked || this.indeterminate) {
selectedPermissions.push($(this).val());
}
});
if (selectedPermissions.length === 0) {
$('.alert-msg').show();
$('.alert-msg p').text('لطفا دسترسی‌ها را انتخاب نمائید');
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 3500);
return;
}
//var data = $('#create-form-role').serialize();
var data = {
Id: Id.val(),
Title: Title.val(),
Permissions: selectedPermissions
};
$.ajax({
async: false,
dataType: 'json',
type: 'POST',
url: saveEditRoleSubAccountAjax,
headers: { "RequestVerificationToken": antiForgeryToken },
data: data,
success: function (response) {
if (response.success) {
loading.show();
$('.alert-success-msg').show();
$('.alert-success-msg p').text(response.message);
setTimeout(function () {
$('.alert-success-msg').hide();
$('.alert-success-msg p').text('');
loading.hide();
$('#MainModal').modal('hide');
}, 2000);
LoadRolesAndAccountsList();
} else {
$('.alert-msg').show();
$('.alert-msg p').text(response.message);
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
loading.hide();
}, 3500);
}
},
error: function (err) {
loading.hide();
console.log(err);
}
});
}