<table class="table align-middle table-row-dashed fs-6 gy-5">
{GAMgetGroupsRights?.map((gRights) => (
<tbody class="text-gray-600 fw-semibold">
<>
<tr className="row">
<td
class="col-4 text-gray-800 px-4 text-start"
key={gRights?.moduleId}
style=
>
{gRights?.moduleNameEn}
<i
class="fas fa-exclamation-circle ms-1 fs-7"
data-bs-toggle="tooltip"
title="Allows a full access to the system"
></i>
</td>
<td className="col-4">
<label class=" form-check form-check-sm form-check-custom form-check-solid ">
<input
class="form-check-input"
type="checkbox"
value=""
id={`select-all-${gRights.accessGroupId}`}
onChange={() => handleSelectAll(gRights.moduleId, "read")}
// checked={checkedState[gRights.accessGroupId].viewRights}
/>
<span
class="form-check-label"
for="kt_roles_select_all"
>
Select all
</span>
</label>
</td>
</tr>
<tr>
<td>
{gRights?.accessGroupRightsList?.map(
(item) => (
<td className="d-flex justify-content-between ">
<label class="text-gray-800 w-200px">
{item?.features?.featureNameEn}
</label>
<td>
<div class="d-flex mx-12 ">
<label class="form-check form-check-sm form-check-custom form-check-solid me-lg-10 ">
<input
class="form-check-input"
type="checkbox"
value=""
id={`${item.features.featureNameEn}_viewRights`}
disabled={!item?.features?.allowedView}
name={`${gRights.moduleId}_${item.features.featureNameEn}_read`}
onChange={() =>
handleCheckboxChange(
gRights.moduleId,
item.features.featureNameEn,
"read"
)
}
checked={
checkboxState[
`${gRights.moduleId}_${item.features.featureNameEn}_read`
] || false
}
/>
<span class="form-check-label">
Read
</span>
</label>
<label class="form-check form-check-sm form-check-custom form-check-solid me-lg-10 ">
<input
class="form-check-input"
type="checkbox"
value=""
disabled={!item.features.allowedAdd}
name={`${gRights.moduleId}_${item.features.featureNameEn}_create`}
onChange={() =>
handleCheckboxChange(
gRights.moduleId,
item.features.featureNameEn,
"create"
)
}
checked={
checkboxState[
`${gRights.moduleId}_${item.features.featureNameEn}_create`
] || false
}
/>
<span class="form-check-label">
Create
</span>
</label>
<label class="form-check form-check-sm form-check-custom form-check-solid me-lg-10 ">
<input
class="form-check-input"
type="checkbox"
value=""
disabled={!item.features.allowedEdit}
name={`${gRights.moduleId}_${item.features.featureNameEn}_update`}
onChange={() =>
handleCheckboxChange(
gRights.moduleId,
item.features.featureNameEn,
"update"
)
}
checked={
checkboxState[
`${gRights.moduleId}_${item.features.featureNameEn}_update`
] || false
}
/>
<span class="form-check-label">
Update
</span>
</label>
<label class="form-check form-check-sm form-check-custom form-check-solid me-lg-10 ">
<input
class="form-check-input"
type="checkbox"
value=""
disabled={!item.features.allowedDelete}
name={`${gRights.moduleId}_${item.features.featureNameEn}_delete`}
onChange={() =>
handleCheckboxChange(
gRights.moduleId,
item.features.featureNameEn,
"delete"
)
}
checked={
checkboxState[
`${gRights.moduleId}_${item.features.featureNameEn}_delete`
] || false
}
/>
<span class="form-check-label">
Delete
</span>
</label>
</div>
</td>
</td>
)
)}
</td>
</tr>
</>
</tbody>
))}
</table>
this is my code and i want that when i click on "Select All" checkbox the other checkboxes of "Read" , "Create", "UPdate" and "Delete" of that module or moduleId which are enabled should be selected and if i unchecked "Select All" the other checkboxes of "Read" , "Create", "UPdate" and "Delete" of that module or moduleId which were checked must be unchecked and if i click on save button then all the checkboxes of checked and unchecked should be sent to server in the form of list. How can I achieve it? Can anyone help me? I will highly appreciate your help.Thanks
Aucun commentaire:
Enregistrer un commentaire