everything/EveryThing/Pages/Projects/CreatePartItemImportExcel.cshtml

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

@{
    ViewData["Title"] = "Uvoz pozicij dela projekta";
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}

<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> Uvoz pozicij dela projekta
    </span>
</h4>

<div class="row">
    <div class="col-6">
        <div class="card">
            <!-- Step 1: Upload -->
            <div id="step-upload">
                <h6 class="card-header">
                    Podatki pozicije
                </h6>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <input type="file" id="fileInput" name="postedFiles" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer py-3 text-right">
                    <button type="button" id="btnUpload" class="btn btn-primary">Naloži excel</button>
                    <a asp-page="Edit" asp-route-id="@Model.IdProject" class="btn btn-default">Prekliči</a>
                </div>
            </div>

            <!-- Step 2: Mapping -->
            <div id="step-mapping" style="display: none;">
                <h6 class="card-header">
                    Povezovanje <span id="mappingFileName"></span> z pozicijo
                </h6>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12" id="mappingFields">
                        </div>
                    </div>
                </div>
                <div class="card-footer py-3 text-right">
                    <button type="button" id="btnImport" class="btn btn-primary">Potrdi</button>
                    <a asp-page="Edit" asp-route-id="@Model.IdProject" class="btn btn-default">Prekliči</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div id="validation-errors" style="display: none;">
            <div class="card border-danger">
                <h6 class="card-header bg-danger text-white">Napake pri uvozu</h6>
                <div class="card-body p-0">
                    <table class="table table-sm table-bordered m-0">
                        <thead>
                            <tr>
                                <th>Vrstica</th>
                                <th>Polje</th>
                                <th>Vrednost</th>
                                <th>Napaka</th>
                            </tr>
                        </thead>
                        <tbody id="validation-errors-body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@Html.AntiForgeryToken()

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

    <script type="text/javascript">
        var uploadedFileName = '';

        $('#btnUpload').click(function () {
            var fileInput = document.getElementById('fileInput');
            if (fileInput.files.length === 0) {
                Swal.fire('Izberite datoteko.');
                return;
            }

            var formData = new FormData();
            formData.append('postedFiles', fileInput.files[0]);
            formData.append('idProject', '@Model.IdProject');
            formData.append('idProjectPart', '@Model.IdProjectPart');

            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreatePartItemImportExcel?handler=Upload",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $.unblockUI();
                    if (data.successful) {
                        uploadedFileName = data.fileName;
                        $('#mappingFileName').text(data.fileName);

                        var container = $('#mappingFields');
                        container.empty();

                        $.each(data.excelItems, function (i, item) {
                            var group = $('<div class="form-group"></div>');
                            group.append('<label class="control-label">' + item.name + '</label>');

                            var select = $('<select class="form-control select-item" data-index="' + item.cellIndex + '"></select>');
                            select.append('<option value="">Ni izbrano</option>');
                            $.each(data.mappingOptions, function (j, opt) {
                                select.append('<option value="' + opt.name + '">' + opt.display + '</option>');
                            });

                            group.append(select);
                            container.append(group);
                        });

                        $('#step-upload').hide();
                        $('#step-mapping').show();
                    } else {
                        Swal.fire('Napaka', data.error, 'error');
                    }
                },
                error: function (xhr) {
                    $.unblockUI();
                    console.log(xhr);
                    alert(xhr.responseText);
                }
            });
        });

        $('#btnImport').click(function () {
            var data = "";
            $('.select-item').each(function (index, element) {
                var value = $(element).val();
                if (value !== '') {
                    var dataIndex = $(element).attr("data-index");
                    data += dataIndex + ";" + value + "#";
                }
            });

            if (data === '') {
                Swal.fire('Izberite vsaj eno polje.');
                return;
            }

            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "CreatePartItemImportExcel?handler=Import",
                data: {
                    selectedItems: data,
                    fileName: uploadedFileName,
                    idProjectPart: '@Model.IdProjectPart',
                    idProject: '@Model.IdProject'
                },
                success: function (data) {
                    $.unblockUI();
                    if (data.successful) {
                        window.location.href = data.redirectUrl;
                    } else if (data.validationErrors && data.validationErrors.length > 0) {
                        var tbody = $('#validation-errors-body');
                        tbody.empty();
                        $.each(data.validationErrors, function (i, err) {
                            tbody.append('<tr>' +
                                '<td>' + err.row + '</td>' +
                                '<td>' + err.property + '</td>' +
                                '<td><code>' + (err.value || '') + '</code></td>' +
                                '<td class="text-danger">' + err.message + '</td>' +
                            '</tr>');
                        });
                        $('#validation-errors').show();
                        Swal.fire('Napaka pri uvozu', 'Podatki vsebujejo ' + data.validationErrors.length + ' napak. Preglejte tabelo napak.', 'error');
                    } else {
                        Swal.fire('Napaka', data.error, 'error');
                    }
                },
                error: function (xhr) {
                    $.unblockUI();
                    console.log(xhr);
                    alert(xhr.responseText);
                }
            });
        });
    </script>
}