bitforum/backend/Views/Page/Faq/Index.cshtml

@model bitforum.Models.Views.FaqCategoryViewModel
@{
    ViewData["Title"] = "FAQ 관리";
    var total = (Model?.FaqCategories?.Count ?? 0).ToString("N0");
}

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

    <partial name="_StatusMessage" />

    <div class="row g-2 align-items-end">
        <div class="col">
            Total : @total
        </div>
        <div class="col text-end">
            <button type="button" id="btnAdd" class="btn btn-sm btn-primary" form="fAdminWrite">추가</button>
            <button type="submit" id="btnSave" class="btn btn-sm btn-success" form="fAdminWrite">저장</button>
        </div>
    </div>

    <div class="table-responsive">
        <form id="fAdminWrite" asp-action="Save" method="post" accept-charset="utf-8" autocomplete="off"></form>

        <table class="table table-striped table-bordered table-hover mt-3">
            <colgroup>
                <col width="5%" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
            </colgroup>
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>Code</th>
                    <th>분류 명</th>
                    <th>게시글 수</th>
                    <th>순서</th>
                    <th>사용</th>
                    <th>등록일시</th>
                    <th>수정일시</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody id="categories">
                @if (Model?.FaqCategories == null || !Model.FaqCategories.Any())
                {
                    <tr>
                        <td colspan="9" class="text-center align-middle">No Data.</td>
                    </tr>
                }
                else
                {
                    @foreach (var row in Model.FaqCategories)
                    {
                        var index = Model.FaqCategories.IndexOf(row);
                        var faqItemRows = (ViewBag?.ItemCounts != null && ViewBag.ItemCounts.ContainsKey(row.ID) ? ViewBag.ItemCounts[row.ID] : 0);

                        <tr class="align-middle text-center">
                            <td>
                                <input type="text" name="FaqCategories[@index].ID" readonly class="form-control-plaintext text-center" required form="fAdminWrite" value="@row.ID" />
                            </td>
                            <td>
                                <input type="text" name="FaqCategories[@index].Code" class="form-control" maxlength="30" required form="fAdminWrite" value="@row.Code" />
                            </td>
                            <td>
                                <input type="text" name="FaqCategories[@index].Subject" class="form-control" maxlength="255" required form="fAdminWrite" value="@row.Subject" />
                            </td>
                            <td>@faqItemRows</td>
                            <td>
                                <input type="number" name="FaqCategories[@index].Order" class="form-control" min="-999" max="999" required form="fAdminWrite" value="@row.Order" />
                            </td>
                            <td>
                                <div class="form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="FaqCategories_@(index)_IsActive" name="FaqCategories[@index].IsActive" @(Model.FaqCategories[index].IsActive ? "checked" : "") form="fAdminWrite" value="true" />
                                    <label class="form-check-label" for="FaqCategories_@(index)_IsActive">
                                        사용
                                    </label>
                                </div>
                            </td>
                            <td><input type="text" name="FaqCategories[@index].CreatedAt" readonly class="form-control-plaintext text-center" form="fAdminWrite" value="@row.CreatedAt" /></td>
                            <td><input type="text" name="FaqCategories[@index].UpdatedAt" readonly class="form-control-plaintext text-center" form="fAdminWrite" value="@row.UpdatedAt" /></td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm btn-delete">삭제</button>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

<script type="module">
    $(function() {
        let $categories = $("#categories");
        let total = Number(@total);

        // 추가
        $(document).on("click", "#btnAdd", function() {
            if (total <= 0) {
                $categories.empty();
            }

            let tableRow = `
                <tr class="align-middle text-center">
                    <td>-</td>
                    <td>
                        <input type="text" name="FaqCategories[${total}].Code" class="form-control" maxlength="30" required form="fAdminWrite" />
                    </td>
                    <td>
                        <input type="text" name="FaqCategories[${total}].Subject" class="form-control" maxlength="255" required form="fAdminWrite" />
                    </td>
                    <td>-</td>
                    <td>
                        <input type="number" name="FaqCategories[${total}].Order" class="form-control" min="-999" max="999" required form="fAdminWrite" />
                    </td>
                    <td>
                        <div class="form-check-inline">
                            <input class="form-check-input" type="checkbox" id="FaqCategories_${total}_IsActive" name="FaqCategories[${total}].IsActive" checked form="fAdminWrite" value="true" />
                            <label class="form-check-label" for="FaqCategories_${total}_IsActive">
                                사용
                            </label>
                        </div>
                    </td>
                    <td>-</td>
                    <td>-</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm btn-delete">삭제</button>
                    </td>
                </tr>
            `;

            $categories.append(tableRow);
            total++;
            recalculateIndices();
        });

        // 삭제
        $(document).on("click", "button.btn-delete", function(e) {
            e.target.closest("tr").remove();
            total--;

            if (total <= 0) {
                $categories.append(
                    `<tr><td colspan="9" class="text-center align-middle">No Data.</td></tr>`
                );
                total = 0;
             } else {
                recalculateIndices();
             }
        });

        // 저장
        $(document).on("click", "#btnSave", function() {
            if (confirm("저장 하시겠습니까?")) {
                document.getElementById("fAdminWrite").submit();
            }
            return false;
        });

        // 인덱스 재계산 함수
        function recalculateIndices() {
            $categories.find("tr").each(function(index, tr) {
                $(tr)
                    .find("input, label")
                    .each(function() {
                        let name = $(this).attr("name");
                        let id = $(this).attr("id");

                        if (name) {
                            $(this).attr("name", name.replace(/\[\d+\]/, `[${index}]`));
                        }

                        if (id) {
                            $(this).attr("id", id.replace(/_\d+_/, `_${index}_`));
                        }
                    });

                // 인덱스 기반으로 라벨의 `for` 속성도 수정
                $(tr)
                    .find("label")
                    .each(function() {
                        let labelFor = $(this).attr("for");
                        if (labelFor) {
                            $(this).attr("for", labelFor.replace(/_\d+_/, `_${index}_`));
                        }
                    });
            });
        }
    });
</script>