0
Good afternoon to you all. I have a system in which I am setting the permissions in which the profile can have access on a page via checkbox for each module of the system. I have a page with form in which Seto these permissions and in Submit it takes a variable "Permissions" and assigns the table of that user profile the corresponding permissions. Because each checkbox option has a value that corresponds to an id of the permissions table in the database.
Each module has the following permission options:
- All permissions (check all below)
- "Base" page (mark "base" page and List)
- List (mark only List)
- View information for a single item (mark only View information for a single item)
- Create (Tag Page "base", List, View information of a single item and own)
- Refresh(Tag "base" page, List, View information of a single item and itself)
- Delete (Tag List and itself).
Each module has dependencies in other modules as well.
But the problem is that for example in the module customers. If I mark the options: Page "base" and Create, when I uncheck Create it unchecks the options dependent on Page "base" also and should not. How to solve this?
I use jQuery and Javascript functions to check and uncheck checkbox options.
Follow link to see in practice: https://jsfiddle.net/lfinfor/w4c3jdzk/9/
Follow the code below:
for (var i = 1; i <= 20; i++) {
$("#check_all" + i).click(function() {
// Address
if ($(this).attr("id") == "check_all1") {
if (this.checked) {
changeCheckboxAll("address", "true");
$("#city-all").prop("checked", true);
$("#state-all").prop("checked", true);
$("#country-all").prop("checked", true);
} else {
$("#city-all").prop("checked", false);
$("#state-all").prop("checked", false);
$("#country-all").prop("checked", false);
changeCheckboxAll("address", "false");
}
}
});
$("#check_all" + i).click(function() {
// Client 1, 2, 10, 14
if ($(this).attr("id") == "check_all14") {
if (this.checked) {
changeCheckboxAll("client", "true");
$("#address-all").prop("checked", true);
$("#address-store").prop("checked", true);
$("#address-update").prop("checked", true);
$("#answer-store").prop("checked", true);
$("#answer-update").prop("checked", true);
$("#profile-all").prop("checked", true);
} else {
changeCheckboxAll("client", "false");
$("#address-all").prop("checked", false);
$("#address-store").prop("checked", false);
$("#address-update").prop("checked", false);
$("#answer-store").prop("checked", false);
$("#answer-update").prop("checked", false);
$("#profile-all").prop("checked", false);
}
}
});
}
$("input").on("click", function() {
// Module Address
// All operations dependencies this module
if (this.checked) {
changeCheckboxDependenciesAddress('address', 'true');
} else {
changeCheckboxDependenciesAddress('address', 'false');
}
// Permission homepage of a module
if (this.id == 'address-index') {
if (this.checked) {
changeCheckboxIndex('address', 'true');
changeCheckboxDependenciesClients('address', 'true');
} else {
changeCheckboxIndex('address', 'false');
changeCheckboxDependenciesAddress('address', 'false');
}
}
// Permission List of elements of a module
if (this.id == 'address-all') {
if (this.checked) {
changeCheckboxListAll('address', 'true');
changeCheckboxDependenciesAddress('address', 'true');
} else {
changeCheckboxListAll('address', 'false');
changeCheckboxDependenciesAddress('address', 'false');
}
}
// Permission Store
if (this.id == 'address-store') {
if (this.checked) {
changeCheckboxStore('address', 'true');
changeCheckboxDependenciesAddress('address', 'true');
} else {
changeCheckboxStore('address', 'false');
changeCheckboxDependenciesAddress('address', 'false');
}
}
// Permission Update
if (this.id == 'address-update') {
if (this.checked) {
changeCheckboxUpdate('address', 'true');
changeCheckboxDependenciesAddress('address', 'true');
} else {
changeCheckboxUpdate('address', 'false');
changeCheckboxDependenciesAddress('address', 'false');
}
}
// Permission for excluse
if (this.id == 'address-delete') {
if (this.checked) {
changeCheckboxDelete('address', 'true');
changeCheckboxDependenciesAddress('address', 'true');
} else {
changeCheckboxDelete('address', 'false');
changeCheckboxDependenciesAddress('address', 'false');
}
}
// Module Client
// All operations dependencies this module
if (this.checked) {
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxDependenciesClients('client', 'false');
}
// Permission homepage of a module
if (this.id == 'client-index') {
if (this.checked) {
changeCheckboxIndex('client', 'true');
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxIndex('client', 'false');
changeCheckboxDependenciesClients('client', 'false');
}
}
// Permission List of elements of a module
if (this.id == 'client-all') {
if (this.checked) {
changeCheckboxListAll('client', 'true');
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxListAll('client', 'false');
changeCheckboxDependenciesClients('client', 'false');
}
}
// Permission Store
if (this.id == 'client-store') {
if (this.checked) {
changeCheckboxStore('client', 'true');
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxStore('client', 'false');
changeCheckboxDependenciesClients('client', 'false');
}
}
// Permission Update
if (this.id == 'client-update') {
if (this.checked) {
changeCheckboxUpdate('client', 'true');
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxUpdate('client', 'false');
changeCheckboxDependenciesClients('client', 'false');
}
}
// Permission for excluse
if (this.id == 'client-delete') {
if (this.checked) {
changeCheckboxDelete('client', 'true');
changeCheckboxDependenciesClients('client', 'true');
} else {
changeCheckboxDelete('client', 'false');
changeCheckboxDependenciesClients('client', 'false');
}
}
});
function changeCheckbox(module_slug, bool) {
if (bool == "false") {
$("#" + module_slug + "-index").prop("checked", false);
$("#" + module_slug + "-all").prop("checked", false);
} else {
$("#" + module_slug + "-index").prop("checked", true);
$("#" + module_slug + "-all").prop("checked", true);
}
}
// Permissions to homepage of a module
function changeCheckboxIndex(module_slug, bool) {
if (bool == 'false') {
$('#' + module_slug + '-index').prop('checked', false);
$('#' + module_slug + '-all').prop('checked', false);
} else {
$('#' + module_slug + '-index').prop('checked', true);
$('#' + module_slug + '-all').prop('checked', true);
}
}
// Permissions to list all elements of a module
function changeCheckboxListAll(module_slug, bool) {
if (bool == 'false') {
$('#' + module_slug + '-all').prop('checked', false);
} else {
$('#' + module_slug + '-all').prop('checked', true);
}
}
// Permissions to exclude elements of a module
function changeCheckboxDelete(module_slug, bool) {
if (bool == 'false') {
$('#' + module_slug + '-all').prop('checked', false);
$('#' + module_slug + '-delete').prop('checked', false);
} else {
$('#' + module_slug + '-all').prop('checked', true);
$('#' + module_slug + '-delete').prop('checked', true);
}
}
// Permissions for Update data
function changeCheckboxUpdate(module_slug, bool) {
if (bool == 'false') {
$('#' + module_slug + '-index').prop('checked', false);
$('#' + module_slug + '-view').prop('checked', false);
$('#' + module_slug + '-update').prop('checked', false);
$('#' + module_slug + '-all').prop('checked', false);
} else {
$('#' + module_slug + '-index').prop('checked', true);
$('#' + module_slug + '-view').prop('checked', true);
$('#' + module_slug + '-update').prop('checked', true);
$('#' + module_slug + '-all').prop('checked', true);
}
}
// Permissions for Store data
function changeCheckboxStore(module_slug, bool) {
if (bool == 'false') {
$('#' + module_slug + '-index').prop('checked', false);
$('#' + module_slug + '-view').prop('checked', false);
$('#' + module_slug + '-store').prop('checked', false);
$('#' + module_slug + '-all').prop('checked', false);
} else {
$('#' + module_slug + '-index').prop('checked', true);
$('#' + module_slug + '-view').prop('checked', true);
$('#' + module_slug + '-store').prop('checked', true);
$('#' + module_slug + '-all').prop('checked', true);
}
}
function changeCheckboxAll(module_slug, bool) {
if (bool == "false") {
$("#" + module_slug + "-index").prop("checked", false);
$("#" + module_slug + "-all").prop("checked", false);
$("#" + module_slug + "-view").prop("checked", false);
$("#" + module_slug + "-store").prop("checked", false);
$("#" + module_slug + "-update").prop("checked", false);
$("#" + module_slug + "-delete").prop("checked", false);
} else {
$("#" + module_slug + "-index").prop("checked", true);
$("#" + module_slug + "-all").prop("checked", true);
$("#" + module_slug + "-view").prop("checked", true);
$("#" + module_slug + "-store").prop("checked", true);
$("#" + module_slug + "-update").prop("checked", true);
$("#" + module_slug + "-delete").prop("checked", true);
}
}
// Permissions dependencies of module Clients
function changeCheckboxDependenciesClients(module_slug, bool) {
if (bool == 'false') {
$('#address-all').prop('checked', false);
$('#address-store').prop('checked', false);
$('#address-update').prop('checked', false);
$('#answer-store').prop('checked', false);
$('#answer-update').prop('checked', false);
$('#profile-all').prop('checked', false);
} else {
$('#address-all').prop('checked', true);
$('#address-store').prop('checked', true);
$('#address-update').prop('checked', true);
$('#answer-store').prop('checked', true);
$('#answer-update').prop('checked', true);
$('#profile-all').prop('checked', true);
}
}
// Permissions dependencies of module Clients
function changeCheckboxDependenciesAddress(module_slug, bool) {
if (bool == 'false') {
$("#city-all").prop("checked", false);
$("#state-all").prop("checked", false);
$("#country-all").prop("checked", false);
} else {
$("#city-all").prop("checked", true);
$("#state-all").prop("checked", true);
$("#country-all").prop("checked", true);
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="permission-clients">
<div class="col-md-6 hide-1">
<div class="box-modules">
<div class="title-modules">Permissões em Endereços</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="check_all1" class="filled-in">
<label for="check_all1">Todas as permissões</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-index" name="permissions[]" class="filled-in" onclick="1" value="1">
<label for="address-index">Página "base"</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-all" name="permissions[]" class="filled-in" onclick="1" value="2">
<label for="address-all">Listar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-view" name="permissions[]" class="filled-in" onclick="1" value="3">
<label for="address-view">Ver informações de um único item</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-store" name="permissions[]" class="filled-in" onclick="1" value="4">
<label for="address-store">Criar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-update" name="permissions[]" class="filled-in" onclick="1" value="5">
<label for="address-update">Atualizar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="address-delete" name="permissions[]" class="filled-in" onclick="1" value="6">
<label for="address-delete">Deletar</label>
</div>
</div>
</div>
<div class="col-md-6 hide-14">
<div class="box-modules">
<div class="title-modules" style="margin-bottom: 10px; margin-top:10px;">Permissões em Clientes</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="check_all14" class="filled-in">
<label for="check_all14">Todas as permissões</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-index" name="permissions[]" class="filled-in" onclick="14" value="79">
<label for="client-index">Página "base"</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-all" name="permissions[]" class="filled-in" onclick="14" value="80">
<label for="client-all">Listar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-view" name="permissions[]" class="filled-in" onclick="14" value="81">
<label for="client-view">Ver informações de um único item</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-store" name="permissions[]" class="filled-in" onclick="14" value="82">
<label for="client-store">Criar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-update" name="permissions[]" class="filled-in" onclick="14" value="83">
<label for="client-update">Atualizar</label>
</div>
<div class="col-12 iten-modules">
<input type="checkbox" id="client-delete" name="permissions[]" class="filled-in" onclick="14" value="84">
<label for="client-delete">Deletar</label>
</div>
</div>
</div>
</div>
</body>
</html>(I will later create a single function to independent of the module, do the check/uncheck operations of each one - i.e., merge // Module Client and // Module Address into a single function.)
I can contribute by making a suggestion, which I think makes the code cleaner and better to read: you can use the same code to change multiple elements, instead of doing it separately. For example:
$('#address-all, #address-store').prop('checked', false);... just separate the selectors with a comma.– Sam
Thanks I will implement this to make it more readable tbm.
– Luiz Fernando