Mango.Nop.Plugins/Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Shipping/List.cshtml

273 lines
10 KiB
Plaintext

@using Newtonsoft.Json
@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.ShippingListModel
@{
// Layout = "_AdminLayout";
ViewBag.PageTitle = "Edit Shipping";
NopHtml.SetActiveMenuItemSystemName("Shippings.Edit");
}
<div class="content-header clearfix">
<h1 class="float-left">
@T("Admin.Shipments")
</h1>
<div class="float-right">
<div class="btn-group">
<button type="button" class="btn btn-success">
<i class="fas fa-download"></i>
@T("Admin.Common.Export")
</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">&nbsp;</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-item">
<button asp-action="ExportXml" type="submit" name="exportxml-all">
<i class="far fa-file-code"></i>
@T("Admin.Common.ExportToXml.All")
</button>
</li>
<li class="dropdown-item">
<button type="button" id="exportxml-selected">
<i class="far fa-file-code"></i>
@T("Admin.Common.ExportToXml.Selected")
</button>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item">
<button asp-action="ExportExcel" type="submit" name="exportexcel-all">
<i class="far fa-file-excel"></i>
@T("Admin.Common.ExportToExcel.All")
</button>
</li>
<li class="dropdown-item">
<button type="button" id="exportexcel-selected">
<i class="far fa-file-excel"></i>
@T("Admin.Common.ExportToExcel.Selected")
</button>
</li>
</ul>
</div>
<button type="button" name="importexcel" class="btn bg-olive" data-toggle="modal" data-target="#importexcel-window">
<i class="fas fa-upload"></i>
@T("Admin.Common.Import")
</button>
<div class="btn-group">
<button type="button" class="btn btn-info">
<i class="far fa-file-pdf"></i>
@T("Admin.Orders.PdfInvoices")
</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">&nbsp;</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-item">
<button asp-action="PdfInvoice" type="submit" name="pdf-invoice-all">
@T("Admin.Orders.PdfInvoices.All")
</button>
</li>
<li class="dropdown-item">
<button type="button" id="pdf-invoice-selected">
@T("Admin.Orders.PdfInvoices.Selected")
</button>
</li>
</ul>
</div>
@await Component.InvokeAsync(typeof(AdminWidgetViewComponent), new { widgetZone = AdminWidgetZones.OrderListButtons, additionalData = Model })
</div>
</div>
<section class="content">
<div class="container-fluid">
@{
var list = Model.ShippingList;
}
@(Html.DevExtreme().DataGrid()
.ID("gridContainer")
.ShowBorders(true)
.DataSource(list)
.KeyExpr("Id")
.SearchPanel(sp => sp.Visible(true))
.HeaderFilter(hf => hf.Visible(true))
.Paging(p => p.PageSize(15))
.Pager(p => p.Visible(true))
.OnRowExpanded("onRowExpanded")
.Editing(editing => {
editing.Mode(GridEditMode.Cell);
editing.AllowUpdating(true);
editing.AllowAdding(true);
editing.AllowDeleting(true);
})
.Columns(c => {
c.Add().DataField("Id").AllowEditing(false);
c.Add().DataField("ShippingDate");
c.Add().DataField("LicencePlate");
c.Add().DataField("IsAllMeasured");
})
.Toolbar(toolbar => {
toolbar.Items(items => {
items.Add()
.Name("addRowButton")
.ShowText(ToolbarItemShowTextMode.Always);
items.Add()
.Location(ToolbarItemLocation.After)
.Widget(w =>
w.Button()
.Text("Delete Selected Records")
.Icon("trash")
.Disabled(true)
.OnClick("onDeleteBtnClick")
);
});
})
.MasterDetail(md => {
md.Enabled(true);
md.Template(@<text>
<div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
div id="fileuploader">
<div class="widget-container">
@(Html.DevExtreme().FileUploader()
.ID(new JS("'shippingDocumentUploader-' + data.Id"))
.Name("myFile")
.Multiple(true)
.Accept("application/pdf")
.UploadMode(FileUploadMode.Instantly)
.UploadUrl(Url.Action("UploadFile", "Shipping"))
.OnValueChanged("fileUploader_valueChanged")
.OnUploaded("fileUploader_fileUploaded")
)
<div class="content" id="selected-files">
<div>
<h4>Selected Files</h4>
</div>
</div>
</div>
<div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
@(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
.ColumnAutoWidth(true)
.ShowBorders(true)
.ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
.Columns(columns => {
columns.AddFor(m => m.Id).AllowEditing(false);
columns.AddFor(m => m.Country);
columns.AddFor(m => m.Created);
columns.AddFor(m => m.PartnerId);
columns.Add()
.Caption("Completed")
.DataType(GridColumnDataType.Boolean)
.CalculateCellValue("calculateCellValue");
})
.DataSource(ds => ds.Mvc()
.Controller("Shipping")
.LoadAction("GetShippingDocumentsByShippingId")
.LoadParams(new { shippingId = new JS("data.Id") })
.Key("Id")
)
)
</text>);
})
)
</div>
</section>
<script>
function calculateCellValue(rowData) {
return rowData.Status === "Completed";
}
</script>
<script>
function onDeleteBtnClick(){
let dataGrid = $("#gridContainer").dxDataGrid("instance");
$.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
return dataGrid.getDataSource().store().remove(data.ID);
})).done(function() {
dataGrid.refresh();
});
}
function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
if(target === "search" && typeof(filterValue) === "string") {
return [this.dataField, "contains", filterValue]
}
return function(data) {
return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
}
}
function onSelectionChanged(data) {
let dataGrid = $("#gridContainer").dxDataGrid("instance");
dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
}
function onRowExpanded(e) {
e.component.dxDataGrid("getDataSource").reload();
}
</script>
<script>
function fileUploader_valueChanged(e) {
var files = e.value;
if(files.length > 0) {
$("#selected-files .selected-item").remove();
$.each(files, function(i, file) {
var $selectedItem = $("<div />").addClass("selected-item");
$selectedItem.append(
$("<span />").html("Name: " + file.name + "<br/>"),
$("<span />").html("Size " + file.size + " bytes" + "<br/>"),
$("<span />").html("Type " + file.type + "<br/>"),
$("<span />").html("Last Modified Date: " + file.lastModifiedDate)
);
$selectedItem.appendTo($("#selected-files"));
});
$("#selected-files").show();
}
else
$("#selected-files").hide();
}
function getGridInstance() {
return $("#shippingDocumentUploader").dxFileUploader("instance");
}
function fileUploader_fileUploaded(e) {
const fileUploaderId = e.component.element().attr('id');
// 2. Extract the number from the ID
const match = fileUploaderId.match(/\d+$/);
if (match) {
const uniqueId = match[0];
const gridId = `shippingDocumentGridContainer-${uniqueId}`;
// 3. Get the DevExtreme grid instance and refresh it
const grid = $(`#${gridId}`).dxDataGrid('instance');
if (grid) {
grid.dxDataGrid("getDataSource").reload();
// Optional: Show a success notification
DevExpress.ui.notify("Documents updated successfully!", "success", 2000);
} else {
console.error(`DevExtreme grid with ID "${gridId}" not found.`);
}
} else {
console.error("Could not find a unique ID number from the file uploader.");
}
// shippingDocumentGridContainer
//$("#shippingDocumentGridContainer" + e.component.ID).dxDataGrid("getDataSource").reload();
}
</script>