everything/EveryThing/Pages/Projects/CreateEditPartItem.cshtml

@page
@using EveryThing.Models.Project
@model EveryThing.Pages.Projects.CreateEditPartItemModel

@{
    ViewData["Title"] = "Nov del projekta";
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}
<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" asp-append-version="true" />


<form method="post">

    <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">Projekt /</span>
            @if ((bool)ViewData["Edit"])
            {
                <span>&nbsp;Urejanje pozicije dela projekta</span>
            }
            else
            {
                <span>&nbsp;Nova pozicija dela projekta</span>
            }

        </span>
    </h4>

    <div class="row">
        <div class="col-6">
            <div class="card">
                <h6 class="card-header">
                    Podatki pozicije
                    @if ((bool)ViewData["Edit"])
                    {
                        <i>@Model.ProjectPartItem.ProjectPartNumberFormatted</i>
                    }
                </h6>
                <div class="card-body">
                    <input type="hidden" asp-for="ProjectPartItem.IdProjectPartFk" />
                    <input type="hidden" asp-for="IdProject" />
                    <input type="hidden" asp-for="ProjectPartItem.IdProjectPartItem" />
                    <input type="hidden" asp-for="ProjectPartItem.ProjectPartItemNumber" />
                    <input type="hidden" asp-for="@ViewData["Edit"]" name="edit" />
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.IdItemFk" class="form-label"></label>
                                <div class="form-row align-items-end">
                                    <div class="col">
                                        <select id="selCodeTableItem" asp-for="ProjectPartItem.IdItemFk" class="form-control select2" asp-items="ViewBag.IdItemFk"></select>
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-success" type="button" onclick="copyDataFromLastPartItem();">Napolni prejšnje</button>
                                        <button class="btn btn-primary" type="button" onclick="addNewCodeTableItem();">Novi artikel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.NumberOfItems" class="form-label"></label>
                                <input asp-for="ProjectPartItem.NumberOfItems" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.NumberOfItems" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.NumberOfSets" class="form-label"></label>
                                <input asp-for="ProjectPartItem.NumberOfSets" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.NumberOfSets" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.IdMaterialFk" class="form-label"></label>
                                <div class="form-row align-items-end">
                                    <div class="col">
                                        <select id="selCodeTableItemMaterial" asp-for="ProjectPartItem.IdMaterialFk" class="form-control select2" asp-items="ViewBag.IdMaterialFk"></select>
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-primary" type="button" onclick="addNewCodeTableItemMaterial();">Novi material</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.MaterialDimensions" class="form-label"></label>
                                <input asp-for="ProjectPartItem.MaterialDimensions" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.MaterialDimensions" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.IdMaterialSupplierFk" class="form-label"></label>
                                <select asp-for="ProjectPartItem.IdMaterialSupplierFk" class="form-control select2" asp-items="ViewBag.IdMaterialSupplierFk"></select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.MaterialPrice" class="form-label"></label>
                                <input asp-for="ProjectPartItem.MaterialPrice" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.MaterialPrice" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.WorkPrice" class="form-label"></label>
                                <input asp-for="ProjectPartItem.WorkPrice" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.WorkPrice" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.SellingPrice" class="form-label"></label>
                                <input asp-for="ProjectPartItem.SellingPrice" class="form-control" />
                                <span asp-validation-for="ProjectPartItem.SellingPrice" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.DeliveryDate" class="form-label"></label>
                                @Html.TextBoxFor(m => m.ProjectPartItem.DeliveryDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
                                <span asp-validation-for="ProjectPartItem.DeliveryDate" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.Status" class="form-label"></label>
                                <select asp-for="ProjectPartItem.Status" asp-items="Html.GetEnumSelectList<ProjectPartItemStatus>()" class="form-control">
                                    <option>Izberite status</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.ShippingDate" class="form-label"></label>
                                @Html.TextBoxFor(m => m.ProjectPartItem.ShippingDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
                                <span asp-validation-for="ProjectPartItem.ShippingDate" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="ProjectPartItem.Note" class="form-label"></label>
                                <textarea asp-for="ProjectPartItem.Note" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer py-3 text-right">
                    @if (ViewData["Edit"] != null && (bool)ViewData["Edit"])
                    {
                        <button type="submit" class="btn btn-primary">Shrani</button>
                    }
                    else
                    {
                        <button type="submit" class="btn btn-primary">Dodaj pozicijo dela projekta</button>
                    }

                    <a asp-page="Edit" asp-route-id="@ViewBag.IdProject" class="btn btn-default">Prekliči</a>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <h6 class="card-header">
                    Operacije
                </h6>
                <div class="card-body">
                    @if (ViewData["Edit"] != null && (bool)ViewData["Edit"])
                    {
                        <div class="form-row align-items-end mb-3">
                            <div class="col">
                                <label class="form-label" for="selProjectPartItemOperation">Naziv</label>
                                <select id="selProjectPartItemOperation" class="form-control select2" asp-items="ViewBag.IdCodeTableOperationFk"></select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary" onclick="addProjectPartItemOperation();">Dodaj</button>
                                <button type="button" class="btn btn-success" onclick="addDefaultOperations();">Dodaj privzete</button>
                            </div>
                        </div>
                    }

                    <table class="table">
                        <thead>
                        <tr>
                            <th class="w-100">Naziv</th>
                            <th class="text-right" style="white-space: nowrap; width: 1%;">Končano</th>
                            <th class="text-right" style="white-space: nowrap; width: 1%;"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach (var operation in Model.ProjectPartItemOperations)
                        {
                            <tr data-id="@operation.Id" data-id-code-table-operation="@operation.IdCodeTableOperationFk">
                                <td>
                                    @Html.DisplayFor(modelItem => operation.Operation.Title)
                                </td>
                                <td class="text-right" style="white-space: nowrap; width: 1%;">
                                    <input type="checkbox" @(operation.Finished ? "checked" : "") onchange="toggleOperationFinished(@operation.Id, this);" />
                                </td>
                                <td class="text-right" style="white-space: nowrap; width: 1%;">
                                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(@operation.Id, 'up', this);" title="Gor"><i class="fas fa-arrow-up"></i></a>
                                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(@operation.Id, 'down', this);" title="Dol"><i class="fas fa-arrow-down"></i></a>
                                    <a class="btn btn-xs icon-btn btn-outline-danger borderless" data-state="danger" href="javascript:;" onclick="deleteProjectPartItemOperation(@operation.Id, this);" title="Izbriši"><i class="fas fa-times"></i></a>
                                </td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="card">
                <h6 class="card-header">
                    Kooperacije
                </h6>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="white-space: nowrap; width: 1%;">Številka</th>
                                <th>Partner</th>
                                <th style="white-space: nowrap; width: 1%;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.CooperationInvoiceItems)
                            {
                                <tr>
                                    <td style="white-space: nowrap;">@item.Invoice.InvoiceNumberFormatted</td>
                                    <td>@item.Invoice.Partner?.Title</td>
                                    <td class="text-right" style="white-space: nowrap; width: 1%;">
                                        <a class="btn btn-xs icon-btn btn-outline-primary borderless" asp-page="/Invoices/Print" asp-route-id="@item.Invoice.IdInvoice" data-toggle="tooltip" data-placement="top" title="Tiskanje" data-state="primary"><i class="ion ion-md-print"></i></a>
                                        <a class="btn btn-xs icon-btn btn-outline-secondary borderless" asp-page="/Invoices/Edit" asp-route-id="@item.Invoice.IdInvoice" data-toggle="tooltip" data-placement="top" title="Urejanje" data-state="secondary"><i class="fas fa-pencil-alt"></i></a>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

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

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script src="~/js/codeTableItemHelper.js?v=3" asp-append-version="true"></script>
    <script src="~/vendor/libs/select2/select2.js" asp-append-version="true"></script>

    <script>
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip({ container: 'table' });
            $('.select2').select2();
        });

        function addNewCodeTableItem() {
            codeTableItemAddEdit('#divModalCodetableItemAddEditPlaceholder',
                false,
                null,
                (idCodeTableItem) => {
                    refreshCodeTableItems('#selCodeTableItem', idCodeTableItem, 0);
                });
        }

        function addNewCodeTableItemMaterial() {
            codeTableItemAddEdit('#divModalCodetableItemAddEditPlaceholder',
                false,
                null,
                (idCodeTableItem) => {
                    refreshCodeTableItems('#selCodeTableItemMaterial', idCodeTableItem, 1);
                },
                null,
                1);
        }

        function refreshCodeTableItems(selector, idToSelect, type) {
            $.ajax({
                type: "GET",
                url: "CreateEditPartItem/?handler=CodeTableItems",
                data: {
                    type
                },
                success: function(data) {
                    console.log(data);
                    $(selector).empty();
                    $(data.items).each(function() {
                        $(selector).append($("<option></option>").val(this.value).html(this.text));
                    });
                    $(selector).val(idToSelect).trigger('change');
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

        function copyDataFromLastPartItem() {
            let params = new URLSearchParams(window.location.search);
            let idProjectPartItem = params.get('idProjectPartItem');
            let idProject = params.get('idProject');
            let idProjectPart = params.get('idProjectPart');
            let edit = params.get('edit');

            let idArticle = $('#selCodeTableItem').val();
            if (isNaN(parseInt(idArticle))) {
                return;
            }

            location.replace(`CreateEditPartItem?idProjectPartItem=${idProjectPartItem}&idProject=${idProject}&idProjectPart=${idProjectPart}&edit=${edit}&idArticleCopyFrom=${idArticle}`);
        }

        function moveOperation(idProjectPartItemOperation, direction, element) {
            let row = $(element).closest('tr');
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreateEditPartItem/?handler=MoveOperation",
                data: {
                    idProjectPartItemOperation,
                    direction
                },
                success: function(data) {
                    if (data.successful) {
                        if (direction === 'up') {
                            let prev = row.prev('tr');
                            if (prev.length) {
                                row.insertBefore(prev);
                            }
                        } else {
                            let next = row.next('tr');
                            if (next.length) {
                                row.insertAfter(next);
                            }
                        }
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                }
            });
        }

        function toggleOperationFinished(idProjectPartItemOperation, checkbox) {
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreateEditPartItem/?handler=ToggleProjectPartItemOperationFinished",
                data: {
                    idProjectPartItemOperation
                },
                success: function(data) {
                    if (!data.successful) {
                        Swal.fire('Napaka pri posodabljanju operacije', data.error, 'error');
                        checkbox.checked = !checkbox.checked;
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    checkbox.checked = !checkbox.checked;
                }
            });
        }

        function deleteProjectPartItemOperation(idProjectPartItemOperation, element) {
            let row = $(element).closest('tr');
            Swal.fire({
                title: 'Izbrišem operacijo?',
                text: "Tega dejanja ni možno razveljaviti!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Da, izbriši!',
                cancelButtonText: 'Prekliči!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "DELETE",
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        url: "CreateEditPartItem/?handler=ProjectPartItemOperation",
                        data: {
                            idProjectPartItemOperation
                        },
                        success: function(data) {
                            if (data.successful) {
                                let operationName = row.find('td:first').text().trim();
                                let operationId = row.data('idCodeTableOperation');
                                $('#selProjectPartItemOperation').append($('<option></option>').val(operationId).html(operationName));
                                row.remove();
                                $('#selProjectPartItemOperation').trigger('change');
                            } else {
                                Swal.fire('Napaka pri brisanju operacije', data.error, 'error');
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            console.log(xhr);
                            alert(xhr.responseText);
                        }
                    });
                }
            });
        }

        function addDefaultOperations() {
            let idProjectPartItem = parseInt($('#ProjectPartItem_IdProjectPartItem').val());
            if (isNaN(idProjectPartItem)) {
                return;
            }

            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreateEditPartItem/?handler=AddDefaultOperations",
                data: {
                    idProjectPartItem
                },
                success: function(data) {
                    $.unblockUI();
                    if (data.successful) {
                        $.each(data.operations, function(i, op) {
                            let row = `<tr data-id="${op.idProjectPartItemOperation}" data-id-code-table-operation="${op.idCodeTableOperation}">
                                <td>${op.title}</td>
                                <td class="text-right" style="white-space: nowrap; width: 1%;">
                                    <input type="checkbox" onchange="toggleOperationFinished(${op.idProjectPartItemOperation}, this);" />
                                </td>
                                <td class="text-right" style="white-space: nowrap; width: 1%;">
                                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(${op.idProjectPartItemOperation}, 'up', this);" title="Gor"><i class="fas fa-arrow-up"></i></a>
                                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(${op.idProjectPartItemOperation}, 'down', this);" title="Dol"><i class="fas fa-arrow-down"></i></a>
                                    <a class="btn btn-xs icon-btn btn-outline-danger borderless" data-state="danger" href="javascript:;" onclick="deleteProjectPartItemOperation(${op.idProjectPartItemOperation}, this);" title="Izbriši"><i class="fas fa-times"></i></a>
                                </td>
                            </tr>`;
                            $('table.table tbody').append(row);
                            $('#selProjectPartItemOperation option[value="' + op.idCodeTableOperation + '"]').remove();
                        });
                        $('#selProjectPartItemOperation').trigger('change');
                    } else {
                        Swal.fire('Napaka pri dodajanju privzetih operacij', data.error, 'error');
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

        function addProjectPartItemOperation() {
            let idProjectPartItem = parseInt($('#ProjectPartItem_IdProjectPartItem').val());
            let idCodeTableOperation = parseInt($('#selProjectPartItemOperation').val());

            if (isNaN(idProjectPartItem) || isNaN(idCodeTableOperation)) {
                Swal.fire('Izberite operacijo.');
                return;
            }

            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreateEditPartItem/?handler=ProjectPartItemOperation",
                data: {
                    idProjectPartItem,
                    idCodeTableOperation
                },
                success: function(data) {
                    $.unblockUI();
                    if (data.successful){
                        let id = data.idProjectPartItemOperation;
                        let row = `<tr data-id="${id}" data-id-code-table-operation="${idCodeTableOperation}">
                            <td>${data.title}</td>
                            <td class="text-right" style="white-space: nowrap; width: 1%;">
                                <input type="checkbox" onchange="toggleOperationFinished(${id}, this);" />
                            </td>
                            <td class="text-right" style="white-space: nowrap; width: 1%;">
                                <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(${id}, 'up', this);" title="Gor"><i class="fas fa-arrow-up"></i></a>
                                <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="moveOperation(${id}, 'down', this);" title="Dol"><i class="fas fa-arrow-down"></i></a>
                                <a class="btn btn-xs icon-btn btn-outline-danger borderless" data-state="danger" href="javascript:;" onclick="deleteProjectPartItemOperation(${id}, this);" title="Izbriši"><i class="fas fa-times"></i></a>
                            </td>
                        </tr>`;
                        $('table.table tbody').append(row);
                        $('#selProjectPartItemOperation option[value="' + idCodeTableOperation + '"]').remove();
                        $('#selProjectPartItemOperation').trigger('change');
                    } else {
                        Swal.fire('Napaka pri dodajanju operacije',
                        data.error,
                        'error');
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

    </script>
}