everything2/EveryThing/Pages/CodeTablePrePostText/AddEdit.cshtml

@page "{handler?}"
@model EveryThing.Pages.CodeTablePrePostText.AddEditModel

@{
    ViewData["Title"] = "Urejanje klavzule";
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}

<!-- Editor -->
<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" asp-append-version="true" />

<h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
    <span>
        <span class="text-muted font-weight-light">Nalog /</span> 
        @if (Model.PrePostText.IdPrePostText > 0)
        {
            <span>Urejanje</span>
        }
        else
        {
            <span>Vnos</span>
        }
    </span>
</h4>

<div class="nav-tabs-top nav-responsive-sm">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#item-basic">Osnovni podatki</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="item-basic">
            <form method="post" data-ajax="true" data-ajax-method="post" asp-page-handler="order" data-ajax-complete="orderPostCompleted"  onsubmit="handleEditors()">
                <div class="card-body">
                    <input id="inputIdPrePostText" type="hidden" asp-for="PrePostText.IdPrePostText" />
                    <input type="hidden" asp-for="PrePostText.IdCompanyFk" />
                    <div class="row">
                        <div class="col-6">
                            <h4>Vsebina</h4>
                            <div class="form-group mb-0">
                                <input type="hidden" id="value-content" asp-for="@Model.PrePostText.Content"/>
                                <div id="editor-content" style="height: 250px">
                                    @Html.Raw(Model.PrePostText.Content)
                                </div>
                                <span asp-validation-for="PrePostText.Content" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4>Vezave</h4>
                            <div class="row">
                                <div class="col-6">
                                    <h5>Uvodno</h5>
                                    <table class="table card-table">
                                        <tbody id="tableBodyLinksPreText">

                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-6">
                                    <h5>Zaključno</h5>
                                    <table class="table card-table">
                                        <tbody id="tableBodyLinksPostText">
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card-footer py-3 text-right">
                    @if (Model.PrePostText.IdPrePostText > 0)
                    {
                        <button id="savePrePostText" type="submit" class="btn btn-primary">Shrani</button>
                    }
                    else
                    {
                        <button id="savePrePostText" type="submit" class="btn btn-primary">Dodaj</button>
                    }
                    
                    <a asp-page="Index" class="btn btn-default">Prekliči</a>
                </div>
            </form>
        </div>
    </div>
</div>

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
@Html.AntiForgeryToken()

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <!-- Editor -->
    <script src="~/vendor/libs/quill/quill.js" asp-append-version="true"></script>
    <script src="~/vendor/libs/select2/select2.js" asp-append-version="true"></script>

    <script>
        var Block = Quill.import('blots/block');
        Block.tagName = 'DIV';
        Quill.register(Block, true);

        var laddaSaveOrder = Ladda.create(document.querySelector('#savePrePostText'));

        let editorContent;

        function handleEditors() {
            document.getElementById('value-content').value = editorContent.root.innerHTML;
        }

        $(document).ready(function () {
            $('.select2').select2();
            editorContent = new Quill('#editor-content', { modules: { toolbar: [['bold', 'italic', 'underline'], ['color'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['align'], ['clean']] }, theme: 'snow' });
            loadLinks();
        });

        orderPostCompleted = function (xhr) {
            laddaSaveOrder.stop();
            location.replace('AddEdit?Id=' + xhr.responseJSON.id);
        };

        function loadLinks() {
            let idPrePostText = parseInt($('#inputIdPrePostText').val());
            if (idPrePostText <= 0) {
                return;
            }

            $.blockUI();
            $.ajax({
                type: "GET",
                url: "AddEdit/?handler=LinksTable",
                data: {
                    idPrePostText
                },
                success: function (data) {
                    $.unblockUI();
                    if (data.successful) {
                        $('#tableBodyLinksPreText').html(data.tableLinksPreText);
                        $('#tableBodyLinksPostText').html(data.tableLinksPostText);
                        $('.chb-link').on('change',
                            function() {
                                toggleLink(this);
                            });
                    } else {
                        console.log(data);
                        Swal.fire('Napaka pri branju povezav',
                            data.error,
                            'error');
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

        let disableToggleLink = false;

        function toggleLink(checkbox) {
            if (disableToggleLink) {
                return;
            }
            let row = $(checkbox).parent().parent();
            let link = $(row).attr('data-link');
            let type = $(row).attr('data-type');
            let idPrePostTextLink = $(row).attr('data-idlink');
            let idPrePostText = parseInt($('#inputIdPrePostText').val());

            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "AddEdit/?handler=LinkToggle",
                data: { idPrePostText, link, type, idPrePostTextLink },
                success: function(data) {
                    $.unblockUI();
                    if (data.successful) {
                        disableToggleLink = true;
                        $(checkbox).prop("checked", data.idLink > 0);
                        disableToggleLink = false;
                    } else {
                        console.log(data);
                        Swal.fire('Napaka pri vnosu povezave',
                            data.error,
                            'error');
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }
    </script>
}