Mango.Nop.Plugins/Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Order/FileUploadGridComponent.cshtml

141 lines
6.5 KiB
Plaintext

@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
@using DevExtreme.AspNet.Mvc
@Html.AntiForgeryToken()
@{
var contextId = Model.DataContext["contextId"];
var fileManagerId = $"fileManager_{contextId}";
var beforeAjaxSendFunctionName = $"beforeAjaxSend_{contextId}";
}
<div class="row">
<div class="col-6">
<form method="post" enctype="multipart/form-data" asp-controller="ManagementPage" asp-action="UploadFile">
@(Html.DevExtreme().FileUploader()
.ID("shippingDocumentUploader-" + contextId)
.Name("files")
.Multiple(true)
.Accept("application/pdf")
.UploadMode(FileUploadMode.UseForm)
)
<input type="hidden" name="ShippingDocumentId" value="@contextId" />
<input type="hidden" name="PartnerId" value="hello" />
@(Html.DevExtreme().Button()
.Text("Upload Files")
.Type(ButtonType.Success)
.UseSubmitBehavior(true)
)
</form>
<button type="button" class="btn btn-primary mt-2" onclick="processShippingDocument_@(contextId)()">
<i class="fas fa-cog"></i> Process Shipping Document
</button>
<div class="content" id="selected-files">
<div>
<h4>Selected Files</h4>
</div>
</div>
</div>
<div class="col-6">
@(Html.DevExtreme().FileManager()
.ID(fileManagerId)
.FileSystemProvider(provider => provider.Remote()
.Url(Url.RouteUrl("FileManagementFileSystemApi"))
.BeforeAjaxSend(@<text>
function(arg) {
arg.headers.TestHeader = @Model.DataContext["contextId"];
}
</text>))
.Permissions(permissions => {
permissions.Download(true);
permissions.Upload(true);
})
.AllowedFileExtensions(new[] { ".pdf", ".jpg", ".jpeg" })
)
</div>
</div>
<script>
// Process Shipping Document function
function processShippingDocument_@(contextId)() {
var shippingDocumentId = @contextId;
$.ajax({
url: '@Url.Action("ProcessShippingDocument", "ManagementPage")',
type: 'POST',
data: {
shippingDocumentId: shippingDocumentId,
__RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
},
success: function(response) {
DevExpress.ui.notify("Shipping document processed successfully!", "success", 2000);
// Refresh the file manager
var fileManager = $("#@fileManagerId").dxFileManager("instance");
if (fileManager) {
fileManager.refresh();
}
},
error: function(xhr, status, error) {
DevExpress.ui.notify("Error processing shipping document: " + error, "error", 3000);
}
});
}
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>