mesa-fab-approval/Fab2ApprovalSystem/Views/PartsRequest/Edit.cshtml

@model Fab2ApprovalSystem.Models.PartsRequest

@{
    ViewBag.Title = "Parts Request - Edit";
}

<style>
    table {
        border-spacing: 5px;
        padding: 5px;
        border-color: white;
        border-color: white;
        vertical-align: top;
    }

    .k-header .k-link {
        text-align: center;
        vertical-align: top;
    }

    .k-grid-edit-row input {
        width: 100%;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header {
        white-space: normal;
    }

    .k-grid .k-edit-cell input {
        width: 100%;
    }
</style>

<link rel="stylesheet" href="/Content/kendo/kendo.blueopal.min.css" />
<link rel="stylesheet" href="~/Content/kendogridcustom.css" />

@using (Html.BeginForm())
{

    <div>
        <div class="panel panel-default center-block" data-spy="affix">
            <input type="button" value="Back to List" class="btn btn-primary btn-xs" id="PRList" />
            <input type="button" value="Save" class="btn btn-primary btn-xs" id="SavePR" />
            <input type="button" value="Submit" class="btn btn-primary btn-xs" id="SubmitPR" />

            <input type="button" value="Approval Log History" class="btn btn-primary btn-xs" id="ApprovalLogHistoryData" />
        </div>
    </div>
    <div class="panel panel-default center-block" style="font-size: 10px">
        <div class="panel-body bg-warning">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <font style="color: crimson; font-size:24px;font-weight: bolder">
                        New/Repair Spare Parts Request
                    </font>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default" style="font-size: 10px">
        <div class="panel-body bg-warning">
            <div class="form-horizontal row">
                <div class="form-group col-sm-4">
                    <div class="col-xs-4">
                        <label for="txtPRNumber" class="control-label pull-right">Request #:</label>
                    </div>
                    <div class="col-xs-8">
                        @Html.TextBoxFor(model => model.PRNumber, @Functions.ReturnPartsRequestNoStringFormat(@Model.PRNumber),
                            new { id = "txtPRNumber", @class = "k-textbox form-control", Readonly = "Readonly", style = "background-color:lightblue" })                    
                    </div>
                </div>      
                <div class="form-group col-sm-8">
                    <div class="col-xs-4">
                        <label for="txtTitle" class="control-label pull-right">Title:</label>
                    </div>
                    <div class="col-xs-8">
                        @Html.TextBoxFor(model => model.Title, new { id = "txtTitle", @class = "k-textbox form-control" })
                    </div>
                </div>
            </div>
            <div class="form-horizontal row">
                <div class="form-group col-sm-4">
                    <div class="col-xs-4">
                        <label class="control-label pull-right">Submit Date:</label>
                    </div>
                    <div class="col-xs-8">
                        @Html.TextBoxFor(model => model.SubmitDate, "{0:MM/dd/yyyy}", new { id = "txSubmitDate", @class = "k-textbox", disabled = "disabled", style = "background-color:lightblue" })
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <div class="col-xs-4">
                        <label class="control-label pull-right">Tech Lead:</label>
                    </div>
                    <div class="col-xs-8">
                        @(Html.Kendo().DropDownList()
                            .Name("TechLeadID")
                            .BindTo(new SelectList(ViewBag.UserList, "UserID", "FullName"))
                            .OptionLabel("Select")
                            .Value(Model.TechLeadID.ToString())
                        )
                    </div>
                </div>
            </div>
            <div class="form-horizontal row">
                <div class="form-group col-sm-4">
                    <div class="col-xs-4">
                        <label class="control-label pull-right">Originator:</label>
                    </div>
                    <div class="col-xs-8">
                        @(Html.Kendo().DropDownList()
                            .Name("OriginatorID")
                            .BindTo(new SelectList(ViewBag.UserList, "UserID", "FullName"))
                            .Value(Model.OriginatorID.ToString())
                            .HtmlAttributes(new { disabled = "disabled" })
                        )
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <div class="col-xs-4">
                        <label class="control-label pull-right">Requestor:</label>
                    </div>
                    <div class="col-xs-8">
                        @(Html.Kendo().DropDownList()
                            .Name("RequestorID")
                            .BindTo(new SelectList(ViewBag.UserList, "UserID", "FullName"))
                            .OptionLabel("Select")
                            .Value(Model.RequestorID.ToString())
                        )
                    </div>
                </div>
            </div>
            <div class="form-horizontal row">
                <div class="form-group col-sm-4">
                    <div class="col-xs-4">
                        <label class="control-label pull-right">Status:</label>
                    </div>
                    <div class="col-xs-8">
                        @Html.TextBoxFor(model => model.Status, new { id = "txtStatus", @class = "k-textbox", Readonly = "Readonly", style = "background-color:lightblue" })                    
                    </div>
                </div>
           </div>
        </div>
    </div>

    <div class="panel panel-default" style="font-size: 10px">
        <div class="panel-body bg-warning">
            <div class="form-group">
                <label class="control-label">Attached Documents:</label>
                <div>
                    @(Html.Kendo().Upload()
                        .Name("files")
                        .Async(a => a
                        .Save("AttachSave", "PartsRequest", new { PRNumber = Model.PRNumber })
                            .AutoUpload(true)
                        )
                        .ShowFileList(false)
                        .Events(events => events
                            .Success("OnFileUploadSuccess")
                            .Upload("CheckFileType")
                        )
                    )

                    @(Html.Kendo().Grid<Fab2ApprovalSystem.Models.PartsRequestAttachmentList>()
                        .Name("Attachments")
                        .Columns(columns =>
                        {
                            columns.Bound(a => a.AttachmentID).Visible(false);
                            columns.Bound(a => a.PRNumber).Visible(false);
                            columns.Bound(a => a.FileName).Template(@<text> @Html.ActionLink(@item.FileName.ToString(), null)</text>);
                            columns.Bound(a => a.FullName);
                            columns.Bound(a => a.UploadDate).Format("{0:MM/dd/yy hh:mm:ss}");
                            columns.Command(command => command.Custom("View").Click("DownloadAttachment"));
                            columns.Command(command => command.Custom("Delete").Click("DeleteAttachment"));
                        })
                        .Sortable()
                        .Scrollable()
                        .HtmlAttributes(new { style = "height:100px; width:100%; font-size: 10px" })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(false)
                            .Events(events => events.Error("ErrorHandler"))
                            .Model(model =>
                            {
                                model.Id(p => p.AttachmentID);
                            })
                            .PageSize(50)
                            .Read(read => read.Action("Attachment_Read", "PartsRequest", new { PRNumber = Model.PRNumber }))
                            )
                    )
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default" style="font-size: 10px">
        <div class="panel-info" style="font-size: 11px">
            <div class="panel-heading">
                <h5 style="font-weight:600">Description</h5>
            </div>
        </div>
        <div class="panel-body bg-warning">
            <div class="form-horizontal col-sm-12">
                @Html.TextAreaFor(model => model.Description, 10, 60, new {
                    id = "txtDescription",
                    @class = "form-control",
                    style = "font-size: 11px;width: 100%;" })
            </div>
        </div>
    </div>

    @Html.Partial("_ApproversListPartial")

}

@Html.Partial("_ApprovalLogPartial")

<script type="text/javascript">

    $("#PRList").on('click', function () {
        var url = '@Url.Action("PartsRequestList", "Home")';
        window.location = url;
    });

    $("#SavePR").on('click', function (e) {
        SaveData(false);
    });

    $("#SubmitPR").on('click', function (e) {
        SaveData(true);
    });

    function GetPRNumber() {
        return $('#txtPRNumber').val().substr(2);
    }

    function ReloadUI() {
        var url = '@Url.Action("Edit", "PartsRequest", new { issueID = "__id__" })';
        url = url.replace('amp;', '');
        window.location.href = url.replace('__id__', GetPRNumber());
    }

    function DownloadAttachment(e) {

        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var fileName = dataItem.FileName;
        var attachmentID = dataItem.AttachmentID;

        window.location = '/PartsRequest/DownloadFile?attachmentID=' + attachmentID + '&prNumber=' + "@Model.PRNumber";

    }

    function DeleteAttachment(e) {

        e.preventDefault();

        if (confirm("Are you sure you want to delete this attachment?")) {

            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var fileName = dataItem.FileName;
            var attachmentID = dataItem.AttachmentID;

            $.ajax({
                url: "/PartsRequest/DeleteAttachment",
                type: "POST",
                datatype: "json",
                data: {
                    attachmentID: attachmentID,
                    fileName: fileName,
                    prNumber: GetPRNumber(),
                },
                success: function (data) {
                    var grid = $("#Attachments").data("kendoGrid");
                    grid.dataSource.read();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    DisplayAPIError("Delete Attachment", xhr);
                }
            });
        }

    }

    function CheckFileType(e) {
        var files = e.files;
        $.each(files, function () {

            if (!this.extension.toLowerCase().match(/^(.doc|.docx|.ppt|.pptx|.xls|.xlsx|.xlsm|.pdf|.gif|.jpeg|.jpg|.bmp|.png|.txt)$/)) {
                alert("Only Word/PowerPoint/Excel/PDF/Image/Text files can be uploaded!")
                e.preventDefault();
            }

        });
    }

    function OnFileUploadSuccess(e) {
        var grid = $("#Attachments").data("kendoGrid");
        grid.dataSource.read();
    }

    function ErrorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function SaveData(submitAfterSave) {

        $.ajax({
            url: '/PartsRequest/Edit',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(
                {
                    PRNumber: GetPRNumber(),
                    Title: $("#txtTitle").val(),
                    RequestorID: $("#RequestorID").data("kendoDropDownList").value(),
                    TechLeadID: $("#TechLeadID").data("kendoDropDownList").value(),
                    Description: $("#txtDescription").val(),
                }),
            success: function (result) {
                if (submitAfterSave == true) {
                    Submit();
                } else {
                    alert("Data Saved");
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                DisplayAPIError("Save", xhr);                
            }
        });

    }

    function Submit() {

        $.ajax({
            url: "/PartsRequest/Submit",
            type: "POST",
            datatype: "json",
            data: {
                prNumber: GetPRNumber(),
            },
            success: function (data) {
                alert('Request submitted');
                ReloadUI();                
            },
            error: function (xhr, ajaxOptions, thrownError) {
                DisplayAPIError("Submit", xhr);
            }
        });

    }
    
</script>