dpot-backend/Admin/Pages/Director/Role/Permission.cshtml

@page
@model Admin.Pages.Director.Role.PermissionModel
@{
    ViewData["Title"] = $"{Model.Role.RoleName}의 권한";
}

<div class="container">
    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off">
        <input type="hidden" asp-for="Role.RoleID" />
        <input type="hidden" asp-for="Role.RoleName" />
        <div asp-validation-summary="All" class="text-danger"></div>

        <div class="row">
            <div class="col">
                <h2>@ViewData["Title"]</h2>
                권한을 추가하거나 회수할 수 있습니다. <ins>Create: 읽기, View: 열람, Edit: 수정, Delete: 삭제</ins>
            </div>
            <div class="col-auto align-self-end">
                <button type="submit" class="btn btn-success">저장</button>
                <a asp-page="/Director/Role/Index" class="btn btn-secondary">취소</a>
            </div>
        </div>

        <hr />

        <div class="flex">
            @if (Model.Role != null)
            {
                @for (int i = 0; i < Model.Role.RoleClaims.Count; i++)
                {
                    var group = Model.Role.RoleClaims[i];
                    var isAllChecked = group.IsAllSelected ? "checked" : "";
                    var IsPartialSelected = group.IsPartialSelected ? "data-indeterminate=\"true\"" : "";

                    <div class="mb-2 border p-3 rounded shadow-sm">
                        <div class="form-check">
                            <input type="checkbox" id="grp-@i" class="form-check-input group-toggle mr-1" data-group="@group.GroupName" @isAllChecked @IsPartialSelected />
                            <label for="grp-@i" class="font-semibold mb-2">
                                @group.GroupName 전체 선택
                            </label>
                        </div>


                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
                            @for (int j = 0; j < group.Permissions.Count; j++)
                            {
                                var perm = group.Permissions[j].DisplayValue?.Split('.') ?? Array.Empty<string>();

                                var menuName = perm.Length > 1 ? perm[1] : string.Empty;
                                var menuID = perm.Length > 2 ? perm[2] : string.Empty;
                                var permission = perm.Length > 3 ? perm[3] : string.Empty;

                                <div class="col">
                                    <div class="form-check m-1">
                                        <input type="hidden" name="Role.RoleClaims[@i].Permissions[@j].DisplayValue" value="@group.Permissions[j].DisplayValue" />
                                        <input type="hidden" name="Role.RoleClaims[@i].GroupName" value="@group.GroupName" />

                                        <input type="checkbox"
                                               name="Role.RoleClaims[@i].Permissions[@j].IsSelected"
                                               value="true"
                                               class="form-check-input perm-checkbox"
                                               data-group="@group.GroupName"
                                               id="chk-@i-@j"
                                               @(group.Permissions[j].IsSelected ? "checked" : "") />

                                        <label class="form-check-label" for="chk-@i-@j">
                                            @menuName - <span class="badge text-bg-light border">@permission</span>
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                    }
                } else {
                    <div class="alert alert-warning">권한 정보가 없습니다.</div>
                }
            </div>

        <div class="card-footer text-center p-4">
            <button type="submit" class="btn btn-success">저장</button>
            <a asp-page="/Director/Role/Index" class="btn btn-secondary">취소</a>
        </div>

        <br />
    </form>
</div>

@section Scripts {
    <script>
        document.querySelectorAll('.group-toggle').forEach(groupCheckbox => {
             if (groupCheckbox.dataset.indeterminate === "true") {
                 groupCheckbox.indeterminate = true;
             }

             groupCheckbox.addEventListener('change', (e) => {
                 const group = e.target.dataset.group;
                 const isChecked = e.target.checked;

                 console.log(group);

                 document.querySelectorAll(`.perm-checkbox[data-group="${group}"]`).forEach(cb => {
                     cb.checked = isChecked;
                 });
             });
         });
    </script>
}