dpot-backend/Admin/Pages/Member/List/Index.cshtml

@page
@model Admin.Pages.Member.List.IndexModel
@using Domain.Entities.Members.ValueObject
@{
    ViewData["Title"] = "회원 목록";
}

<div class="container-fluid">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />

    <div class="row g-2 mb-2">
        <div class="col-12 col-lg-auto">
            <div class="row g-2">
                <div class="col-auto col-md-auto">
                    <select id="search" class="form-select">
                        <option value="1" selected="@(Model.Query.Search == 1)">회원ID</option>
                        <option value="2" selected="@(Model.Query.Search == 2)">회원 이메일</option>
                        <option value="3" selected="@(Model.Query.Search == 3)">회원 별명</option>
                        <option value="4" selected="@(Model.Query.Search == 4)">회원 이름</option>
                        <option value="5" selected="@(Model.Query.Search == 5)">회원 연락처</option>
                    </select>
                </div>
                <div class="col col-md-auto">
                    <input type="search" id="keyword" class="form-control" maxlength="100" value="@Model.Query.Keyword" />
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-auto">
            <div class="row row-cols-2 g-2">
                <div class="col">
                    <input type="datetime-local" id="startAt" class="form-control" value="@Model.Query.StartAt" />
                </div>
                <div class="col d-none">~</div>
                <div class="col">
                    <input type="datetime-local" id="endAt" class="form-control" value="@Model.Query.EndAt" />
                </div>
            </div>
        </div>
    </div>
    <div class="row g-2 mb-2">
        <div class="col-12 col-sm">
            <div class="row g-2">
                <div class="col-12 col-md-auto">
                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <label class="col-form-label">성별</label>
                        </div>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="gender" id="male" class="form-check-input" value="@Gender.Male" checked="@(Model.Query.Gender == Gender.Male)" />
                                <label for="male" class="form-check-label">남자</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="gender" id="female" class="form-check-input" value="@Gender.Female" checked="@(Model.Query.Gender == Gender.Female)" />
                                <label for="female" class="form-check-label">여자</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-auto align-self-center">
                    <div class="row g-2">
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" id="isEmailVerified" class="form-check-input" value="1" checked="@(Model.Query.IsEmailVerified == 1)" />
                                <label for="isEmailVerified" class="form-check-label">이메일 인증</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" id="isAuthCertified" class="form-check-input" value="1" checked="@(Model.Query.IsAuthCertified == 1)" />
                                <label for="isAuthCertified" class="form-check-label">본인 인증</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center mt-3">
        <div class="col col-sm-auto">
            <button type="submit" id="btnSearch" class="btn btn-primary w-100">검색</button>
        </div>
    </div>

    <hr />

    <div class="row g-2">
        <div class="col">
            Total : @Model.Total.ToString("N0")
        </div>
        <div class="col-auto">
            <select name="perPage" id="perPage" class="form-select w-auto d-inline-block" form="fAdminSearch">
                <option value="10" selected="@(Model.Query.PerPage == 10)">10</option>
                <option value="20" selected="@(Model.Query.PerPage == 20)">20</option>
                <option value="50" selected="@(Model.Query.PerPage == 50)">50</option>
                <option value="100" selected="@(Model.Query.PerPage == 100)">100</option>
            </select>
        </div>
        <div class="col-auto">
            <button type="button" id="btnListDelete" class="btn btn-danger" form="fAdminList" disabled>삭제</button>
            <a class="btn btn-success" asp-page="Write">추가</a>
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 0 ? "active" : null)" href="/Member/List?tab=0">
                전체(@Model.Counts.All.ToString("N0"))
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 1 ? "active" : null)" href="/Member/List?tab=1">
                차단(@Model.Counts.Denied.ToString("N0"))
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 2 ? "active" : null)" href="/Member/List?tab=2">
                탈퇴(@Model.Counts.Withdraw.ToString("N0"))
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 3 ? "active" : null)" href="/Member/List?tab=3">
                GM(@Model.Counts.Admin.ToString("N0"))
            </a>
        </li>
    </ul>

    <form name="f_admin_list" id="fAdminList" method="post" accept-charset="utf-8" autocomplete="off" asp-page-handler="Delete">
        @Html.AntiForgeryToken()
    </form>

    <div class="table-responsive">
        <table class="table table-bordered mt-3">
            <colgroup>
                <col style="width: 5%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 7%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 17%;" />
                <col style="width: 8%;" />
                <col style="width: 5%;" />
                <col style="width: 11%;" />
            </colgroup>
            <thead>
                <tr>
                    <th rowspan="2">ID</th>
                    <th colspan="2">
                        <div class="form-check form-check-inline">
                            <input type="checkbox" id="checkedAll" class="form-check-input" value="1" form="fAdminList" />
                            <label for="checkedAll">이메일</label>
                        </div>
                    </th>
                    <th>성별</th>
                    <th>구독자</th>
                    <th>연락처</th>
                    <th rowspan="2">인증/본인/차단/탈퇴</th>
                    <th>최종 접속</th>
                    <th>가입 일시</th>
                    <th rowspan="2">비고</th>
                </tr>
                <tr>
                    <th>이름</th>
                    <th>별명</th>
                    <th>생년월일</th>
                    <th>구독 중</th>
                    <th>등급</th>
                    <th>로그인 IP</th>
                    <th>수정 일시</th>
                </tr>
            </thead>
            @if (Model.List == null || Model.List.Count <= 0)
            {
                <tbody>
                    <tr>
                        <td colspan="11">No Data.</td>
                    </tr>
                </tbody>
            }
            else
            {
                @foreach (var row in Model.List)
                {
                    <tbody class="striped">
                        <tr>
                            <td rowspan="2">@row.ID</td>
                            <td colspan="2">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="ids[]" id="chk_@row.ID" class="form-check-input list-check-box" value="@row.ID" form="fAdminList" />
                                    <label for="chk_@row.ID" class="form-check-inline">@row.Email</label>
                                </div>
                            </td>
                            <td>@row.Gender</td>
                            <td>@row.Followed</td>
                            <td>@row.Phone</td>
                            <td rowspan="2">
                                <input type="checkbox" readonly checked="@(row.IsEmailVerified == 'Y')" disabled />
                                <input type="checkbox" readonly checked="@(row.IsAuthCertified == 'Y')" disabled />
                                <input type="checkbox" readonly checked="@(row.IsDenied == 'Y')" disabled />
                                <input type="checkbox" readonly checked="@(row.IsWithdraw == 'Y')" disabled />
                            </td>
                            <td>@row.LastLoginAt</td>
                            <td>@row.CreatedAt</td>
                            <td rowspan="2">
                                <div class="d-xl-flex gap-2 justify-content-center d-grid">
                                    <a class="btn btn-sm btn-outline-dark" href="@row.ViewURL">상세</a>
                                    <a class="btn btn-sm btn-outline-secondary" href="@row.ApproveURL">승인</a>
                                    <a class="btn btn-sm btn-outline-info" href="@row.EditURL">수정</a>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-row-delete" data-id="@row.ID">삭제</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>@row.FullName</td>
                            <td>
                                @if (!string.IsNullOrEmpty(row.Icon))
                                {
                                    <img src="@row.Icon" class="img-thumbnail me-2" alt="@row.Name" />
                                }
                                @row.Name
                            </td>
                            <td>@row.Birthday</td>
                            <td>@row.Following</td>
                            <td>@row.GradeName</td>
                            <td>@row.LastLoginIp</td>
                            <td>@row.UpdatedAt</td>
                        </tr>
                    </tbody>
                }
            }
        </table>

        <partial name="_Pagination" model="Model.Pagination" />
    </div>
</div>

@section Scripts {
    <script>
        function updateQueryString() {
            let queryParams = new URLSearchParams();
            const gender = $("[name='gender']:checked").val();

            queryParams.set("search", document.getElementById("search").value);
            queryParams.set("keyword", document.getElementById("keyword").value);
            queryParams.set("startAt", document.getElementById("startAt").value);
            queryParams.set("endAt", document.getElementById("endAt").value);
            queryParams.set("perPage", document.getElementById("perPage").value);

            if (gender) {
                queryParams.set("gender", $("[name='gender']:checked").val());
            }

            queryParams.set("isEmailVerified", Number(document.getElementById("isEmailVerified").checked));
            queryParams.set("isAuthCertified", Number(document.getElementById("isAuthCertified").checked));
            queryParams.set("tab", @Model.Query.Tab);

            window.location.href = window.location.pathname + "?" + queryParams.toString();
        }

        $(document).on("change", "#perPage", function () {
            updateQueryString();
        });

        $(document).on("click", "#btnSearch", function(e) {
            e.preventDefault();
            updateQueryString();
        });

        $(document).on("keyup", "#keyword, #startAt, #endAt", function(e) {
            if (e.which === 13 || e.key === "Enter") {
                e.preventDefault();
                updateQueryString();
            }
        });
    </script>
}